feat: show maximum number of ninjas that can enroll on an event

apps/app/components/Event/EventInfo.js

@@ -7,24 +7,21 @@ import {
   CloseCircleOutlined,
   EnvironmentOutlined,
   HomeOutlined,
+  TeamOutlined,
 } from "@ant-design/icons";
 
 function EventInfo({
-  start_time,
-  end_time,
-  location,
-  team,
-  notes,
-  enrollments_open,
-  enrollments_close,
+  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 timeForEnrollmentsClose = () => {
-    const enrollmentsClose = new Date(enrollments_close).getTime();
+    const enrollmentsClose = new Date(event.enrollments_close).getTime();
     const nowDate = new Date().getTime();
-    const timeDiff = (enrollmentsClose - nowDate) / (1000 * 60 * 60 * 24);
+    const timeDiff = (event.enrollmentsClose - nowDate) / (1000 * 60 * 60 * 24);
 
     return timeDiff > 0 && timeDiff < 1; // Difference of less than a day
   };
@@ -40,7 +37,7 @@ function EventInfo({
         }
         span={2}
       >
-        {new Date(start_time).toLocaleString("pt", {
+        {new Date(event.start_time).toLocaleString("pt", {
           weekday: "long",
           year: "numeric",
           month: "long",
@@ -51,38 +48,45 @@ function EventInfo({
         labelStyle={labelStyle}
         label={
           <span>
-            <EnvironmentOutlined /> Localização
+            <AlignLeftOutlined /> Notas
           </span>
         }
         span={5}
       >
-        {location?.name}
+        {event.notes}
       </Descriptions.Item>
       <Descriptions.Item
         labelStyle={labelStyle}
         label={
           <span>
-            <ClockCircleOutlined /> Início
+            <TeamOutlined /> Limite de Vagas
           </span>
         }
         span={2}
       >
-        {new Date(start_time).toLocaleString("pt", {
-          hour: "numeric",
-          minute: "numeric",
-        })}
+        {enrolledNinjas} / {event.spots_available}
       </Descriptions.Item>
-
       <Descriptions.Item
         labelStyle={labelStyle}
         label={
           <span>
-            <ClockCircleOutlined /> Fim
+            <EnvironmentOutlined /> Localização
           </span>
         }
         span={5}
       >
-        {new Date(end_time).toLocaleString("pt", {
+        {event.location?.name}
+      </Descriptions.Item>
+      <Descriptions.Item
+        labelStyle={labelStyle}
+        label={
+          <span>
+            <ClockCircleOutlined /> Início
+          </span>
+        }
+        span={2}
+      >
+        {new Date(event.start_time).toLocaleString("pt", {
           hour: "numeric",
           minute: "numeric",
         })}
@@ -91,23 +95,26 @@ function EventInfo({
         labelStyle={labelStyle}
         label={
           <span>
-            <HomeOutlined /> Turma
+            <ClockCircleOutlined /> Fim
           </span>
         }
-        span={2}
+        span={5}
       >
-        {team?.name}
+        {new Date(event.end_time).toLocaleString("pt", {
+          hour: "numeric",
+          minute: "numeric",
+        })}
       </Descriptions.Item>
       <Descriptions.Item
         labelStyle={labelStyle}
         label={
           <span>
-            <AlignLeftOutlined /> Notas
+            <HomeOutlined /> Turma
           </span>
         }
-        span={5}
+        span={2}
       >
-        {notes}
+        {event.team?.name}
       </Descriptions.Item>
       <Descriptions.Item
         labelStyle={labelStyle}
@@ -118,7 +125,7 @@ function EventInfo({
         }
         span={2}
       >
-        {new Date(enrollments_open).toLocaleDateString("pt", {
+        {new Date(event.enrollments_open).toLocaleDateString("pt", {
           year: "numeric",
           month: "long",
           day: "numeric",
@@ -141,7 +148,7 @@ function EventInfo({
         }
         span={2}
       >
-        {new Date(enrollments_close).toLocaleDateString("pt", {
+        {new Date(event.enrollments_close).toLocaleDateString("pt", {
           year: "numeric",
           month: "long",
           day: "numeric",

apps/app/components/Event/index.js

@@ -17,6 +17,7 @@ const Event = ({
   collapsed = true,
   details = false,
   isLoading = false,
+  enrolledNinjas,
 }) => {
   const { user } = useAuth();
   const role = user?.role;
@@ -119,7 +120,7 @@ const Event = ({
                 </Descriptions.Item>
               </Descriptions>
             ) : (
-              <EventInfo {...event} />
+              <EventInfo event={event} enrolledNinjas={enrolledNinjas} />
             )}
             {role === EUser.Organizer ? (
               <>

apps/app/pages/admin/event/[id].tsx

@@ -56,6 +56,7 @@ function EventPage() {
           collapsed={false}
           details={true}
           isLoading={isLoading}
+          enrolledNinjas={0}
         />
       </Row>
       <Divider />

apps/app/pages/event/[id].tsx

@@ -213,7 +213,6 @@ function EventPage() {
       registerMentorOnEvent(value);
     }
   };
-
   return (
     <AppLayout>
       <Title level={2}>Detalhes do evento</Title>
@@ -223,6 +222,7 @@ function EventPage() {
           collapsed={false}
           details={true}
           isLoading={isLoading}
+          enrolledNinjas={enrolledNinjas.length}
         />
       </Row>
       <Col>

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} />
+            <Event event={info} loading={isLoading} enrolledNinjas={0} />
           </Col>
         ))}
       </Row>

apps/app/pages/index.tsx

@@ -110,6 +110,7 @@ function Dashboard() {
               event={nextEvent()}
               collapsed={false}
               isLoading={isLoadingEvents}
+              enrolledNinjas={0}
             />
           ) : (
             <Typography>Aguarda que o próximo evento seja divulgado</Typography>
@@ -124,7 +125,11 @@ function Dashboard() {
         >
           {events?.slice(0, 3).map((event: any) => (
             <Col key={event.id}>
-              <Event event={event} isLoading={isLoadingEvents} />
+              <Event
+                event={event}
+                isLoading={isLoadingEvents}
+                enrolledNinjas={0}
+              />
             </Col>
           ))}
         </Row>