Add event id to query params

itdagene-ntnu · Sep 3, 2024 · 4dc564a · 4dc564a
1 parent 759d4a5
commit 4dc564a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 18 deletions.
diff --git a/components/Program/Components/ProgramTimeline.tsx b/components/Program/Components/ProgramTimeline.tsx
@@ -22,14 +22,14 @@ import Flex from '../../Styled/Flex';
 import Link from 'next/link';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { capitalize } from 'lodash';
-import { NextParsedUrlQuery } from 'next/dist/server/request-meta';
+import { NextRouter } from 'next/router';
 
 dayjs.extend(customParseFormat);
 
 type ProgramTimelineProps = {
   activeDate: string;
   events: Record<string, ProgramView_events>;
-  query: NextParsedUrlQuery;
+  router: NextRouter;
 };
 
 const Card = styled.div<{ active?: boolean }>`
@@ -55,15 +55,22 @@ const EventCover = styled.img`
 const DesktopProgramTimeline = ({
   activeDate,
   events,
-  query,
+  router,
 }: ProgramTimelineProps): JSX.Element => {
   const [activeEvent, setActiveEvent] =
     useState<ArrayElement<ProgramView_events>>();
-  
+
   // If activeDate is today, select the next event to happen,
   // if not select the first event of that day
   useEffect(() => {
     if (!events || !events[activeDate]) return;
+    const parsedQueryEvent = typeof router.query.event === 'string'
+        ? events[activeDate].find((event) => event.id === router.query.event)
+        : null;
+    if (parsedQueryEvent) {
+      setActiveEvent(parsedQueryEvent)
+      return;
+    }
     const closestTime = findClosestDate(
       events[activeDate].map((event) => event.timeStart),
       'HH:mm:ss'
@@ -107,7 +114,18 @@ const DesktopProgramTimeline = ({
               <TimelineContent style={{ padding: '5px 1rem 5px 2rem' }}>
                 <Card
                   active={activeEvent?.id === event.id}
-                  onClick={(): void => setActiveEvent(event)}
+                  onClick={(): void => {
+                    const newQuery = { ...router.query, event: event.id };
+                    router.push(
+                      {
+                        pathname: router.pathname,
+                        query: newQuery,
+                      },
+                      undefined,
+                      { shallow: true }
+                    );
+                    setActiveEvent(event);
+                  }}
                 >
                   <Flex flexDirection="column">
                     <h3

diff --git a/components/Program/ProgramView.tsx b/components/Program/ProgramView.tsx
@@ -15,6 +15,7 @@ import { isMobile } from 'react-device-detect';
 import { NextParsedUrlQuery } from 'next/dist/server/request-meta';
 import { ProgramView_currentMetaData } from '../../__generated__/ProgramView_currentMetaData.graphql';
 import dayjs from 'dayjs';
+import { NextRouter } from 'next/router';
 
 const Title = styled('h1')`
   font-weight: bold;
@@ -34,7 +35,7 @@ type Props = {
   currentMetaData: ProgramView_currentMetaData;
   showToggleButton?: boolean;
   useLinks?: boolean;
-  query: NextParsedUrlQuery;
+  router: NextRouter;
 };
 
 const ProgramView = (props: Props): JSX.Element => {
@@ -51,17 +52,27 @@ const ProgramView = (props: Props): JSX.Element => {
     'date'
   );
 
-  const mainEvents = [groupedEvents[props.currentMetaData.startDate], groupedEvents[props.currentMetaData.endDate]] 
-  const otherEvents = Object.entries(groupedEvents).filter(([key]) => key in [props.currentMetaData.startDate, props.currentMetaData.endDate])
+  const sortedEvents = sortBy(props.events, 'timeStart')
 
-  console.log(mainEvents, otherEvents)
+  const startDate = props.currentMetaData.startDate;
+  const endDate = props.currentMetaData.endDate;
+
+  const otherGrouped = groupBy(sortedEvents, ({ date }) =>
+    date === startDate || date === endDate ? date : 'other'
+  );
+  console.log(otherGrouped);
+
   const sortedKeys = sortBy(Object.keys(groupedEvents || {}));
 
-  const parsedQueryEvent = typeof props.query.event === 'string'
-    ? props.events.find((event) => event.id === props.query.event)
-    : null;
-
-
+  const parsedQueryEvent =
+    typeof props.router.query.event === 'string'
+      ? props.events.find((event) => event.id === props.router.query.event)
+      : null;
+
+  useEffect(() => {
+    // console.log(parsedQueryEvent)
+  }, [parsedQueryEvent]);
+
   useEffect(() => {
     setActiveDate(parsedQueryEvent?.date || findClosestDate(sortedKeys));
   }, []);
@@ -97,7 +108,11 @@ const ProgramView = (props: Props): JSX.Element => {
           dateOptions
         />
       </Flex>
-      <ProgramTimeline activeDate={activeDate} events={groupedEvents} query={props.query} />
+      <ProgramTimeline
+        activeDate={activeDate}
+        events={groupedEvents}
+        router={props.router}
+      />
     </Flex>
   );
 };
@@ -127,5 +142,5 @@ export default createFragmentContainer(ProgramView, {
       startDate
       endDate
     }
-    `
+  `,
 });
diff --git a/pages/program.tsx b/pages/program.tsx
@@ -20,8 +20,7 @@ const Index = ({
     {props.events ? (
       <ProgramView
         events={props.events}
-        stands={props.stands}
-        query={router.query}
+        router={router}
         currentMetaData={props.currentMetaData}
         // showToggleButton
         // useLinks