feat: HomeLive.Index LiveView

lib/medical_transcription_web/live/home_live/index.ex

@@ -0,0 +1,66 @@
+defmodule MedicalTranscriptionWeb.HomeLive.Index do
+  use MedicalTranscriptionWeb, :live_view
+
+  @impl Phoenix.LiveView
+  def mount(_params, _session, socket) do
+    {:ok,
+     socket
+     |> assign(:uploaded_files, [])
+     |> assign_async(:audio_text, fn -> {:ok, %{audio_text: []}} end)
+     |> allow_upload(:audio, accept: ~w(.mp3), max_entries: 1)}
+  end
+
+  @impl Phoenix.LiveView
+  def render(assigns) do
+    ~H"""
+    <form id="audio-form" phx-submit="save" phx-change="validate">
+      <div class="flex flex-col space-y-4">
+        <h1>Upload Transcription Audio</h1>
+        <.live_file_input upload={@uploads.audio} />
+        <button name="submit-btn" class="rounded-full bg-slate-200 py-4 px-8 text-slate-800 w-48">
+          Upload Audio
+        </button>
+
+        <%= for entry <- @uploads.audio.entries do %>
+          <p>Submitted: <%= entry.client_name %></p>
+        <% end %>
+
+        <.async_result :let={text} assign={@audio_text}>
+          <:loading>Transcribing audio...</:loading>
+          <:failed :let={_reason}>Transcription failed</:failed>
+          <%= for entry <- text do %>
+            <p><%= entry %></p>
+          <% end %>
+        </.async_result>
+      </div>
+    </form>
+    """
+  end
+
+  @impl true
+  def handle_event("save", _params, socket) do
+    uploaded_files =
+      consume_uploaded_entries(socket, :audio, fn %{path: path}, _entry ->
+        dest = Path.join("priv/static/uploads", Path.basename(path))
+        File.cp!(path, dest)
+        {:ok, "audio.mp3"}
+      end)
+
+    # Task async -> Audio Tagger -> get transcribed audio
+
+    socket =
+      socket
+      |> assign_async(:audio_text, fn -> {:ok, %{audio_text: ["Hello", "Hi"]}} end)
+      |> update(:uploaded_files, &(&1 ++ uploaded_files))
+
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_event("validate", _params, socket) do
+    {:noreply, socket}
+  end
+
+  def error_to_string(:too_large), do: "Too large"
+  def error_to_string(:not_accepted), do: "You have selected an unacceptable file type"
+end

lib/medical_transcription_web/router.ex

@@ -17,7 +17,7 @@ defmodule MedicalTranscriptionWeb.Router do
   scope "/", MedicalTranscriptionWeb do
     pipe_through :browser
 
-    get "/", PageController, :home
+    live "/", HomeLive.Index
   end
 
   # Other scopes may use custom stacks.

test/medical_transcription_web/live/home_live_test.exs

@@ -0,0 +1,52 @@
+defmodule MedicalTranscriptionWeb.HomeLiveTest do
+  use MedicalTranscriptionWeb.ConnCase, async: true
+
+  import Phoenix.LiveViewTest
+
+  alias MedicalTranscriptionWeb.HomeLive.Index
+
+  describe "/" do
+    test "renders upload screen", %{conn: conn} do
+      conn = get(conn, "/")
+      assert html_response(conn, 200) =~ "<h1>Upload Transcription Audio</h1>"
+
+      {:ok, view, html} = live(conn)
+      assert html =~ "<h1>Upload Transcription Audio</h1>"
+
+      sample_file =
+        __DIR__
+        |> Path.join("../../../medasrdemo-Paul.mp3")
+        |> Path.expand()
+
+      audio =
+        file_input(view, "#audio-form", :audio, [
+          %{
+            last_modified: 1_594_171_879_000,
+            name: "sample.mp3",
+            content: File.read!(sample_file),
+            size: 992_980,
+            type: "audio/mp3"
+          }
+        ])
+
+      assert audio
+             |> render_upload("sample.mp3") =~ "Submitted: sample.mp3"
+
+      refute view
+             |> form("#audio-form")
+             |> render_submit() =~ "Submitted: sample.mp3"
+
+      # |> render_async() =~ "Hello"
+
+      # |> render_submit() =~ "Submitted: sample.mp3"
+
+      # assert render_upload(audio, "sample.mp3") |> dbg() =~ "100%"
+
+      # 1. Find file input
+      # 2. Upload file
+      # 3. Click submit
+      # 4. Assert we see text
+      # 5. Assert we see codes alongside text
+    end
+  end
+end