Updated targetState buttons selection

Clubs-Council-IIITH · Oct 31, 2024 · 1c425b6 · 1c425b6
1 parent 106e897
commit 1c425b6
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 50 deletions.
diff --git a/src/app/events/page.jsx b/src/app/events/page.jsx
@@ -44,12 +44,11 @@ async function clubBannerQuery(clubid) {
 export default async function Events({ searchParams }) {
   const targetName = searchParams?.name;
   const targetClub = searchParams?.club;
-  let targetState = [
-    ...(searchParams?.upcoming === "true" ? ["upcoming"] : []),
-    ...(searchParams?.completed === "true" ? ["completed"] : []),
-  ];
 
-  if (targetState.length === 0) targetState = ["upcoming", "completed"];
+  let targetState = ["upcoming", "completed"];
+  targetState = targetState.filter(
+    (state) => searchParams?.[state] !== "false"
+  );
 
   return (
     <Box>
@@ -59,7 +58,7 @@ export default async function Events({ searchParams }) {
       <PaginatedEventsGrid
         query={query}
         clubBannerQuery={clubBannerQuery}
-        targets={[targetName, targetClub, targetState]} // Pass updated targets here
+        targets={[targetName, targetClub, targetState]}
       />
     </Box>
   );

diff --git a/src/components/events/EventsFilter.jsx b/src/components/events/EventsFilter.jsx
@@ -30,29 +30,6 @@ export default function EventsFilter({ name, club, state }) {
   const searchParams = useSearchParams();
   const { triggerToast } = useToast();
 
-  // get a new searchParams string by merging the current
-  // searchParams with a provided key/value pair
-  const createQueryString = useCallback(
-    (name, value) => {
-      const params = new URLSearchParams(searchParams);
-
-      if (
-        !params.has("upcoming") &&
-        !params.has("completed") &&
-        ["upcoming", "completed"].includes(name)
-      ) {
-        params.set("upcoming", "true");
-        params.set("completed", "true");
-      }
-
-      if (value != "") params.set(name, value);
-      else params.delete(name);
-
-      return params.toString();
-    },
-    [searchParams]
-  );
-
   // fetch list of clubs
   const [clubs, setClubs] = useState([]);
   useEffect(() => {
@@ -83,9 +60,10 @@ export default function EventsFilter({ name, club, state }) {
             spacing={1}
             onSubmit={(e) => {
               e.preventDefault();
-              router.push(
-                `${pathname}?${createQueryString("name", targetName)}`
-              );
+              const params = new URLSearchParams(searchParams);
+              if (targetName === "") params.delete("name");
+              else params.set("name", targetName);
+              router.push(`${pathname}?${params.toString()}`);
             }}
           >
             <TextField
@@ -116,9 +94,11 @@ export default function EventsFilter({ name, club, state }) {
               label="Filter by Club/Student Body"
               fullWidth
               onChange={(e) => {
-                router.push(
-                  `${pathname}?${createQueryString("club", e.target.value)}`
-                );
+                e.preventDefault();
+                const params = new URLSearchParams(searchParams);
+                if (e.target.value === "") params.delete("club");
+                else params.set("club", e.target.value);
+                router.push(`${pathname}?${params.toString()}`);
               }}
               value={club || ""}
             >
@@ -143,16 +123,22 @@ export default function EventsFilter({ name, club, state }) {
             value={state}
             color="primary"
             sx={{ height: "100%" }}
-            onChange={(e) => {
-              // don't do anything if all states are being unselected
-              if (state.length === 1 && state.includes(e.target.value)) return;
+            onChange={(e, newState) => {
+              e.preventDefault();
+
+              const upcomingSelected = newState.includes("upcoming");
+              const completedSelected = newState.includes("completed");
+
+              const params = new URLSearchParams(searchParams);
+              if (upcomingSelected && completedSelected) {
+                params.delete("upcoming");
+                params.delete("completed");
+              } else {
+                params.set("upcoming", upcomingSelected);
+                params.set("completed", completedSelected);
+              }
 
-              return router.push(
-                `${pathname}?${createQueryString(
-                  e.target.value,
-                  !state.includes(e.target.value)
-                )}`
-              );
+              router.push(`${pathname}?${params.toString()}`);
             }}
           >
             <ToggleButton disableRipple key="upcoming" value="upcoming">

diff --git a/src/components/events/PaginatedEventGrid.jsx b/src/components/events/PaginatedEventGrid.jsx
@@ -37,8 +37,8 @@ export default function PaginatedEventGrid({
     setLoadingFuture(true);
     try {
       const queryData = {
-        targetClub,
-        targetName,
+        targetClub: null,
+        targetName: null,
         paginationOn: true,
         skip: -1,
         limit: 10,
@@ -221,7 +221,7 @@ export default function PaginatedEventGrid({
         )}
       </Grid>
 
-      {targetState?.includes("upcoming") ? (
+      {targetState?.includes("upcoming") && (
         <>
           <Divider textAlign="left" sx={{ mb: 2, mt: 3 }}>
             <Typography variant="h5" color="grey">
@@ -261,9 +261,9 @@ export default function PaginatedEventGrid({
             )}
           </Grid>
         </>
-      ) : null}
+      )}
 
-      {targetState?.includes("completed") ? (
+      {targetState?.includes("completed") && (
         <>
           <Divider textAlign="left" sx={{ mb: 2, mt: 3 }}>
             <Typography variant="h5" color="grey">
@@ -295,7 +295,7 @@ export default function PaginatedEventGrid({
             )}
           </Grid>
         </>
-      ) : null}
+      )}
 
       {/* "Load more" trigger */}
       <div ref={loadMoreRef} style={{ height: "50px", marginBottom: "10px" }}>