fix: align icons on event card (#226)

coderdojobraga · Mar 15, 2024 · 74848c8 · 74848c8
1 parent a1e3217
commit 74848c8
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>