From e586dd174cb3d4ed763a6619fc321f50b79a12c8 Mon Sep 17 00:00:00 2001
From: Bhav Beri <bhavberi@gmail.com>
Date: Thu, 31 Oct 2024 12:45:03 +0530
Subject: [PATCH] Serparate out eventCards rendering as a new component

---
 src/components/events/EventCards.jsx         |  64 +++++++++++
 src/components/events/EventsGrid.jsx         |  35 +-----
 src/components/events/PaginatedEventGrid.jsx | 114 +++----------------
 3 files changed, 88 insertions(+), 125 deletions(-)
 create mode 100644 src/components/events/EventCards.jsx

diff --git a/src/components/events/EventCards.jsx b/src/components/events/EventCards.jsx
new file mode 100644
index 00000000..2a3b5c40
--- /dev/null
+++ b/src/components/events/EventCards.jsx
@@ -0,0 +1,64 @@
+import { Grid, Typography, CircularProgress, Box } from "@mui/material";
+import EventCard from "components/events/EventCard";
+
+export function EventCards({
+  events,
+  loading,
+  noEventsMessage,
+  loadingIndicator = true,
+}) {
+  if (loading) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        height="100%"
+        mt={3}
+      >
+        {loadingIndicator ? <CircularProgress /> : null}
+      </Box>
+    );
+  }
+
+  return (
+    <Grid container spacing={2}>
+      {events?.length ? (
+        events.map((event) => (
+          <Grid key={event._id} item xs={6} md={4} lg={3}>
+            <EventCard
+              _id={event._id}
+              name={event.name}
+              datetimeperiod={event.datetimeperiod}
+              poster={event.poster || event.clubbanner}
+              clubid={event.clubid}
+              blur={event.poster ? 0 : 0.3}
+            />
+          </Grid>
+        ))
+      ) : (
+        <Typography
+          variant="h4"
+          color="text.secondary"
+          sx={{ flexGrow: 1, textAlign: "center", mt: 5 }}
+        >
+          {noEventsMessage}
+        </Typography>
+      )}
+    </Grid>
+  );
+}
+
+export function LoadingIndicator() {
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      height="100%"
+      mt={3}
+    >
+      <CircularProgress />
+    </Box>
+  );
+}
diff --git a/src/components/events/EventsGrid.jsx b/src/components/events/EventsGrid.jsx
index 175a15f3..ac188451 100644
--- a/src/components/events/EventsGrid.jsx
+++ b/src/components/events/EventsGrid.jsx
@@ -2,8 +2,7 @@ import { getClient } from "gql/client";
 import { GET_ALL_EVENTS } from "gql/queries/events";
 import { GET_CLUB } from "gql/queries/clubs";
 
-import { Grid, Typography } from "@mui/material";
-import EventCard from "components/events/EventCard";
+import { EventCards } from "./EventCards";
 
 export default async function EventsGrid({
   type = "all", // must be one of: {recent, club, all}
@@ -32,33 +31,11 @@ export default async function EventsGrid({
   );
 
   return (
-    <Grid container spacing={2}>
-      {updatedEvents?.filter(filter).length ? (
-        updatedEvents
-          ?.slice(0, limit)
-          ?.filter(filter)
-          ?.map((event) => (
-            <Grid key={event._id} item xs={6} md={4} lg={3}>
-              <EventCard
-                _id={event._id}
-                name={event.name}
-                datetimeperiod={event.datetimeperiod}
-                poster={event.poster || event.clubbanner}
-                clubid={event.clubid}
-                blur={event.poster ? 0 : 0.3}
-              />
-            </Grid>
-          ))
-      ) : (
-        <Typography
-          variant="h4"
-          color="text.secondary"
-          sx={{ flexGrow: 1, textAlign: "center", mt: 5 }}
-        >
-          No events found.
-        </Typography>
-      )}
-    </Grid>
+    <EventCards
+      events={updatedEvents?.filter(filter)?.slice(0, limit)}
+      loading={false}
+      noEventsMessage="No events found."
+    />
   );
 }
 
diff --git a/src/components/events/PaginatedEventGrid.jsx b/src/components/events/PaginatedEventGrid.jsx
index 1cfc2e3d..21887277 100644
--- a/src/components/events/PaginatedEventGrid.jsx
+++ b/src/components/events/PaginatedEventGrid.jsx
@@ -2,13 +2,10 @@
 
 import { useEffect, useState, useCallback, useRef } from "react";
 import {
-  Box,
-  Grid,
   Typography,
   Divider,
-  CircularProgress,
 } from "@mui/material";
-import EventCard from "components/events/EventCard";
+import { EventCards, LoadingIndicator } from "./EventCards";
 
 export default function PaginatedEventGrid({
   limit = 24, // Default limit if pagination is enabled
@@ -196,30 +193,11 @@ export default function PaginatedEventGrid({
           Ongoing Events
         </Typography>
       </Divider>
-      <Grid container spacing={2}>
-        {futureEvents?.filter(ongoingEventsFilter)?.length ? (
-          futureEvents?.filter(ongoingEventsFilter)?.map((event) => (
-            <Grid key={event._id} item xs={6} md={4} lg={3}>
-              <EventCard
-                _id={event._id}
-                name={event.name}
-                datetimeperiod={event.datetimeperiod}
-                poster={event.poster || event.clubbanner}
-                clubid={event.clubid}
-                blur={event.poster ? 0 : 0.3}
-              />
-            </Grid>
-          ))
-        ) : (
-          <Typography
-            variant="h4"
-            color="text.secondary"
-            sx={{ flexGrow: 1, textAlign: "center", mt: 5 }}
-          >
-            {loadingFuture ? <CircularProgress /> : "No events found."}
-          </Typography>
-        )}
-      </Grid>
+      <EventCards
+        events={futureEvents.filter(ongoingEventsFilter)}
+        loading={loadingFuture}
+        noEventsMessage="No events found."
+      />
 
       {targetState?.includes("upcoming") && (
         <>
@@ -228,38 +206,11 @@ export default function PaginatedEventGrid({
               Upcoming Events
             </Typography>
           </Divider>
-          <Grid container spacing={2}>
-            {futureEvents?.filter(upcomingEventsFilter)?.length ? (
-              futureEvents?.filter(upcomingEventsFilter)?.map((event) => (
-                <Grid key={event._id} item xs={6} md={4} lg={3}>
-                  <EventCard
-                    _id={event._id}
-                    name={event.name}
-                    datetimeperiod={event.datetimeperiod}
-                    poster={event.poster || event.clubbanner}
-                    clubid={event.clubid}
-                    blur={event.poster ? 0 : 0.3}
-                  />
-                </Grid>
-              ))
-            ) : (
-              <Typography
-                variant="h4"
-                color="text.secondary"
-                sx={{ flexGrow: 1, textAlign: "center", mt: 5 }}
-              >
-                {loadingFuture ? (
-                  targetState?.includes("completed") ? (
-                    <CircularProgress />
-                  ) : (
-                    ""
-                  )
-                ) : (
-                  "No events found."
-                )}
-              </Typography>
-            )}
-          </Grid>
+          <EventCards
+            events={futureEvents.filter(upcomingEventsFilter)}
+            loading={loadingFuture}
+            noEventsMessage="No events found."
+          />
         </>
       )}
 
@@ -270,47 +221,18 @@ export default function PaginatedEventGrid({
               Completed Events
             </Typography>
           </Divider>
-          <Grid container spacing={2}>
-            {completedevents?.length ? (
-              completedevents?.map((event) => (
-                <Grid key={event._id} item xs={6} md={4} lg={3}>
-                  <EventCard
-                    _id={event._id}
-                    name={event.name}
-                    datetimeperiod={event.datetimeperiod}
-                    poster={event.poster || event.clubbanner}
-                    clubid={event.clubid}
-                    blur={event.poster ? 0 : 0.3}
-                  />
-                </Grid>
-              ))
-            ) : (
-              <Typography
-                variant="h4"
-                color="text.secondary"
-                sx={{ flexGrow: 1, textAlign: "center", mt: 5 }}
-              >
-                {loadingPast ? "" : "No events found."}
-              </Typography>
-            )}
-          </Grid>
+          <EventCards
+            events={completedevents}
+            loading={loadingPast}
+            loadingIndicator={false}
+            noEventsMessage="No events found."
+          />
         </>
       )}
 
       {/* "Load more" trigger */}
       <div ref={loadMoreRef} style={{ height: "50px", marginBottom: "10px" }}>
-        {loadingPast && (
-          // center the circular progress
-          <Box
-            display="flex"
-            justifyContent="center"
-            alignItems="center"
-            height="100%"
-            mt={3}
-          >
-            <CircularProgress />
-          </Box>
-        )}
+        {loadingPast && <LoadingIndicator />}
       </div>
     </>
   );