diff --git a/components/Program/Components/EventsToggle.tsx b/components/Program/Components/EventsToggle.tsx index 34ea661f..f45c7b99 100644 --- a/components/Program/Components/EventsToggle.tsx +++ b/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 ( @@ -26,7 +25,9 @@ const EventsToggle = ({ active={opt === activeOption} > - {dateOptions ? dayjs(opt).format('dddd DD.MM').toUpperCase() : opt} + {dayjs(opt).isValid() + ? capitalize(dayjs(opt).format('dddd DD.MM')) + : opt} ))} diff --git a/components/Program/Components/ProgramTimeline.tsx b/components/Program/Components/ProgramTimeline.tsx index 3e922352..7010dc8f 100644 --- a/components/Program/Components/ProgramTimeline.tsx +++ b/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; + 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>(); + 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 = ({ setActiveEvent(event)} + onClick={(): void => updateActiveEvent(event)} >

{ 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 => { - + ); }; @@ -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 } `, }); diff --git a/components/Stands/StandProgram.tsx b/components/Stands/StandProgram.tsx index 2aaa6f0d..162d430a 100644 --- a/components/Stands/StandProgram.tsx +++ b/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 ? ( - - ) : ( - - - Programmet er tomt - - - ) - ) : ( - + // return program ? ( + // program.events && program.events.length > 0 ? ( + // + // ) : ( + // + // + // Programmet er tomt + // + // + // ) + // ) : ( + // + // ); + return ( + + + Programmet er ikke støttet. + + ); }; diff --git a/components/Stands/StandView.tsx b/components/Stands/StandView.tsx index ce312a2a..01777ac3 100644 --- a/components/Stands/StandView.tsx +++ b/components/Stands/StandView.tsx @@ -99,7 +99,7 @@ const SubPage = ({ ); case 'program': - return ; + return ; case 'joblistings': return ; default: @@ -201,7 +201,6 @@ export default createFragmentContainer(Stand, { qaUrl chatUrl ...AboutStand_stand - ...StandProgram_stand } `, }); diff --git a/package.json b/package.json index ef9724fb..e4726060 100644 --- a/package.json +++ b/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", diff --git a/pages/program.tsx b/pages/program.tsx index 101cbd53..a5d6ce02 100644 --- a/pages/program.tsx +++ b/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): JSX.Element => ( <> {props.programPage && } @@ -20,7 +20,8 @@ const Index = ({ {props.events ? ( @@ -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 diff --git a/utils/findClosestDate.ts b/utils/findClosestDate.ts index cf36db45..a4589a7d 100644 --- a/utils/findClosestDate.ts +++ b/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;