search tags when on click

changelog.md

@@ -1,3 +1,7 @@
+# v0.1.3
+- backlink to other notes in notes
+- search tags on click
+
 # v0.1.2
 - fix more typos
 - add to faq

lib/memex_web/components/contexts_table_component.ex

@@ -105,7 +105,17 @@ defmodule MemexWeb.Components.ContextsTableComponent do
   end
 
   defp get_value_for_key(:tags, %{tags: tags}, _additional_data) do
-    tags |> Enum.join(", ")
+    assigns = %{tags: tags}
+
+    ~H"""
+    <div class="flex flex-wrap justify-center space-x-1">
+      <%= for tag <- @tags do %>
+        <.link patch={Routes.context_index_path(Endpoint, :search, tag)} class="link">
+          <%= tag %>
+        </.link>
+      <% end %>
+    </div>
+    """
   end
 
   defp get_value_for_key(:actions, context, %{actions: actions}) do

lib/memex_web/components/note_content.ex

@@ -0,0 +1,44 @@
+defmodule MemexWeb.Components.NoteContent do
+  @moduledoc """
+  Display the content for a note
+  """
+  use MemexWeb, :component
+  alias Memex.Notes.Note
+  alias Phoenix.HTML
+
+  attr :note, Note, required: true
+
+  def note_content(assigns) do
+    ~H"""
+    <div
+      id={"show-note-content-#{@note.id}"}
+      class="input input-primary h-128 min-h-128 inline-block"
+      phx-hook="MaintainAttrs"
+      phx-update="ignore"
+      readonly
+      phx-no-format
+    ><p class="inline"><%= add_links_to_content(@note.content) %></p></div>
+    """
+  end
+
+  defp add_links_to_content(content) do
+    Regex.replace(
+      ~r/\[\[([\p{L}\p{N}\-]+)\]\]/,
+      content,
+      fn _whole_match, slug ->
+        link =
+          HTML.Link.link(
+            "[[#{slug}]]",
+            to: Routes.note_show_path(Endpoint, :show, slug),
+            class: "link inline",
+            data: [qa: "note-link-#{slug}"]
+          )
+          |> HTML.Safe.to_iodata()
+          |> IO.iodata_to_binary()
+
+        "</p>#{link}<p class=\"inline\">"
+      end
+    )
+    |> HTML.raw()
+  end
+end

lib/memex_web/components/notes_table_component.ex

@@ -105,7 +105,17 @@ defmodule MemexWeb.Components.NotesTableComponent do
   end
 
   defp get_value_for_key(:tags, %{tags: tags}, _additional_data) do
-    tags |> Enum.join(", ")
+    assigns = %{tags: tags}
+
+    ~H"""
+    <div class="flex flex-wrap justify-center space-x-1">
+      <%= for tag <- @tags do %>
+        <.link patch={Routes.note_index_path(Endpoint, :search, tag)} class="link">
+          <%= tag %>
+        </.link>
+      <% end %>
+    </div>
+    """
   end
 
   defp get_value_for_key(:actions, note, %{actions: actions}) do

lib/memex_web/components/pipelines_table_component.ex

@@ -118,7 +118,17 @@ defmodule MemexWeb.Components.PipelinesTableComponent do
   end
 
   defp get_value_for_key(:tags, %{tags: tags}, _additional_data) do
-    tags |> Enum.join(", ")
+    assigns = %{tags: tags}
+
+    ~H"""
+    <div class="flex flex-wrap justify-center space-x-1">
+      <%= for tag <- @tags do %>
+        <.link patch={Routes.pipeline_index_path(Endpoint, :search, tag)} class="link">
+          <%= tag %>
+        </.link>
+      <% end %>
+    </div>
+    """
   end
 
   defp get_value_for_key(:actions, pipeline, %{actions: actions}) do

lib/memex_web/live/context_live/show.html.heex

@@ -3,7 +3,13 @@
     <%= @context.slug %>
   </h1>
 
-  <p><%= if @context.tags, do: @context.tags |> Enum.join(", ") %></p>
+  <div class="flex flex-wrap space-x-1">
+    <%= for tag <- @context.tags do %>
+      <.link navigate={Routes.context_index_path(Endpoint, :search, tag)} class="link">
+        <%= tag %>
+      </.link>
+    <% end %>
+  </div>
 
   <.context_content context={@context} />
 

lib/memex_web/live/note_live/show.ex

@@ -1,6 +1,6 @@
 defmodule MemexWeb.NoteLive.Show do
   use MemexWeb, :live_view
-
+  import MemexWeb.Components.NoteContent
   alias Memex.{Accounts.User, Notes, Notes.Note}
 
   @impl true

lib/memex_web/live/note_live/show.html.heex

@@ -3,16 +3,15 @@
     <%= @note.slug %>
   </h1>
 
-  <p><%= if @note.tags, do: @note.tags |> Enum.join(", ") %></p>
+  <div class="flex flex-wrap space-x-1">
+    <%= for tag <- @note.tags do %>
+      <.link navigate={Routes.note_index_path(Endpoint, :search, tag)} class="link">
+        <%= tag %>
+      </.link>
+    <% end %>
+  </div>
 
-  <textarea
+  <.note_content note={@note} />
-    id="show-note-content"
-    class="input input-primary h-128 min-h-128"
-    phx-hook="MaintainAttrs"
-    phx-update="ignore"
-    readonly
-    phx-no-format
-  ><%= @note.content %></textarea>
 
   <p class="self-end">
     <%= gettext("Visibility: %{visibility}", visibility: @note.visibility) %>

lib/memex_web/live/pipeline_live/show.html.heex

@@ -3,7 +3,13 @@
     <%= @pipeline.slug %>
   </h1>
 
-  <p><%= if @pipeline.tags, do: @pipeline.tags |> Enum.join(", ") %></p>
+  <div class="flex flex-wrap space-x-1">
+    <%= for tag <- @pipeline.tags do %>
+      <.link navigate={Routes.pipeline_index_path(Endpoint, :search, tag)} class="link">
+        <%= tag %>
+      </.link>
+    <% end %>
+  </div>
 
   <%= if @pipeline.description do %>
     <textarea

lib/memex_web/templates/error/error.html.heex

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
-      <%= dgettext("errors", "Error") %>| memEx
+      <%= dgettext("errors", "Error") %> | memEx
     </title>
     <link rel="stylesheet" href="/css/app.css" />
     <script defer type="text/javascript" src="/js/app.js">

mix.exs

@@ -4,7 +4,7 @@ defmodule Memex.MixProject do
   def project do
     [
       app: :memex,
-      version: "0.1.2",
+      version: "0.1.3",
       elixir: "~> 1.14",
       elixirc_paths: elixirc_paths(Mix.env()),
       compilers: Mix.compilers(),

priv/gettext/actions.pot

@@ -56,12 +56,12 @@ msgid "create invite"
 msgstr ""
 
 #: lib/memex_web/live/context_live/index.html.heex:49
-#: lib/memex_web/live/context_live/show.html.heex:34
+#: lib/memex_web/live/context_live/show.html.heex:40
 #: lib/memex_web/live/note_live/index.html.heex:49
-#: lib/memex_web/live/note_live/show.html.heex:38
+#: lib/memex_web/live/note_live/show.html.heex:37
 #: lib/memex_web/live/pipeline_live/index.html.heex:49
-#: lib/memex_web/live/pipeline_live/show.html.heex:43
+#: lib/memex_web/live/pipeline_live/show.html.heex:49
-#: lib/memex_web/live/pipeline_live/show.html.heex:113
+#: lib/memex_web/live/pipeline_live/show.html.heex:119
 #, elixir-autogen, elixir-format
 msgid "delete"
 msgstr ""
@@ -72,12 +72,12 @@ msgid "delete user"
 msgstr ""
 
 #: lib/memex_web/live/context_live/index.html.heex:38
-#: lib/memex_web/live/context_live/show.html.heex:23
+#: lib/memex_web/live/context_live/show.html.heex:29
 #: lib/memex_web/live/note_live/index.html.heex:38
-#: lib/memex_web/live/note_live/show.html.heex:27
+#: lib/memex_web/live/note_live/show.html.heex:26
 #: lib/memex_web/live/pipeline_live/index.html.heex:38
-#: lib/memex_web/live/pipeline_live/show.html.heex:32
+#: lib/memex_web/live/pipeline_live/show.html.heex:38
-#: lib/memex_web/live/pipeline_live/show.html.heex:102
+#: lib/memex_web/live/pipeline_live/show.html.heex:108
 #, elixir-autogen, elixir-format
 msgid "edit"
 msgstr ""
@@ -132,14 +132,14 @@ msgstr ""
 msgid "save"
 msgstr ""
 
-#: lib/memex_web/live/context_live/show.html.heex:16
+#: lib/memex_web/live/context_live/show.html.heex:22
-#: lib/memex_web/live/note_live/show.html.heex:23
+#: lib/memex_web/live/note_live/show.html.heex:22
-#: lib/memex_web/live/pipeline_live/show.html.heex:25
+#: lib/memex_web/live/pipeline_live/show.html.heex:31
 #, elixir-autogen, elixir-format
 msgid "back"
 msgstr ""
 
-#: lib/memex_web/live/pipeline_live/show.html.heex:129
+#: lib/memex_web/live/pipeline_live/show.html.heex:135
 #, elixir-autogen, elixir-format
 msgid "add step"
 msgstr ""

priv/gettext/de/LC_MESSAGES/actions.po

@@ -57,12 +57,12 @@ msgid "create invite"
 msgstr ""
 
 #: lib/memex_web/live/context_live/index.html.heex:49
-#: lib/memex_web/live/context_live/show.html.heex:34
+#: lib/memex_web/live/context_live/show.html.heex:40
 #: lib/memex_web/live/note_live/index.html.heex:49
-#: lib/memex_web/live/note_live/show.html.heex:38
+#: lib/memex_web/live/note_live/show.html.heex:37
 #: lib/memex_web/live/pipeline_live/index.html.heex:49
-#: lib/memex_web/live/pipeline_live/show.html.heex:43
+#: lib/memex_web/live/pipeline_live/show.html.heex:49
-#: lib/memex_web/live/pipeline_live/show.html.heex:113
+#: lib/memex_web/live/pipeline_live/show.html.heex:119
 #, elixir-autogen, elixir-format
 msgid "delete"
 msgstr ""
@@ -73,12 +73,12 @@ msgid "delete user"
 msgstr ""
 
 #: lib/memex_web/live/context_live/index.html.heex:38
-#: lib/memex_web/live/context_live/show.html.heex:23
+#: lib/memex_web/live/context_live/show.html.heex:29
 #: lib/memex_web/live/note_live/index.html.heex:38
-#: lib/memex_web/live/note_live/show.html.heex:27
+#: lib/memex_web/live/note_live/show.html.heex:26
 #: lib/memex_web/live/pipeline_live/index.html.heex:38
-#: lib/memex_web/live/pipeline_live/show.html.heex:32
+#: lib/memex_web/live/pipeline_live/show.html.heex:38
-#: lib/memex_web/live/pipeline_live/show.html.heex:102
+#: lib/memex_web/live/pipeline_live/show.html.heex:108
 #, elixir-autogen, elixir-format
 msgid "edit"
 msgstr ""
@@ -133,14 +133,14 @@ msgstr ""
 msgid "save"
 msgstr ""
 
-#: lib/memex_web/live/context_live/show.html.heex:16
+#: lib/memex_web/live/context_live/show.html.heex:22
-#: lib/memex_web/live/note_live/show.html.heex:23
+#: lib/memex_web/live/note_live/show.html.heex:22
-#: lib/memex_web/live/pipeline_live/show.html.heex:25
+#: lib/memex_web/live/pipeline_live/show.html.heex:31
 #, elixir-autogen, elixir-format
 msgid "back"
 msgstr ""
 
-#: lib/memex_web/live/pipeline_live/show.html.heex:129
+#: lib/memex_web/live/pipeline_live/show.html.heex:135
 #, elixir-autogen, elixir-format
 msgid "add step"
 msgstr ""

priv/gettext/de/LC_MESSAGES/default.po

@@ -81,9 +81,9 @@ msgstr ""
 msgid "Uses left"
 msgstr ""
 
-#: lib/memex_web/live/context_live/show.html.heex:11
+#: lib/memex_web/live/context_live/show.html.heex:17
-#: lib/memex_web/live/note_live/show.html.heex:18
+#: lib/memex_web/live/note_live/show.html.heex:17
-#: lib/memex_web/live/pipeline_live/show.html.heex:20
+#: lib/memex_web/live/pipeline_live/show.html.heex:26
 #, elixir-autogen, elixir-format
 msgid "Visibility: %{visibility}"
 msgstr ""
@@ -501,7 +501,7 @@ msgstr ""
 msgid "what is this?"
 msgstr ""
 
-#: lib/memex_web/live/pipeline_live/show.html.heex:62
+#: lib/memex_web/live/pipeline_live/show.html.heex:68
 #, elixir-autogen, elixir-format
 msgid "%{position}. %{title}"
 msgstr ""
@@ -526,12 +526,12 @@ msgstr ""
 msgid "add step to %{slug}"
 msgstr ""
 
-#: lib/memex_web/live/pipeline_live/show.html.heex:56
+#: lib/memex_web/live/pipeline_live/show.html.heex:62
 #, elixir-autogen, elixir-format
 msgid "no steps"
 msgstr ""
 
-#: lib/memex_web/live/pipeline_live/show.html.heex:51
+#: lib/memex_web/live/pipeline_live/show.html.heex:57
 #, elixir-autogen, elixir-format
 msgid "steps:"
 msgstr ""

priv/gettext/de/LC_MESSAGES/prompts.po

@@ -138,12 +138,12 @@ msgid "are you sure you want to make %{invite_name} unlimited?"
 msgstr ""
 
 #: lib/memex_web/live/context_live/index.html.heex:46
-#: lib/memex_web/live/context_live/show.html.heex:31
+#: lib/memex_web/live/context_live/show.html.heex:37
 #: lib/memex_web/live/note_live/index.html.heex:46
-#: lib/memex_web/live/note_live/show.html.heex:35
+#: lib/memex_web/live/note_live/show.html.heex:34
 #: lib/memex_web/live/pipeline_live/index.html.heex:46
-#: lib/memex_web/live/pipeline_live/show.html.heex:40
+#: lib/memex_web/live/pipeline_live/show.html.heex:46
-#: lib/memex_web/live/pipeline_live/show.html.heex:110
+#: lib/memex_web/live/pipeline_live/show.html.heex:116
 #, elixir-autogen, elixir-format
 msgid "are you sure?"
 msgstr ""

priv/gettext/default.pot

@@ -70,9 +70,9 @@ msgstr ""
 msgid "Uses left"
 msgstr ""
 
-#: lib/memex_web/live/context_live/show.html.heex:11
+#: lib/memex_web/live/context_live/show.html.heex:17
-#: lib/memex_web/live/note_live/show.html.heex:18
+#: lib/memex_web/live/note_live/show.html.heex:17
-#: lib/memex_web/live/pipeline_live/show.html.heex:20
+#: lib/memex_web/live/pipeline_live/show.html.heex:26
 #, elixir-autogen, elixir-format
 msgid "Visibility: %{visibility}"
 msgstr ""
@@ -490,7 +490,7 @@ msgstr ""
 msgid "what is this?"
 msgstr ""
 
-#: lib/memex_web/live/pipeline_live/show.html.heex:62
+#: lib/memex_web/live/pipeline_live/show.html.heex:68
 #, elixir-autogen, elixir-format
 msgid "%{position}. %{title}"
 msgstr ""
@@ -515,12 +515,12 @@ msgstr ""
 msgid "add step to %{slug}"
 msgstr ""
 
-#: lib/memex_web/live/pipeline_live/show.html.heex:56
+#: lib/memex_web/live/pipeline_live/show.html.heex:62
 #, elixir-autogen, elixir-format
 msgid "no steps"
 msgstr ""
 
-#: lib/memex_web/live/pipeline_live/show.html.heex:51
+#: lib/memex_web/live/pipeline_live/show.html.heex:57
 #, elixir-autogen, elixir-format
 msgid "steps:"
 msgstr ""

priv/gettext/prompts.pot

@@ -137,12 +137,12 @@ msgid "are you sure you want to make %{invite_name} unlimited?"
 msgstr ""
 
 #: lib/memex_web/live/context_live/index.html.heex:46
-#: lib/memex_web/live/context_live/show.html.heex:31
+#: lib/memex_web/live/context_live/show.html.heex:37
 #: lib/memex_web/live/note_live/index.html.heex:46
-#: lib/memex_web/live/note_live/show.html.heex:35
+#: lib/memex_web/live/note_live/show.html.heex:34
 #: lib/memex_web/live/pipeline_live/index.html.heex:46
-#: lib/memex_web/live/pipeline_live/show.html.heex:40
+#: lib/memex_web/live/pipeline_live/show.html.heex:46
-#: lib/memex_web/live/pipeline_live/show.html.heex:110
+#: lib/memex_web/live/pipeline_live/show.html.heex:116
 #, elixir-autogen, elixir-format
 msgid "are you sure?"
 msgstr ""

test/memex_web/live/context_live_test.exs

@@ -37,6 +37,14 @@ defmodule MemexWeb.ContextLiveTest do
       assert html =~ context.slug
     end
 
+    test "searches by tag", %{conn: conn} do
+      {:ok, index_live, html} = live(conn, Routes.context_index_path(conn, :index))
+
+      assert html =~ "example-tag"
+      assert index_live |> element("a", "example-tag") |> render_click()
+      assert_patch(index_live, Routes.context_index_path(conn, :search, "example-tag"))
+    end
+
     test "saves new context", %{conn: conn} do
       {:ok, index_live, _html} = live(conn, Routes.context_index_path(conn, :index))
 
@@ -146,6 +154,14 @@ defmodule MemexWeb.ContextLiveTest do
       ]
     end
 
+    test "searches by tag", %{conn: conn, context: context} do
+      {:ok, show_live, html} = live(conn, Routes.context_show_path(conn, :show, context.slug))
+
+      assert html =~ "example-tag"
+      assert show_live |> element("a", "example-tag") |> render_click()
+      assert_redirect(show_live, Routes.context_index_path(conn, :search, "example-tag"))
+    end
+
     test "displays context", %{conn: conn, context: context, note: %{slug: note_slug}} do
       {:ok, show_live, html} = live(conn, Routes.context_show_path(conn, :show, context.slug))
 

test/memex_web/live/note_live_test.exs

@@ -3,6 +3,7 @@ defmodule MemexWeb.NoteLiveTest do
 
   import Phoenix.LiveViewTest
   import Memex.NotesFixtures
+  alias MemexWeb.Endpoint
 
   @create_attrs %{
     "content" => "some content",
@@ -37,6 +38,14 @@ defmodule MemexWeb.NoteLiveTest do
       assert html =~ note.slug
     end
 
+    test "searches by tag", %{conn: conn} do
+      {:ok, index_live, html} = live(conn, Routes.note_index_path(conn, :index))
+
+      assert html =~ "example-tag"
+      assert index_live |> element("a", "example-tag") |> render_click()
+      assert_patch(index_live, Routes.note_index_path(conn, :search, "example-tag"))
+    end
+
     test "saves new note", %{conn: conn} do
       {:ok, index_live, _html} = live(conn, Routes.note_index_path(conn, :index))
 
@@ -132,4 +141,39 @@ defmodule MemexWeb.NoteLiveTest do
       refute has_element?(index_live, "#note-#{note.id}")
     end
   end
+
+  describe "show with note" do
+    setup [:register_and_log_in_user]
+
+    setup %{user: user} do
+      %{slug: note_slug} = note = note_fixture(user)
+
+      [
+        note: note,
+        backlinked_note:
+          note_fixture(%{content: "example with backlink to [[#{note_slug}]] note"}, user)
+      ]
+    end
+
+    test "searches by tag", %{conn: conn, note: note} do
+      {:ok, show_live, html} = live(conn, Routes.note_show_path(conn, :show, note.slug))
+
+      assert html =~ "example-tag"
+      assert show_live |> element("a", "example-tag") |> render_click()
+      assert_redirect(show_live, Routes.note_index_path(conn, :search, "example-tag"))
+    end
+
+    test "displays context", %{
+      conn: conn,
+      backlinked_note: %{slug: backlinked_note_slug},
+      note: %{slug: note_slug}
+    } do
+      {:ok, show_live, html} =
+        live(conn, Routes.note_show_path(conn, :show, backlinked_note_slug))
+
+      assert html =~ "context"
+      assert html =~ Routes.note_show_path(Endpoint, :show, note_slug)
+      assert has_element?(show_live, "[data-qa=\"note-link-#{note_slug}\"]")
+    end
+  end
 end

test/memex_web/live/pipeline_live_test.exs

@@ -48,6 +48,14 @@ defmodule MemexWeb.PipelineLiveTest do
       assert html =~ pipeline.description
     end
 
+    test "searches by tag", %{conn: conn} do
+      {:ok, index_live, html} = live(conn, Routes.pipeline_index_path(conn, :index))
+
+      assert html =~ "example-tag"
+      assert index_live |> element("a", "example-tag") |> render_click()
+      assert_patch(index_live, Routes.pipeline_index_path(conn, :search, "example-tag"))
+    end
+
     test "saves new pipeline", %{conn: conn} do
       {:ok, index_live, _html} = live(conn, Routes.pipeline_index_path(conn, :index))
 
@@ -175,6 +183,14 @@ defmodule MemexWeb.PipelineLiveTest do
       ]
     end
 
+    test "searches by tag", %{conn: conn, pipeline: pipeline} do
+      {:ok, show_live, html} = live(conn, Routes.pipeline_show_path(conn, :show, pipeline.slug))
+
+      assert html =~ "example-tag"
+      assert show_live |> element("a", "example-tag") |> render_click()
+      assert_redirect(show_live, Routes.pipeline_index_path(conn, :search, "example-tag"))
+    end
+
     test "updates a step", %{conn: conn, pipeline: pipeline, step: step} do
       {:ok, show_live, _html} = live(conn, Routes.pipeline_show_path(conn, :show, pipeline.slug))
 

test/support/fixtures/contexts_fixtures.ex

@@ -16,7 +16,7 @@ defmodule Memex.ContextsFixtures do
       attrs
       |> Enum.into(%{
         content: "some content",
-        tags: [],
+        tags: ["example-tag"],
         slug: random_slug(),
         visibility: :private
       })

test/support/fixtures/notes_fixtures.ex

@@ -16,7 +16,7 @@ defmodule Memex.NotesFixtures do
       attrs
       |> Enum.into(%{
         content: "some content",
-        tags: [],
+        tags: ["example-tag"],
         slug: random_slug(),
         visibility: :private
       })

test/support/fixtures/pipelines_fixtures.ex

@@ -16,7 +16,7 @@ defmodule Memex.PipelinesFixtures do
       attrs
       |> Enum.into(%{
         description: "some description",
-        tags: [],
+        tags: ["example-tag"],
         slug: random_slug(),
         visibility: :private
       })