Move SemesterPicker into top grid (#150)

* move SemesterPicker to the page level (to be further moved to the layout) * simplify Results useQuery code (and fix queryKey) * `SemesterPicker` ziska vsetky props sam * move `SemesterPicker` into the top grid * rename `MenuSeminars`->`TopGrid` * fix: show SemesterPicker again only on `zadania` and `vysledky` pages
ZdruzenieSTROM · Aug 7, 2023 · d4b53be · d4b53be
1 parent 001a0de
commit d4b53be
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 85 deletions.
diff --git a/src/components/PageLayout/PageLayout.module.scss b/src/components/PageLayout/PageLayout.module.scss
@@ -25,4 +25,4 @@
 }
 .col3 {
   grid-column-end: 5;
-}
+}
diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
@@ -6,9 +6,9 @@ import {PageTitleContainer} from '@/utils/PageTitleContainer'
 import {Banner} from './Banner/Banner'
 import {Footer} from './Footer/Footer'
 import {MenuMain} from './MenuMain/MenuMain'
-import {MenuSeminars} from './MenuSeminars/MenuSeminars'
 import styles from './PageLayout.module.scss'
 import {StromLogo} from './StromLogo/StromLogo'
+import {TopGrid} from './TopGrid/TopGrid'
 
 type PageLayoutProps = {
   contentWidth?: number
@@ -27,7 +27,7 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
 
   return (
     <div className={styles.pageContainer}>
-      <MenuSeminars title={pageTitle} />
+      <TopGrid title={pageTitle} />
       <Banner />
       <MenuMain />
       <div className={styles.grid}>

diff --git a/...out/MenuSeminars/MenuSeminars.module.scss → ...ts/PageLayout/TopGrid/TopGrid.module.scss b/...out/MenuSeminars/MenuSeminars.module.scss → ...ts/PageLayout/TopGrid/TopGrid.module.scss
@@ -1,17 +1,40 @@
 .container {
   position: fixed;
   top: 0;
-  width: 100%;
-  display: grid;
-  grid-template: 1fr 1fr / 1fr 3fr;
-  background-color: white;
+  left: 0;
+  right: 0;
   height: 10rem;
+  background-color: white;
   z-index: 3;
+  display: grid;
+  grid-template: 1fr 1fr / 1fr 2fr 1fr;
 }
 
 .menu {
+  // occupies whole first row to use the other columns on smaller screens
   grid-row: 1;
-  grid-column: 1 / 5;
+  grid-column: 1 / 4;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.title {
+  // second row center column
+  grid-row: 2;
+  grid-column: 2;
+  font-size: 1.7rem;
+  font-weight: bold;
+  padding-left: 20px;
+  display: flex;
+  align-items: center;
+  text-transform: uppercase;
+  font-style: italic;
+}
+
+.semesterPicker {
+  // second row right column
+  grid-row: 2;
+  grid-column: 3;
   display: flex;
   justify-content: flex-end;
 }
@@ -30,23 +53,12 @@
   color: black;
 }
 
-.menuItem.active, .menuItem:hover{
+.menuItem.active,
+.menuItem:hover {
   background-color: black;
 
   a {
     border-color: white;
     color: white;
   }
 }
-
-.title {
-  font-size: 1.7rem;
-  font-weight: bold;
-  padding-left: 20px;
-  display: flex;
-  align-items: center;
-  text-transform: uppercase;
-  font-style: italic;
-  grid-row: 2;
-  grid-column: 2 / 5;
-}
diff --git a/...enuSeminars/MenuSeminars.module.scss.d.ts → ...geLayout/TopGrid/TopGrid.module.scss.d.ts b/...enuSeminars/MenuSeminars.module.scss.d.ts → ...geLayout/TopGrid/TopGrid.module.scss.d.ts
@@ -3,6 +3,7 @@ export type Styles = {
   container: string
   menu: string
   menuItem: string
+  semesterPicker: string
   title: string
 }
 

diff --git a/.../PageLayout/MenuSeminars/MenuSeminars.tsx → ...components/PageLayout/TopGrid/TopGrid.tsx b/.../PageLayout/MenuSeminars/MenuSeminars.tsx → ...components/PageLayout/TopGrid/TopGrid.tsx
@@ -1,18 +1,23 @@
 import clsx from 'clsx'
 import Link from 'next/link'
+import {useRouter} from 'next/router'
 import {FC} from 'react'
 
+import {SemesterPicker} from '@/components/SemesterPicker/SemesterPicker'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
-import styles from './MenuSeminars.module.scss'
+import styles from './TopGrid.module.scss'
 
-type MenuSeminarsProps = {
+type TopGridProps = {
   title: string
 }
 
-export const MenuSeminars: FC<MenuSeminarsProps> = ({title}) => {
+export const TopGrid: FC<TopGridProps> = ({title}) => {
   const {seminar} = useSeminarInfo()
 
+  // z napr. `/matik/zadania(/*)` vytiahne `zadania`
+  const page = useRouter().pathname.split('/')[2]
+
   return (
     <div className={styles.container}>
       <div className={styles.menu}>
@@ -27,6 +32,11 @@ export const MenuSeminars: FC<MenuSeminarsProps> = ({title}) => {
         </div>
       </div>
       <div className={styles.title}>{title}</div>
+      {(page === 'zadania' || page === 'vysledky') && (
+        <div className={styles.semesterPicker}>
+          <SemesterPicker page={page} />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
@@ -4,7 +4,6 @@ import Image from 'next/image'
 import {Dispatch, FC, SetStateAction, useState} from 'react'
 
 import {Button, Link} from '@/components/Clickable/Clickable'
-import {SemesterPicker} from '@/components/SemesterPicker/SemesterPicker'
 import {Problem, SeriesWithProblems} from '@/types/api/competition'
 import {useDataFromURL} from '@/utils/useDataFromURL'
 import {useHasPermissions} from '@/utils/useHasPermissions'
@@ -106,7 +105,7 @@ const overrideCycle = (prev: boolean | undefined) => {
 }
 
 export const Problems: FC = () => {
-  const {id, semesterList, seminar, loading} = useDataFromURL()
+  const {id, seminar, loading} = useDataFromURL()
 
   // used to display discussions
   const [displaySideContent, setDisplaySideContent] = useState<{
@@ -155,11 +154,6 @@ export const Problems: FC = () => {
           loading.currentSeriesIsLoading ||
           seriesIsLoading ||
           permissionsIsLoading) && <Loading />}
-        <SemesterPicker
-          semesterList={semesterList}
-          selectedItem={{semesterId: id.semesterId, seriesId: id.seriesId}}
-          page={'problems'}
-        />
         {hasPermissions && (
           <div className={styles.adminSection}>
             <Link href={`/${seminar}/admin/opravovanie/${id.semesterId}`}>Admin: Opravovanie</Link>

diff --git a/src/components/Results/Results.tsx b/src/components/Results/Results.tsx
@@ -2,42 +2,28 @@ import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {FC} from 'react'
 
-import {SemesterPicker} from '@/components/SemesterPicker/SemesterPicker'
 import {useDataFromURL} from '@/utils/useDataFromURL'
 
 import {Loading} from '../Loading/Loading'
 import styles from './Results.module.scss'
 import {Result, ResultsRow} from './ResultsRow'
 
 export const Results: FC = () => {
-  const {id, displayWholeSemesterOnResults, semesterList} = useDataFromURL()
+  const {id, displayWholeSemesterOnResults} = useDataFromURL()
+
+  const competitionEndpoint = displayWholeSemesterOnResults ? 'semester' : 'series'
+  const idForEndpoint = displayWholeSemesterOnResults ? id.semesterId : id.seriesId
 
   const {data: resultsData, isLoading: resultsIsLoading} = useQuery({
-    queryKey: [
-      'competition',
-      displayWholeSemesterOnResults ? 'semester/' : 'series/',
-      displayWholeSemesterOnResults ? id.semesterId : id.seriesId,
-      'results',
-    ],
-    queryFn: () =>
-      axios.get<Result[]>(
-        `/api/competition/${displayWholeSemesterOnResults ? 'semester/' : 'series/'}${
-          displayWholeSemesterOnResults ? id.semesterId : id.seriesId
-        }/results`,
-      ),
+    queryKey: ['competition', competitionEndpoint, idForEndpoint, 'results'],
+    queryFn: () => axios.get<Result[]>(`/api/competition/${competitionEndpoint}/${idForEndpoint}/results`),
     enabled: id.semesterId !== -1 || id.seriesId !== -1,
   })
   const results = resultsData?.data ?? []
 
   return (
     <div>
       {resultsIsLoading && <Loading />}
-      <SemesterPicker
-        semesterList={semesterList}
-        selectedItem={{semesterId: id.semesterId, seriesId: id.seriesId}}
-        page={'results'}
-        displayWholeSemesterOption={displayWholeSemesterOnResults}
-      />
       <div className={styles.results}>
         {results.map((result, index) => (
           <ResultsRow result={result} key={index} />

diff --git a/src/components/SemesterPicker/SemesterPicker.module.scss b/src/components/SemesterPicker/SemesterPicker.module.scss
@@ -1,12 +1,6 @@
 .menu {
-  position: fixed;
-  top: 5rem;
-  right: 0px;
-  width: 25vw;
-  height: 5rem;
   z-index: 1000;
   user-select: none;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-}
+}
diff --git a/src/components/SemesterPicker/SemesterPicker.tsx b/src/components/SemesterPicker/SemesterPicker.tsx
@@ -1,6 +1,7 @@
 import {FC, useEffect} from 'react'
 
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
+import {useDataFromURL} from '@/utils/useDataFromURL'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {Dropdown, DropdownOption} from './Dropdown'
@@ -28,26 +29,11 @@ export interface SemesterListItem {
   series_set: SeriesListItem[]
 }
 
-export const SemesterPicker: FC<{
-  semesterList: SemesterListItem[]
-  selectedItem: {semesterId: number; seriesId: number}
-  page: string
-  displayWholeSemesterOption?: boolean
-}> = ({semesterList, selectedItem, page, displayWholeSemesterOption = false}) => {
+export const SemesterPicker: FC<{page: 'zadania' | 'vysledky'}> = ({page}) => {
   const {seminar} = useSeminarInfo()
   const {setPageTitle} = PageTitleContainer.useContainer()
 
-  // SemesterPicker menu sa zobrazuje na viacerých stránkach, podľa toho aká je hodnota premennej page.
-  // Menu sa správa trochu odlišne v závyslosti od stránky na ktorej sa zobrazuje.
-  let pageLink = ''
-  switch (page) {
-    case 'problems':
-      pageLink = 'zadania'
-      break
-    case 'results':
-      pageLink = 'vysledky'
-      break
-  }
+  const {id: selectedItem, semesterList, displayWholeSemesterOnResults} = useDataFromURL()
 
   const semester = semesterList.find(({id}) => id === selectedItem.semesterId)
   const series = semester?.series_set.find(({id}) => id === selectedItem.seriesId)
@@ -57,21 +43,21 @@ export const SemesterPicker: FC<{
     let pageTitleToSet = ''
     if (semester) {
       const semesterTitle = `${semester?.year}. ročník - ${semester?.season_code === 0 ? 'zimný' : 'letný'} semester`
-      if (displayWholeSemesterOption) {
+      if (displayWholeSemesterOnResults) {
         pageTitleToSet = semesterTitle
       } else if (series) {
         pageTitleToSet = `${semesterTitle}${series?.order ? ` - ${series?.order}. séria` : ''}`
       }
     }
     setPageTitle(pageTitleToSet)
     // `semester` a `series` su nami vytiahnute objekty, tak mozu triggerovat effekt kazdy render. nemalo by vadit
-  }, [displayWholeSemesterOption, semester, series, setPageTitle])
+  }, [displayWholeSemesterOnResults, semester, series, setPageTitle])
 
   const dropdownSemesterList = semesterList.map((semester) => {
     return {
       id: semester.id,
       text: `${semester.year}. ročník - ${semester.season_code === 0 ? 'zimný' : 'letný'} semester`,
-      link: `/${seminar}/${pageLink}/${semester.year}/${semester.season_code === 0 ? 'zima' : 'leto'}`,
+      link: `/${seminar}/${page}/${semester.year}/${semester.season_code === 0 ? 'zima' : 'leto'}`,
       selected: semester.id === selectedItem.semesterId,
     }
   })
@@ -83,19 +69,17 @@ export const SemesterPicker: FC<{
       return {
         id: series.id,
         text: `${series.order}. séria`,
-        link: `/${seminar}/${pageLink}/${semester.year}/${semester.season_code === 0 ? 'zima' : 'leto'}/${
-          series.order
-        }`,
-        selected: !displayWholeSemesterOption && series.id === selectedItem.seriesId,
+        link: `/${seminar}/${page}/${semester.year}/${semester.season_code === 0 ? 'zima' : 'leto'}/${series.order}`,
+        selected: !displayWholeSemesterOnResults && series.id === selectedItem.seriesId,
       }
     })
 
-    if (page === 'results') {
+    if (page === 'vysledky') {
       dropdownSeriesList.push({
         id: -1,
         text: 'obe série',
-        link: `/${seminar}/${pageLink}/${semester.year}/${semester.season_code === 0 ? 'zima' : 'leto'}`,
-        selected: displayWholeSemesterOption,
+        link: `/${seminar}/${page}/${semester.year}/${semester.season_code === 0 ? 'zima' : 'leto'}`,
+        selected: displayWholeSemesterOnResults,
       })
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,4 +25,4 @@ @@
     }
     .col3 {
       grid-column-end: 5;
-    }
+    }