DEV Community: Anthony Gonzalez

Elixir & Phoenix Fundamentals Full Course For Beginners

Anthony Gonzalez — Tue, 11 Oct 2022 19:46:51 +0000

Learn the functional programming language Elixir, and how to build web applications with the Phoenix framework from scratch with this free video crash course. In this one video course, we will get introduced to the Elixir ecosystem, then we will build 2 real-world web applications with the Phoenix web development framework.

Topics covered on the video course:

What is Elixir

A quick introduction and history of the Elixir functional programming language.

Why build web applications with Elixir & Phoenix

Benefits of the language, and why the Phoenix web development framework is a great choice.

Who Am I

A quick introduction of the instructor.

Elixir Basics

We go over the fundamentals of the Elixir functional programming language. We go over data types, operators, pattern matching, conditionals, anonymous functions, modules, functions, the pipe operator.

Password Generator Module Project

We build a fully tested passwords generator module.

Phoenix Framework Basics

We go over the basics of the phoenix web development framework, like the directory structure of a project, routing, controllers, views and templates, databases.

Phoenix Password Generator Web App Project

We build a real-world password generator web application with the phoenix framework.

Phoenix Todo Web App Project

We build a fully-featured todo list web application with the phoenix framework.

Server & Client Side Forms Validations With [Elixir, Phoenix, LiveView and Tailwind CSS | No Javascript]

Anthony Gonzalez — Thu, 24 Feb 2022 21:33:43 +0000

Learn how to use Elixir/Phoenix to validate forms on the client and server-side, no Javascript code is needed thanks to the LiveView library, Tailwind CSS is going to be used for the user interface.

Create New Project:

Let's start by creating a new phoenix project from scratch inside our desired directory, by going to the command line and typing the following command:

$ mix phx.new form_validator --no-dashboard && cd form_validator

Then $ mix ecto.create

Tailwind CSS Installation & Configuration:

Let's add and configure Tailwind CSS, go to the website https://hex.pm and grab the latest version of the tailwind package library, at the time of the making of this tutorial the latest version is 0.1.5, add the following to your project dependencies inside your mix.exs file:

{:tailwind, "~> 0.1.5"}

Also, in that same file under aliases add the following:

"assets.deploy": ["tailwind default --minify", ..., "phx.digest"]

Go to your config/config/exs file and add the following configuration:

config :tailwind,
  version: "3.0.23",
  default: [
    args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --output=../priv/static/assets/app.css
    ),
    cd: Path.expand("../assets", __DIR__)
  ]

Go to your config/dev.exs file and add the following to your watchers:

tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}

Get back to the command line and type in $ mix deps.get && mix tailwind.install to fetch your new dependency and install tailwind.

LiveView Template:

Run the server with the following command in your terminal:

$ iex -S mix phx.server

Open your lib/form_validator_web/router.ex file and remove the root path and change it to the following:

  scope "/", FormValidatorWeb do
    pipe_through :browser

    live "/", PageLive
  end

Open your lib/form_validator_web/templates/layout/root.html.heex and remove the header nav, your html body tag should look like the following:

  <body class="bg-violet-500">
    <%= @inner_content %>
  </body>

To your lib/form_validator_web/templates/layout/live.html.heex file, add the following css class to your main and p tag:

<main  class="container mx-auto max-w-full">
    <p  class="alert alert-info flex"  role="alert"

Add the following folder to lib/form_validator_web:

live

Add the following file to that newly created live folder:

page_live.ex

Add the following to that newly created file lib/form_validator_web/live/page_live.ex:

defmodule FormValidatorWeb.PageLive do
  use FormValidatorWeb, :live_view
end

Under lib/form_validator_web/live add the following file:

page_live.html.heex

<section class="mt-24 w-1/2 shadow flex flex-col items-center justify-center mx-auto p-6 bg-white">
  <h1 class="text-4xl font-bold italic text-gray-700">
    Create Account
  </h1>

  <p class="text-gray-500 font-semibold text-lg mt-6 text-center px-8">
  Sign up to get an account.
  </p>

  <.form
    let={f}
    for={:user}
    id="user-form"
    class="flex flex-col space-y-4 w-full px-6">

    <div class="flex flex-col">
      <%= label f, :email, class: "text-gray-400" %>
      <%= email_input f, :email, autocomplete: "off", class: "rounded shadow-sm focus:ring-opacity-50 border-gray-300 focus:border-gray-900 focus:ring-gray-900" %>
      <%= error_tag f, :email %>
    </div>

    <div class="flex flex-col">
      <%= label f, :username, class: "text-gray-400" %>
      <%= text_input f, :username, autocomplete: "off", class: "rounded shadow-sm focus:ring-opacity-50 border-gray-300 focus:border-gray-900 focus:ring-gray-900" %>
      <%= error_tag f, :username %>
    </div>

    <div class="flex flex-col">
      <%= label f, :password, class: "text-gray-400" %>
      <%= password_input f, :password, class: "rounded shadow-sm focus:ring-opacity-50 border-gray-300 focus:border-gray-900 focus:ring-gray-900" %>
      <%= error_tag f, :password %>
    </div>

    <div>
      <%= submit "Sign up", phx_disable_with: "Saving...", class: "w-full py-2 border-none shadow rounded font-semibold text-sm text-gray-50 hover:bg-violet-600 bg-violet-500" %>
    </div>

  </.form>

  <p class="text-sm px-10 text-center mt-6 text-gray-400 font-semibold">
    By signing up, you agree to our Terms , Data Policy and Cookies Policy.
  </p>
</section>

LiveView Tests:

Add the following folder under test/form_validator_web:

live

Add the following file to that newly created folder:

page_live_test.exs

To that newly created file test/form_validator_web/live/page_live_test.exs add the following tests:

defmodule FormValidatorWeb.PageLiveTest do
  use FormValidatorWeb.ConnCase

  import Phoenix.LiveViewTest

  @create_attrs %{
    username: "somename",
    email: "test@test.com",
    password: "Password1"
  }
  @invalid_attrs %{
    username: nil,
    email: nil,
    password: nil
  }

  test "renders form title", %{conn: conn} do
    {:ok, _page_path, html} = live(conn, "/")

    assert html =~ "Create Account"
  end

  test "saves new account", %{conn: conn} do
    {:ok, page_path, _html} = live(conn, "/")

    assert page_path
           |> form("#user-form", user: @invalid_attrs)
           |> render_change() =~ "can&#39;t be blank"

    {:ok, _, html} =
        page_path
        |> form("#user-form", user: @create_attrs)
        |> render_submit()
        |> follow_redirect(conn, "/")

    assert html =~ "Account created successfully"
  end

  test "validates email", %{conn: conn} do
    invalid_email = %{email: "email"}
    {:ok, page_path, _html} = live(conn, "/")

    assert page_path
           |> form("#user-form", user: invalid_email)
           |> render_change() =~ "must have the @ sign and no spaces"
  end

  test "validates username", %{conn: conn} do
    {:ok, page_path, _html} = live(conn, "/")

    assert page_path
           |> form("#user-form", user: %{username: "a"})
           |> render_change() =~ "should be at least 5 character(s)"

    assert page_path
           |> form("#user-form", user: %{username: "user$"})
           |> render_change() =~ "Please use letters and numbers without space(only characters allowed _ . -)"
  end

  test "validates password", %{conn: conn} do
    {:ok, page_path, _html} = live(conn, "/")

    assert page_path
           |> form("#user-form", user: %{password: "a"})
           |> render_change() =~ "should be at least 6 character(s)"

    assert page_path
           |> form("#user-form", user: %{password: "."})
           |> render_change() =~ "at least one lower case character"

    assert page_path
           |> form("#user-form", user: %{password: "."})
           |> render_change() =~ "at least one upper case character"

    assert page_path
           |> form("#user-form", user: %{password: "."})
           |> render_change() =~ "at least one digit or punctuation character"
  end
end

Phoenix Context:

Let's create a context, by going to the command line and typing the following command:

$ mix phx.gen.context Accounts User users email:string username:string password:string

Then $ mix ecto.migrate

Add your validation to your users schema changeset, open lib/form_validator/accounts/user.ex and add the following:

  def changeset(user, attrs) do
    user
    |> cast(attrs, [:email, :username, :password])
    |> validate_required([:email, :username, :password])
    |> validate_email()
    |> validate_username()
    |> validate_password()
  end

  defp validate_email(changeset) do
    changeset
    |> validate_format(:email, ~r/^[^\s]+@[^\s]+$/, message: "must have the @ sign and no spaces")
    |> validate_length(:email, max: 160)
    |> unique_constraint(:email)
  end

  defp validate_username(changeset) do
    changeset
    |> validate_format(:username, ~r/^[a-zA-Z0-9_.-]*$/, message: "Please use letters and numbers without space(only characters allowed _ . -)")
    |> validate_length(:username, min: 5, max: 30)
    |> unique_constraint(:username)
  end

  defp validate_password(changeset) do
    changeset
    |> validate_length(:password, min: 6, max: 80)
    |> validate_format(:password, ~r/[a-z]/, message: "at least one lower case character")
    |> validate_format(:password, ~r/[A-Z]/, message: "at least one upper case character")
    |> validate_format(:password, ~r/[!?@#$%^&*_0-9]/, message: "at least one digit or punctuation character")
  end

Validate Event:

Open your liveview file lib/form_validator_web/live/page_live.ex and add the following:

  alias FormValidator.Accounts
  alias FormValidator.Accounts.User

  def mount(_params, _session, socket) do
    changeset = Accounts.change_user(%User{})

    {:ok, assign(socket, changeset: changeset)}
  end

  def handle_event("validate", %{"user" => user_params}, socket) do
    changeset =
      %User{}
      |> Accounts.change_user(user_params)
      |> Map.put(:action, :validate)

    {:noreply, assign(socket, changeset: changeset)}
  end

Go to your liveview template lib/form_validator_web/live/page_live.html.heex and add the form and the validate phoenix change bind event:

    for={@changeset}
    phx-change="validate"

Now we need to fix the error tag class for our layout, open lib/form_validator_web/views/error_helpers.ex and change the error tag funtion to the following:

  def error_tag(form, field, class \\ [class: "invalid-feedback"]) do
    Enum.map(Keyword.get_values(form.errors, field), fn error ->
      content_tag(:span, translate_error(error),
        class: Keyword.get(class, :class),
        phx_feedback_for: input_name(form, field)
      )
    end)
  end

Now we can add our own class to the error tags, go back to the lib/form_validator_web/live/page_live.html.heex liveview template file and the following class to all of the error tags:

<%= error_tag f, :email, class: "text-red-700 text-sm" %>
<%= error_tag f, :username, class: "text-red-700 text-sm" %>
<%= error_tag f, :password, class: "text-red-700 text-sm" %>

Now let's add a function to change the inputs colors to red when there's error in our form, go back to lib/form_validator_web/views/error_helpers.ex file and add the following function:

  def error_ring(f, field) do
    with :validate <- f.source.action do
      case Keyword.fetch(f.errors, field) do
        {:ok, _} ->
          "border-red-700 focus:border-red-700 focus:ring-red-700"
        :error ->
          "border-green-500 focus:border-green-500 focus:ring-green-500"
      end
    else
      _ ->
        "border-gray-300 focus:border-gray-900 focus:ring-gray-900"
    end
  end

Now back to our lib/form_validator_web/live/page_live.html.heex file let's remove the border classes on our inputs and add the our new function:

<%= email_input f, :email, autocomplete: "off", class: "rounded shadow-sm focus:ring-opacity-50 #{error_ring(f, :email)}" %>
<%= text_input f, :username, autocomplete: "off", class: "rounded shadow-sm focus:ring-opacity-50 #{error_ring(f, :username)}" %>
<%= password_input f, :password, class: "rounded shadow-sm focus:ring-opacity-50 #{error_ring(f, :password)}" %>

Save Event:

Let's add our save handle event function, first open lib/form_validator_web/live/page_live.html.heex file and add the phoenix submit bind event to our form:

    phx-submit="save"

Then back to the lib/form_validator_web/live/page_live.ex liveview add the following function:

  def handle_event("save", %{"user" => user_params}, socket) do
    case Accounts.create_user(user_params) do
      {:ok, _user} ->
        {:noreply,
         socket
         |> put_flash(:info, "Account created successfully")
         |> push_redirect(to: "/")}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply, assign(socket, changeset: changeset)}
    end
  end

Go to http://localhost:4000 to test your application manually as a user, and if you go to the command line and run the tests with mix test test/form_validator_web/live they should pass with no failure.

Conclusion

Thank you so much for your time, I really appreciate it. We added Tailwind CSS to our Phoenix application, and went to the steps of handling forms validations on the server-side and client-side without the need for javascript, using the phoenix change bind event and customizing the error helpers functions for our template when errors on our form.

How To Build a [Counter with Elixir, Phoenix, LiveView and Tailwind CSS] | No Javascript

Anthony Gonzalez — Tue, 15 Feb 2022 02:36:00 +0000

Learn how to use Elixir/Phoenix, to create a counter without javascript, only using Elixir with the help of Phoenix LiveView, and Tailwind CSS for the user interface.

Step 1:

Let's create a fresh elixir/phoenix new project by going to the command line and typing the following in your desired directory:

$ mix phx.new counter --no-ecto --no-gettext --no-mailer --no-dashboard && cd counter

Step 2:

Let's add and configure Tailwind CSS, go to the website https://hex.pm and search for the tailwind library to grab the latest version, so you can copy and that to your mix config file, at the time of the making of this tutorial the latest version is 0.1.5, add the following to your project dependencies inside your mix.exs file:

{:tailwind, "~> 0.1.5"}

Then in the command line type in $ mix deps.get && mix tailwind.install to fetch your new dependency and install tailwind. Back in your mix.exs file, under aliases, add the following:

"assets.deploy": ["tailwind default --minify", ..., "phx.digest"]

Go to your config/config/exs file and add the following configuration:

config :tailwind,
  version: "3.0.10",
  default: [
    args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --output=../priv/static/assets/app.css
    ),
    cd: Path.expand("../assets", __DIR__)
  ]

Go to your config/dev.exs file and add the following to your watchers:

tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}

Step 3:

Add the following folder under test/counter_web:

live

Add the following file to that newly created folder:

page_live_test.exs

To that newly created file test/counter_web/live/page_live_test.exs add the following tests:

defmodule CounterWeb.PageLiveTest do
  use CounterWeb.ConnCase

  import Phoenix.LiveViewTest

  test "disconnected and connected render", %{conn: conn} do
    {:ok, page_live, disconnected_html} = live(conn, "/")
    assert disconnected_html =~ "0"
    assert render(page_live) =~ "0"
  end

  test "increment event and decrement", %{conn: conn} do
    {:ok, page_live, _html} = live(conn, "/")
    assert render_click(page_live, :inc, %{}) =~ "1"
    assert render_click(page_live, :inc, %{}) =~ "2"
    assert render_click(page_live, :inc, %{}) =~ "3"
    assert render_click(page_live, :dec, %{}) =~ "2"
    assert render_click(page_live, :dec, %{}) =~ "1"
    assert render_click(page_live, :dec, %{}) =~ "0"
  end

  test "clear event", %{conn: conn} do
    {:ok, page_live, _html} = live(conn, "/")
    assert render_click(page_live, :inc, %{}) =~ "1"
    assert render_click(page_live, :clear, %{}) =~ "0"
  end
end

If you run those tests by going to the command line and typing mix test test/counter_web/live they should fail of course.

Step 4:

Open your lib/counter_web/router.ex file and remove the root path and change it to the following:

  scope "/", CounterWeb do
    pipe_through :browser

    live "/", PageLive
  end

Run the server with the following command in your terminal:

$ iex -S mix phx.server

Open your lib/counter_web/templates/layout/root.html.heex and remove the header nav, your html body tag should look like the following:

  <body>
    <%= @inner_content %>
  </body>

To your lib/counter_web/templates/layout/live.html.heex file, add the following css class to your main tag:

<main class="container mx-auto max-w-full">

Add the following folder to lib/counter_web:

live

Add the following file to that newly created live folder:

page_live.ex

Add the following to that newly created file lib/counter_web/live/page_live.ex:

defmodule CounterWeb.PageLive do
  use CounterWeb, :live_view
end

Under lib/counter_web/live add the following file:

page_live.html.heex

Add the following to that newly created lib/counter_web/live/page_live_html.heex file:

<div class="flex flex-col items-center justify-center h-screen bg-gray-200">
  <h1 class="text-5xl font-medium text-gray-700">Counter</h1>

  <span class="m-5 text-9xl">
    0
  </span>

  <section> 
    <button class="text-white text-4xl bg-indigo-600 px-6 py-4 rounded hover:bg-indigo-900">-</button>

    <button class="m-10 text-white text-4xl bg-indigo-900 px-6 py-4 rounded hover:bg-indigo-500">clear</button>

    <button class="text-white text-4xl bg-indigo-600 px-6 py-4 rounded hover:bg-indigo-900">+</button>
  </section>
</div>

Step 5:

Let's add our liveview mount function and assign the default number.

To lib/counter_web/live/page_live.ex file add the following function:

  def mount(_params, _session, socket) do
    {:ok,
     socket
     |> assign(number: 0)}
  end

Then change the number 0 to our new assign variable in our lib/counter_web/live/page_lve.html.heex file, inside our span tag:

  <span class="m-5 text-9xl">
    <%= @number %>
  </span>

Step 6:

Inside our lib/counter_web/live/page_lve.html.heex file, add the following click event binding to our increase button:

<button phx-click="inc" class="...">+</button>

Then to our lib/counter_web/live/page_live.ex file let's add the following function to handle that event:

  def handle_event("inc", _params, socket) do
    {:noreply,
     socket
     |> update(:number, &(&1 + 1))}
  end

Step 7:

Inside our lib/counter_web/live/page_lve.html.heex file, add the following click event binding to our decrease button:

<button phx-click="dec" class="...">-</button>

To our lib/counter_web/live/page_live.ex file let's add the following function to handle the decrease event:

  def handle_event("dec", _params, socket) do
    {:noreply,
     socket
     |> update(:number, &max(0, &1 - 1))}
  end

Step 8:

Let's add the following click event binding to our clear button inside our lib/counter_web/live/page_lve.html.heex file:

<button phx-click="clear" class="...">clear</button>

To our lib/counter_web/live/page_live.ex file let's add the following function to handle the clear event:

  def handle_event("clear", _params, socket) do
    {:noreply, socket |> assign(number: 0)}
  end

Go to http://localhost:4000 to test your application manually as a user, and if you go to the command line and run the tests with mix test test/counter_web/live they should pass with no failure.

Conclusion

That's all folks, we went through the simple steps to set up Tailwind CSS with your phoenix applications, and how to handle click events with Phoenix LiveView over sockets without the need of using Javascript code, the Javascript is handled nicely in the background for us by the LiveView library. Thank you so much for your time, I really appreciate it.

URL [Slug Generator] With Elixir

Anthony Gonzalez — Fri, 04 Feb 2022 01:40:07 +0000

Learn how to build a human-readable, search engine-friendly URL slugs generator with Elixir.

Step 1:

Create a new Elixir project by going to the command line and typing the following in your desired directory:

$ mix new slug_generator && cd slug_generator

Step 2:

Open your test file test/slug_generator_test.exs, remove the autogenerated test and add the following test:

  test "generates slug" do
    s = "[\"Pattern\", \"Matching\", \"In\", \"Elixir\"] = [a, b, c, d]"

    assert "pattern-matching-in-elixir-a-b-c-d" = SlugGenerator.create(s)
  end

  test "generates simple slug" do
    s = "My slug generator & simple test "

    assert "my-slug-generator-and-simple-test" = SlugGenerator.create(s)
  end

Watch your tests fail by going to the command line and running the test by typing mix test.

Step 3:

Let's make our test pass by opening our main project file lib/slug_generator.ex, remove the autogenerated hello world function and add the following:

  def create(string) do
    string
    |> String.downcase()
    |> String.replace(~r/[^a-zA-Z0-9 &]/, "")
    |> String.replace("&", "and")
    |> String.split()
    |> Enum.join("-")
  end

Go back to the command line and watch your tests pass with no failures by typing mix test.

Code Breakdown

String.downcase(string)

Makes everything lowercase.

String.replace(subject, pattern, replacement)

We use it twice, the first is used with a regular expression as a pattern to replace everything that is not alphanumeric or the & symbol in the string with nothing or an empty string. The second time used with the & symbol as a pattern to get replaced with and.

String.split(string)

Returns a list of substrings ignoring whitespace.

Enum.join(list, joiner)

Joins the list of substrings with the - symbol and returns a string.

Conclusion

That's a short and sweet way to build a URL slug generator with Elixir, using the useful String module combined with the Enum module. You could get way fancier and add more functionality but that should do it for this example tutorial. Thank you so much for your time, I really appreciate it.

Basic [File Manipulation] With Elixir

Anthony Gonzalez — Fri, 28 Jan 2022 21:52:10 +0000

Learn how to do basic directories and files creation, open, read, write to files with Elixir.

Step 1:

Let's create a new Elixir project by going to the command line and typing the following in your desired directory:

$ mix new file_manipulator && cd file_manipulator

Step 2:

Open your test file test/file_manipulator_test.exs, remove the autogenerated test and add the following test:

  setup do
    file = %{
      name: "test.exs",
      directory: "my_test",
      content: "IO.puts ",
      content_to_append: "\"Hello world from Elixir\""
    }

    %{my_file: file}
  end

  test "creates file", %{my_file: file} do
    my_file = FileManipulator.create(file)

    File.rm_rf!(file.directory)

    assert my_file == {:ok, :ok}
  end

  test "error when files exists", %{my_file: file} do
    FileManipulator.create(file)

    assert FileManipulator.create(file) == {:error, :eexist}

    File.rm_rf!(file.directory)
  end

Go to the command line and run the test mix test and see it fail.

Step 3:

Let's make our test pass by opening our main project file lib/file_manipulator.ex, remove the autogenerated hello world function and add the following:

  def create(file) do
    with :ok <- File.mkdir(file.directory),
         :ok <- File.write("#{file.directory}/#{file.name}", file.content)
    do
      append_to_file(file)
    else
      error ->
        error
    end
  end

  def append_to_file(my_file) do
    File.open("#{my_file.directory}/#{my_file.name}", [:read, :write], fn file ->
      IO.read(file, :line)
      IO.binwrite(file, my_file.content_to_append)
    end)
  end

Get back to the command line and run the test mix test now our test should pass with no failures.

Code Breakdown

File.mkdir(path)

Makes the directory path if it doesn't exist, returns :ok if successful.

File.write(path, content)

Writes Content to the file path, creates the file if it doesn't exist, returns :ok if successful.

File.open(path, modes, function)

Opens the file in reading and writing mode.

IO.read(file, content)

Reads the content of the file, if you don't it gets overridden by the write function.

IO.binwrite(file, content)

Appends the content to the file.

Conclusion

That's a simple introduction to file manipulation with Elixir, all you need is the File, and the input-output IO modules. Thank
you so much for your time, I really appreciate it.

[File Format Verification] With Elixir

Anthony Gonzalez — Wed, 19 Jan 2022 05:32:54 +0000

Let's handle file name extensions with Elixir, useful to validate the type of format of files that we would like to allow.

Step 1:

Let's create a new Elixir project by going to the command line and typing the following in your desired directory:

$ mix new file_validator && cd file_validator

Step 2:

Open your test file test/file_validator_test.exs, remove the autogenerated test and add the following test:

  test "file validation should be false" do
    file = "somefile.exe"
    assert FileValidator.valid?(file) == false
  end

  test "file validation should be true" do
    file = "somefile.png"
    assert FileValidator.valid?(file) == true
  end

Go to the command line and run the test mix test

Step 3:

Let's make our test pass by opening our main project file lib/file_validator.ex, remove the autogenerated hello world function and add the following:

  @extension_whitelist ~w(.jpg .jpeg .gif .png .pdf)

  def valid?(file) do
    file_extension = get_ext(file)

    @extension_whitelist
    |> Enum.member?(file_extension)
  end

  defp get_ext(file) do
    file
    |> Path.extname()
    |> String.downcase()
  end

Get back to the command line and run the test mix test now our test should pass with no failures.

Code Breakdown

@extension_whitelist ~w(.jpg .jpeg .gif .png .pdf)

The @ symbol means that is a module attribute, that can be used as a constant throughout our module.

The ~w sigil is used to generate lists of words(words are just regular strings). Inside the ~w sigil, words are separated by whitespace.

Path.extname(path)

Returns the extension of the last component of the path of a string.

Enum.member?(list, element)

Checks if an element exists within the list.

Conclusion

That's a pretty simple and straightforward way to validate a file format, by getting the extension from the string with Path.extname(path) and passing it to Enum.member?(list, element) along with a whitelisted list of allowed file extensions. Thank you so much for your time, I really appreciate it.

Auto Generate [Fake Usernames With Elixir]

Anthony Gonzalez — Tue, 18 Jan 2022 05:21:48 +0000

Let's use a custom Elixir function combined with the Faker Elixir library to generate automatic fake usernames data.

Step 1:

This is for learning purposes only so let's create a new simple Elixir project by going to the command line and typing the following in your desired directory:

$ mix new fake_username && cd fake_username

Step 2:

Go to the website https://hex.pm and search for the faker library to grab the latest version, so you can copy that to your mix config file, at the time of the making of this tutorial the latest version is 0.17.0, add the following to your project dependencies inside your mix.exs file:

{:faker, "~> 0.17.0"}

Then in the command line type in $ mix deps.get to fetch your new dependency.

Step 3:

Open your test file test/fake_username_test.exs, remove the autogenerated test and add the following test:

  test "generates a username" do
    name = "  My Long Random Username  "
    assert FakeUsername.get(name) == "mylongrandomusername"
  end

Go to your command line and run the test by typing mix test the test should fail of course because we haven't created the function get() in our module.

Step 4:

Open your main project file lib/fake_username.ex, remove the autogenerated hello world function and add the following function:

  def get(name) do
    name
    |> String.downcase()
    |> String.split()
    |> Enum.join()
  end

Go to the command line and run the test again mix test now it should pass with no failures.

Code Breakdown

String.downcase() will make all letters lowercase.

String.split() it will return a list of all words after every whitespace, ignoring trailing and leading whitespace.

Enum.join() will join all the words in our previously created list with String.split() and return a single string.

Manual Testing

To test it out manually go to the command line and type in iex -S mix.

iex> FakeUsername.get(Faker.Person.name())

Conclusion

That's all folks, now every time that we call our function FakeUsername.get() passing in a random name with Faker.Person.name() function from the Faker library we get a string back with no whitespace that can be used as a username, we could get fancy and add random numbers and symbols to our returned string in our custom function.

We should waste time We should (waste time writing automated unit tests and documenting our code) as professional developers

Anthony Gonzalez — Wed, 08 Dec 2021 22:46:36 +0000

If you have been programming for a while, you may know that experienced professional programmers put a lot of emphasis on unit testing, that's when they write code that tests the code itself. Testing the individual units of their code to prove that the code works like is supposed to, is a big part of their job. That's why that type of programmer is so valued and good at their craft. Let's talk about why we don't unit test or document our code and why we should do it.

Why we do not unit test our code?

Takes too much effort. As programmers we have too much on our plate with little time, when we write code we feel comfortable at the moment, not worrying about the future or coming back to that same code that we wrote. We might feel like we don't move fast enough, pressuring ourselves to deliver new features, so we just jump into the implementation part to ship as fast as possible, skipping the unit tests part because it might feel like it takes way too much upfront effort.
Bad Habits. Teaching how to do testing is not a topic well explained by instructors because it isn't interesting or fun, so from the start, we don't learn how to do it and we get in the bad habit of ignoring it completely.
Is boring. Doing unit testing might feel like one of the most tedious, boring, and repetitive tasks, so it becomes a big burden that we avoid dealing with.

Why we do not document our code?

It's not a requirement, is something that is not needed and that it will not make our code better, so we might feel like is not part of our job, and if we do it we would be wasting time, we all think that our code is the documentation.

Why we should unit test our code?

Writing tests is easy, everybody already does that even though they may not have automated tests written. When you write a function that prints "Hello World!" in the console, you typically run your code and go to the console to see if it prints the desired output, that's manual testing.

We might write some code now and understand everything we did at the moment, but you might come back to that code later, tomorrow or in a couple of hours, and for sure we will have no clue about what we did, we will forget, so we have to go line by line all over again, doing manual testing just to figure it out or to add some new feature, so instead of doing it manually, we should automate that process with something that we already know, code, that way we can just run our tests in seconds and be sure that our code works like is supposed to, allowing us to move super fast by saving time.

Why do we need documentation?

Well-written tests are not enough because naming things and being as descriptive as possible is one of the hardest things that everybody struggles with, so documenting every detail will help us to maintain our code.

Conclusion

I know is hard and nobody wants to do it because of the huge upfront effort needed, but the more you do it, and the more experienced you get the more that you will appreciate it. The future payoff will be priceless, it will allow us to get back to that old code that we wrote and be up to speed in no time, adding that new feature, fixing a bug, or making sure that everything works like is supposed to.

Thank you so much for your time!

If you have any questions or need help with your codebase unit tests, let's talk.

Let's Build An Instagram Clone With The PETAL(Phoenix, Elixir, TailwindCSS, AlpineJS, LiveView) Stack [PART 8]

Anthony Gonzalez — Tue, 01 Jun 2021 21:38:39 +0000

In part 7 we added the search functionality in our top header navigation menu, in this part we will work on the bookmarks functionality and notify users when a following adds new posts to our homepage. You can catch up with the Instagram Clone GitHub Repo.

Let's handle errors when we try to create a new post with no image selected, to do that we need to pattern match correctly in our save handle function inside lib/instagram_clone_web/live/post_live/new.ex:

  def handle_event("save", %{"post" => post_params}, socket) do
    post = PostUploader.put_image_url(socket, %Post{})

    case Posts.create_post(post, post_params, socket.assigns.current_user) do
      {:ok, %{post: post}} -> # <- THIS LINE WAS UPDATED
        PostUploader.save(socket)

        {:noreply,
         socket
         |> put_flash(:info, "Post created successfully")
         |> push_redirect(to: Routes.user_profile_path(socket, :index, socket.assigns.current_user.username))}
         |> push_redirect(to: Routes.live_path(socket, InstagramCloneWeb.PostLive.Show, post.url_id))}

      {:error, :post, %Ecto.Changeset{} = changeset, %{}} -> # <- THIS LINE WAS UPDATED
        {:noreply, assign(socket, changeset: changeset)}
    end
  end

Because we are using Ecto.Multi to update posts count to users and creating the post, in our result we have to pattern match accordingly.

Now inside lib/instagram_clone_web/live/post_live/new.html.leex on line 23 let's add a div to display the :photo_url error:

    <div class="flex justify-center">
      <%= error_tag f, :photo_url, class: "text-red-700 block" %>
    </div>

Every time that a new post is created we are going to use phoenix pubsub to send a message to the homepage liveview, so we can display a div that when clicked will reload the liveview. Inside lib/instagram_clone/posts.ex add the following:

  @pubsub_topic "new_posts_added"

  def pubsub_topic, do: @pubsub_topic

  def subscribe do
    InstagramCloneWeb.Endpoint.subscribe(@pubsub_topic)
  end

Inside lib/instagram_clone_web/live/post_live/new.ex let's send the message:

  def handle_event("save", %{"post" => post_params}, socket) do
    post = PostUploader.put_image_url(socket, %Post{})

    case Posts.create_post(post, post_params, socket.assigns.current_user) do
      {:ok, %{post: post}} -> # <- THIS LINE WAS UPDATED
        PostUploader.save(socket)

        send_msg(post)

        {:noreply,
         socket
         |> put_flash(:info, "Post created successfully")
         |> push_redirect(to: Routes.user_profile_path(socket, :index, socket.assigns.current_user.username))}
         |> push_redirect(to: Routes.live_path(socket, InstagramCloneWeb.PostLive.Show, post.url_id))}

      {:error, :post, %Ecto.Changeset{} = changeset, %{}} -> # <- THIS LINE WAS UPDATED
        {:noreply, assign(socket, changeset: changeset)}
    end
  end

  defp send_msg(post) do
    # Broadcast that new post was added
    InstagramCloneWeb.Endpoint.broadcast_from(
      self(),
      Posts.pubsub_topic,
      "new_post",
      %{
        post: post
      }
    )
  end

Inside lib/instagram_clone_web/live/page_live.ex let's handle the message that's going to be sent:

  alias  InstagramClone.Posts.Post

  @impl true
  def mount(_params, session, socket) do
    socket = assign_defaults(session, socket)
    if connected?(socket), do: Posts.subscribe

    {:ok,
      socket
      |> assign(page_title: "InstagraClone")
      |> assign(new_posts_added: false)
      |> assign(page: 1, per_page: 15),
      temporary_assigns: [user_feed: []]}
  end

  @impl true
  def handle_info(%{event: "new_post", payload: %{post: %Post{user_id: post_user_id}}}, socket) do
    if post_user_id in socket.assigns.following_list do
      {:noreply, socket |> assign(new_posts_added: true)}
    else
      {:noreply, socket}
    end
  end

In our mount function, we subscribe to the pubsub topic and assign a page title and new_posts_added to determine if we have to display the div in our template. In our handle_info we are receiving the message and pattern matching on the user to just get the user ID, then we check if that user ID is in our following list of the current user that is assigned to the socket, and making the new_posts_added true if it is in our following list.

Inside lib/instagram_clone_web/live/page_live.html.leex on line 2 add the following:

  <%= if @new_posts_added do %>
    <div class="flex justify-center w-3/5 sticky top-14">
      <%= live_redirect to: Routes.page_path(@socket, :index), class: "user-profile-follow-btn" do %>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        Load New Posts
      <% end %>
    </div>
  <% end %>

Now when a user that we are following adds a new post, while we are on our homepage, we get notified.

Posts Bookmarks

Go to the terminal and let's create a schema to handle the posts bookmarks:

mix phx.gen.schema Posts.Bookmarks posts_bookmarks user_id:references:users post_id:references:posts

Inside the migration that was generated:

defmodule InstagramClone.Repo.Migrations.CreatePostsBookmarks do
  use Ecto.Migration

  def change do
    create table(:posts_bookmarks) do
      add :user_id, references(:users, on_delete: :delete_all)
      add :post_id, references(:posts, on_delete: :delete_all)

      timestamps()
    end

    create index(:posts_bookmarks, [:user_id])
    create index(:posts_bookmarks, [:post_id])
  end
end

Inside lib/instagram_clone/posts/bookmarks.ex:

defmodule InstagramClone.Posts.Bookmarks do
  use Ecto.Schema

  schema "posts_bookmarks" do
    belongs_to :user, InstagramClone.Accounts.User
    belongs_to :post, InstagramClone.Posts.Post

    timestamps()
  end

end

Inside lib/instagram_clone/accounts/user.ex and lib/instagram_clone/posts/post.ex:

  has_many :posts_bookmarks, InstagramClone.Posts.Bookmarks

Update lib/instagram_clone/posts.ex to the following:

defmodule InstagramClone.Posts do
  @moduledoc """
  The Posts context.
  """

  import Ecto.Query, warn: false
  alias InstagramClone.Repo

  alias InstagramClone.Posts.Post
  alias InstagramClone.Accounts.User
  alias InstagramClone.Comments.Comment
  alias InstagramClone.Likes.Like
  alias InstagramClone.Posts.Bookmarks

  @pubsub_topic "new_posts_added"

  def pubsub_topic, do: @pubsub_topic

  def subscribe do
    InstagramCloneWeb.Endpoint.subscribe(@pubsub_topic)
  end
  @doc """
  Returns the list of posts.

  ## Examples

      iex> list_posts()
      [%Post{}, ...]

  """
  def list_posts do
    Repo.all(Post)
  end

  @doc """
  Returns the list of paginated posts of a given user id.

  ## Examples

      iex> list_user_posts(page: 1, per_page: 10, user_id: 1)
      [%{photo_url: "", url_id: ""}, ...]

  """
  def list_profile_posts(page: page, per_page: per_page, user_id: user_id) do
    Post
    |> select([p], map(p, [:url_id, :photo_url]))
    |> where(user_id: ^user_id)
    |> limit(^per_page)
    |> offset(^((page - 1) * per_page))
    |> order_by(desc: :id)
    |> Repo.all
  end

  def list_saved_profile_posts(page: page, per_page: per_page, user_id: user_id) do
    Bookmarks
    |> where(user_id: ^user_id)
    |> join(:inner, [b], p in assoc(b, :post))
    |> select([b, p], %{url_id: p.url_id, photo_url: p.photo_url})
    |> limit(^per_page)
    |> offset(^((page - 1) * per_page))
    |> order_by(desc: :id)
    |> Repo.all
  end
  @doc """
  Returns the list of paginated posts of a given user id
  And posts of following list of given user id
  With user and likes preloaded
  With 2 most recent comments preloaded with user and likes
  User, page, and per_page are given with the socket assigns

  ## Examples

      iex> get_accounts_feed(following_list, assigns)
      [%{photo_url: "", url_id: ""}, ...]

  """
  def get_accounts_feed(following_list, assigns) do
    user = assigns.current_user
    page = assigns.page
    per_page = assigns.per_page
    query =
      from c in Comment,
      select: %{id: c.id, row_number: over(row_number(), :posts_partition)},
      windows: [posts_partition: [partition_by: :post_id, order_by: [desc: :id]]]
    comments_query =
      from c in Comment,
      join: r in subquery(query),
      on: c.id == r.id and r.row_number <= 2
    likes_query = Like |> select([l], l.user_id)
    bookmarks_query = Bookmarks |> select([b], b.user_id)

    Post
    |> where([p], p.user_id in ^following_list)
    |> or_where([p], p.user_id == ^user.id)
    |> limit(^per_page)
    |> offset(^((page - 1) * per_page))
    |> order_by(desc: :id)
    |> preload([:user, posts_bookmarks: ^bookmarks_query, likes: ^likes_query, comments: ^{comments_query, [:user, likes: likes_query]}])
    |> Repo.all()
  end

  def get_accounts_feed_total(following_list, assigns) do
    user = assigns.current_user

    Post
    |> where([p], p.user_id in ^following_list)
    |> or_where([p], p.user_id == ^user.id)
    |> select([p], count(p.id))
    |> Repo.one()
  end

  @doc """
  Gets a single post.

  Raises `Ecto.NoResultsError` if the Post does not exist.

  ## Examples

      iex> get_post!(123)
      %Post{}

      iex> get_post!(456)
      ** (Ecto.NoResultsError)

  """
  def get_post!(id) do
    likes_query = Like |> select([l], l.user_id)
    bookmarks_query = Bookmarks |> select([b], b.user_id)

    Repo.get!(Post, id)
    |> Repo.preload([:user, posts_bookmarks: bookmarks_query, likes: likes_query])
  end

  def get_post_feed!(id) do
    query =
      from c in Comment,
      select: %{id: c.id, row_number: over(row_number(), :posts_partition)},
      windows: [posts_partition: [partition_by: :post_id, order_by: [desc: :id]]]
    comments_query =
      from c in Comment,
      join: r in subquery(query),
      on: c.id == r.id and r.row_number <= 2
    likes_query = Like |> select([l], l.user_id)
    bookmarks_query = Bookmarks |> select([b], b.user_id)

    Post
    |> preload([:user, posts_bookmarks: ^bookmarks_query, likes: ^likes_query, comments: ^{comments_query, [:user, likes: likes_query]}])
    |> Repo.get!(id)
  end

  def get_post_by_url!(id) do
    likes_query = Like |> select([l], l.user_id)
    bookmarks_query = Bookmarks |> select([b], b.user_id)

    Repo.get_by!(Post, url_id: id)
    |> Repo.preload([:user, posts_bookmarks: bookmarks_query, likes: likes_query])
  end

  @doc """
  Creates a post.

  ## Examples

      iex> create_post(%{field: value})
      {:ok, %Post{}}

      iex> create_post(%{field: bad_value})
      {:error, %Ecto.Changeset{}}

  """
  def create_post(%Post{} = post, attrs \\ %{}, user) do
    post = Ecto.build_assoc(user, :posts, put_url_id(post))
    changeset = Post.changeset(post, attrs)
    update_posts_count = from(u in User, where: u.id == ^user.id)

    Ecto.Multi.new()
    |> Ecto.Multi.update_all(:update_posts_count, update_posts_count, inc: [posts_count: 1])
    |> Ecto.Multi.insert(:post, changeset)
    |> Repo.transaction()
  end

  # Generates a base64-encoding 8 bytes
  defp put_url_id(post) do
    url_id = Base.encode64(:crypto.strong_rand_bytes(8), padding: false)

    %Post{post | url_id: url_id}
  end

  @doc """
  Updates a post.

  ## Examples

      iex> update_post(post, %{field: new_value})
      {:ok, %Post{}}

      iex> update_post(post, %{field: bad_value})
      {:error, %Ecto.Changeset{}}

  """
  def update_post(%Post{} = post, attrs) do
    post
    |> Post.changeset(attrs)
    |> Repo.update()
  end

  @doc """
  Deletes a post.

  ## Examples

      iex> delete_post(post)
      {:ok, %Post{}}

      iex> delete_post(post)
      {:error, %Ecto.Changeset{}}

  """
  def delete_post(%Post{} = post) do
    Repo.delete(post)
  end

  @doc """
  Returns an `%Ecto.Changeset{}` for tracking post changes.

  ## Examples

      iex> change_post(post)
      %Ecto.Changeset{data: %Post{}}

  """
  def change_post(%Post{} = post, attrs \\ %{}) do
    Post.changeset(post, attrs)
  end

  # Returns nil if not found
  def bookmarked?(user_id, post_id) do
    Repo.get_by(Bookmarks, [user_id: user_id, post_id: post_id])
  end

  def create_bookmark(user, post) do
    user = Ecto.build_assoc(user, :posts_bookmarks)
    post = Ecto.build_assoc(post, :posts_bookmarks, user)

    Repo.insert(post)
  end

  def unbookmark(bookmarked?) do
    Repo.delete(bookmarked?)
  end

  def count_user_saved(user) do
    Bookmarks
    |> where(user_id: ^user.id)
    |> select([b], count(b.id))
    |> Repo.one
  end
end

The following functions were added:

list_saved_profile_posts/3 to get all the paginated saved posts.
bookmarked?/2 to check if a bookmark exists.
create_bookmark/2 to create a bookmark.
unbookmark/1 to delete a bookmark.
count_user_saved/1 to get total saved posts for given user.

Also to all the get posts functions, we are preloading posts bookmarks list, so we can send that list to the bookmarks component to set the button that we are going to use for the functionality.

Inside lib/instagram_clone_web/live/post_live/ create a file named bookmark_component.ex and add the following:

defmodule InstagramCloneWeb.PostLive.BookmarkComponent do
  use InstagramCloneWeb, :live_component

  alias InstagramClone.Posts

  @impl true
  def update(assigns, socket) do
    get_btn_status(socket, assigns)
  end

  @impl true
  def render(assigns) do
    ~L"""
    <button
      phx-target="<%= @myself %>"
      phx-click="toggle-status"
      class="h-8 w-8 ml-auto focus:outline-none">

      <%= @icon %>

    </button>
    """
  end

  @impl true
  def handle_event("toggle-status", _params, socket) do
    current_user = socket.assigns.current_user
    post = socket.assigns.post
    bookmarked? = Posts.bookmarked?(current_user.id, post.id)

    if bookmarked? do
      unbookmark(socket, bookmarked?)
    else
      bookmark(socket, current_user, post)
    end
  end

  defp unbookmark(socket, bookmarked?) do
    Posts.unbookmark(bookmarked?)

    {:noreply,
      socket
      |> assign(icon: bookmark_icon(socket.assigns))}
  end

  defp bookmark(socket, current_user, post) do
    Posts.create_bookmark(current_user, post)

    {:noreply,
      socket
      |> assign(icon: bookmarked_icon(socket.assigns))}
  end

  defp get_btn_status(socket, assigns) do
    if assigns.current_user.id in assigns.post.posts_bookmarks do
      get_socket_assigns(socket, assigns, bookmarked_icon(assigns))
    else
      get_socket_assigns(socket, assigns, bookmark_icon(assigns))
    end
  end

  defp get_socket_assigns(socket, assigns, icon) do
    {:ok,
      socket
      |> assign(assigns)
      |> assign(icon: icon)}
  end

  defp bookmark_icon(assigns) do
    ~L"""
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
    </svg>
    """
  end

  defp bookmarked_icon(assigns) do
    ~L"""
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z" />
    </svg>
    """
  end

end

Inside lib/instagram_clone_web/live/post_live/show.html.leex on line 94 change the div with the bookmark icon to the following:

        <%= if @current_user do %>
          <%= live_component @socket,
              InstagramCloneWeb.PostLive.BookmarkComponent,
              id: @post.id,
              post: @post,
              current_user: @current_user %>
        <% else %>
          <%= link to: Routes.user_session_path(@socket, :new), class: "w-8 h-8 ml-auto focus:outline-none" do %>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
            </svg>
          <% end %>
        <% end %>

Inside lib/instagram_clone_web/live/page_post_feed_component.html.leex on line 41, change the div containing the bookmark icon to the following:

      <%= live_component @socket,
              InstagramCloneWeb.PostLive.BookmarkComponent,
              id: @post.id,
              post: @post,
              current_user: @current_user %>

Inside lib/instagram_clone_web/router.ex on line 72 add the following route:

     live "/:username/saved", UserLive.Profile, :saved

Inside lib/instagram_clone_web/live/header_nav_component.html.leex on line 102:

              <%= live_redirect to: Routes.user_profile_path(@socket, :saved, @current_user.username) do %>
                <li class="py-2 px-4 hover:bg-gray-50">Saved</li>
              <% end %>

Update lib/instagram_clone_web/live/user_live/profile.ex to the following:

defmodule InstagramCloneWeb.UserLive.Profile do
  use InstagramCloneWeb, :live_view

  alias InstagramClone.Accounts
  alias InstagramCloneWeb.UserLive.FollowComponent
  alias InstagramClone.Posts

  @impl true
  def mount(%{"username" => username}, session, socket) do
    socket = assign_defaults(session, socket)
    user = Accounts.profile(username)

    {:ok,
      socket
      |> assign(page: 1, per_page: 15)
      |> assign(user: user)
      |> assign(page_title: "#{user.full_name} (@#{user.username})"),
      temporary_assigns: [posts: []]}
  end

  defp assign_posts(socket) do
    socket
    |> assign(posts:
      Posts.list_profile_posts(
        page: socket.assigns.page,
        per_page: socket.assigns.per_page,
        user_id: socket.assigns.user.id
      )
    )
  end

  defp assign_saved_posts(socket) do
    socket
    |> assign(posts:
      Posts.list_saved_profile_posts(
        page: socket.assigns.page,
        per_page: socket.assigns.per_page,
        user_id: socket.assigns.user.id
      )
    )
  end

  @impl true
  def handle_event("load-more-profile-posts", _, socket) do
    {:noreply, socket |> load_posts}
  end

  defp load_posts(socket) do
    total_posts = get_total_posts_count(socket)
    page = socket.assigns.page
    per_page = socket.assigns.per_page
    total_pages = ceil(total_posts / per_page)

    if page == total_pages do
      socket
    else
      socket
      |> update(:page, &(&1 + 1))
      |> get_posts()
    end
  end

  defp get_total_posts_count(socket) do
    if socket.assigns.saved_page? do
      Posts.count_user_saved(socket.assigns.user)
    else
      socket.assigns.user.posts_count
    end
  end

  defp get_posts(socket) do
    if socket.assigns.saved_page? do
      assign_saved_posts(socket)
    else
      assign_posts(socket)
    end
  end

  @impl true
  def handle_params(_params, _uri, socket) do
    {:noreply, apply_action(socket, socket.assigns.live_action)}
  end

  @impl true
  def handle_info({FollowComponent, :update_totals, updated_user}, socket) do
    {:noreply, apply_msg_action(socket, socket.assigns.live_action, updated_user)}
  end

  defp apply_msg_action(socket, :follow_component, updated_user) do
    socket |> assign(user: updated_user)
  end

  defp apply_msg_action(socket, _, _updated_user) do
    socket
  end

  defp apply_action(socket, :index) do
    selected_link_styles = "text-gray-600 border-t-2 border-black -mt-0.5"
    live_action = get_live_action(socket.assigns.user, socket.assigns.current_user)

    socket
    |> assign(selected_index: selected_link_styles)
    |> assign(selected_saved: "text-gray-400")
    |> assign(saved_page?: false)
    |> assign(live_action: live_action)
    |> show_saved_profile_link?()
    |> assign_posts()
  end

  defp apply_action(socket, :saved) do
    selected_link_styles = "text-gray-600 border-t-2 border-black -mt-0.5"

    socket
    |> assign(selected_index: "text-gray-400")
    |> assign(selected_saved: selected_link_styles)
    |> assign(live_action: :edit_profile)
    |> assign(saved_page?: true)
    |> show_saved_profile_link?()
    |> redirect_when_not_my_saved()
    |> assign_saved_posts()
  end

  defp apply_action(socket, :following) do
    following = Accounts.list_following(socket.assigns.user)
    socket |> assign(following: following)
  end

  defp apply_action(socket, :followers) do
    followers = Accounts.list_followers(socket.assigns.user)
    socket |> assign(followers: followers)
  end

  defp redirect_when_not_my_saved(socket) do
    username = socket.assigns.current_user.username

    if socket.assigns.my_saved? do
      socket
    else
      socket
      |> push_redirect(to: Routes.user_profile_path(socket, :index, username))
    end
  end

  defp show_saved_profile_link?(socket) do
    user = socket.assigns.user
    current_user = socket.assigns.current_user

    if current_user && current_user.id == user.id do
      socket |> assign(my_saved?: true)
    else
      socket |> assign(my_saved?: false)
    end
  end

  defp get_live_action(user, current_user) do
    cond do
      current_user && current_user.id == user.id -> :edit_profile
      current_user -> :follow_component
      true -> :login_btn
    end
  end

end

The following functions were added:

assign_posts/1 to get and assigned profile saved posts.
apply_action(socket, :saved) to assign saved posts when saved route page, and live_action is assigned to :edit_profile to display the edit profile button.
redirect_when_not_my_saved/1 redirects when trying to go directly to a profile saved that doesn't belong to current user.
show_saved_profile_link?/1 assigns my_saved? if current user owns profile.
get_total_posts_count/1 to determine which total posts count we have to get.
get_posts/1 to determine which posts to get.

We are no longer assigning posts in our mount function, it is done in our index and saved actions. Also, in those functions we are assigning the links styles and saved_page? to determine which posts we have to load more when the hook in our footer gets triggered.

Update lib/instagram_clone_web/live/user_live/profile.html.leex to the following:

<%= if @live_action == :following do %>
  <%= live_modal @socket, InstagramCloneWeb.UserLive.Profile.FollowingComponent,
    width: "w-1/4",
    current_user: @current_user,
    following: @following,
    return_to: Routes.user_profile_path(@socket, :index, @user.username) %>
<% end %>

<%= if @live_action == :followers do %>
  <%= live_modal @socket, InstagramCloneWeb.UserLive.Profile.FollowersComponent,
    width: "w-1/4",
    current_user: @current_user,
    followers: @followers,
    return_to: Routes.user_profile_path(@socket, :index, @user.username) %>
<% end %>

<header class="flex justify-center px-10">
  <!-- Profile Picture Section -->
  <section class="w-1/4">
      <%= img_tag @user.avatar_url,
          class: "w-40 h-40 rounded-full object-cover object-center" %>
  </section>
  <!-- END Profile Picture Section -->

  <!-- Profile Details Section -->
  <section class="w-3/4">
    <div class="flex px-3 pt-3">
        <h1 class="truncate md:overflow-clip text-2xl md:text-2xl text-gray-500 mb-3"><%= @user.username %></h1>
        <span class="ml-11">
          <%= if @live_action == :edit_profile do %>
            <%= live_patch "Edit Profile",
                to: Routes.live_path(@socket, InstagramCloneWeb.UserLive.Settings),
                class: "py-1 px-2 border-2 rounded font-semibold hover:bg-gray-50" %>
          <% end %>

          <%= if @live_action == :follow_component do %>
            <%= live_component @socket,
                InstagramCloneWeb.UserLive.FollowComponent,
                id: @user.id,
                user: @user,
                current_user: @current_user %>
          <% end %>

          <%= if @live_action == :login_btn do %>
            <%= link "Follow", to: Routes.user_session_path(@socket, :new), class: "user-profile-follow-btn" %>
          <% end %>
        </span>
    </div>

    <div>
      <ul class="flex p-3">
          <li><b><%= @user.posts_count %></b> Posts</li>
          <%= live_patch to: Routes.user_profile_path(@socket, :followers, @user.username) do %>
            <li class="ml-11"><b><%= @user.followers_count %></b> Followers</li>
          <% end %>
          <%= live_patch to: Routes.user_profile_path(@socket, :following, @user.username) do %>
            <li class="ml-11"><b><%= @user.following_count %></b> Following</li>
          <% end %>
      </ul>
    </div>

    <div class="p-3">
      <h2 class="text-md text-gray-600 font-bold"><%= @user.full_name %></h2>
      <%= if @user.bio do %>
        <p class="max-w-full break-words"><%= @user.bio %></p>
      <% end %>
      <%= if @user.website do %>
        <%= link display_website_uri(@user.website),
          to: @user.website,
          target: "_blank", rel: "noreferrer",
          class: "text-blue-700" %>
      <% end %>
    </div>
  </section>
  <!-- END Profile Details Section -->
</header>

<section class="border-t-2 mt-5">
  <ul class="flex justify-center text-center space-x-20">
    <%= live_redirect to: Routes.user_profile_path(@socket, :index, @user.username) do %>
      <li class="pt-4 px-1 text-sm <%= @selected_index %>">
        POSTS
      </li>
    <% end %>
    <li class="pt-4 px-1 text-sm text-gray-400">
      IGTV
    </li>
    <%= if @my_saved? do %>
      <%= live_redirect to: Routes.user_profile_path(@socket, :saved, @user.username) do %>
        <li class="pt-4 px-1 text-sm <%= @selected_saved %>">
          SAVED
        </li>
      <% end %>
    <% end %>
    <li class="pt-4 px-1 text-sm text-gray-400">
      TAGGED
    </li>
  </ul>
</section>

<!-- Gallery Grid -->
<div id="posts" phx-update="append" class="mt-9 grid gap-8 grid-cols-3">
  <%= for post <- @posts do %>
    <%= live_redirect img_tag(post.photo_url, class: "object-cover h-80 w-full"),
      id: post.url_id,
      to: Routes.live_path(@socket, InstagramCloneWeb.PostLive.Show, post.url_id) %>
  <% end %>
</div>

<div
  id="profile-posts-footer"
  class="flex justify-center"
  phx-hook="ProfilePostsScroll">

  <svg class="animate-spin mr-3 h-8 w-8 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  Loading...

</div>

Posts and saved links were added, saved will only be displayed if the current user owns the profile, and we added a loading icon to our load more footer.

I really appreciate your time, thank you so much for reading.

CHECK OUT THE INSTAGRAM CLONE GITHUB REPO

Let's Build An Instagram Clone With The PETAL(Phoenix, Elixir, TailwindCSS, AlpineJS, LiveView) Stack [PART 7]

Anthony Gonzalez — Thu, 20 May 2021 20:37:27 +0000

In part 6 we added the homepage, in this part, we will work on the search functionality in our top header navigation menu. You can catch up with the Instagram Clone GitHub Repo.

The search functionality will give the ability to search users by username or full name, we will only need a map with the avatar URL, username, and full name, let's add a function to get that in our accounts context. Inside lib/instagram_clone/accounts.ex:


...

  def search_users(q) do
    User
    |> where([u], ilike(u.username, ^"%#{q}%"))
    |> or_where([u], ilike(u.full_name, ^"%#{q}%"))
    |> select([u], map(u, [:avatar_url, :username, :full_name]))
    |> Repo.all()
  end

...

We will be handling the event to search inside our header nav component, open lib/instagram_clone_web/templates/layout/live.html.leex, and let's send an ID to our component to be able to handle the event:

<%= if @current_user do %>
  <%= live_component @socket, InstagramCloneWeb.HeaderNavComponent, id: 1, current_user: @current_user %>

<% else %>
  <%= if @live_action !== :root_path do %>
    <%= live_component @socket, InstagramCloneWeb.HeaderNavComponent, id: 1, current_user: @current_user %>
  <% end %>
<% end %>

<main role="main" class="container mx-auto max-w-full md:w-11/12 2xl:w-6/12 pt-24">
  <p class="alert alert-info" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="info"><%= live_flash(@flash, :info) %></p>

  <p class="alert alert-danger" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="error"><%= live_flash(@flash, :error) %></p>

  <%= @inner_content %>
</main>

Inside lib/instagram_clone_web/live/header_nav_component.html.leex let's use AlpineJs to open the UL where we are going to display the results when the input has at least one letter, if nothing is inside or click away the input, nothing will be displayed. Let's use the phx-change form events to run our search, also we will assign to our socket a @overflow_y_scroll_ul to display the scrollbar when results are greater than 6.

    <div x-data="{open: false, inputText: null}" class="w-2/5 flex justify-end relative">
      <form id="search-users-form" phx-change="search_users" phx-target="<%= @myself %>">
        <input
          phx-debounce="800"
          x-model="inputText"
          x-on:input="[(inputText.length != 0) ? open = true : open = false]"
          name="q"
          type="search"
          placeholder="Search"
          autocomplete="off"
          class="h-7 bg-gray-50 shadow-sm border-gray-300 focus:ring-gray-300 focus:ring-opacity-50 focus:border-gray-400  px-0.5 rounded-sm">
      </form>

      <ul
      x-show="open"
      @click.away="open = false"
      class="<%= @overflow_y_scroll_ul %> absolute top-10 -right-24 w-96 shadow-md h-96 bg-gray-50">

      </ul>
    </div>

Inside the UL that we will be displaying our search results we will need 3 assigns, @searched_users that will be the results which we are going to loop through, @while_searching_users? that will be a boolean to determine when to display a loading indicator in the case that the connection is slow or takes a while, for user interface friendly feedback, @users_not_found? another boolean to display a no results found message.


      <ul
      x-show="open"
      @click.away="open = false"
      class="<%= @overflow_y_scroll_ul %> absolute top-10 -right-24 w-96 shadow-md h-96 bg-gray-50">

        <%= for user <- @searched_users do %>
          <%= live_redirect to: Routes.user_profile_path(@socket, :index, user.username) do %>
            <li class="flex items-center px-4 py-3 hover:bg-gray-100">
              <%= img_tag Avatar.get_thumb(user.avatar_url), class: "w-10 h-10 rounded-full object-cover object-center" %>
              <div class="ml-3">
                <h2 class="truncate font-bold text-sm text-gray-500"><%= user.username %></h2>
                <h3 class="truncate text-sm text-gray-500"><%= user.full_name %></h3>
              </div>
            </li>
          <% end %>
        <% end %>

        <%= if @while_searching_users? do %>
          <li class="flex justify-center items-center h-full">
            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          </li>
        <% end %>

        <%= if @users_not_found? do %>
          <li class="text-sm text-gray-400 flex justify-center items-center h-full">No results found.</li>
        <% end %>
      </ul>

Our updated lib/instagram_clone_web/live/header_nav_component.html.leex should look like the following:

<div class="h-14 border-b-2 flex fixed w-full bg-white z-40">
  <header class="flex items-center container mx-auto max-w-full md:w-11/12 2xl:w-6/12">
    <%= live_redirect to: Routes.page_path(@socket, :index) do %>
      <h1 class="text-2xl font-bold italic">#InstagramClone</h1>
    <% end %>
    <div x-data="{open: false, inputText: null}" class="w-2/5 flex justify-end relative">
      <form id="search-users-form" phx-change="search_users" phx-target="<%= @myself %>">
        <input
          phx-debounce="800"
          x-model="inputText"
          x-on:input="[(inputText.length != 0) ? open = true : open = false]"
          name="q"
          type="search"
          placeholder="Search"
          autocomplete="off"
          class="h-7 bg-gray-50 shadow-sm border-gray-300 focus:ring-gray-300 focus:ring-opacity-50 focus:border-gray-400  px-0.5 rounded-sm">
      </form>

      <ul
      x-show="open"
      @click.away="open = false"
      class="<%= @overflow_y_scroll_ul %> absolute top-10 -right-24 w-96 shadow-md h-96 bg-gray-50">

        <%= for user <- @searched_users do %>
          <%= live_redirect to: Routes.user_profile_path(@socket, :index, user.username) do %>
            <li class="flex items-center px-4 py-3 hover:bg-gray-100">
              <%= img_tag Avatar.get_thumb(user.avatar_url), class: "w-10 h-10 rounded-full object-cover object-center" %>
              <div class="ml-3">
                <h2 class="truncate font-bold text-sm text-gray-500"><%= user.username %></h2>
                <h3 class="truncate text-sm text-gray-500"><%= user.full_name %></h3>
              </div>
            </li>
          <% end %>
        <% end %>

        <%= if @while_searching_users? do %>
          <li class="flex justify-center items-center h-full">
            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          </li>
        <% end %>

        <%= if @users_not_found? do %>
          <li class="text-sm text-gray-400 flex justify-center items-center h-full">No results found.</li>
        <% end %>
      </ul>
    </div>
    <nav class="w-3/5 relative">
      <ul x-data="{open: false}" class="flex justify-end">
        <%= if @current_user do %>
          <li class="w-7 h-7 text-gray-600">
            <%= live_redirect to: Routes.page_path(@socket, :index) do %>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
              </svg>
            <% end %>
          </li>
          <li class="w-7 h-7 ml-6 text-gray-600">
            <%= live_redirect to: Routes.live_path(@socket, InstagramCloneWeb.PostLive.New) do %>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            <% end %>
          </li>
          <li class="w-7 h-7 ml-6 text-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
            </svg>
          </li>
          <li class="w-7 h-7 ml-6 text-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
            </svg>
          </li>
          <li class="w-7 h-7 ml-6 text-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
            </svg>
          </li>
          <li
            @click="open = true"
            class="w-7 h-7 ml-6 shadow-md rounded-full overflow-hidden cursor-pointer"
          >
            <%= img_tag InstagramClone.Uploaders.Avatar.get_thumb(@current_user.avatar_url),
            class: "w-full h-full object-cover object-center" %>
          </li>
          <ul class="absolute top-14 w-56 bg-white shadow-md text-sm -right-8"
              x-show="open"
              @click.away="open = false"
              x-transition:enter="transition ease-out duration-200"
              x-transition:enter-start="opacity-0 transform scale-90"
              x-transition:enter-end="opacity-100 transform scale-100"
              x-transition:leave="transition ease-in duration-200"
              x-transition:leave-start="opacity-100 transform scale-100"
              x-transition:leave-end="opacity-0 transform scale-90"
            >
              <%= live_redirect to: Routes.user_profile_path(@socket, :index, @current_user.username) do %>
                <li class="py-2 px-4 hover:bg-gray-50">Profile</li>
              <% end %>
              <li class="py-2 px-4 hover:bg-gray-50">Saved</li>
              <%= live_redirect to: Routes.live_path(@socket, InstagramCloneWeb.UserLive.Settings) do %>
                <li class="py-2 px-4 hover:bg-gray-50">Settings</li>
              <% end %>
              <%= link to: Routes.user_session_path(@socket, :delete), method: :delete do %>
                <li class="border-t-2 py-2 px-4 hover:bg-gray-50">Log Out</li>
              <% end %>
            </ul>
        <% else %>
          <li>
            <%= link "Log In", to: Routes.user_session_path(@socket, :new), class: "w-24 py-1 px-3 border-none shadow rounded text-gray-50 hover:bg-light-blue-600 bg-light-blue-500 font-semibold" %>
          </li>
          <li>
            <%= link "Sign Up", to: Routes.user_registration_path(@socket, :new), class: "w-24 py-1 px-3 border-none text-light-blue-500 hover:text-light-blue-600 font-semibold" %>
          </li>
        <% end %>
      </ul>
    </nav>
  </header>
</div>

Inside lib/instagram_clone_web/live/header_nav_component.ex:

defmodule InstagramCloneWeb.HeaderNavComponent do
  use InstagramCloneWeb, :live_component

  alias InstagramClone.Uploaders.Avatar

  @impl true
  def mount(socket) do
    {:ok,
      socket
      |> assign(while_searching_users?: false)
      |> assign(users_not_found?: false)
      |> assign(overflow_y_scroll_ul: "")
      |> assign(searched_users: [])}
  end

  @impl true
  def handle_event("search_users", %{"q" => search}, socket) do
    if search == "" do
      {:noreply, socket}
    else
      send(self(), {__MODULE__, :search_users_event, search})

      {:noreply,
        socket
        |> assign(users_not_found?: false)
        |> assign(searched_users: [])
        |> assign(overflow_y_scroll_ul: "")
        |> assign(while_searching_users?: true)}
    end
  end

end

In our handle event function, first, we are checking if our param is an empty string, nothing will happen. When the param is not empty first we will send a message with the search param to run the search in our parent LiveView, that way we can display the loading indicator while searching, we have to reset our assigns every time that the form is changed and make while_searching_users? boolean true to display the loading indicator while searching.

We have to send the message because if we try to do it in our header nav component socket, the assigns happen at the same time first, so if we do that we will not be able to display the loading indicator while searching, and inside a component, we cannot handle_info messages it has to be sent to the parent and update the assigns in our parent back to the component.

The header navigation component is used on every page, so instead of handling the message on each LiveView, let's just do it once for every LiveView, inside lib/instagram_clone_web.ex on line 45, inside the live_view() function, add the following:


...

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {InstagramCloneWeb.LayoutView, "live.html"}

      unquote(view_helpers())
      import InstagramCloneWeb.LiveHelpers

      alias InstagramClone.Accounts.User
      alias InstagramClone.Accounts

      @impl true
      def handle_info(%{event: "logout_user", payload: %{user: %User{id: id}}}, socket) do
        with %User{id: ^id} <- socket.assigns.current_user do
          {:noreply,
            socket
            |> redirect(to: "/")
            |> put_flash(:info, "Logged out successfully.")}
        else
          _any -> {:noreply, socket}
        end
      end

      @impl true
      def handle_info({InstagramCloneWeb.HeaderNavComponent, :search_users_event, search}, socket) do
        case Accounts.search_users(search) do
          [] ->
            send_update(InstagramCloneWeb.HeaderNavComponent,
              id: 1,
              searched_users: [],
              users_not_found?: true,
              while_searching_users?: false
            )

            {:noreply, socket}

          users ->
            send_update(InstagramCloneWeb.HeaderNavComponent,
              id: 1,
              searched_users: users,
              users_not_found?: false,
              while_searching_users?: false,
              overflow_y_scroll_ul: check_search_result(users)
            )

            {:noreply, socket}
        end
      end

      defp check_search_result(users) do
        if length(users) > 6, do: "overflow-y-scroll", else: ""
      end
    end
  end

...

We create a case with the function that we added in our accounts context, we send_update/3 to our header nav component, setting while_searching_users? to false on each case to not display the loading indicator because the search is done.

That's it, now you have a fully functional search input, a lot to be done, a lot of features that can be added, but we have come a long way, and we have a big app that we can be proud of, until next time.

I really appreciate your time, thank you so much for reading.

CHECKOUT THE INSTAGRAM CLONE GITHUB REPO

Let's Build An Instagram Clone With The PETAL(Phoenix, Elixir, TailwindCSS, AlpineJS, LiveView) Stack [PART 6]

Anthony Gonzalez — Mon, 17 May 2021 23:46:41 +0000

In part 5 we added the show-post page, in this part, we will work on the homepage. You can catch up with the Instagram Clone GitHub Repo.

Let's start by adding a function to our posts context to get the feed and another one to get the total number of the feed, open lib/instagram_clone/posts.ex:

  @doc """
  Returns the list of paginated posts of a given user id
  And posts of following list of given user id
  With user and likes preloaded
  With 2 most recent comments preloaded with user and likes
  User, page, and per_page are given with the socket assigns
  ## Examples

      iex> get_accounts_feed(following_list, assigns)
      [%{photo_url: "", url_id: ""}, ...]

  """
  def get_accounts_feed(following_list, assigns) do
    user = assigns.current_user
    page = assigns.page
    per_page = assigns.per_page
    query =
      from c in Comment,
      select: %{id: c.id, row_number: over(row_number(), :posts_partition)},
      windows: [posts_partition: [partition_by: :post_id, order_by: [desc: :id]]]
    comments_query =
      from c in Comment,
      join: r in subquery(query),
      on: c.id == r.id and r.row_number <= 2

    Post
    |> where([p], p.user_id in ^following_list)
    |> or_where([p], p.user_id == ^user.id)
    |> limit(^per_page)
    |> offset(^((page - 1) * per_page))
    |> order_by(desc: :id)
    |> preload([:user, :likes, comments: ^{comments_query, [:user, :likes]}])
    |> Repo.all()
  end

  def get_accounts_feed_total(following_list, assigns) do
    user = assigns.current_user

    Post
    |> where([p], p.user_id in ^following_list)
    |> or_where([p], p.user_id == ^user.id)
    |> select([p], count(p.id))
    |> Repo.one()
  end

We need the list of following, inside lib/instagram_clone/accounts.ex add the following function:

  @doc """
  Returns the list of following user ids

  ## Examples

      iex> get_following_list(user)
      [3, 2, 1]
  """
  def get_following_list(user) do
    Follows
    |> select([f], f.followed_id)
    |> where(follower_id: ^user.id)
    |> Repo.all()
  end

Inside lib/instagram_clone_web/live/page_live.ex let's assign the feed:


  alias InstagramClone.Uploaders.Avatar
  alias InstagramClone.Accounts
  alias InstagramCloneWeb.UserLive.FollowComponent
  alias InstagramClone.Posts
  alias InstagramCloneWeb.Live.LikeComponent

  @impl true
  def mount(_params, session, socket) do
    socket = assign_defaults(session, socket)

    {:ok,
      socket
      |> assign(page: 1, per_page: 15),
      temporary_assigns: [user_feed: []]}
  end

  @impl true
  def handle_params(_params, _uri, socket) do
    {:noreply,
      socket
      |> assign(live_action: apply_action(socket.assigns.current_user))
      |> assign_posts()}
  end

  defp apply_action(current_user) do
    if !current_user, do: :root_path
  end

  defp assign_posts(socket) do
    if socket.assigns.current_user do
      current_user = socket.assigns.current_user
      following_list = Accounts.get_following_list(current_user)
      accounts_feed_total = Posts.get_accounts_feed_total(following_list, socket.assigns)

      socket
      |> assign(following_list: following_list)
      |> assign(accounts_feed_total: accounts_feed_total)
      |> assign_user_feed()
    else
      socket
    end
  end

  defp assign_user_feed(socket, following_list) do
    user_feed = Posts.get_accounts_feed(socket.assigns.following_list, socket.assigns)
    socket |> assign(user_feed: user_feed)
  end

Page and per page were assigned to the socket in our mount function. We are checking if a user is logged in to get the following list and pass it to the assign feed function to return the socket with the feed assigned, we do that in our handle params function.

Now let's create a component for posts feed, inside our live folder add the following files:

lib/instagram_clone_web/live/page_post_feed_component.ex
lib/instagram_clone_web/live/page_post_feed_component.html.leex

Inside lib/instagram_clone_web/live/page_live.html.leex:

<%= if @current_user do %>
  <section class="flex">
    <div id="user-feed" class="w-3/5" phx-update="append">
      <%= for post <- @user_feed do %>
        <%= live_component @socket,
          InstagramCloneWeb.Live.PagePostFeedComponent,
          post: post,
          id: post.id,
          current_user: @current_user %>
      <% end %>
    </div>

  </section>

  <div
    id="profile-posts-footer"
    class="flex justify-center"
    phx-hook="ProfilePostsScroll">
  </div>
<% else %>
  <%= live_component @socket,
    InstagramCloneWeb.PageLiveComponent,
    id: 1 %>
<% end %>

Inside lib/instagram_clone_web/live/page_post_feed_component.ex:

defmodule InstagramCloneWeb.Live.PagePostFeedComponent do
  use InstagramCloneWeb, :live_component

  alias InstagramClone.Uploaders.Avatar
  alias InstagramClone.Comments
  alias InstagramClone.Comments.Comment

  @impl true
  def mount(socket) do
    {:ok,
      socket
      |> assign(changeset: Comments.change_comment(%Comment{})),
      temporary_assigns: [comments: []]}
  end

  @impl true
  def handle_event("save", %{"comment" => comment_param}, socket) do
    %{"body" => body} = comment_param
    current_user = socket.assigns.current_user
    post = socket.assigns.post

    if body == "" do
      {:noreply, socket}
    else
      comment = Comments.create_comment(current_user, post, comment_param)
      {:noreply,
        socket
        |> update(:comments, fn comments -> [comment | comments] end)
        |> assign(changeset: Comments.change_comment(%Comment{}))}
    end
  end
end

We are setting the form changeset and temporary comments that we will use to append new comments. The save handle function is the same one that we used on our show page.

Inside lib/instagram_clone_web/live/page_post_feed_component.html.leex:

<div class="mb-16 shadow" id="post-<%= @post.id %>">
  <div class="flex p-4 items-center">
    <!-- Post header section -->
    <%= live_redirect to: Routes.user_profile_path(@socket, :index, @post.user.username) do %>
      <%= img_tag Avatar.get_thumb(@post.user.avatar_url), class: "w-8 h-8 rounded-full object-cover object-center" %>
    <% end %>
    <div class="ml-3">
      <%= live_redirect @post.user.username,
        to: Routes.user_profile_path(@socket, :index, @post.user.username),
        class: "truncate font-bold text-sm text-gray-500 hover:underline" %>
    </div>
    <!-- End post header section -->
  </div>
  <!-- Post Image section -->
  <%= img_tag @post.photo_url,
          class: "w-full object-contain h-full shadow-sm" %>
  <!-- End Post Image section -->

  <div class="w-full">
    <!-- Action icons section -->
    <div class="flex pl-4 pr-2 pt-2">
      <%= live_component @socket,
          InstagramCloneWeb.Live.LikeComponent,
          id: @post.id,
          liked: @post,
          w_h: "w-8 h-8",
          current_user: @current_user %>

      <%= live_redirect to: Routes.live_path(@socket, InstagramCloneWeb.PostLive.Show, @post.url_id) do %>
        <div class="ml-4 w-8 h-8">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        </div>
      <% end %>
      <div class="ml-4 w-8 h-8 cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
        </svg>
      </div>
      <div class="w-8 h-8 ml-auto cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
        </svg>
      </div>
    </div>
    <!-- End Action icons section -->

    <!-- Description section -->
    <button class="px-5 text-xs text-gray-500 font-bold focus:outline-none"><%= @post.total_likes %> likes</button>
    <!-- End Description Section -->
  </div>

  <%= if @post.description do %>
    <!-- Description section -->
    <div class="flex mt-2">
      <div class="px-4 w-11/12">
        <%= live_redirect @post.user.username,
        to: Routes.user_profile_path(@socket, :index, @post.user.username),
        class: "font-bold text-sm text-gray-500 hover:underline" %>
        <span class="text-sm text-gray-700">
          <p class="inline"><%= @post.description %></p></span>
        </span>
      </div>

    </div>
  <!-- End Description Section -->
  <% end %>

  <%= if @post.total_comments > 2 do %>
    <%= live_redirect to: Routes.live_path(@socket, InstagramCloneWeb.PostLive.Show, @post.url_id) do %>
      <h6 class="px-5 text-sm text-gray-400">
        View all <%= @post.total_comments %> comments
      </h6>
    <% end %>
  <% end %>


  <section id="comments" phx-update="append">
    <%= for comment <- @post.comments do %>
      <div class="flex" id="comment-<%= comment.id %>">
        <div class="px-4 w-11/12">
          <%= live_redirect comment.user.username,
                to: Routes.user_profile_path(@socket, :index, comment.user.username),
                class: "truncate font-bold text-sm text-gray-500 hover:underline" %>
          <span class="text-sm text-gray-700">
            <p class="inline"><%= comment.body %></p>
          </span>
        </div>

        <%= live_component @socket,
            InstagramCloneWeb.Live.LikeComponent,
            id: comment.id,
            liked: comment,
            w_h: "w-5 h-5",
            current_user: @current_user %>
      </div>
    <% end %>
    <%= for comment <- @comments do %>
      <div class="flex" id="comment-<%= comment.id %>">
        <div class="px-4 w-11/12">
          <%= live_redirect comment.user.username,
                to: Routes.user_profile_path(@socket, :index, comment.user.username),
                class: "truncate font-bold text-sm text-gray-500 hover:underline" %>
          <span class="text-sm text-gray-700">
            <p class="inline"><%= comment.body %></p>
          </span>
        </div>

        <%= live_component @socket,
            InstagramCloneWeb.Live.LikeComponent,
            id: comment.id,
            liked: comment,
            w_h: "w-5 h-5",
            current_user: @current_user %>
      </div>
    <% end %>
  </section>


  <h6 class="px-5 py-2 text-xs text-gray-400"><%= Timex.from_now(@post.inserted_at) %></h6>

  <!-- Comment input section -->
  <%= f = form_for @changeset, "#",
    id: @id,
    phx_submit: "save",
    phx_target: @myself,
    class: "p-2 flex items-center mt-3 border-t-2 border-gray-100",
    x_data: "{
      disableSubmit: true,
      inputText: null,
      displayCommentBtn: (refs) => {
        refs.cbtn.classList.remove('opacity-30')
        refs.cbtn.classList.remove('cursor-not-allowed')
      },
      disableCommentBtn: (refs) => {
        refs.cbtn.classList.add('opacity-30')
        refs.cbtn.classList.add('cursor-not-allowed')
      }
    }" %>
    <div class="w-full">
      <%= textarea f, :body,
        class: "w-full border-0 focus:ring-transparent resize-none",
        rows: 1,
        placeholder: "Add a comment...",
        aria_label: "Add a comment...",
        autocorrect: "off",
        autocomplete: "off",
        x_model: "inputText",
        "@input": "[
          (inputText.length != 0) ? [disableSubmit = false, displayCommentBtn($refs)] : [disableSubmit = true, disableCommentBtn($refs)]
        ]" %>
    </div>
    <div>
      <%= submit "Post",
        phx_disable_with: "Posting...",
        class: "text-light-blue-500 opacity-30 cursor-not-allowed font-bold pb-2 text-sm focus:outline-none",
        x_ref: "cbtn",
        "@click": "inputText = null",
        "x_bind:disabled": "disableSubmit" %>
    </div>
  </form>
</div>

We are using the same form to add new comments that we used on our show page, and we are looping through the post comments and the temporary comments to be able to update the comments when a new one is added.

We need to handle the messages sent from the like component when we like a post or a comment, also we have to handle the event triggered with a hook to load more posts, update lib/instagram_clone_web/live/page_live.ex to the following:

defmodule InstagramCloneWeb.PageLive do
  use InstagramCloneWeb, :live_view

  alias InstagramClone.Uploaders.Avatar
  alias InstagramClone.Accounts
  alias InstagramCloneWeb.UserLive.FollowComponent
  alias InstagramClone.Posts
  alias InstagramCloneWeb.Live.LikeComponent


  @impl true
  def mount(_params, session, socket) do
    socket = assign_defaults(session, socket)

    {:ok,
      socket
      |> assign(page: 1, per_page: 15),
      temporary_assigns: [user_feed: []]}
  end

  @impl true
  def handle_params(_params, _uri, socket) do
    {:noreply,
      socket
      |> assign(live_action: apply_action(socket.assigns.current_user))
      |> assign_posts()}
  end

  @impl true
  def handle_event("load-more-profile-posts", _, socket) do
    {:noreply, socket |> load_posts}
  end

  defp load_posts(socket) do
    total_posts = socket.assigns.accounts_feed_total
    page = socket.assigns.page
    per_page = socket.assigns.per_page
    total_pages = ceil(total_posts / per_page)

    if page == total_pages do
      socket
    else
      socket
      |> update(:page, &(&1 + 1))
      |> assign_user_feed()
    end
  end

  @impl true
  def handle_info({LikeComponent, :update_comment_likes, _}, socket) do
    {:noreply, socket}
  end

  @impl true
  def handle_info({LikeComponent, :update_post_likes, post}, socket) do
    post_feed = Posts.get_post_feed!(post.id)
    {:noreply,
      socket
      |> update(:user_feed, fn user_feed -> [post_feed | user_feed] end)}
  end

  defp apply_action(current_user) do
    if !current_user, do: :root_path
  end

  defp assign_posts(socket) do
    if socket.assigns.current_user do
      current_user = socket.assigns.current_user
      following_list = Accounts.get_following_list(current_user)
      accounts_feed_total = Posts.get_accounts_feed_total(following_list, socket.assigns)

      socket
      |> assign(following_list: following_list)
      |> assign(accounts_feed_total: accounts_feed_total)
      |> assign_user_feed()
    else
      socket
    end
  end

  defp assign_user_feed(socket) do
    user_feed = Posts.get_accounts_feed(socket.assigns.following_list, socket.assigns)
    socket |> assign(user_feed: user_feed)
  end
end

Let's make some changes to our like component, because we are sharing it between posts and comments, move the file to the live folder outside the post_live folder and rename the module to the following:

lib/instagram_clone_web/live/like_component.ex

defmodule  InstagramCloneWeb.Live.LikeComponent  do

Inside lib/instagram_clone_web/live/post_live/show.html.leex on line 70 rename the component:


...
        InstagramCloneWeb.Live.LikeComponent,

...

Inside lib/instagram_clone_web/live/post_live/comment_component.html.leex on line 24 also rename the component:


...

        InstagramCloneWeb.PostLive.LikeComponent,

...

Inside lib/instagram_clone_web/live/like_component.ex, let's update send_msg() to send the liked as variable instead of just the id:


...

  defp send_msg(liked) do
    msg = get_struct_msg_atom(liked)
    send(self(), {__MODULE__, msg, liked})
  end

...

Also inside lib/instagram_clone_web/live/like_component.ex, let's delete the liked?() function and instead let's check if the user id is inside of a list of user ids on line 61:


...

    if assigns.current_user.id in assigns.liked.likes do # LINE 61



  # DELETE THIS FUNCTION WE WON"T NEED ANYMORE
  # Enum.any?(likes, fn l ->
  #   l.user_id == user_id
  # end)
...

And on line 30 let's update to check the database:


...

    if Likes.liked?(current_user.id, liked.id) do
...

Our new updated file should look like the following:

defmodule InstagramCloneWeb.Live.LikeComponent do
  use InstagramCloneWeb, :live_component

  alias InstagramClone.Likes

  @impl true
  def update(assigns, socket) do
    get_btn_status(socket, assigns)
  end

  @impl true
  def render(assigns) do
    ~L"""
    <button
      phx-target="<%= @myself %>"
      phx-click="toggle-status"
      class="<%= @w_h %> focus:outline-none">

      <%= @icon %>

    </button>
    """
  end

  @impl true
  def handle_event("toggle-status", _params, socket) do
    current_user = socket.assigns.current_user
    liked = socket.assigns.liked

    if Likes.liked?(current_user.id, liked.id) do
      unlike(socket, current_user.id, liked)
    else
      like(socket, current_user, liked)
    end
  end

  defp like(socket, current_user, liked) do
    Likes.create_like(current_user, liked)
    send_msg(liked)

    {:noreply,
      socket
      |> assign(icon: unlike_icon(socket.assigns))}
  end

  defp unlike(socket, current_user_id, liked) do
    Likes.unlike(current_user_id, liked)
    send_msg(liked)

    {:noreply,
      socket
      |> assign(icon: like_icon(socket.assigns))}
  end

  defp send_msg(liked) do
    msg = get_struct_msg_atom(liked)
    send(self(), {__MODULE__, msg, liked})
  end

  defp get_btn_status(socket, assigns) do
    if assigns.current_user.id in assigns.liked.likes do
      get_socket_assigns(socket, assigns, unlike_icon(assigns))
    else
      get_socket_assigns(socket, assigns, like_icon(assigns))
    end
  end

  defp get_socket_assigns(socket, assigns, icon) do
    {:ok,
      socket
      |> assign(assigns)
      |> assign(icon: icon)}
  end

  defp get_struct_name(struct) do
    struct.__struct__
    |> Module.split()
    |> List.last()
    |> String.downcase()
  end

  defp get_struct_msg_atom(struct) do
    name = get_struct_name(struct)
    update_struct_likes = "update_#{name}_likes"
    String.to_atom(update_struct_likes)
  end

  defp like_icon(assigns) do
    ~L"""
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
    </svg>
    """
  end

  defp unlike_icon(assigns) do
    ~L"""
    <svg class="text-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
    </svg>
    """
  end

end

Now when we preload the likes we have to only sent the list of ids, open lib/instagram_clone/posts.ex and on every function that we are getting posts, we have to update how we preload the likes:

defmodule InstagramClone.Posts do
  @moduledoc """
  The Posts context.
  """

  import Ecto.Query, warn: false
  alias InstagramClone.Repo

  alias InstagramClone.Posts.Post
  alias InstagramClone.Accounts.User
  alias InstagramClone.Comments.Comment
  alias InstagramClone.Likes.Like

  @doc """
  Returns the list of posts.

  ## Examples

      iex> list_posts()
      [%Post{}, ...]

  """
  def list_posts do
    Repo.all(Post)
  end

  @doc """
  Returns the list of paginated posts of a given user id.

  ## Examples

      iex> list_user_posts(page: 1, per_page: 10, user_id: 1)
      [%{photo_url: "", url_id: ""}, ...]

  """
  def list_profile_posts(page: page, per_page: per_page, user_id: user_id) do
    Post
    |> select([p], map(p, [:url_id, :photo_url]))
    |> where(user_id: ^user_id)
    |> limit(^per_page)
    |> offset(^((page - 1) * per_page))
    |> order_by(desc: :id)
    |> Repo.all
  end

  @doc """
  Returns the list of paginated posts of a given user id
  And posts of following list of given user id
  With user and likes preloaded
  With 2 most recent comments preloaded with user and likes
  User, page, and per_page are given with the socket assigns

  ## Examples

      iex> get_accounts_feed(following_list, assigns)
      [%{photo_url: "", url_id: ""}, ...]

  """
  def get_accounts_feed(following_list, assigns) do
    user = assigns.current_user
    page = assigns.page
    per_page = assigns.per_page
    query =
      from c in Comment,
      select: %{id: c.id, row_number: over(row_number(), :posts_partition)},
      windows: [posts_partition: [partition_by: :post_id, order_by: [desc: :id]]]
    comments_query =
      from c in Comment,
      join: r in subquery(query),
      on: c.id == r.id and r.row_number <= 2
    likes_query = Like |> select([l], l.user_id)

    Post
    |> where([p], p.user_id in ^following_list)
    |> or_where([p], p.user_id == ^user.id)
    |> limit(^per_page)
    |> offset(^((page - 1) * per_page))
    |> order_by(desc: :id)
    |> preload([:user, likes: ^likes_query, comments: ^{comments_query, [:user, likes: likes_query]}])
    |> Repo.all()
  end

  @doc """
  Gets a single post.

  Raises `Ecto.NoResultsError` if the Post does not exist.

  ## Examples

      iex> get_post!(123)
      %Post{}

      iex> get_post!(456)
      ** (Ecto.NoResultsError)

  """
  def get_post!(id) do
    likes_query = Like |> select([l], l.user_id)

    Repo.get!(Post, id)
    |> Repo.preload([:user, likes: likes_query])
  end

  def get_post_feed!(id) do
    query =
      from c in Comment,
      select: %{id: c.id, row_number: over(row_number(), :posts_partition)},
      windows: [posts_partition: [partition_by: :post_id, order_by: [desc: :id]]]
    comments_query =
      from c in Comment,
      join: r in subquery(query),
      on: c.id == r.id and r.row_number <= 2
    likes_query = Like |> select([l], l.user_id)

    Post
    |> preload([:user, likes: ^likes_query, comments: ^{comments_query, [:user, likes: likes_query]}])
    |> Repo.get!(id)
  end

  def get_post_by_url!(id) do
    likes_query = Like |> select([l], l.user_id)

    Repo.get_by!(Post, url_id: id)
    |> Repo.preload([:user, likes: likes_query])
  end

  @doc """
  Creates a post.

  ## Examples

      iex> create_post(%{field: value})
      {:ok, %Post{}}

      iex> create_post(%{field: bad_value})
      {:error, %Ecto.Changeset{}}

  """
  def create_post(%Post{} = post, attrs \\ %{}, user) do
    post = Ecto.build_assoc(user, :posts, put_url_id(post))
    changeset = Post.changeset(post, attrs)
    update_posts_count = from(u in User, where: u.id == ^user.id)

    Ecto.Multi.new()
    |> Ecto.Multi.update_all(:update_posts_count, update_posts_count, inc: [posts_count: 1])
    |> Ecto.Multi.insert(:post, changeset)
    |> Repo.transaction()
  end

  # Generates a base64-encoding 8 bytes
  defp put_url_id(post) do
    url_id = Base.encode64(:crypto.strong_rand_bytes(8), padding: false)

    %Post{post | url_id: url_id}
  end

  @doc """
  Updates a post.

  ## Examples

      iex> update_post(post, %{field: new_value})
      {:ok, %Post{}}

      iex> update_post(post, %{field: bad_value})
      {:error, %Ecto.Changeset{}}

  """
  def update_post(%Post{} = post, attrs) do
    post
    |> Post.changeset(attrs)
    |> Repo.update()
  end

  @doc """
  Deletes a post.

  ## Examples

      iex> delete_post(post)
      {:ok, %Post{}}

      iex> delete_post(post)
      {:error, %Ecto.Changeset{}}

  """
  def delete_post(%Post{} = post) do
    Repo.delete(post)
  end

  @doc """
  Returns an `%Ecto.Changeset{}` for tracking post changes.

  ## Examples

      iex> change_post(post)
      %Ecto.Changeset{data: %Post{}}

  """
  def change_post(%Post{} = post, attrs \\ %{}) do
    Post.changeset(post, attrs)
  end
end

We also have to do the same for comments, open lib/instagram_clone/comments.ex and update the file to the following:

defmodule InstagramClone.Comments do
  @moduledoc """
  The Comments context.
  """

  import Ecto.Query, warn: false
  alias InstagramClone.Repo
  alias InstagramClone.Likes.Like
  alias InstagramClone.Comments.Comment

  @doc """
  Returns the list of comments.

  ## Examples

      iex> list_comments()
      [%Comment{}, ...]

  """
  def list_comments do
    Repo.all(Comment)
  end

  def list_post_comments(assigns, public: public) do
    user = assigns.current_user
    post_id = assigns.post.id
    per_page = assigns.per_page
    page = assigns.page
    likes_query = Like |> select([l], l.user_id)

    Comment
    |> where(post_id: ^post_id)
    |> get_post_comments_sorting(public, user)
    |> limit(^per_page)
    |> offset(^((page - 1) * per_page))
    |> preload([:user, likes: ^likes_query])
    |> Repo.all
  end

  defp get_post_comments_sorting(module, public, user) do
    if public do
      order_by(module, asc: :id)
    else
      order_by(module, fragment("(CASE WHEN user_id = ? then 1 else 2 end)", ^user.id))
    end
  end

  @doc """
  Gets a single comment.

  Raises `Ecto.NoResultsError` if the Comment does not exist.

  ## Examples

      iex> get_comment!(123)
      %Comment{}

      iex> get_comment!(456)
      ** (Ecto.NoResultsError)

  """
  def get_comment!(id) do
    likes_query = Like |> select([l], l.user_id)

    Repo.get!(Comment, id)
    |> Repo.preload([:user, likes: likes_query])
  end

  @doc """
  Creates a comment.

  ## Examples

      iex> create_comment(%{field: value})
      {:ok, %Comment{}}

      iex> create_comment(%{field: bad_value})
      {:error, %Ecto.Changeset{}}

  """
  def create_comment(user, post, attrs \\ %{}) do
    update_total_comments = post.__struct__ |> where(id: ^post.id)
    comment_attrs = %Comment{} |> Comment.changeset(attrs)
    comment =
      comment_attrs
      |> Ecto.Changeset.put_assoc(:user, user)
      |> Ecto.Changeset.put_assoc(:post, post)

    Ecto.Multi.new()
    |> Ecto.Multi.update_all(:update_total_comments, update_total_comments, inc: [total_comments: 1])
    |> Ecto.Multi.insert(:comment, comment)
    |> Repo.transaction()
    |> case do
      {:ok, %{comment: comment}} ->
        likes_query = Like |> select([l], l.user_id)
        comment |> Repo.preload(likes: likes_query)
    end
  end

  @doc """
  Updates a comment.

  ## Examples

      iex> update_comment(comment, %{field: new_value})
      {:ok, %Comment{}}

      iex> update_comment(comment, %{field: bad_value})
      {:error, %Ecto.Changeset{}}

  """
  def update_comment(%Comment{} = comment, attrs) do
    comment
    |> Comment.changeset(attrs)
    |> Repo.update()
  end

  @doc """
  Deletes a comment.

  ## Examples

      iex> delete_comment(comment)
      {:ok, %Comment{}}

      iex> delete_comment(comment)
      {:error, %Ecto.Changeset{}}

  """
  def delete_comment(%Comment{} = comment) do
    Repo.delete(comment)
  end

  @doc """
  Returns an `%Ecto.Changeset{}` for tracking comment changes.

  ## Examples

      iex> change_comment(comment)
      %Ecto.Changeset{data: %Comment{}}

  """
  def change_comment(%Comment{} = comment, attrs \\ %{}) do
    Comment.changeset(comment, attrs)
  end
end

Inside lib/instagram_clone_web/live/post_live/show.ex update line 6:


...

  alias InstagramCloneWeb.Live.LikeComponent

...

Inside lib/instagram_clone_web/live/post_live/show.html.leex update line 70 and line:


...

              InstagramCloneWeb.Live.LikeComponent,

...

Inside lib/instagram_clone_web/live/post_live/comment_component.html.leex update line 24:


...

        InstagramCloneWeb.Live.LikeComponent,

...

Update lib/instagram_clone/likes.ex to the following:

defmodule InstagramClone.Likes do
  import Ecto.Query, warn: false
  alias InstagramClone.Repo
  alias InstagramClone.Likes.Like

  def create_like(user, liked) do
    user = Ecto.build_assoc(user, :likes)
    like = Ecto.build_assoc(liked, :likes, user)
    update_total_likes = liked.__struct__ |> where(id: ^liked.id)

    Ecto.Multi.new()
    |> Ecto.Multi.insert(:like, like)
    |> Ecto.Multi.update_all(:update_total_likes, update_total_likes, inc: [total_likes: 1])
    |> Repo.transaction()
  end

  def unlike(user_id, liked) do
    like = liked?(user_id, liked.id)
    update_total_likes = liked.__struct__ |> where(id: ^liked.id)

    Ecto.Multi.new()
    |> Ecto.Multi.delete(:like, like)
    |> Ecto.Multi.update_all(:update_total_likes, update_total_likes, inc: [total_likes: -1])
    |> Repo.transaction()
  end


  # Returns nil if not found
  def liked?(user_id, liked_id) do
    Repo.get_by(Like, [user_id: user_id, liked_id: liked_id])
  end
end

Let's add a sidebar with 5 random users suggestion, inside lib/instagram_clone/accounts.ex add the following function:

  def random_5(user) do
    following_list = get_following_list(user)

    User
    |> where([u], u.id not in ^following_list)
    |> where([u], u.id != ^user.id)
    |> order_by(desc: fragment("Random()"))
    |> limit(5)
    |> Repo.all()
  end

Inside lib/instagram_clone_web/live/page_live.ex add a handle_info() and update the private assign_posts() function to the following:


...
  @impl true
  def handle_info({FollowComponent, :update_totals, _}, socket) do
    {:noreply, socket}
  end

  defp assign_posts(socket) do
    if socket.assigns.current_user do
      current_user = socket.assigns.current_user
      random_5_users = Accounts.random_5(current_user)

      socket
      |> assign(users: random_5_users)
      |> assign_user_feed()
    else
      socket
    end
  end

Now to display the sidebar with the random users update Inside lib/instagram_clone_web/live/page_live.html.leex to the following:

<%= if @current_user do %>
  <section class="flex">
    <div id="user-feed" class="w-3/5" phx-update="append">
      <%= for post <- @user_feed do %>
        <%= live_component @socket,
          InstagramCloneWeb.Live.PagePostFeedComponent,
          post: post,
          id: post.id,
          current_user: @current_user %>
      <% end %>
    </div>


    <div>
      <sidebar class="fixed w-1/4">
        <section class=" ml-auto pl-8">
          <div class="flex items-center">
            <!-- Post header section -->
            <%= live_redirect to: Routes.user_profile_path(@socket, :index, @current_user.username) do %>
              <%= img_tag Avatar.get_thumb(@current_user.avatar_url), class: "w-14 h-14 rounded-full object-cover object-center" %>
            <% end %>
            <div class="ml-3">
              <%= live_redirect @current_user.username,
                to: Routes.user_profile_path(@socket, :index, @current_user.username),
                class: "truncate font-bold text-sm text-gray-500 hover:underline" %>
              <h2 class="text-sm text-gray-500"><%= @current_user.full_name %></h2>
            </div>
            <!-- End post header section -->
          </div>
          <h1 class="text-gray-500 mt-5">Suggestions For You</h1>
          <%= for user <- @users do %>
            <div class="flex items-center p-3">
              <!-- Post header section -->
              <%= live_redirect to: Routes.user_profile_path(@socket, :index, user.username) do %>
                <%= img_tag Avatar.get_thumb(user.avatar_url), class: "w-10 h-10 rounded-full object-cover object-center" %>
              <% end %>
              <div class="ml-3">
                <%= live_redirect user.username,
                  to: Routes.user_profile_path(@socket, :index, user.username),
                  class: "truncate font-bold text-sm text-gray-500 hover:underline" %>
                <h2 class="text-xs text-gray-500">Suggested for you</h2>
              </div>
              <span class="ml-auto">
                <%= live_component @socket,
                  InstagramCloneWeb.UserLive.FollowComponent,
                  id: user.id,
                  user: user,
                  current_user: @current_user %>
              </span>
              <!-- End post header section -->
            </div>
          <% end %>
        </section>
      </sidebar>
    </div>
  </section>

  <div
    id="profile-posts-footer"
    class="flex justify-center"
    phx-hook="ProfilePostsScroll">
  </div>
<% else %>
  <%= live_component @socket,
    InstagramCloneWeb.PageLiveComponent,
    id: 1 %>
<% end %>

That's it for now, you could improve the code by making it more efficient by sending the following list to the follow component, to set the button without having to go to the database.

I really appreciate your time, thank you so much for reading.

CHECK OUT THE INSTAGRAM CLONE GITHUB REPO

Let's Build An Instagram Clone With The PETAL(Phoenix, Elixir, TailwindCSS, AlpineJS, LiveView) Stack [PART 5]

Anthony Gonzalez — Thu, 13 May 2021 04:42:41 +0000

In part 4 we added the profile posts section and post page, in this part, we will work on the show-post page. You can catch up with the Instagram Clone GitHub Repo.

Show-Post Page

Let's start by adding our base template for our show page, open lib/instagram_clone_web/live/post_live/show.html.leex and add the following:

<section class="flex">
  <!-- Post Image section -->
  <%= img_tag @post.photo_url,
          class: "w-3/5 object-contain h-full" %>
  <!-- End Post Image section -->

  <div class="w-2/5 border-2 h-full">
    <div class="flex p-4 items-center border-b-2">
      <!-- Post header section -->
      <%= live_redirect to: Routes.user_profile_path(@socket, :index, @post.user.username) do %>
        <%= img_tag @post.user.avatar_url, class: "w-8 h-8 rounded-full object-cover object-center" %>
      <% end %>
      <div class="ml-3">
        <%= live_redirect @post.user.username,
          to: Routes.user_profile_path(@socket, :index, @post.user.username),
          class: "truncate font-bold text-sm text-gray-500 hover:underline" %>
      </div>
      <!-- End post header section -->
    </div>

    <div class="no-scrollbar h-96 overflow-y-scroll p-4 flex flex-col">
      <%= if @post.description do %>
        <!-- Description section -->
        <div class="flex mt-2">
          <%= live_redirect to: Routes.user_profile_path(@socket, :index, @post.user.username) do %>
            <%= img_tag Avatar.get_thumb(@post.user.avatar_url), class: "w-8 h-8 rounded-full object-cover object-center" %>
          <% end %>

          <div class="px-4 w-11/12">
            <%= live_redirect @post.user.username,
            to: Routes.user_profile_path(@socket, :index, @post.user.username),
            class: "font-bold text-sm text-gray-500 hover:underline" %>
            <span class="text-sm text-gray-700">
              <p class="inline"><%= @post.description %></p></span>
            </span>
            <div class="flex mt-3">
              <div class="text-gray-400 text-xs"><%= Timex.from_now @post.inserted_at %></div>
            </div>
          </div>

        </div>
      <!-- End Description Section -->
      <% end %>

    </div>

    <div class="w-full border-t-2">
      <!-- Action icons section -->
      <div class="flex pl-4 pr-2 pt-2">
        <div class="w-8 h-8 cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
          <svg class="hidden text-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="ml-4 w-8 h-8 cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        </div>
        <div class="ml-4 w-8 h-8 cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
          </svg>
        </div>
        <div class="w-8 h-8 ml-auto cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
          </svg>
        </div>
      </div>
      <!-- End Action icons section -->

      <!-- Description section -->
      <button class="px-5 text-xs text-gray-500 font-bold focus:outline-none"><%= @post.total_likes %> likes</button>
      <h6 class="px-5 text-xs text-gray-400"><%= Timex.format!(@post.inserted_at, "{Mfull} {D}, {YYYY}") %></h6>
      <!-- End Description Section -->

      <!-- Comment input section -->
      <div class="p-2 flex items-center mt-3 border-t-2 border-gray-100">
        <div class="w-full">
          <textarea
            aria-label="Add a comment..."
            placeholder="Add a comment..."
            class="w-full border-0 focus:ring-transparent resize-none"
            autocomplete="off"
            autocorrect="off"
            rows="1"></textarea>
        </div>
        <div><button class="text-light-blue-500 font-bold pb-2 text-sm">Post</button></div>
      </div>
    <!-- End Comment input section -->
    </div>
  </div>

</section>

Open assets/css/app.scss and add the following styles to the bottom of the file to not show the scrollbar on the comments section of the page:

/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Likes

Let's create the likes context, in our terminal:

$ mix phx.gen.context Likes Like likes user_id:references:users liked_id:integer

Inside the migration that was generated:

defmodule InstagramClone.Repo.Migrations.CreateLikes do
  use Ecto.Migration

  def change do
    create table(:likes) do
      add :liked_id, :integer
      add :user_id, references(:users, on_delete: :nothing)

      timestamps()
    end

    create index(:likes, [:user_id, :liked_id])
  end
end

Back in our terminal: $ mix ecto.migrate

Inside lib/instagram_clone/likes/like.ex:

defmodule InstagramClone.Likes.Like do
  use Ecto.Schema

  schema "posts_likes" do
    field :liked_id, :integer
    belongs_to :user, InstagramClone.Accounts.User

    timestamps()
  end
end

Add the likes relationship to the post schema, open lib/instagram_clone/posts/post.ex:


...

has_many :likes, InstagramClone.Likes.Like, foreign_key: :liked_id

...

Add the likes relationship to the user schema, open lib/instagram_clone/accounts/user.ex:


...

has_many :likes, InstagramClone.Likes.Like

...

Inside lib/instagram_clone/likes.ex:

defmodule InstagramClone.Likes do
  import Ecto.Query, warn: false
  alias InstagramClone.Repo
  alias InstagramClone.Likes.Like

  def create_like(user, liked) do
    user = Ecto.build_assoc(user, :likes)
    like = Ecto.build_assoc(liked, :likes, user)
    update_total_likes = liked.__struct__ |> where(id: ^liked.id)

    Ecto.Multi.new()
    |> Ecto.Multi.insert(:like, like)
    |> Ecto.Multi.update_all(:update_total_likes, update_total_likes, inc: [total_likes: 1])
    |> Repo.transaction()
  end

  def unlike(user_id, liked) do
    like = get_like(user_id, liked)
    update_total_likes = liked.__struct__ |> where(id: ^liked.id)

    Ecto.Multi.new()
    |> Ecto.Multi.delete(:like, like)
    |> Ecto.Multi.update_all(:update_total_likes, update_total_likes, inc: [total_likes: -1])
    |> Repo.transaction()
  end

  # Returns nil if not found
  defp get_like(user_id, liked) do
    Enum.find(liked.likes, fn l ->
      l.user_id == user_id
    end)
  end
end

Let's create a component to handle likes, under lib/instagram_clone_web/live/post_live add a file named like_component.ex and add the following:

defmodule InstagramCloneWeb.PostLive.LikeComponent do
  use InstagramCloneWeb, :live_component

  alias InstagramClone.Likes

  @impl true
  def update(assigns, socket) do
    get_btn_status(socket, assigns)
  end

  @impl true
  def render(assigns) do
    ~L"""
    <button
      phx-target="<%= @myself %>"
      phx-click="toggle-status"
      class="<%= @w_h %> focus:outline-none">

      <%= @icon %>

    </button>
    """
  end

  @impl true
  def handle_event("toggle-status", _params, socket) do
    current_user = socket.assigns.current_user
    liked = socket.assigns.liked

    if liked?(current_user.id, liked.likes) do
      unlike(socket, current_user.id, liked)
    else
      like(socket, current_user, liked)
    end
  end

  defp like(socket, current_user, liked) do
    Likes.create_like(current_user, liked)
    send_msg(liked)

    {:noreply,
      socket
      |> assign(icon: unlike_icon(socket.assigns))}
  end

  defp unlike(socket, current_user_id, liked) do
    Likes.unlike(current_user_id, liked)
    send_msg(liked)

    {:noreply,
      socket
      |> assign(icon: like_icon(socket.assigns))}
  end

  defp send_msg(liked) do
    msg = get_struct_msg_atom(liked)
    send(self(), {__MODULE__, msg, liked.id})
  end

  defp get_btn_status(socket, assigns) do
    if liked?(assigns.current_user.id, assigns.liked.likes) do
      get_socket_assigns(socket, assigns, unlike_icon(assigns))
    else
      get_socket_assigns(socket, assigns, like_icon(assigns))
    end
  end

  defp get_socket_assigns(socket, assigns, icon) do
    {:ok,
      socket
      |> assign(assigns)
      |> assign(icon: icon)}
  end

  defp get_struct_name(struct) do
    struct.__struct__
    |> Module.split()
    |> List.last()
    |> String.downcase()
  end

  defp get_struct_msg_atom(struct) do
    name = get_struct_name(struct)
    update_struct_likes = "update_#{name}_likes"
    String.to_atom(update_struct_likes)
  end

  defp like_icon(assigns) do
    ~L"""
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
    </svg>
    """
  end

  defp unlike_icon(assigns) do
    ~L"""
    <svg class="text-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
    </svg>
    """
  end

  # Returns true if id found in list
  defp liked?(user_id, likes) do
    Enum.any?(likes, fn l ->
      l.user_id == user_id
    end)
  end

end

Inside lib/instagram_clone_web/live/post_live/show.html.leex on line 50, replace the div containing the heart icon with the following:


...

        <%= if @current_user do %>
          <%= live_component @socket,
              InstagramCloneWeb.PostLive.LikeComponent,
              id: @post.id,
              liked: @post,
              w_h: "w-8 h-8",
              current_user: @current_user %>
        <% else %>
          <%= link to: Routes.user_session_path(@socket, :new) do %>
            <button class="w-8 h-8 focus:outline-none">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
            </button>
          <% end %>
        <% end %>

...

Inside lib/instagram_clone_web/live/post_live/show.ex we need to handle the message sent from the component to update the likes count:

...

  alias InstagramCloneWeb.PostLive.LikeComponent

  @impl true
  def handle_info({LikeComponent, :update_post_likes, post_id}, socket) do
    {:noreply, 
      socket 
      |> assign(post: Posts.get_post!(post_id))}
  end

Open lib/instagram_clone/posts.ex and let's update get_post!() and get_post_by_url() functions to preload the user that belongs_to and the likes:


...
  def get_post!(id) do
    Repo.get!(Post, id)
    |> Repo.preload([:user, :likes])
  end

  def get_post_by_url!(id) do
    Repo.get_by!(Post, url_id: id)
    |> Repo.preload([:user, :likes])
  end

...

Post Comments

Let's create a comments context for comments, in our terminal type in the following command:

$ mix phx.gen.context Comments Comment comments post_id:references:posts user_id:references:users body:text total_likes:integer

Inside the migration that was generated:

defmodule InstagramClone.Repo.Migrations.CreateComments do
  use Ecto.Migration

  def change do
    create table(:comments) do
      add :body, :text
      add :total_likes, :integer, default: 0
      add :post_id, references(:posts, on_delete: :nothing)
      add :user_id, references(:users, on_delete: :nothing)

      timestamps()
    end

    create index(:comments, [:post_id])
    create index(:comments, [:user_id])
  end
end

Back in our terminal: $ mix ecto.migrate

Inside lib/instagram_clone/comments/comment.ex:

defmodule InstagramClone.Comments.Comment do
  use Ecto.Schema
  import Ecto.Changeset

  schema "comments" do
    field :body, :string
    field :total_likes, :integer, default: 0
    belongs_to :post, InstagramClone.Posts.Post
    belongs_to :user, InstagramClone.Accounts.User
    has_many :likes, InstagramClone.Likes.Like, foreign_key: :liked_id

    timestamps()
  end

  @doc false
  def changeset(comment, attrs) do
    comment
    |> cast(attrs, [:body])
    |> validate_required([:body])
  end
end

Add the following inside lib/instagram_clone/accounts/user.ex and lib/instagram_clone/posts/post.ex:


...

  has_many :comments, InstagramClone.Comments.Comment

...

Inside lib/instagram_clone/comments.ex add the followings functions:


...
  @doc  """
  Returns paginated comments sorted by current user id or by id if public
  """
  def list_post_comments(assigns, public: public) do
    user = assigns.current_user
    post_id = assigns.post.id
    per_page = assigns.per_page
    page = assigns.page

    Comment
    |> where(post_id: ^post_id)
    |> get_post_comments_sorting(public, user)
    |> limit(^per_page)
    |> offset(^((page - 1) * per_page))
    |> preload([:user, :likes])
    |> Repo.all
  end

  defp get_post_comments_sorting(module, public, user) do
    if public do
      order_by(module, asc: :id)
    else
      order_by(module, fragment("(CASE WHEN user_id = ? then 1 else 2 end)", ^user.id))
    end
  end

  @doc """
  Gets a single comment.

  Raises `Ecto.NoResultsError` if the Comment does not exist.

  ## Examples

      iex> get_comment!(123)
      %Comment{}

      iex> get_comment!(456)
      ** (Ecto.NoResultsError)

  """
  def get_comment!(id) do
    Repo.get!(Comment, id)
    |> Repo.preload([:user, :likes])
  end

  @doc """
  Creates a comment and updates total comments count in post
  Returns the comment created with likes preloaded
  """
  def create_comment(user, post, attrs \\ %{}) do
    update_total_comments = post.__struct__ |> where(id: ^post.id)
    comment_attrs = %Comment{} |> Comment.changeset(attrs)
    comment =
      comment_attrs
      |> Ecto.Changeset.put_assoc(:user, user)
      |> Ecto.Changeset.put_assoc(:post, post)

    Ecto.Multi.new()
    |> Ecto.Multi.update_all(:update_total_comments, update_total_comments, inc: [total_comments: 1])
    |> Ecto.Multi.insert(:comment, comment)
    |> Repo.transaction()
    |> case do
      {:ok, %{comment: comment}} ->
        comment |> Repo.preload(:likes)
    end
  end

...

Let's update lib/instagram_clone_web/live/post_live/show.ex to the following:

defmodule InstagramCloneWeb.PostLive.Show do
  use InstagramCloneWeb, :live_view

  alias InstagramClone.Posts
  alias InstagramClone.Uploaders.Avatar
  alias InstagramCloneWeb.PostLive.LikeComponent
  alias InstagramClone.Comments
  alias InstagramClone.Comments.Comment

  @impl true
  def mount(%{"id" => id}, session, socket) do
    socket = assign_defaults(session, socket)
    post = Posts.get_post_by_url!(URI.decode(id))

    {:ok,
      socket
      |> assign(changeset: Comments.change_comment(%Comment{}))
      |> assign(comments_section_update: "prepend")
      |> assign(post: post)
      |> assign(page: 1, per_page: 15)
      |> assign_comments()
      |> set_load_more_comments_btn(),
      temporary_assigns: [comments: []]}
  end

  defp assign_comments(socket) do
    current_user = socket.assigns.current_user

    if current_user do
      comments = Comments.list_post_comments(socket.assigns, public: false)
      socket |> assign(comments: comments)
    else
      comments = Comments.list_post_comments(socket.assigns, public: true)
      socket |> assign(comments: comments)
    end
  end

  defp set_load_more_comments_btn(socket) do
    post_total_comments = socket.assigns.post.total_comments
    per_page = socket.assigns.per_page

    if post_total_comments > per_page do
      socket |> assign(load_more_comments_btn: "flex")
    else
      socket |> assign(load_more_comments_btn: "hidden")
    end
  end

  @impl true
  def handle_info({LikeComponent, :update_comment_likes, comment_id}, socket) do
    comment = Comments.get_comment!(comment_id)
    {:noreply,
      socket
      |> update(:comments, fn comments -> [comment | comments] end)}
  end

  @impl true
  def handle_info({LikeComponent, :update_post_likes, post_id}, socket) do
    {:noreply,
      socket
      |> assign(post: Posts.get_post!(post_id))}
  end

  @impl true
  def handle_event("load-more-comments", _, socket) do
    {:noreply,
      socket
      |> assign(comments_section_update: "append")
      |> load_comments()}
  end

  @impl true
  def handle_event("save", %{"comment" => comment_param}, socket) do
    %{"body" => body} = comment_param
    current_user = socket.assigns.current_user
    post = socket.assigns.post

    if body == "" do
      {:noreply, socket}
    else
      comment = Comments.create_comment(current_user, post, comment_param)
      {:noreply,
        socket
        |> update(:comments, fn comments -> [comment | comments] end)
        |> assign(comments_section_update: "prepend")
        |> assign(changeset: Comments.change_comment(%Comment{}))}
    end
  end

  defp load_comments(socket) do
    total_comments = socket.assigns.post.total_comments
    page = socket.assigns.page
    per_page = socket.assigns.per_page
    total_pages = ceil(total_comments / per_page)

    socket
    |> hide_btn?(page, total_pages)
    |> update(:page, &(&1 + 1))
    |> assign_comments()
  end

  defp hide_btn?(socket, page, total_pages) do
    if (page + 1) == total_pages do
      socket |> assign(load_more_comments_btn: "hidden")
    else
      socket
    end
  end
end

Under lib/instagram_clone_web/live/post_live create the comment component comment_component.ex:

defmodule InstagramCloneWeb.PostLive.CommentComponent do
  use InstagramCloneWeb, :live_component

  alias InstagramClone.Uploaders.Avatar
end

The comment component template under lib/instagram_clone_web/live/post_live/comment_component.html.leex:

<div class="flex py-2" id="comment-<%= @comment.id %>">
  <div class="w-1/12 pt-1">
    <%= live_redirect to: Routes.user_profile_path(@socket, :index, @comment.user.username) do %>
      <%= img_tag Avatar.get_thumb(@comment.user.avatar_url),
        class: "w-8 h-8 rounded-full object-cover object-center" %>
    <% end %>
  </div>
  <div class="px-4 w-10/12">
    <%= live_redirect @comment.user.username,
          to: Routes.user_profile_path(@socket, :index, @comment.user.username),
          class: "truncate font-bold text-sm text-gray-500 hover:underline" %>
    <span class="text-sm text-gray-700">
      <p class="inline"><%= @comment.body %></p></span>
    </span>
    <div class="flex mt-3">
      <div class="text-gray-400 text-xs"><%= Timex.from_now @comment.inserted_at %></div>
      <button class="px-3 text-xs text-gray-700 focus:outline-none"><%= @comment.total_likes %> likes</button>
      <button class="text-xs text-gray-700 focus:outline-none">Reply</button>
    </div>
  </div>

  <%= if @current_user do %>
    <%= live_component @socket,
        InstagramCloneWeb.PostLive.LikeComponent,
        id: @comment.id,
        liked: @comment,
        w_h: "w-6 h-6",
        current_user: @current_user %>
  <% else %>
    <%= link to: Routes.user_session_path(@socket, :new) do %>
      <button class="w-6 h-6 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
      </button>
    <% end %>
  <% end %>
</div>

Lastly let's update lib/instagram_clone_web/live/post_live/show.html.leex :

<section class="flex">
  <!-- Post Image section -->
  <%= img_tag @post.photo_url,
          class: "w-3/5 object-contain h-full" %>
  <!-- End Post Image section -->

  <div class="w-2/5 border-2 h-full">
    <div class="flex p-4 items-center border-b-2">
      <!-- Post header section -->
      <%= live_redirect to: Routes.user_profile_path(@socket, :index, @post.user.username) do %>
        <%= img_tag @post.user.avatar_url, class: "w-8 h-8 rounded-full object-cover object-center" %>
      <% end %>
      <div class="ml-3">
        <%= live_redirect @post.user.username,
          to: Routes.user_profile_path(@socket, :index, @post.user.username),
          class: "truncate font-bold text-sm text-gray-500 hover:underline" %>
      </div>
      <!-- End post header section -->
    </div>

    <div class="no-scrollbar h-96 overflow-y-scroll p-4 flex flex-col">
      <%= if @post.description do %>
        <!-- Description section -->
        <div class="flex mt-2">
          <%= live_redirect to: Routes.user_profile_path(@socket, :index, @post.user.username) do %>
            <%= img_tag Avatar.get_thumb(@post.user.avatar_url), class: "w-8 h-8 rounded-full object-cover object-center" %>
          <% end %>

          <div class="px-4 w-11/12">
            <%= live_redirect @post.user.username,
            to: Routes.user_profile_path(@socket, :index, @post.user.username),
            class: "font-bold text-sm text-gray-500 hover:underline" %>
            <span class="text-sm text-gray-700">
              <p class="inline"><%= @post.description %></p></span>
            </span>
            <div class="flex mt-3">
              <div class="text-gray-400 text-xs"><%= Timex.from_now @post.inserted_at %></div>
            </div>
          </div>

        </div>
      <!-- End Description Section -->
      <% end %>

      <section id="comments" phx-update="<%= @comments_section_update %>">
        <%= for comment <- @comments do %>
          <%= live_component @socket,
            InstagramCloneWeb.PostLive.CommentComponent,
            id: comment.id,
            current_user: @current_user,
            comment: comment %>
        <% end %>
      </section>

      <button
        class="w-full <%= @load_more_comments_btn %> justify-center pt-2 focus:outline-none"
        phx-click="load-more-comments">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </button>

    </div>

    <div class="w-full border-t-2">
      <!-- Action icons section -->
      <div class="flex pl-4 pr-2 pt-2">
        <%= if @current_user do %>
          <%= live_component @socket,
              InstagramCloneWeb.PostLive.LikeComponent,
              id: @post.id,
              liked: @post,
              w_h: "w-8 h-8",
              current_user: @current_user %>
        <% else %>
          <%= link to: Routes.user_session_path(@socket, :new) do %>
            <button class="w-8 h-8 focus:outline-none">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
            </button>
          <% end %>
        <% end %>
        <div class="ml-4 w-8 h-8 cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        </div>
        <div class="ml-4 w-8 h-8 cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
          </svg>
        </div>
        <div class="w-8 h-8 ml-auto cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
          </svg>
        </div>
      </div>
      <!-- End Action icons section -->

      <!-- Description section -->
      <button class="px-5 text-xs text-gray-500 font-bold focus:outline-none"><%= @post.total_likes %> likes</button>
      <h6 class="px-5 text-xs text-gray-400"><%= Timex.format!(@post.inserted_at, "{Mfull} {D}, {YYYY}") %></h6>
      <!-- End Description Section -->

      <!-- Comment input section -->
      <%= if @current_user do %>
        <%= f = form_for @changeset, "#",
          phx_submit: "save",
          class: "p-2 flex items-center mt-3 border-t-2 border-gray-100",
          x_data: "{
            disableSubmit: true,
            inputText: null,
            displayCommentBtn: (refs) => {
              refs.cbtn.classList.remove('opacity-30')
              refs.cbtn.classList.remove('cursor-not-allowed')
            },
            disableCommentBtn: (refs) => {
              refs.cbtn.classList.add('opacity-30')
              refs.cbtn.classList.add('cursor-not-allowed')
            }
          }" %>
          <div class="w-full">
            <%= textarea f, :body,
              class: "w-full border-0 focus:ring-transparent resize-none",
              rows: 1,
              placeholder: "Add a comment...",
              aria_label: "Add a comment...",
              autocorrect: "off",
              autocomplete: "off",
              x_model: "inputText",
              "@input": "[
                (inputText.length != 0) ? [disableSubmit = false, displayCommentBtn($refs)] : [disableSubmit = true, disableCommentBtn($refs)]
              ]" %>
          </div>
          <div>
            <%= submit "Post",
              phx_disable_with: "Posting...",
              class: "text-light-blue-500 opacity-30 cursor-not-allowed font-bold pb-2 text-sm focus:outline-none",
              x_ref: "cbtn",
              "@click": "inputText = null",
              "x_bind:disabled": "disableSubmit" %>
          </div>
        </form>
      <% else %>
        <div class="p-4 flex items-center mt-3 border-t-2 border-gray-100">
          <%= link "Log in to comment",
            to: Routes.user_session_path(@socket, :new),
            class: "text-light-blue-600" %>
        </div>
      <% end %>
      <!-- End Comment input section -->
    </div>
  </div>

</section>

We added a couple of AlpineJS directives to disable the submit button for comments when the textarea is empty.

That's it for this part, we have learned a lot throughout this series, still a lot of work to do, development never ends.

I really appreciate your time, thank you so much for reading.