diff --git a/src/features/Tournaments/pages/EventsPage/EventsPage.tsx b/src/features/Tournaments/pages/EventsPage/EventsPage.tsx index 66cfcb7..c721bd4 100644 --- a/src/features/Tournaments/pages/EventsPage/EventsPage.tsx +++ b/src/features/Tournaments/pages/EventsPage/EventsPage.tsx @@ -1,18 +1,14 @@ import { useState } from 'react' -import { Tournament, TournamentEventTypeEnum } from 'src/graphql' +import { TournamentEventTypeEnum } from 'src/graphql' +import { useTournament } from '../TournamentDetailsPage/TournamentDetailsContext'; import EventCard from './EventCard/EventCard'; import EventsFilters from './EventsFilters/EventsFilters'; -interface Props { - data: Pick -} - -export default function EventsPage({ data: { events, events_count } }: Props) { +export default function EventsPage() { const [searchFilter, setSearchFilter] = useState("") const [eventFilter, setEventFilter] = useState(null) + const { tournamentDetails: { events, events_count } } = useTournament() return (
diff --git a/src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx b/src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx index 0c2f820..f07737e 100644 --- a/src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx +++ b/src/features/Tournaments/pages/MakersPage/MakerCard/MakerCard.tsx @@ -10,6 +10,7 @@ import InfoCard from "src/Components/InfoCard/InfoCard"; import { Link } from "react-router-dom"; import { useState } from "react"; import { NotificationsService } from "src/services"; +import { useTournament } from "../../TournamentDetailsPage/TournamentDetailsContext"; type MakerType = GetMakersInTournamentQuery['getMakersInTournament']['makers'][number] @@ -23,6 +24,9 @@ export default function MakerCard({ maker, isMe }: Props) { const dispatch = useAppDispatch(); const [hackingStatus, setHackingStatus] = useState(maker.hacking_status) + const { tournamentDetails: { id: tournamentId } } = useTournament() + + const contactLinksAvailable = maker.user.github || maker.user.linkedin || maker.user.twitter; const [udpateInfo, updateInfoMutation] = useUpdateTournamentRegistrationMutation() @@ -42,7 +46,7 @@ export default function MakerCard({ maker, isMe }: Props) { setHackingStatus(value); udpateInfo({ variables: { - tournamentId: 12, + tournamentId, data: { hacking_status: value } diff --git a/src/features/Tournaments/pages/MakersPage/MakersPage.tsx b/src/features/Tournaments/pages/MakersPage/MakersPage.tsx index 4c1b90a..ebdf5d4 100644 --- a/src/features/Tournaments/pages/MakersPage/MakersPage.tsx +++ b/src/features/Tournaments/pages/MakersPage/MakersPage.tsx @@ -1,18 +1,17 @@ -import { Tournament, useMeTournamentQuery, User, } from 'src/graphql' +import { useMeTournamentQuery, User, } from 'src/graphql' +import { useTournament } from '../TournamentDetailsPage/TournamentDetailsContext'; import MakerCard from './MakerCard/MakerCard'; import MakerCardSkeleton from './MakerCard/MakerCard.Skeleton'; import ParticipantsSection from './ParticipantsSection/ParticipantsSection'; -interface Props { - data: Pick -} -export default function MakersPage({ data: { id } }: Props) { +export default function MakersPage() { + + const { tournamentDetails: { id } } = useTournament() const query = useMeTournamentQuery({ - variables: { id: id } + variables: { id } }); return ( diff --git a/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx b/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx index 3893659..8a821d8 100644 --- a/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx +++ b/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx @@ -2,40 +2,33 @@ import DOMPurify from 'dompurify' import { marked } from 'marked' import Card from 'src/Components/Card/Card' import { Tournament } from 'src/graphql' +import { useTournament } from '../TournamentDetailsPage/TournamentDetailsContext' import FAQsSection from './FAQsSection/FAQsSection' import JudgesSection from './JudgesSection/JudgesSection' import PrizesSection from './PrizesSection/PrizesSection' import RegisterCard from './RegisterCard/RegisterCard' -interface Props { - data: Pick - avatars: string[] - isRegistered: boolean; -} -export default function OverviewPage({ data, avatars, isRegistered }: Props) { + +export default function OverviewPage() { + + const { tournamentDetails, makers, myParticipationInfo } = useTournament() + return (
- + m.user.avatar)} isRegistered={!!myParticipationInfo} />
- - - + + +
) } diff --git a/src/features/Tournaments/pages/ProjectsPage/ProjectsPage.tsx b/src/features/Tournaments/pages/ProjectsPage/ProjectsPage.tsx index 0e7b6b1..4aa109b 100644 --- a/src/features/Tournaments/pages/ProjectsPage/ProjectsPage.tsx +++ b/src/features/Tournaments/pages/ProjectsPage/ProjectsPage.tsx @@ -1,18 +1,17 @@ import { useDebouncedState } from '@react-hookz/web'; import { useState } from 'react' import { FiSearch } from 'react-icons/fi'; -import { Tournament, useGetProjectsInTournamentQuery } from 'src/graphql' +import { useGetProjectsInTournamentQuery } from 'src/graphql' +import { useTournament } from '../TournamentDetailsPage/TournamentDetailsContext'; import ProjectCard from './ProjectCard/ProjectCard'; import ProjectCardSkeleton from './ProjectCard/ProjectCard.Skeleton'; -interface Props { - data: Pick -} -export default function ProjectsPage({ data: { id } }: Props) { +export default function ProjectsPage() { + const { tournamentDetails: { id } } = useTournament() + const [searchFilter, setSearchFilter] = useState(""); const [debouncedsearchFilter, setDebouncedSearchFilter] = useDebouncedState("", 500); diff --git a/src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx b/src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx index 3a02bfb..dbc2bdf 100644 --- a/src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx +++ b/src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx @@ -1,36 +1,34 @@ import dayjs from 'dayjs' import advancedFormat from 'dayjs/plugin/advancedFormat' import React from 'react' +import { Helmet } from 'react-helmet' import { IoLocationOutline } from 'react-icons/io5' -import { Tournament } from 'src/graphql' -import Navigation from '../Navigation/Navigation' +import { useTournament } from '../TournamentDetailsContext' dayjs.extend(advancedFormat) -interface Props { - data: Pick -} -export default function Header({ data }: Props) { + +export default function Header() { + const { tournamentDetails } = useTournament() return ( -
- -
-
- -
-

TOURNAMENT 🏆

-

{data.title}

-

{`${dayjs(data.start_date).format('Do')} - ${dayjs(data.end_date).format('Do MMMM, YYYY')}`}

+ <> + + {tournamentDetails.title} Tournament + +
+ +
+
+ +
+

TOURNAMENT 🏆

+

{tournamentDetails.title}

+

{`${dayjs(tournamentDetails.start_date).format('Do')} - ${dayjs(tournamentDetails.end_date).format('Do MMMM, YYYY')}`}

-

{data.location}

+

{tournamentDetails.location}

+
-
+ ) } diff --git a/src/features/Tournaments/pages/TournamentDetailsPage/Navigation/Navigation.tsx b/src/features/Tournaments/pages/TournamentDetailsPage/Navigation/Navigation.tsx index fa910a2..9df9f4e 100644 --- a/src/features/Tournaments/pages/TournamentDetailsPage/Navigation/Navigation.tsx +++ b/src/features/Tournaments/pages/TournamentDetailsPage/Navigation/Navigation.tsx @@ -1,30 +1,29 @@ import { useMemo } from 'react' import { NavLink } from 'react-router-dom' -import { Tournament } from 'src/graphql' import { useCarousel } from 'src/utils/hooks' +import { useTournament } from '../TournamentDetailsContext' -interface Props { - data: Pick -} -export default function Navigation({ data }: Props) { +export default function Navigation() { const { viewportRef, } = useCarousel({ align: 'start', slidesToScroll: 2, containScroll: "trimSnaps", }) + const { tournamentDetails } = useTournament() + const links = useMemo(() => [ { text: "Overview", path: "overview", }, { - text: `Events (${data.events_count})`, + text: `Events (${tournamentDetails.events_count})`, path: "events", }, { - text: `Makers (${data.makers_count})`, + text: `Makers (${tournamentDetails.makers_count})`, path: "makers", }, { @@ -42,7 +41,7 @@ export default function Navigation({ data }: Props) { // path: "resources", // isDisabled: true, // }, - ], [data.events_count, data.makers_count]) + ], [tournamentDetails.events_count, tournamentDetails.makers_count]) return (
diff --git a/src/features/Tournaments/pages/TournamentDetailsPage/TournamentDetailsContext.tsx b/src/features/Tournaments/pages/TournamentDetailsPage/TournamentDetailsContext.tsx new file mode 100644 index 0000000..63a71d2 --- /dev/null +++ b/src/features/Tournaments/pages/TournamentDetailsPage/TournamentDetailsContext.tsx @@ -0,0 +1,46 @@ + + +import React, { createContext, PropsWithChildren, useContext } from 'react' +import { useParams } from 'react-router-dom' +import LoadingPage from 'src/Components/LoadingPage/LoadingPage' +import NotFoundPage from 'src/features/Shared/pages/NotFoundPage/NotFoundPage' +import { GetTournamentByIdQuery, useGetTournamentByIdQuery } from 'src/graphql' + +interface ITournamentDetails { + makers: GetTournamentByIdQuery['getMakersInTournament']['makers'] + me: GetTournamentByIdQuery['me'] + tournamentDetails: GetTournamentByIdQuery['getTournamentById'] + myParticipationInfo: GetTournamentByIdQuery['tournamentParticipationInfo'] +} + +const Ctx = createContext(null!) + + +export default function TournamentDetailsContext({ children }: PropsWithChildren<{}>) { + const { id } = useParams() + + const tournaemntQuery = useGetTournamentByIdQuery({ + variables: { + id: Number(id)!, + }, + skip: !id + }) + + + + if (tournaemntQuery.loading) + return + + if (!tournaemntQuery.data?.getTournamentById) + return + + const { getMakersInTournament: makers, me, getTournamentById: tournamentDetails, tournamentParticipationInfo: myParticipationInfo } = tournaemntQuery.data + + return ( + {children} + ) +} + +export const useTournament = () => { + return useContext(Ctx) +} \ No newline at end of file diff --git a/src/features/Tournaments/pages/TournamentDetailsPage/TournamentDetailsPage.tsx b/src/features/Tournaments/pages/TournamentDetailsPage/TournamentDetailsPage.tsx index 366705b..a939343 100644 --- a/src/features/Tournaments/pages/TournamentDetailsPage/TournamentDetailsPage.tsx +++ b/src/features/Tournaments/pages/TournamentDetailsPage/TournamentDetailsPage.tsx @@ -7,49 +7,35 @@ import Navigation from './Navigation/Navigation' import EventsPage from '../EventsPage/EventsPage' import MakersPage from '../MakersPage/MakersPage' import ProjectsPage from '../ProjectsPage/ProjectsPage' -import { useGetTournamentByIdQuery, GetTournamentByIdQuery } from 'src/graphql' -import LoadingPage from 'src/Components/LoadingPage/LoadingPage' -import NotFoundPage from 'src/features/Shared/pages/NotFoundPage/NotFoundPage' +import { GetTournamentByIdQuery } from 'src/graphql' +import TournamentDetailsContext from './TournamentDetailsContext' + export type MeTournament = GetTournamentByIdQuery['me'] export default function TournamentDetailsPage() { - const { id } = useParams() - - const tournaemntQuery = useGetTournamentByIdQuery({ - variables: { - id: Number(id)!, - }, - skip: !id - }) - - if (tournaemntQuery.loading) - return - - if (!tournaemntQuery.data?.getTournamentById) - return return (
- - {tournaemntQuery.data.getTournamentById.title} Tournament - -
- -
- - } /> - m.user.avatar)} isRegistered={!!tournaemntQuery.data.tournamentParticipationInfo} />} /> - } /> - } /> - } /> - -
+ +
+ + +
+ + } /> + } /> + } /> + } /> + } /> + +
+
) }