fix: changed calender rednder to conditional rendering (#119)

Student-Activity-Center-IIIT-NR · Nov 30, 2023 · f4dd129 · f4dd129
1 parent 3d471a2
commit f4dd129
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 90 deletions.
diff --git a/components/EventCalendar/Calendar.tsx b/components/EventCalendar/Calendar.tsx
@@ -11,88 +11,86 @@ const Calendar = () => {
 
   let dateToFilter;
 
-  const filteredData = calendarData.filter((item) => {
+  const filteredData = calendarData?.filter((item) => {
     dateToFilter = new Date(item.date.split("-").reverse().join("-"));
     return dateToFilter >= new Date(currentDate);
   });
 
-  // const filteredData = calendarData.filter(()=>{
-
-  // })
-
   return (
     <>
-      <Container maxWidth={"lg"} sx={{ mt: "40px" }}>
-        <Typography
-          variant="h1"
-          color="#334155"
-          textAlign={"left"}
-          fontSize={"96px"}
-          fontWeight={800}
-          lineHeight={"114px"}
-          letterSpacing={"0.03571em"}
-          pl={2}
-        >
-          {currDate.getMonth() <= 9
-            ? "0" + (currDate.getMonth() + 1)
-            : currDate.getMonth() + 1}
-          {"/"}
-          {currDate.getFullYear()}
-        </Typography>
-        <Grid2 container columnSpacing={"45px"} rowGap={"94px"} mt={"37px"}>
-          <Grid2 xs={4}>
-            <PaperItem
-              startDate={filteredData[0].date.slice(0, 2)}
-              endDate={filteredData[1].date.slice(0, 2)}
-              startName={filteredData[0].eventName}
-              endName={filteredData[1].eventName}
-              startIcon={filteredData[0].icon}
-              endIcon={filteredData[1].icon}
-            />
-          </Grid2>
-          <Grid2 xs={8}>
-            <Typography
-              variant="body1"
-              fontFamily={"Rubik"}
-              fontStyle={"normal"}
-              fontWeight={500}
-              fontSize={"24px"}
-              lineHeight={"28px"}
-            >
-              {currDate.toLocaleString("default", { month: "long" })}
-            </Typography>
-            <Grid2 container columnSpacing={"45px"}>
-              {filteredData.slice(2, 6).map((event, index) => {
-                return (
-                  <Grid2
-                    xs={3}
-                    borderTop={"2px solid #272727"}
-                    pt={8}
-                    key={index}
-                  >
-                    <SingleDate
-                      date={event.date}
-                      icon={event.icon}
-                      name={event.eventName}
-                    />
-                  </Grid2>
-                );
-              })}
+      {filteredData.length > 2 && (
+        <Container maxWidth={"lg"} sx={{ mt: "40px" }}>
+          <Typography
+            variant="h1"
+            color="#334155"
+            textAlign={"left"}
+            fontSize={"96px"}
+            fontWeight={800}
+            lineHeight={"114px"}
+            letterSpacing={"0.03571em"}
+            pl={2}
+          >
+            {currDate.getMonth() <= 9
+              ? "0" + (currDate.getMonth() + 1)
+              : currDate.getMonth() + 1}
+            {"/"}
+            {currDate.getFullYear()}
+          </Typography>
+          <Grid2 container columnSpacing={"45px"} rowGap={"94px"} mt={"37px"}>
+            <Grid2 xs={4}>
+              <PaperItem
+                startDate={filteredData[0].date.slice(0, 2)}
+                endDate={filteredData[1].date.slice(0, 2)}
+                startName={filteredData[0].eventName}
+                endName={filteredData[1].eventName}
+                startIcon={filteredData[0].icon}
+                endIcon={filteredData[1].icon}
+              />
             </Grid2>
-          </Grid2>
-          {filteredData.slice(6, 18).map((event, index) => {
-            return (
-              <Grid2 xs={2} key={index}>
-                <SingleDate
-                  date={event.date}
-                  icon={event.icon}
-                  name={event.eventName}
-                />
+            <Grid2 xs={8}>
+              <Typography
+                variant="body1"
+                fontFamily={"Rubik"}
+                fontStyle={"normal"}
+                fontWeight={500}
+                fontSize={"24px"}
+                lineHeight={"28px"}
+              >
+                {currDate.toLocaleString("default", { month: "long" })}
+              </Typography>
+              <Grid2 container columnSpacing={"45px"}>
+                {filteredData.slice(2, 6).map((event, index) => {
+                  return (
+                    <Grid2
+                      xs={3}
+                      borderTop={"2px solid #272727"}
+                      pt={8}
+                      key={index}
+                    >
+                      <SingleDate
+                        date={event.date}
+                        icon={event.icon}
+                        name={event.eventName}
+                      />
+                    </Grid2>
+                  );
+                })}
               </Grid2>
-            );
-          })}
-        </Grid2>
-      </Container>
+            </Grid2>
+            {filteredData.slice(6, 18).map((event, index) => {
+              return (
+                <Grid2 xs={2} key={index}>
+                  <SingleDate
+                    date={event.date}
+                    icon={event.icon}
+                    name={event.eventName}
+                  />
+                </Grid2>
+              );
+            })}
+          </Grid2>
+        </Container>
+      )}
     </>
   );
 };

diff --git a/components/EventCalendar/EventCalendarData.ts b/components/EventCalendar/EventCalendarData.ts
@@ -475,20 +475,4 @@ export const calendarData: CalendarDataProps[] = [
     eventName: "Guess The Picture",
     icon: triangleIcon,
   },
-
-  // do not delete below entry
-
-  //Jan
-  // {
-  //   date: "26-01-2024",
-  //   eventName: "Republic Day",
-  //   icon: circleIcon,
-  // },
-
-  // August
-  // {
-  //   date: "15-08-2023",
-  //   eventName: "Independence Day",
-  //   icon: circleIcon,
-  // },
 ];