Add banner info

ZdruzenieSTROM · Nov 12, 2023 · 69014b0 · 69014b0
1 parent 1f2be85
commit 69014b0
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 87 deletions.
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/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
@@ -1,12 +1,14 @@
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import axios from 'axios'
+import {DateTime} from 'luxon'
 import {useRouter} from 'next/router'
-import {FC, useState} from 'react'
+import {FC, useEffect, useState} from 'react'
 
 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 {useDataFromURL} from '@/utils/useDataFromURL'
 import {useHasPermissions} from '@/utils/useHasPermissions'
 
@@ -28,6 +30,7 @@ export const Problems: FC = () => {
   const router = useRouter()
 
   const {isAuthed} = AuthContainer.useContainer()
+  const {setBannerText} = BannerContainer.useContainer()
 
   const {data} = useQuery({
     queryKey: ['personal', 'profiles', 'myprofile'],
@@ -66,6 +69,19 @@ export const Problems: FC = () => {
 
   const invalidateSeriesQuery = () => queryClient.invalidateQueries({queryKey: ['competition', 'series', id.seriesId]})
 
+  useEffect(() => {
+    if (seriesData === undefined) {
+      setBannerText('')
+    } else {
+      const deadline = DateTime.fromISO(seriesData.data.deadline)
+      if (seriesData?.data.can_submit) {
+        setBannerText(`Termín série: ${deadline.toFormat('dd.MM.yyyy HH:mm')}`)
+      } 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/pages/_app.tsx b/src/pages/_app.tsx
@@ -11,6 +11,7 @@ import {CookiesProvider} from 'react-cookie'
 
 import {theme} from '@/theme'
 import {AuthContainer} from '@/utils/AuthContainer'
+import {BannerContainer} from '@/utils/BannerContainer'
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
 
 const ReactQueryDevtools = dynamic(
@@ -83,11 +84,13 @@ const MyApp: FC<AppProps> = ({Component, pageProps}) => {
         <ReactQueryDevtools />
         <CookiesProvider>
           <AuthContainer.Provider>
-            <ThemeProvider theme={theme}>
-              <PageTitleContainer.Provider>
-                <Component {...pageProps} />
-              </PageTitleContainer.Provider>
-            </ThemeProvider>
+            <BannerContainer.Provider>
+              <ThemeProvider theme={theme}>
+                <PageTitleContainer.Provider>
+                  <Component {...pageProps} />
+                </PageTitleContainer.Provider>
+              </ThemeProvider>
+            </BannerContainer.Provider>
           </AuthContainer.Provider>
         </CookiesProvider>
       </QueryClientProvider>

diff --git a/src/pages/strom/akcie/[[...params]].tsx b/src/pages/strom/akcie/[[...params]].tsx
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import {DateTime} from 'luxon'
 import {GetServerSideProps, NextPage} from 'next'
 import {useRouter} from 'next/router'
 import {FC, Fragment} from 'react'
@@ -7,6 +8,7 @@ import {Link} from '@/components/Clickable/Clickable'
 import {PageLayout} from '@/components/PageLayout/PageLayout'
 import {Markdown} from '@/components/StaticSites/Markdown'
 import {Competition, Event} from '@/types/api/generated/competition'
+import {BannerContainer} from '@/utils/BannerContainer'
 import {Seminar} from '@/utils/useSeminarInfo'
 
 import styles from './competition.module.scss'
@@ -19,91 +21,102 @@ type CompetitionPageProps = {
   is_rules: boolean
 }
 
-const StaticPage: NextPage<CompetitionPageProps> = ({competition, is_rules}) => (
-  <PageLayout title={competition.name}>
-    {is_rules ? (
-      <div className={styles.mainText}>{competition.rules && <Markdown content={competition.rules} />}</div>
-    ) : (
-      <>
-        <div className={styles.mainText}>
-          {competition.who_can_participate && <p>Pre koho? {competition.who_can_participate}</p>}
-          <p>{competition.description}</p>
-        </div>
-        <div className={styles.mainText}>
-          {competition.upcoming_or_current_event ? (
-            <div className={styles.mainText}>
-              <p>
-                <b>Nadchádzajúci ročník:</b>
-              </p>
-              {competition.upcoming_or_current_event.start && (
-                <p>Odkedy? {competition.upcoming_or_current_event.start} </p>
-              )}
-              {competition.upcoming_or_current_event.end && <p>Dokedy? {competition.upcoming_or_current_event.end}</p>}
-              {competition.upcoming_or_current_event.publication_set.length > 0 && (
+const StaticPage: NextPage<CompetitionPageProps> = ({competition, is_rules}) => {
+  const startDate = DateTime.fromISO(competition.upcoming_or_current_event.start)
+  const endDate = DateTime.fromISO(competition.upcoming_or_current_event.end)
+  const {setBannerText} = BannerContainer.useContainer()
+  if (competition.upcoming_or_current_event) {
+    setBannerText(`${competition.name} sa bude konať  ${startDate.toFormat('dd.MM.yyyy')}`)
+  } else {
+    setBannerText('')
+  }
+
+  return (
+    <PageLayout title={competition.name}>
+      {is_rules ? (
+        <div className={styles.mainText}>{competition.rules && <Markdown content={competition.rules} />}</div>
+      ) : (
+        <>
+          <div className={styles.mainText}>
+            {competition.who_can_participate && <p>Pre koho? {competition.who_can_participate}</p>}
+            <p>{competition.description}</p>
+          </div>
+          <div className={styles.mainText}>
+            {competition.upcoming_or_current_event ? (
+              <div className={styles.mainText}>
                 <p>
-                  <Link href={`/api/${competition.upcoming_or_current_event.publication_set[0].file}`}>Pozvánka</Link>
+                  <b>Nadchádzajúci ročník:</b>
                 </p>
-              )}
-              {competition.upcoming_or_current_event.registration_link && (
-                <div>
+                {competition.upcoming_or_current_event.start && <p>Odkedy? {startDate.toFormat('dd.MM.yyyy')} </p>}
+                {competition.upcoming_or_current_event.end && <p>Dokedy? {endDate.toFormat('dd.MM.yyyy')}</p>}
+                {competition.upcoming_or_current_event.publication_set.length > 0 && (
                   <p>
-                    Registrácia prebieha do:
-                    {competition.upcoming_or_current_event.registration_link.end}
-                    <Link href={competition.upcoming_or_current_event.registration_link.url}>Registračný formulár</Link>
+                    <Link href={`/api/${competition.upcoming_or_current_event.publication_set[0].file}`}>Pozvánka</Link>
                   </p>
+                )}
+                {competition.upcoming_or_current_event.registration_link && (
+                  <div>
+                    <p>
+                      Registrácia prebieha do:
+                      {competition.upcoming_or_current_event.registration_link.end}
+                      <Link href={competition.upcoming_or_current_event.registration_link.url}>
+                        Registračný formulár
+                      </Link>
+                    </p>
+
+                    <p>{competition.upcoming_or_current_event.registration_link.additional_info}</p>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <p>
+                <b>Nadchádzajúci ročník:</b> Pripravujeme
+              </p>
+            )}
+          </div>
 
-                  <p>{competition.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}>
-              <RulesLink />
+          <div className={styles.container}>
+            <div className={styles.actions}>
+              <div className={styles.actionButton}>
+                <RulesLink />
+              </div>
             </div>
           </div>
-        </div>
-
-        <div className={styles.h2}>
-          <h2>Archív: </h2>
-        </div>
-        {competition.competition_type.name === 'Tábor' ? (
-          <div className={styles.archiveWithoutPublications}>
-            {competition.history_events.map((event) => (
-              <Fragment key={event.id}>
-                <div>
-                  {competition.name + ' '} {event.school_year}
-                </div>
-              </Fragment>
-            ))}
-          </div>
-        ) : (
-          <div className={styles.archiveWithPublications}>
-            {competition.history_events.map((event) => (
-              <Fragment key={event.id}>
-                <div>
-                  {competition.name} {event.school_year}
-                </div>
-                {event.publication_set.map((publication) => (
-                  <Link key={publication.id} href={`/api/${publication.file}`}>
-                    {publication.name}
-                  </Link>
-                ))}
-              </Fragment>
-            ))}
+
+          <div className={styles.h2}>
+            <h2>Archív: </h2>
           </div>
-        )}
-      </>
-    )}
-  </PageLayout>
-)
+          {competition.competition_type.name === 'Tábor' ? (
+            <div className={styles.archiveWithoutPublications}>
+              {competition.history_events.map((event) => (
+                <Fragment key={event.id}>
+                  <div>
+                    {competition.name + ' '} {event.school_year}
+                  </div>
+                </Fragment>
+              ))}
+            </div>
+          ) : (
+            <div className={styles.archiveWithPublications}>
+              {competition.history_events.map((event) => (
+                <Fragment key={event.id}>
+                  <div>
+                    {competition.name} {event.school_year}
+                  </div>
+                  {event.publication_set.map((publication) => (
+                    <Link key={publication.id} href={`/api/${publication.file}`}>
+                      {publication.name}
+                    </Link>
+                  ))}
+                </Fragment>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </PageLayout>
+  )
+}
 
 export default StaticPage
 

diff --git a/src/utils/BannerContainer.tsx b/src/utils/BannerContainer.tsx
@@ -0,0 +1,9 @@
+import {useState} from 'react'
+import {createContainer} from 'unstated-next'
+
+const useBannerText = () => {
+  const [bannerText, setBannerText] = useState('')
+  return {bannerText, setBannerText}
+}
+
+export const BannerContainer = createContainer(useBannerText)