Move components into folder

lib/mihainator_web/live/components/file_input_component.ex

@@ -0,0 +1,34 @@
+defmodule MihainatorWeb.FileInputComponent do
+  @moduledoc false
+
+  use Phoenix.LiveComponent
+
+  @impl true
+  def mount(socket) do
+    {:ok,
+     socket
+     |> assign(:submit_disabled?, true)
+     |> allow_upload(:history, accept: ~w(.csv))}
+  end
+
+  @impl true
+  def handle_event("validate", _params, socket) do
+    {:noreply,
+     socket
+     |> assign(:submit_disabled?, false)}
+  end
+
+  @impl true
+  def handle_event("save", _params, socket) do
+    consume_uploaded_entries(socket, :history, fn %{path: path}, _entry ->
+      Task.async(fn -> Mihainator.Extractor.extract(path) end)
+
+      {:ok, nil}
+    end)
+
+    {:noreply, socket}
+  end
+
+  defp error_to_string(:too_large), do: "Too large"
+  defp error_to_string(:not_accepted), do: "You have selected an unacceptable file type"
+end

lib/mihainator_web/live/components/file_input_component.html.heex

@@ -0,0 +1,56 @@
+<div>
+  <p class="text-lg">Upload a Threema chat history file (.csv) and see who's more interactive!</p>
+
+  <form
+    id="upload-form"
+    phx-submit="save"
+    phx-change="validate"
+    phx-target={@myself}
+    class="flex flex-col space-y-4"
+  >
+    <div>
+      <label class="block mb-2 text-sm font-bold text-gray-900" for={@uploads.history.ref}>
+        CSV file
+      </label>
+
+      <.live_file_input
+        upload={@uploads.history}
+        class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+      />
+    </div>
+
+    <button
+      :if={@submit_disabled?}
+      disabled={@submit_disabled?}
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-1/2 place-self-end disabled:opacity-75"
+      type="submit"
+    >
+      Upload
+    </button>
+
+    <button
+      :if={not @submit_disabled?}
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-1/2 place-self-end"
+      type="submit"
+    >
+      Upload
+    </button>
+  </form>
+
+  <%= for entry <- @uploads.history.entries do %>
+    <article class="upload-entry">
+      <%!-- Phoenix.Component.upload_errors/2 returns a list of error atoms --%>
+      <%= for err <- upload_errors(@uploads.history, entry) do %>
+        <p class="alert alert-danger"><%= error_to_string(err) %></p>
+      <% end %>
+    </article>
+  <% end %>
+
+  <%!-- use phx-drop-target with the upload ref to enable file drag and drop --%>
+  <section phx-drop-target={@uploads.history.ref}>
+    <%!-- Phoenix.Component.upload_errors/1 returns a list of error atoms --%>
+    <%= for err <- upload_errors(@uploads.history) do %>
+      <p class="alert alert-danger"><%= error_to_string(err) %></p>
+    <% end %>
+  </section>
+</div>

lib/mihainator_web/live/components/result_component.ex

@@ -0,0 +1,17 @@
+defmodule MihainatorWeb.ResultComponent do
+  @moduledoc false
+
+  use Phoenix.LiveComponent
+
+  @impl true
+  def update(assigns, socket) do
+    socket = assign(socket, assigns)
+
+    {:ok, socket}
+  end
+
+  @impl true
+  def mount(socket) do
+    {:ok, socket}
+  end
+end