Add banner info (#214)

* Add banner info * Move PageTitleContainer into PageLayout * Move CompetitionPage into own component * Add style to <p> in Markdown component * Move BannerContainer into PayeLayout * fix after review --------- Co-authored-by: matushl <[email protected]>
ZdruzenieSTROM · Nov 16, 2023 · 5ee3145 · 5ee3145
1 parent d7f5ec8
commit 5ee3145
Show file tree

Hide file tree

Showing 16 changed files with 212 additions and 155 deletions.
diff --git a/src/components/CompetitionPage/CompetitionPage.tsx b/src/components/CompetitionPage/CompetitionPage.tsx
@@ -0,0 +1,107 @@
+import {useRouter} from 'next/router'
+import {FC, Fragment} from 'react'
+
+import {Link} from '@/components/Clickable/Clickable'
+import {Competition, Event} from '@/types/api/competition'
+import {BannerContainer} from '@/utils/BannerContainer'
+import {formatDate} from '@/utils/formatDate'
+
+import styles from './competition.module.scss'
+
+type OurCompetition = Omit<Competition, 'history_events'> & {history_events: Event[]}
+
+type CompetitionPageProps = {
+  competition: OurCompetition
+}
+
+export const CompetitionPage: FC<CompetitionPageProps> = ({
+  competition: {name, who_can_participate, description, upcoming_or_current_event, competition_type, history_events},
+}) => {
+  const {setBannerText} = BannerContainer.useContainer()
+
+  const startDate = upcoming_or_current_event ? formatDate(upcoming_or_current_event.start) : null
+  const endDate = upcoming_or_current_event ? formatDate(upcoming_or_current_event.end) : null
+  setBannerText(startDate ? `${name} sa bude konať  ${startDate}` : '')
+
+  const router = useRouter()
+  const rulesLink = `${router.asPath}/pravidla`
+
+  return (
+    <>
+      <div className={styles.mainText}>
+        {who_can_participate && <p>Pre koho? {who_can_participate}</p>}
+        <p>{description}</p>
+      </div>
+      <div className={styles.mainText}>
+        {upcoming_or_current_event ? (
+          <div className={styles.mainText}>
+            <p>
+              <b>Nadchádzajúci ročník:</b>
+            </p>
+            {startDate && <p>Odkedy? {startDate} </p>}
+            {endDate && <p>Dokedy? {endDate}</p>}
+            {upcoming_or_current_event.publication_set.length > 0 && (
+              <p>
+                <Link href={`/api/${upcoming_or_current_event.publication_set[0].file}`}>Pozvánka</Link>
+              </p>
+            )}
+            {upcoming_or_current_event.registration_link && (
+              <div>
+                <p>
+                  Registrácia prebieha do:
+                  {upcoming_or_current_event.registration_link.end}
+                  <Link href={upcoming_or_current_event.registration_link.url}>Registračný formulár</Link>
+                </p>
+
+                <p>{upcoming_or_current_event.registration_link.additional_info}</p>
+              </div>
+            )}
+          </div>
+        ) : (
+          <p>
+            <b>Nadchádzajúci ročník:</b> Pripravujeme
+          </p>
+        )}
+      </div>
+
+      <div className={styles.container}>
+        <div className={styles.actions}>
+          <div className={styles.actionButton}>
+            <Link href={rulesLink}>Pravidlá</Link>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.h2}>
+        <h2>Archív: </h2>
+      </div>
+      {/* TODO: asi zjednotit styly, neriesit with/without publications */}
+      {competition_type?.name === 'Tábor' ? (
+        <div className={styles.archiveWithoutPublications}>
+          {history_events.map((event) => (
+            <Fragment key={event.id}>
+              <div>
+                {name + ' '} {event.school_year}
+              </div>
+            </Fragment>
+          ))}
+        </div>
+      ) : (
+        <div className={styles.archiveWithPublications}>
+          {history_events.map((event) => (
+            <Fragment key={event.id}>
+              <div>
+                {name} {event.school_year}
+              </div>
+              {event.publication_set.map((publication) => (
+                <Link key={publication.id} href={`/api/${publication.file}`}>
+                  {publication.name}
+                </Link>
+              ))}
+            </Fragment>
+          ))}
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/src/components/CompetitionPage/RulesPage.tsx b/src/components/CompetitionPage/RulesPage.tsx
@@ -0,0 +1,17 @@
+import {FC} from 'react'
+
+import {Markdown} from '@/components/StaticSites/Markdown'
+import {Competition} from '@/types/api/generated/competition'
+import {BannerContainer} from '@/utils/BannerContainer'
+import {formatDate} from '@/utils/formatDate'
+
+type RulesPageProps = Pick<Competition, 'rules' | 'upcoming_or_current_event' | 'name'>
+
+export const RulesPage: FC<RulesPageProps> = ({name, rules, upcoming_or_current_event}) => {
+  const {setBannerText} = BannerContainer.useContainer()
+
+  const startDate = formatDate(upcoming_or_current_event?.start)
+  setBannerText(upcoming_or_current_event ? `${name} sa bude konať  ${startDate}` : '')
+
+  return <Markdown content={rules ?? ''} />
+}
diff --git a/...pages/strom/akcie/competition.module.scss → ...s/CompetitionPage/competition.module.scss b/...pages/strom/akcie/competition.module.scss → ...s/CompetitionPage/competition.module.scss
@@ -1,7 +1,6 @@
  .mainText{
     >p{
       padding: 20px;
-      width: 1000px;
     }
   }
 

diff --git a/.../strom/akcie/competition.module.scss.d.ts → ...petitionPage/competition.module.scss.d.ts b/.../strom/akcie/competition.module.scss.d.ts → ...petitionPage/competition.module.scss.d.ts
diff --git a/src/components/PageLayout/Banner/Banner.tsx b/src/components/PageLayout/Banner/Banner.tsx
@@ -1,16 +1,16 @@
 import {FC} from 'react'
 
 import {Marquee} from '@/components/Marquee/Marquee'
+import {BannerContainer} from '@/utils/BannerContainer'
 
 import styles from './Banner.module.scss'
 
 export const Banner: FC = () => {
-  const text =
-    'Matboj sa uskutoční 15. októbra 2021 - Matboj sa uskutoční 15. októbra 2021 - Matboj sa uskutoční 15. októbra 2021'
+  const {bannerText} = BannerContainer.useContainer()
   return (
     <div className={styles.banner}>
-      <Marquee gradient={false} speed={50}>
-        <div className={styles.marqueeTextContainer}>{text}</div>
+      <Marquee gradient={false} speed={100}>
+        <div className={styles.marqueeTextContainer}>{bannerText}</div>
       </Marquee>
     </div>
   )

diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx'
-import {FC, ReactNode, useEffect} from 'react'
+import {FC, ReactNode} from 'react'
 
+import {BannerContainer} from '@/utils/BannerContainer'
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
 
 import {Banner} from './Banner/Banner'
@@ -19,31 +20,29 @@ type PageLayoutProps = {
 // pre pouzitie len na seminarovych strankach a podstrankach - `/matik(/*)`
 // ked budeme potrebovat top-level stranky ako `/ina-stranka`, budeme musiet upravit, ako sa pracuje s `useSeminarInfo`
 export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', children}) => {
-  const {pageTitle, setPageTitle} = PageTitleContainer.useContainer()
-
-  useEffect(() => {
-    if (title !== '') setPageTitle(title)
-  }, [contentWidth, title, setPageTitle])
-
   return (
-    <div className={styles.pageContainer}>
-      <TopGrid title={pageTitle} />
-      <Banner />
-      <MenuMain />
-      <div className={styles.grid}>
-        <StromLogo />
-        <div
-          className={clsx(
-            styles.mainContent,
-            contentWidth === 1 && styles.col1,
-            contentWidth === 2 && styles.col2,
-            contentWidth === 3 && styles.col3,
-          )}
-        >
-          {children}
+    <PageTitleContainer.Provider initialState={title}>
+      <BannerContainer.Provider>
+        <div className={styles.pageContainer}>
+          <TopGrid />
+          <Banner />
+          <MenuMain />
+          <div className={styles.grid}>
+            <StromLogo />
+            <div
+              className={clsx(
+                styles.mainContent,
+                contentWidth === 1 && styles.col1,
+                contentWidth === 2 && styles.col2,
+                contentWidth === 3 && styles.col3,
+              )}
+            >
+              {children}
+            </div>
+          </div>
+          <Footer />
         </div>
-      </div>
-      <Footer />
-    </div>
+      </BannerContainer.Provider>
+    </PageTitleContainer.Provider>
   )
 }
diff --git a/src/components/PageLayout/TopGrid/TopGrid.tsx b/src/components/PageLayout/TopGrid/TopGrid.tsx
@@ -4,20 +4,19 @@ import {useRouter} from 'next/router'
 import {FC} from 'react'
 
 import {SemesterPicker} from '@/components/SemesterPicker/SemesterPicker'
+import {PageTitleContainer} from '@/utils/PageTitleContainer'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import styles from './TopGrid.module.scss'
 
-type TopGridProps = {
-  title: string
-}
-
-export const TopGrid: FC<TopGridProps> = ({title}) => {
+export const TopGrid: FC = () => {
   const {seminar} = useSeminarInfo()
 
   // z napr. `/matik/zadania(/*)` vytiahne `zadania`
   const page = useRouter().pathname.split('/')[2]
 
+  const {pageTitle} = PageTitleContainer.useContainer()
+
   return (
     <div className={styles.container}>
       <div className={styles.menu}>
@@ -31,7 +30,7 @@ export const TopGrid: FC<TopGridProps> = ({title}) => {
           <Link href="/strom">Strom</Link>
         </div>
       </div>
-      <div className={styles.title}>{title}</div>
+      <div className={styles.title}>{pageTitle}</div>
       {(page === 'zadania' || page === 'vysledky') && (
         <div className={styles.semesterPicker}>
           <SemesterPicker page={page} />

diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
@@ -1,13 +1,15 @@
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRouter} from 'next/router'
-import {FC, useState} from 'react'
+import {FC, useEffect, useState} from 'react'
 import {useInterval} from 'usehooks-ts'
 
 import {Button, Link} from '@/components/Clickable/Clickable'
 import {SeriesWithProblems} from '@/types/api/competition'
 import {Profile} from '@/types/api/personal'
 import {AuthContainer} from '@/utils/AuthContainer'
+import {BannerContainer} from '@/utils/BannerContainer'
+import {formatDate} from '@/utils/formatDate'
 import {useDataFromURL} from '@/utils/useDataFromURL'
 import {useHasPermissions} from '@/utils/useHasPermissions'
 
@@ -29,6 +31,7 @@ export const Problems: FC = () => {
   const router = useRouter()
 
   const {isAuthed} = AuthContainer.useContainer()
+  const {setBannerText} = BannerContainer.useContainer()
 
   const {data} = useQuery({
     queryKey: ['personal', 'profiles', 'myprofile'],
@@ -78,6 +81,19 @@ export const Problems: FC = () => {
 
   const invalidateSeriesQuery = () => queryClient.invalidateQueries({queryKey: ['competition', 'series', id.seriesId]})
 
+  useEffect(() => {
+    if (seriesData === undefined) {
+      setBannerText('')
+    } else {
+      const deadline = formatDate(seriesData.data.deadline)
+      if (seriesData?.data.can_submit) {
+        setBannerText(`Termín série: ${deadline}`)
+      } else {
+        setBannerText(`Séria je uzavretá.`)
+      }
+    }
+  }, [seriesData, setBannerText])
+
   const {mutate: registerToSemester} = useMutation({
     mutationFn: (id: number) => axios.post(`/api/competition/event/${id}/register`),
     onSuccess: () => {

diff --git a/src/components/StaticSites/Markdown.tsx b/src/components/StaticSites/Markdown.tsx
@@ -6,7 +6,7 @@ import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
-import {MarkdownLink, Table, Td, Th} from './Texts'
+import {MarkdownLink, P, Table, Td, Th} from './Texts'
 
 type MarkdownProps = {
   content: string
@@ -21,6 +21,7 @@ export const Markdown: FC<MarkdownProps> = ({content}) => (
       td: Td,
       a: MarkdownLink,
       table: Table,
+      p: P,
     }}
   >
     {content}

diff --git a/src/components/StaticSites/Texts.module.scss b/src/components/StaticSites/Texts.module.scss
@@ -12,4 +12,8 @@
   font-weight: bold;
   font-style: italic;
   text-transform: uppercase;
+}
+
+.p {
+  margin: 1rem 0;
 }
diff --git a/src/components/StaticSites/Texts.module.scss.d.ts b/src/components/StaticSites/Texts.module.scss.d.ts
@@ -1,4 +1,5 @@
 export type Styles = {
+  p: string
   table: string
   td: string
   th: string

diff --git a/src/components/StaticSites/Texts.tsx b/src/components/StaticSites/Texts.tsx
@@ -13,3 +13,4 @@ export const MarkdownLink: FC<MarkdownLinkProps> = ({children, href}) => <Link h
 export const Th: FC<TableHeaderCellProps> = ({children}) => <th className={styles.th}>{children}</th>
 export const Td: FC<TableDataCellProps> = ({children}) => <td className={styles.td}>{children}</td>
 export const Table: FC<ReactMarkdownProps> = ({children}) => <table className={styles.table}>{children}</table>
+export const P: FC<ReactMarkdownProps> = ({children}) => <p className={styles.p}>{children}</p>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -11,7 +11,6 @@ import {CookiesProvider} from 'react-cookie'
 
 import {theme} from '@/theme'
 import {AuthContainer} from '@/utils/AuthContainer'
-import {PageTitleContainer} from '@/utils/PageTitleContainer'
 
 const ReactQueryDevtools = dynamic(
   () => import('@tanstack/react-query-devtools').then(({ReactQueryDevtools}) => ReactQueryDevtools),
@@ -84,9 +83,7 @@ const MyApp: FC<AppProps> = ({Component, pageProps}) => {
         <CookiesProvider>
           <AuthContainer.Provider>
             <ThemeProvider theme={theme}>
-              <PageTitleContainer.Provider>
-                <Component {...pageProps} />
-              </PageTitleContainer.Provider>
+              <Component {...pageProps} />
             </ThemeProvider>
           </AuthContainer.Provider>
         </CookiesProvider>