Task

task.ex

defmodule FitnessWeb.ChatLive do
  use FitnessWeb, :live_view

  alias Fitness.Chats
  alias Fitness.Repo

  @impl true
  def mount(_params, _session, socket) do
    IO.inspect("mount invoked")
    current_user = socket.assigns.current_user

    rooms = Chats.list_rooms()

    room = hd(Chats.list_rooms())

    changeset =
      Chats.change_message(%{
        room_id: room.id,
        user_id: current_user.id,
        data: ""
      })

    Process.flag(:trap_exit, true)

    liveview_pid = self()

    socket =
      socket
      |> assign(changeset: changeset)
      |> assign(room: room)
      |> assign(rooms: rooms)
      |> assign(current_user: current_user)
      |> assign(messages: Chats.list_message(room.id))
      |> assign(random_messages: [])
      |> assign(running_task_pid: nil)

    {:ok, socket}
  end

  @impl true
  def handle_event("validate", %{"message" => params}, socket) do
    # IO.inspect(params)
    {:noreply, socket}
  end

  @impl true
  def handle_event("change", params, socket) do
    IO.inspect(params)
    {:noreply, socket}
  end

  @impl true
  def handle_event("create", %{"message" => params}, socket) do
    params =
      params
      |> Map.put("user_id", socket.assigns.current_user.id)
      |> Map.put("room_id", socket.assigns.room.id)

    html = Earmark.as_html!(params["data"]) |> HtmlSanitizeEx.markdown_html()

    IO.inspect(html)

    case Chats.create_message(Map.merge(params, %{"data" => html})) do
      {:ok, message} ->
        {:noreply, assign(socket, messages: Chats.list_message(socket.assigns.room.id))}

      {:error, changeset} ->
        {:noreply, assign(socket, changeset: changeset)}
    end
  end

  def handle_event("start-task", _params, socket) do
    {:ok, task_pid} = create_random_message_task(self())

    {:noreply, assign(socket, running_task_pid: task_pid)}
  end

  def handle_event("cancel-task", _params, socket) do
    task_pid = socket.assigns.running_task_pid
    IO.inspect(task_pid)

    socket =
      if task_pid do
        Process.exit(task_pid, :kill)

        assign(socket, running_task_pid: nil)
      end

    {:noreply, socket}
  end

  def handle_info({:message, message}, socket) do
    socket =
      socket
      |> assign(random_messages: [message | socket.assigns.random_messages])

    {:noreply, socket}
  end

  def handle_info({:EXIT, pid, cause}, socket) do
    socket =
      socket
      |> assign(random_messages: [cause | socket.assigns.random_messages])

    {:noreply, socket}
  end

  def create_random_message_task(pid) do
    # creates 100 tasks to sleep for 100ms and perform string interploation

    Task.start_link(fn ->
      Enum.map(1..100, fn i -> i end)
      |> Task.async_stream(
        fn item ->
          pid = self()

          "the message number #{item} #{inspect(pid)}"
        end,
        ordered: true
      )
      |> Enum.each(fn item ->
        case item do
          {:ok, item} ->
            send(pid, {:message, item})

          {:exit, {element, reason}} ->
            IO.inspect(reason)
        end
      end)
    end)
  end

  @impl true
  def render(assigns) do
    ~H"""
    <button :if={is_nil(@running_task_pid)} type="button" id="button-task" phx-click="start-task">
      Start Task
    </button>

    <button :if={@running_task_pid} type="button" id="button-task" phx-click="cancel-task">
      Cancel Task
    </button>

    <h1>hello world</h1>

    <div :for={msg <- @random_messages}>
      <%= msg %>
    </div>

    <section class="flex w-full h-screen relative bg-yellow-200">
      <div class="w-[20%] h-screen border-r-2 border-gray-800-500">
        <h1 class="text-2xl font-[700] pt-8 pl-4 bg-yellow-300 rounded-r-sm text-gray-700 drop-shadow-md">
          Channels
        </h1>
        <div :for={room <- @rooms} id="channels_list" class="">
          <%= room.name %>
        </div>
      </div>

      <div class="w-[80%]">
        <h1 class="w-[100%] bg-yellow-200 pl-7 text-4xl py-3 text-gray-700 drop-shadow-md border-b-2">
          <%= @room.name %>
        </h1>

        <div class="w-full h-[calc(100vh-4.6rem)] flex flex-col justify-center pl-8 overflow-auto py-16 gap-2 bg-orange-200">
          <div
            :for={message <- @messages}
            id="messages_card"
            phx-update="stream"
            class="card bg-yellow-100 w-[90%]"
          >
            <%= raw(message.data) %>

            <%= message.inserted_at %>
            <%= message.user.username %>
          </div>
        </div>
        <.form
          :let={f}
          for={@changeset}
          phx-submit="create"
          id="easy_text_editor_form"
          phx-validate="validate"
        >
          <div class="absolute z-10 -bottom-10 right-0 w-full hidden ">
            <div id="rich-text-editor">
              <%= textarea(f, :data,
                id: "rich_text_input",
                phx_hook: "easyMDE",
                phx_update: "ignore",
                class: "hidden"
              ) %>
            </div>

            <button type="submit" id="easy_text_editor_submit" class="absolute right-1 bottom-10 z-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="red"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
                />
              </svg>
            </button>
          </div>
        </.form>
      </div>
    </section>
    """
  end
end