From 46c0b6e5f005858f7819e22d62ebdfed7e3f5764 Mon Sep 17 00:00:00 2001
From: Afonso Martins <afonsopm2005@gmail.com>
Date: Wed, 9 Oct 2024 18:29:12 +0100
Subject: [PATCH] feat: some of the requested changes

---
 lib/atomic_web/components/socials.ex          | 42 ++++++++++---------
 .../live/partner_live/form_component.ex       |  3 +-
 lib/atomic_web/live/partner_live/show.ex      |  3 +-
 .../live/partner_live/show.html.heex          | 10 +++--
 4 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/lib/atomic_web/components/socials.ex b/lib/atomic_web/components/socials.ex
index f026a074..85bef986 100644
--- a/lib/atomic_web/components/socials.ex
+++ b/lib/atomic_web/components/socials.ex
@@ -2,28 +2,32 @@ defmodule AtomicWeb.Components.Socials do
   @moduledoc false
   use Phoenix.Component
 
+  attr :socials, :map, required: true
+
   def socials(assigns) do
     ~H"""
-    <%= if @entity.socials do %>
-      <div class="mt-4 flex gap-4">
-        <%= for {social, icon, url_base} <- [
-            {:tiktok, "tiktok.svg", "https://tiktok.com/"},
-            {:instagram, "instagram.svg", "https://instagram.com/"},
-            {:facebook, "facebook.svg", "https://facebook.com/"},
-            {:x, "x.svg", "https://x.com/"}
-          ] do %>
-          <% social_value = Map.get(@entity.socials, social) %>
-          <%= if social_value do %>
-            <div class="flex flex-row items-center gap-x-1">
-              <img src={"/images/" <> icon} class="h-5 w-5" alt={social |> Atom.to_string() |> String.capitalize()} />
-              <.link class="text-blue-500" target="_blank" href={url_base <> social_value}>
-                <%= social |> Atom.to_string() |> String.capitalize() %>
-              </.link>
-            </div>
-          <% end %>
+    <div class="mt-4 flex gap-4">
+      <%= for {social, icon, url_base} <- get_socials() do %>
+        <% social_value = Map.get(@entity, social) %>
+        <%= if social_value do %>
+          <div class="flex flex-row items-center gap-x-1">
+            <img src={"/images/" <> icon} class="h-5 w-5" alt={social |> Atom.to_string() |> String.capitalize()} />
+            <.link class="text-blue-500" target="_blank" href={url_base <> social_value}>
+              <%= social |> Atom.to_string() |> String.capitalize() %>
+            </.link>
+          </div>
         <% end %>
-      </div>
-    <% end %>
+      <% end %>
+    </div>
     """
   end
+
+  def get_socials do
+    [
+      {:tiktok, "tiktok.svg", "https://tiktok.com/"},
+      {:instagram, "instagram.svg", "https://instagram.com/"},
+      {:facebook, "facebook.svg", "https://facebook.com/"},
+      {:x, "x.svg", "https://x.com/"}
+    ]
+  end
 end
diff --git a/lib/atomic_web/live/partner_live/form_component.ex b/lib/atomic_web/live/partner_live/form_component.ex
index bd6ec775..f8fdfe07 100644
--- a/lib/atomic_web/live/partner_live/form_component.ex
+++ b/lib/atomic_web/live/partner_live/form_component.ex
@@ -20,11 +20,12 @@ defmodule AtomicWeb.PartnerLive.FormComponent do
               <.field field={location_form[:name]} label="Address" type="text" placeholder="Address" help_text={gettext("Address of the partner")} required />
             </.inputs_for>
             <h2 class="mt-8 mb-2 w-full border-b pb-2 text-lg font-semibold text-gray-900"><%= gettext("Socials") %></h2>
-            <div class="grid w-full gap-x-4 sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4">
+            <div class="grid w-full gap-x-4 sm:grid-cols-1 md:grid-cols-5 lg:grid-cols-5">
               <.inputs_for :let={socials_form} field={f[:socials]}>
                 <.field field={socials_form[:instagram]} type="text" class="w-full" />
                 <.field field={socials_form[:facebook]} type="text" class="w-full" />
                 <.field field={socials_form[:x]} type="text" class="w-full" />
+                <.field field={socials_form[:tiktok]} type="text" class="w-full" />
                 <.field field={socials_form[:website]} type="text" class="w-full" />
               </.inputs_for>
             </div>
diff --git a/lib/atomic_web/live/partner_live/show.ex b/lib/atomic_web/live/partner_live/show.ex
index 375cc426..c67b4409 100644
--- a/lib/atomic_web/live/partner_live/show.ex
+++ b/lib/atomic_web/live/partner_live/show.ex
@@ -1,8 +1,7 @@
 defmodule AtomicWeb.PartnerLive.Show do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.Components.Avatar
-  import AtomicWeb.Components.Socials
+  import AtomicWeb.Components.{Avatar, Socials}
 
   alias Atomic.Accounts
   alias Atomic.Organizations
diff --git a/lib/atomic_web/live/partner_live/show.html.heex b/lib/atomic_web/live/partner_live/show.html.heex
index ce1795ba..8e6642e7 100644
--- a/lib/atomic_web/live/partner_live/show.html.heex
+++ b/lib/atomic_web/live/partner_live/show.html.heex
@@ -21,7 +21,7 @@
             </h1>
           </div>
           <%= if @partner.location do %>
-            <!-- Localização -->
+            <!-- Location -->
             <div class="flex flex-row items-center gap-x-1 text-md leading-6">
               <.icon name="hero-map-pin" class="h-5 w-5 text-zinc-400" />
               <.link class="text-blue-500" href={"https://www.google.com/maps/search/?api=1&query=#{@partner.location.name}"}>
@@ -31,7 +31,7 @@
           <% end %>
 
           <%= if @partner.socials do %>
-            <!-- Redes Sociais e Website -->
+            <!-- Socials and Website -->
             <div class="flex flex-wrap gap-x-4 items-center mt-2">
               <!-- Website -->
               <%= if @partner.socials.website do %>
@@ -40,8 +40,10 @@
                   <.link class="text-blue-500" href={@partner.socials.website}>Website</.link>
                 </div>
               <% end %>
-              <!-- Redes Sociais -->
-              <.socials entity={@partner} />
+              <!-- Socials -->
+              <%= if @partner.socials do %>
+                <.socials entity={@partner.socials} />
+              <% end %>
             </div>
           <% end %>
         </div>