implement text search functionality on notes

aayushmau5 · May 8, 2024 · 352606e · 352606e
1 parent ed78627
commit 352606e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git a/lib/accumulator_web/components/notes_components.ex b/lib/accumulator_web/components/notes_components.ex
@@ -82,4 +82,27 @@ defmodule AccumulatorWeb.NotesComponents do
     </div>
     """
   end
+
+  def note_input(assigns) do
+    ~H"""
+    <div phx-feedback-for={@name} class="w-full">
+      <label class="flex gap-2 items-center">
+        <%= @label %>
+        <input
+          type={@type}
+          name={@name}
+          id={@id || @name}
+          value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+          class={[
+            "block flex-1 text-white border-zinc-700 focus:border-zinc-600 rounded-md bg-transparent focus:outline-none",
+            @errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
+          ]}
+          style="box-shadow: none !important;"
+          {@rest}
+        />
+      </label>
+      <.error :for={msg <- @errors}><%= msg %></.error>
+    </div>
+    """
+  end
 end
diff --git a/lib/accumulator_web/live/notes_live/notes_live.ex b/lib/accumulator_web/live/notes_live/notes_live.ex
@@ -131,8 +131,24 @@ defmodule AccumulatorWeb.NotesLive do
   end
 
   def handle_event("search-submit", %{"search" => search} = _params, socket) do
-    # TODO: implement search functionality
-    IO.inspect(search, label: "Search")
+    search_term = String.trim(search)
+    search_term_length = String.length(search_term)
+
+    socket =
+      if search_term_length != 0 do
+        notes = Notes.search(search_term)
+
+        socket |> stream(:notes, notes, reset: true) |> push_event("new-note-scroll", %{})
+      else
+        {notes, pagination_date} =
+          Notes.get_notes_grouped_and_ordered_by_date(Date.utc_today())
+
+        socket
+        |> stream(:notes, notes, reset: true)
+        |> assign(pagination_date: pagination_date)
+        |> push_event("new-note-scroll", %{})
+      end
+
     {:noreply, socket}
   end
 

diff --git a/lib/accumulator_web/live/notes_live/notes_live.html.heex b/lib/accumulator_web/live/notes_live/notes_live.html.heex
@@ -1,11 +1,18 @@
 <div class="w-full font-note">
   <div class="mb-2">
-    <%!-- <.simple_form for={@search} phx-change="search-change" phx-submit="search-submit">
-      <.input field={@search[:search]} class="bg-transparent" />
-    </.simple_form> --%>
-    Search bar(TODO)
+    <.simple_form for={@search} phx-change="search-change" phx-submit="search-submit">
+      <div class="flex items-center gap-2">
+        <.note_input
+          label="Search"
+          field={@search[:search]}
+          class="bg-transparent bg-green-400"
+          id="search-input"
+        />
+      </div>
+    </.simple_form>
   </div>
-  <button phx-click="more-notes" class="text-sm opacity-60 text-right w-full">
+
+  <button phx-click="more-notes" class="block text-sm opacity-60 ml-auto">
     Load more
   </button>