From 1c3699a958f6492d0e79ed42f4667b748c58e10c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Fri, 15 Mar 2024 14:21:28 +0000
Subject: [PATCH] fix: align icons

---
 apps/app/components/Event/EventInfo.js | 38 +++++++++++++++++---------
 apps/app/components/Event/index.js     | 13 ++++-----
 apps/app/pages/admin/event/[id].tsx    |  1 -
 apps/app/pages/event/[id].tsx          |  1 -
 apps/app/pages/events.js               |  2 +-
 apps/app/pages/index.tsx               |  7 +----
 6 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/apps/app/components/Event/EventInfo.js b/apps/app/components/Event/EventInfo.js
index 50bd47cf..f16395d9 100644
--- a/apps/app/components/Event/EventInfo.js
+++ b/apps/app/components/Event/EventInfo.js
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { Descriptions } from "antd";
 import {
   AlignLeftOutlined,
@@ -9,14 +10,25 @@ import {
   HomeOutlined,
   TeamOutlined,
 } from "@ant-design/icons";
+import { getEnrolledNinjas } from "bokkenjs";
 
 function EventInfo({
   event,
-  enrolledNinjas,
   breakpoints = { xs: 1, sm: 1, md: 1, lg: 1, xl: 1, xxl: 6 },
 }) {
-  enrolledNinjas = typeof enrolledNinjas !== "undefined" ? enrolledNinjas : 0;
   const labelStyle = { color: "rgba(0, 0, 0, 0.45)", maxWidth: "30vw" };
+  const [enrolledNinjas, setEnrolledNinjas] = useState([]);
+
+  useEffect(() => {
+    getEnrolledNinjas(event.id)
+      .then((response) => setEnrolledNinjas(response.data))
+      .catch((error) => {
+        notifyError(
+          "Ocorreu um erro",
+          "Não foi possível obter os ninjas inscritos"
+        );
+      });
+  }, [event.id]);
 
   const timeForEnrollmentsClose = () => {
     const enrollmentsClose = new Date(event.enrollments_close).getTime();
@@ -31,7 +43,7 @@ function EventInfo({
       <Descriptions.Item
         labelStyle={labelStyle}
         label={
-          <span>
+          <span className="flex items-center gap-x-1">
             <CalendarOutlined /> Data
           </span>
         }
@@ -47,7 +59,7 @@ function EventInfo({
       <Descriptions.Item
         labelStyle={labelStyle}
         label={
-          <span>
+          <span className="flex items-center gap-x-1">
             <AlignLeftOutlined /> Notas
           </span>
         }
@@ -58,18 +70,18 @@ function EventInfo({
       <Descriptions.Item
         labelStyle={labelStyle}
         label={
-          <span>
+          <span className="flex items-center gap-x-1">
             <TeamOutlined /> Limite de Vagas
           </span>
         }
         span={2}
       >
-        {enrolledNinjas} / {event.spots_available}
+        {enrolledNinjas.length} / {event.spots_available}
       </Descriptions.Item>
       <Descriptions.Item
         labelStyle={labelStyle}
         label={
-          <span>
+          <span className="flex items-center gap-x-1">
             <EnvironmentOutlined /> Localização
           </span>
         }
@@ -80,7 +92,7 @@ function EventInfo({
       <Descriptions.Item
         labelStyle={labelStyle}
         label={
-          <span>
+          <span className="flex items-center gap-x-1">
             <ClockCircleOutlined /> Início
           </span>
         }
@@ -94,7 +106,7 @@ function EventInfo({
       <Descriptions.Item
         labelStyle={labelStyle}
         label={
-          <span>
+          <span className="flex items-center gap-x-1">
             <ClockCircleOutlined /> Fim
           </span>
         }
@@ -108,7 +120,7 @@ function EventInfo({
       <Descriptions.Item
         labelStyle={labelStyle}
         label={
-          <span>
+          <span className="flex items-center gap-x-1">
             <HomeOutlined /> Turma
           </span>
         }
@@ -119,7 +131,7 @@ function EventInfo({
       <Descriptions.Item
         labelStyle={labelStyle}
         label={
-          <span>
+          <span className="flex items-center gap-x-1">
             <CheckCircleOutlined /> Abertura das inscrições
           </span>
         }
@@ -137,11 +149,11 @@ function EventInfo({
         labelStyle={labelStyle}
         label={
           timeForEnrollmentsClose() ? (
-            <span className="animate-bounce text-yellow-600">
+            <span className="flex animate-bounce items-center gap-x-1 text-yellow-600">
               <CloseCircleOutlined /> Fecho das inscrições
             </span>
           ) : (
-            <span>
+            <span className="flex items-center gap-x-1">
               <CloseCircleOutlined /> Fecho das inscrições
             </span>
           )
diff --git a/apps/app/components/Event/index.js b/apps/app/components/Event/index.js
index e1808e0e..891ab756 100644
--- a/apps/app/components/Event/index.js
+++ b/apps/app/components/Event/index.js
@@ -17,7 +17,6 @@ const Event = ({
   collapsed = true,
   details = false,
   isLoading = false,
-  enrolledNinjas,
 }) => {
   const { user } = useAuth();
   const role = user?.role;
@@ -59,7 +58,7 @@ const Event = ({
                 <Descriptions.Item
                   labelStyle={labelStyle}
                   label={
-                    <span>
+                    <span className="flex items-center gap-x-1">
                       <CalendarOutlined /> Data
                     </span>
                   }
@@ -74,7 +73,7 @@ const Event = ({
                 <Descriptions.Item
                   labelStyle={labelStyle}
                   label={
-                    <span>
+                    <span className="flex items-center gap-x-1">
                       <EnvironmentOutlined /> Localização
                     </span>
                   }
@@ -85,7 +84,7 @@ const Event = ({
                 <Descriptions.Item
                   labelStyle={labelStyle}
                   label={
-                    <span>
+                    <span className="flex items-center gap-x-1">
                       <ClockCircleOutlined /> Início
                     </span>
                   }
@@ -98,7 +97,7 @@ const Event = ({
                 <Descriptions.Item
                   labelStyle={labelStyle}
                   label={
-                    <span>
+                    <span className="flex items-center gap-x-1">
                       <ClockCircleOutlined /> Fim
                     </span>
                   }
@@ -111,7 +110,7 @@ const Event = ({
                 <Descriptions.Item
                   labelStyle={labelStyle}
                   label={
-                    <span>
+                    <span className="flex items-center gap-x-1">
                       <HomeOutlined /> Turma
                     </span>
                   }
@@ -120,7 +119,7 @@ const Event = ({
                 </Descriptions.Item>
               </Descriptions>
             ) : (
-              <EventInfo event={event} enrolledNinjas={enrolledNinjas} />
+              <EventInfo event={event} />
             )}
             {role === EUser.Organizer ? (
               <>
diff --git a/apps/app/pages/admin/event/[id].tsx b/apps/app/pages/admin/event/[id].tsx
index dabb592d..4f3787b4 100644
--- a/apps/app/pages/admin/event/[id].tsx
+++ b/apps/app/pages/admin/event/[id].tsx
@@ -56,7 +56,6 @@ function EventPage() {
           collapsed={false}
           details={true}
           isLoading={isLoading}
-          enrolledNinjas={0}
         />
       </Row>
       <Divider />
diff --git a/apps/app/pages/event/[id].tsx b/apps/app/pages/event/[id].tsx
index 9fea4ee3..07a1f8f7 100644
--- a/apps/app/pages/event/[id].tsx
+++ b/apps/app/pages/event/[id].tsx
@@ -222,7 +222,6 @@ function EventPage() {
           collapsed={false}
           details={true}
           isLoading={isLoading}
-          enrolledNinjas={enrolledNinjas.length}
         />
       </Row>
       <Col>
diff --git a/apps/app/pages/events.js b/apps/app/pages/events.js
index 234d4592..dbc3a19b 100644
--- a/apps/app/pages/events.js
+++ b/apps/app/pages/events.js
@@ -17,7 +17,7 @@ function Events() {
       <Row className={styles.row} align="top" justify="start" gutter={[16, 16]}>
         {events?.map((info) => (
           <Col key={info.id}>
-            <Event event={info} loading={isLoading} enrolledNinjas={0} />
+            <Event event={info} loading={isLoading} />
           </Col>
         ))}
       </Row>
diff --git a/apps/app/pages/index.tsx b/apps/app/pages/index.tsx
index c6a67e47..a250c6e4 100644
--- a/apps/app/pages/index.tsx
+++ b/apps/app/pages/index.tsx
@@ -110,7 +110,6 @@ function Dashboard() {
               event={nextEvent()}
               collapsed={false}
               isLoading={isLoadingEvents}
-              enrolledNinjas={0}
             />
           ) : (
             <Typography>Aguarda que o próximo evento seja divulgado</Typography>
@@ -125,11 +124,7 @@ function Dashboard() {
         >
           {events?.slice(0, 3).map((event: any) => (
             <Col key={event.id}>
-              <Event
-                event={event}
-                isLoading={isLoadingEvents}
-                enrolledNinjas={0}
-              />
+              <Event event={event} isLoading={isLoadingEvents} />
             </Col>
           ))}
         </Row>