Program queryparams

components/Program/Components/EventsToggle.tsx

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import { capitalize } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 import { itdageneBlue } from '../../../utils/colors';
@@ -8,14 +9,12 @@ type EventsToggleProps = {
   options: string[];
   activeOption: string;
   setActiveOption: (value: string) => void;
-  dateOptions?: boolean;
 };
 
 const EventsToggle = ({
   options,
   activeOption,
   setActiveOption,
-  dateOptions,
 }: EventsToggleProps): JSX.Element => {
   return (
     <ToggleContainer>
@@ -26,7 +25,9 @@ const EventsToggle = ({
           active={opt === activeOption}
         >
           <SubHeader>
-            {dateOptions ? dayjs(opt).format('dddd DD.MM').toUpperCase() : opt}
+            {dayjs(opt).isValid()
+              ? capitalize(dayjs(opt).format('dddd DD.MM'))
+              : opt}
           </SubHeader>
         </ToggleItem>
       ))}

components/Program/Components/ProgramTimeline.tsx

@@ -22,12 +22,15 @@ import Flex from '../../Styled/Flex';
 import Link from 'next/link';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { capitalize } from 'lodash';
+import { NextRouter } from 'next/router';
 
 dayjs.extend(customParseFormat);
 
 type ProgramTimelineProps = {
   activeDate: string;
+  updateQueryEvent: (opt: string) => void;
   events: Record<string, ProgramView_events>;
+  router: NextRouter;
 };
 
 const Card = styled.div<{ active?: boolean }>`
@@ -52,15 +55,30 @@ const EventCover = styled.img`
 
 const DesktopProgramTimeline = ({
   activeDate,
+  updateQueryEvent,
   events,
+  router,
 }: ProgramTimelineProps): JSX.Element => {
   const [activeEvent, setActiveEvent] =
     useState<ArrayElement<ProgramView_events>>();
 
+  const updateActiveEvent = (event: any): void => {
+    setActiveEvent(event);
+    updateQueryEvent(event.id);
+  };
+
   // 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'
@@ -104,7 +122,7 @@ const DesktopProgramTimeline = ({
               <TimelineContent style={{ padding: '5px 1rem 5px 2rem' }}>
                 <Card
                   active={activeEvent?.id === event.id}
-                  onClick={(): void => setActiveEvent(event)}
+                  onClick={(): void => updateActiveEvent(event)}
                 >
                   <Flex flexDirection="column">
                     <h3

components/Program/ProgramView.tsx

@@ -1,19 +1,21 @@
 import React, { useEffect, useState } from 'react';
 import { groupBy, sortBy } from 'lodash';
-import dayjs from 'dayjs';
 
 import styled from 'styled-components';
 import { graphql, createFragmentContainer } from 'react-relay';
 
 import { ProgramView_events } from '../../__generated__/ProgramView_events.graphql';
-import { ProgramView_stands } from '../../__generated__/ProgramView_stands.graphql';
 import EventsToggle from './Components/EventsToggle';
 
 import Flex from '../Styled/Flex';
 
 import ProgramTimeline from './Components/ProgramTimeline';
 import { findClosestDate } from '../../utils/findClosestDate';
 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;
@@ -30,15 +32,33 @@ const UnderDevelopmentPlaceholder = styled('img')`
 
 type Props = {
   events: ProgramView_events;
-  stands: ProgramView_stands | null;
+  currentMetaData: ProgramView_currentMetaData;
   showToggleButton?: boolean;
   useLinks?: boolean;
+  router: NextRouter;
 };
 
 const ProgramView = (props: Props): JSX.Element => {
   const [showPromoted, setShowPromoted] = useState('Generelt program');
   const [activeDate, setActiveDate] = useState('');
 
+  const updateQueryEvent = (eventId: any): void => {
+    const newQuery = { ...props.router.query, event: eventId };
+    props.router.push(
+      {
+        pathname: props.router.pathname,
+        query: newQuery,
+      },
+      undefined,
+      { shallow: true, scroll: false }
+    );
+  };
+
+  const updateActiveDate = (opt: string): void => {
+    setActiveDate(opt);
+    updateQueryEvent(groupedEvents[opt][0].id);
+  };
+
   const filteredEvents: ProgramView_events = props.events.filter((event) =>
     showPromoted ? event.type === 'A_7' : event.type !== 'A_7'
   );
@@ -49,10 +69,33 @@ const ProgramView = (props: Props): JSX.Element => {
     'date'
   );
 
-  const sortedKeys = sortBy(Object.keys(groupedEvents || {}));
+  // const sortedEvents = sortBy(props.events, 'timeStart');
+
+  const startDate = props.currentMetaData.startDate;
+  const endDate = props.currentMetaData.endDate;
+
+  // Use for "Før itDAGENE tab, need to update find closes event logic"
+  // const otherGrouped = groupBy(sortedEvents, ({ date }) =>
+  //   date === startDate || date === endDate ? date : 'Før itDAGENE'
+  // );
+
+  const sortedKeys = sortBy(Object.keys(groupedEvents), (key) => [
+    dayjs(key).isValid(),
+    key,
+  ]);
+
+  const parsedQueryEvent =
+    typeof props.router.query.event === 'string'
+      ? props.events.find((event) => event.id === props.router.query.event)
+      : null;
 
   useEffect(() => {
-    setActiveDate(findClosestDate(sortedKeys));
+    const parsedDate = parsedQueryEvent?.date;
+    setActiveDate(
+      parsedDate === startDate || parsedDate === endDate
+        ? parsedDate
+        : findClosestDate(sortedKeys)
+    );
   }, []);
 
   if (props.events.length === 0) {
@@ -82,11 +125,15 @@ const ProgramView = (props: Props): JSX.Element => {
         <EventsToggle
           options={sortedKeys}
           activeOption={activeDate}
-          setActiveOption={setActiveDate}
-          dateOptions
+          setActiveOption={updateActiveDate}
         />
       </Flex>
-      <ProgramTimeline activeDate={activeDate} events={groupedEvents} />
+      <ProgramTimeline
+        activeDate={activeDate}
+        updateQueryEvent={updateQueryEvent}
+        events={groupedEvents}
+        router={props.router}
+      />
     </Flex>
   );
 };
@@ -111,12 +158,10 @@ export default createFragmentContainer(ProgramView, {
       maxParticipants
     }
   `,
-  stands: graphql`
-    fragment ProgramView_stands on Stand @relay(plural: true) {
-      company {
-        id
-      }
-      slug
+  currentMetaData: graphql`
+    fragment ProgramView_currentMetaData on MetaData {
+      startDate
+      endDate
     }
   `,
 });

components/Stands/StandProgram.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import Loading from '../LoadingIndicator';
-import { graphql, useFragment } from 'relay-hooks';
-import { StandProgram_stand$key } from '../../__generated__/StandProgram_stand.graphql';
-import ProgramView from '../Program/ProgramView';
 import Flex from '../Styled/Flex';
 import FlexItem from '../Styled/FlexItem';
 
@@ -12,34 +8,51 @@ const StyledH1 = styled.h1`
   font-weight: 100;
 `;
 
-type Props = {
-  stand: StandProgram_stand$key;
-};
+// type Props = {
+//   stand: StandProgram_stand$key;
+// };
 
-const StandProgram = (props: Props): JSX.Element => {
-  const program = useFragment(
-    graphql`
-      fragment StandProgram_stand on Stand {
-        events {
-          ...ProgramView_events
-        }
-      }
-    `,
-    props.stand
-  );
+/*
+ * Stands pages are not used anymore, this component lead to errors with
+ * the new program page and is therefore removed for simplicity of development.
+ */
+const StandProgram = (): JSX.Element => {
+  // const program = useFragment(
+  //   graphql`
+  //     fragment StandProgram_stand on Stand {
+  //       events {
+  //         ...ProgramView_events
+  //       }
+  //       currentMetaData {
+  //         ...ProgramView_currentMetaData
+  //       }
+  //     }
+  //   `,
+  //   props.stand
+  // );
 
-  return program ? (
-    program.events && program.events.length > 0 ? (
-      <ProgramView events={program.events} stands={null} />
-    ) : (
-      <Flex justifyContent="center" style={{ alignItems: 'center' }}>
-        <FlexItem>
-          <StyledH1>Programmet er tomt</StyledH1>
-        </FlexItem>
-      </Flex>
-    )
-  ) : (
-    <Loading />
+  // return program ? (
+  //   program.events && program.events.length > 0 ? (
+  //     <ProgramView
+  //       events={program.events}
+  //       currentMetaData={program.currentMetaData}
+  //     />
+  //   ) : (
+  //     <Flex justifyContent="center" style={{ alignItems: 'center' }}>
+  //       <FlexItem>
+  //         <StyledH1>Programmet er tomt</StyledH1>
+  //       </FlexItem>
+  //     </Flex>
+  //   )
+  // ) : (
+  //   <Loading />
+  // );
+  return (
+    <Flex justifyContent="center" style={{ alignItems: 'center' }}>
+      <FlexItem>
+        <StyledH1>Programmet er ikke støttet.</StyledH1>
+      </FlexItem>
+    </Flex>
   );
 };
 

components/Stands/StandView.tsx

@@ -99,7 +99,7 @@ const SubPage = ({
         </>
       );
     case 'program':
-      return <ProgramPage stand={stand} />;
+      return <ProgramPage />;
     case 'joblistings':
       return <JobListingsPage company={stand.company} />;
     default:
@@ -201,7 +201,6 @@ export default createFragmentContainer(Stand, {
       qaUrl
       chatUrl
       ...AboutStand_stand
-      ...StandProgram_stand
     }
   `,
 });

package.json

@@ -8,7 +8,7 @@
     "build": "sed \"s/throw new Error(\\`Build optimization failed/new Error(\\`FUUUU: /g\" node_modules/next/dist/build/index.js  > node_modules/next.bak && mv node_modules/next.bak node_modules/next/dist/build/index.js && next build",
     "start": "NODE_ENV=production next start",
     "schema:prod": "mkdir -p schema && get-graphql-schema https://itdagene.no/graphql > schema/schema.graphql",
-    "schema:dev": "mkdir -p schema && get-graphql-schema http://localhost:8000/graphql > schema/schema.graphql",
+    "schema:dev": "mkdir -p schema && get-graphql-schema http://127.0.0.1:8000/graphql > schema/schema.graphql",
     "relay": "relay-compiler --src ./ --exclude '**/schema/**' --exclude '**/.next/**' '**/node_modules/**' '**/test/**'  '**/__generated__/**' --schema ./schema/schema.graphql --customScalars.Date=String --customScalars.Time=String --customScalars.DateTime=String --language typescript --artifactDirectory ./__generated__",
     "lint:prettier": "prettier '**/*.{js,ts,tsx,css,graphql}' --list-different",
     "lint:eslint": "eslint . --ext .js,.ts,.tsx --ignore-path .prettierignore",

pages/program.tsx

@@ -4,13 +4,13 @@ import { withDataAndLayout, WithDataAndLayoutProps } from '../lib/withData';
 import { program_QueryResponse } from '../__generated__/program_Query.graphql';
 import PageView from '../components/PageView';
 import ProgramView from '../components/Program/ProgramView';
-import styled from 'styled-components';
 import Flex from '../components/Styled/Flex';
 import FlexItem from '../components/Styled/FlexItem';
 
 const Index = ({
   error,
   props,
+  router,
 }: WithDataAndLayoutProps<program_QueryResponse>): JSX.Element => (
   <>
     {props.programPage && <PageView hideContent page={props.programPage} />}
@@ -20,7 +20,8 @@ const Index = ({
     {props.events ? (
       <ProgramView
         events={props.events}
-        stands={props.stands}
+        router={router}
+        currentMetaData={props.currentMetaData}
         // showToggleButton
         // useLinks
       />
@@ -37,12 +38,12 @@ const Index = ({
 export default withDataAndLayout(Index, {
   query: graphql`
     query program_Query {
-      stands {
-        ...ProgramView_stands
-      }
       events {
         ...ProgramView_events
       }
+      currentMetaData {
+        ...ProgramView_currentMetaData
+      }
       programPage: page(slug: "program") {
         ...PageView_page
         ...metadata_metadata

utils/findClosestDate.ts

@@ -9,6 +9,7 @@ export const findClosestDate = (dates: string[], parseFormat = ''): string => {
   let smallestDifference = Math.abs(dayjs(closestDate, parseFormat).diff(now));
 
   for (let i = 1; i < dates.length; i++) {
+    if (!dayjs(dates[i]).isValid()) continue;
     const currentDifference = Math.abs(dayjs(dates[i], parseFormat).diff(now));
     if (currentDifference < smallestDifference) {
       smallestDifference = currentDifference;