Add menuitems to Footer

ZdruzenieSTROM · Dec 9, 2023 · 9bc020c · 9bc020c
1 parent b9e7433
commit 9bc020c
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 11 deletions.
diff --git a/src/components/PageLayout/Footer/Footer.module.scss b/src/components/PageLayout/Footer/Footer.module.scss
@@ -11,4 +11,25 @@
 .content {
   grid-column-start: 2;
   grid-column-end: 4;
+}
+
+.menuItem {
+  background-color: transparent;
+
+  a {
+    padding: 0px 5px;
+    border-bottom: 5px solid white;
+    color: white;
+    background-color: inherit;
+  }
+}
+
+.menuItem:hover {
+  background-color: white;
+
+  a {
+    color: black;
+    border-color: black;
+    background-color: inherit;
+  }
 }
diff --git a/src/components/PageLayout/Footer/Footer.module.scss.d.ts b/src/components/PageLayout/Footer/Footer.module.scss.d.ts
@@ -1,6 +1,7 @@
 export type Styles = {
   container: string
   content: string
+  menuItem: string
 }
 
 export type ClassNames = keyof Styles

diff --git a/src/components/PageLayout/Footer/Footer.tsx b/src/components/PageLayout/Footer/Footer.tsx
@@ -3,31 +3,57 @@ import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {FC} from 'react'
 
+import {Link} from '@/components/Clickable/Link'
 import {Loading} from '@/components/Loading/Loading'
 import {ILogo, Logo} from '@/components/PageLayout/Footer/Logo'
+import {MenuItemShort} from '@/types/api/cms'
+import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import styles from './Footer.module.scss'
 
 export const Footer: FC = () => {
+  const {seminar, seminarId} = useSeminarInfo()
+
+  const {
+    data: menuItemsData,
+    isLoading: menuItemsIsLoading,
+    error: menuItemsError,
+  } = useQuery({
+    queryKey: ['cms', 'menu-item', 'on-site', seminarId],
+    queryFn: () => axios.get<MenuItemShort[]>(`/api/cms/menu-item/on-site/${seminarId}`),
+  })
+  const menuItems = menuItemsData?.data ?? []
+
   const {
-    data: postsData,
+    data: logosData,
     isLoading: logosIsLoading,
-    error: postsError,
+    error: logosError,
   } = useQuery({
     queryKey: ['cms', 'logo'],
     queryFn: () => axios.get<ILogo[]>('/api/cms/logo'),
   })
-  const logos = postsData?.data.filter((logo) => !logo.disabled) ?? []
+  const logos = logosData?.data.filter((logo) => !logo.disabled) ?? []
 
   return (
     <div className={styles.container}>
       <div className={styles.content}>
+        <Stack direction="row" m={2} gap={2} justifyContent="center" sx={{flexWrap: 'wrap'}}>
+          {menuItemsIsLoading && <Loading />}
+          {menuItems.map((item) => (
+            <div key={item.id} className={styles.menuItem}>
+              <Link variant="button2" href={`/${seminar}${item.url}`}>
+                {item.caption}
+              </Link>
+            </div>
+          ))}
+          {menuItemsError && <p>{menuItemsError.message}</p>}
+        </Stack>
         <Stack direction="row" m={2} gap={2} justifyContent="center" sx={{flexWrap: 'wrap'}}>
           {logosIsLoading && <Loading />}
           {logos.map((logo) => (
             <Logo key={logo.id} {...logo} />
           ))}
-          {postsError && <p>{postsError.message}</p>}
+          {logosError && <p>{logosError.message}</p>}
         </Stack>
       </div>
     </div>

diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/src/components/PageLayout/MenuMain/MenuMain.tsx
@@ -9,18 +9,13 @@ import {FC, useState} from 'react'
 import {CloseButton} from '@/components/CloseButton/CloseButton'
 import {Loading} from '@/components/Loading/Loading'
 import Menu from '@/svg/menu.svg'
+import {MenuItemShort} from '@/types/api/cms'
 import {useHasPermissions} from '@/utils/useHasPermissions'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {Authentication} from '../Authentication/Authentication'
 import styles from './MenuMain.module.scss'
 
-interface MenuItemInterface {
-  id: number
-  caption: string
-  url: string
-}
-
 export const MenuMain: FC = () => {
   const {seminar, seminarId} = useSeminarInfo()
 
@@ -31,7 +26,7 @@ export const MenuMain: FC = () => {
 
   const {data: menuItemsData, isLoading: menuItemsIsLoading} = useQuery({
     queryKey: ['cms', 'menu-item', 'on-site', seminarId],
-    queryFn: () => axios.get<MenuItemInterface[]>(`/api/cms/menu-item/on-site/${seminarId}`),
+    queryFn: () => axios.get<MenuItemShort[]>(`/api/cms/menu-item/on-site/${seminarId}`),
   })
   const menuItems = menuItemsData?.data ?? []