refactor: use explicit functions for Hering API calls

Author: mario-zelger

src/App.tsx

@@ -2,14 +2,11 @@ import React, { createContext, lazy, Suspense, useEffect, useState } from 'react
 import { HashRouter as Router, Route, Routes } from "react-router-dom";
 import { useTranslation } from 'react-i18next';
 import i18n from './i18n';
-import client from './client';
 import { checkLinks } from './helper/LinkChecker';
-import { StartPageT } from "./pages/home/HomePage";
-import { CalendarPageT } from './pages/calendar/CalendarPage';
-import { SectionsByKey, SectionT } from './pages/section/SectionPage';
-import { ImpressumPageT } from './pages/impressum/ImpressumPage';
+import { SectionsByKey } from './pages/section/SectionPage';
 import Loading from "./components/loading/Loading";
 import Navigation from "./components/navigation/Navigation";
+import { HApiCalendarPage, HApiImpressumPage, HApiLink, loadCalendarPage, loadImpressumPage, loadLinks, loadSections, loadStartPage, HApiSection, HApiStartPage } from "./apis/hering-api";
 
 const Footer = lazy(() => import('./components/footer/Footer'))
 const SectionHashHelper = lazy(() => import('./helper/SectionHashHelper'))
@@ -19,40 +16,33 @@ const SectionPage = lazy(() => import('./pages/section/SectionPage'))
 const CalendarPage = lazy(() => import('./pages/calendar/CalendarPage'))
 const SearchPage = lazy(() => import('./pages/search/SearchPage'))
 
-export type LinkT = {
-    title: string
-    link: string | undefined
-    key: string
-    slug: string | null
-}
-
-export const LinksContext = createContext<LinkT[]>([])
+export const LinksContext = createContext<HApiLink[]>([])
 
 export default function App() {
 
     const lang = i18n.language
     const { t } = useTranslation()
 
-    const [sections, setSections] = useState<SectionT[] | undefined>();
-    const [links, setLinks] = useState<LinkT[] | undefined>();
-    const [startPage, setStartPage] = useState<StartPageT | undefined>();
-    const [calendarPage, setCalendarPage] = useState<CalendarPageT | undefined>();
-    const [impressumPage, setImpressumPage] = useState<ImpressumPageT | undefined>();
+    const [sections, setSections] = useState<HApiSection[] | undefined>();
+    const [links, setLinks] = useState<HApiLink[] | undefined>();
+    const [startPage, setStartPage] = useState<HApiStartPage | undefined>();
+    const [calendarPage, setCalendarPage] = useState<HApiCalendarPage | undefined>();
+    const [impressumPage, setImpressumPage] = useState<HApiImpressumPage | undefined>();
 
     useEffect(() => {
         const fetchData = async () => {
             const responses = await Promise.all([
-                client.get('/sections?_sort=sorting:ASC&_locale=' + lang),
-                client.get('/links?_locale=' + lang),
-                client.get('/start-page?_locale=' + lang),
-                client.get('/calendar-page?_locale=' + lang),
-                client.get('/impressum-page?_locale=' + lang)])
+                loadSections(lang),
+                loadLinks(lang),
+                loadStartPage(lang),
+                loadCalendarPage(lang),
+                loadImpressumPage(lang)])
 
-            setSections(responses[0].data)
-            setLinks(responses[1].data)
-            setStartPage(responses[2].data)
-            setCalendarPage(responses[3].data)
-            setImpressumPage(responses[4].data)
+            setSections(responses[0])
+            setLinks(responses[1])
+            setStartPage(responses[2])
+            setCalendarPage(responses[3])
+            setImpressumPage(responses[4])
         }
 
         fetchData()
@@ -64,7 +54,7 @@ export default function App() {
         </div>
     }
 
-    const sectionsByKey = sections.reduce((map: SectionsByKey, section: SectionT) => {
+    const sectionsByKey = sections.reduce((map: SectionsByKey, section: HApiSection) => {
         map[section.slug] = section
         return map
     }, {})

src/apis/hering-api.ts

@@ -0,0 +1,110 @@
+import axios from "axios";
+
+const client = axios.create({
+    // baseURL: 'http://localhost:1337/',
+    baseURL: 'https://hering-api.herokuapp.com/',
+    headers: {
+        "Content-type": "application/json",
+    },
+});
+
+const getData = async <T>(url: string): Promise<T> => {
+    const response = await client.get(url);
+    return response.data as T;
+};
+
+export const loadStartPage = async (lang: string): Promise<HApiStartPage> => {
+    return await getData<HApiStartPage>(`/start-page?_locale=${lang}`)
+}
+
+export const loadCalendarPage = async (lang: string): Promise<HApiCalendarPage> => {
+    return await getData<HApiCalendarPage>(`/calendar-page?_locale=${lang}`)
+}
+
+export const loadImpressumPage = async (lang: string): Promise<HApiImpressumPage> => {
+    return await getData<HApiImpressumPage>(`/impressum-page?_locale=${lang}`)
+}
+
+export const loadSections = async (lang: string): Promise<HApiSection[]> => {
+    return await getData<HApiSection[]>(`/sections?_sort=sorting:ASC&_locale=${lang}`)
+};
+
+export const loadLinks = async (lang: string): Promise<HApiLink[]> => {
+    return await getData<HApiLink[]>(`/links?_locale=${lang}`)
+}
+
+export const loadTasks = async (lang: string): Promise<HApiTask[]> => {
+    return await getData<HApiTask[]>(`/tasks?_locale=${lang}`)
+}
+
+export interface HApiStartPage {
+    title: string
+    menu_name: string
+    icon: HApiIcon
+    content: string
+}
+
+export interface HApiCalendarPage {
+    title: string
+    menu_name: string
+    icon: HApiIcon
+    content: string
+}
+
+export interface HApiImpressumPage {
+    title: string
+    menu_name: string
+    content: string
+}
+
+export interface HApiSection {
+    chapters: HApiChapter[]
+    sorting: number
+    title: string
+    content: string
+    slug: string
+    menu_name: string
+    localizations: any
+}
+
+export interface HApiChapter {
+    id: number
+    sorting: number
+    title: string
+    menu_name: string
+    content: string
+    slug: string
+    slug_with_section: string
+    icon: HApiIcon
+    section: HApiSection
+    responsible: HApiRole[]
+}
+
+export interface HApiRole {
+    rolle: string
+}
+
+export interface HApiLink {
+    title: string
+    link: string | undefined
+    key: string
+    slug: string | null
+}
+
+export interface HApiTask {
+    id: number
+    title: string
+    days: number
+    responsible: HApiRoles[]
+    targets: HApiRoles[]
+    chapters: HApiChapter[]
+}
+
+export interface HApiRoles {
+    rolle: string
+}
+
+export interface HApiIcon {
+    url: string
+    mime: string
+}

src/client.jsx

@@ -1,14 +1,13 @@
 import React from 'react'
 import i18n from '../../i18n'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
-import client from '../../client'
 import FooterSvg from './FooterSvg'
 import PbsLogoSvg from './PbsLogoSvg'
 import './footer.less'
-import { SectionT } from "../../pages/section/SectionPage";
+import { loadSections, HApiSection } from "../../apis/hering-api";
 
 type Props = {
-    sections: SectionT[]
+    sections: HApiSection[]
 }
 
 function Footer(props: Props) {
@@ -18,7 +17,7 @@ function Footer(props: Props) {
     const navigate = useNavigate();
     const currentYear = new Date().getFullYear()
 
-    const changeLanguage = (lang: string, oldSections: SectionT[]) => {
+    const changeLanguage = (lang: string, oldSections: HApiSection[]) => {
         let redirect = false
 
         const path = location.pathname.replace('/', '')
@@ -36,13 +35,13 @@ function Footer(props: Props) {
                 return
             }
 
-            client.get('/sections?_sort=sorting:ASC&_locale=' + lang).then((response: { data: any[] }) => {
+            loadSections(lang).then((sections: HApiSection[]) => {
                 if (currentSection) {
                     const otherSection = currentSection['localizations'].find((l: any) => {
                         return l.locale === lang
                     })
 
-                    const newCurrentSection = response.data.find((s: any) => {
+                    const newCurrentSection = sections.find((s: any) => {
                         return s['id'] === otherSection['id']
                     })
 

src/components/footer/Footer.tsx

@@ -1,19 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
-import { ChapterT } from '../../pages/section/components/Chapter'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { CalendarPageT } from '../../pages/calendar/CalendarPage'
 import { useTranslation } from "react-i18next";
-import { StartPageT } from '../../pages/home/HomePage';
 import { faBars, faCalendarDays, faFishFins, faSearch } from "@fortawesome/free-solid-svg-icons";
 import './nav.less'
-import { SectionT } from "../../pages/section/SectionPage";
 import { CHAPTER_NAV_UPDATED_EVENT } from "../../shared/constants";
+import { HApiCalendarPage, HApiChapter, HApiSection, HApiStartPage } from "../../apis/hering-api";
 
 type Props = {
-    startPage: StartPageT
-    calendarPage: CalendarPageT
-    sections: SectionT[]
+    startPage: HApiStartPage
+    calendarPage: HApiCalendarPage
+    sections: HApiSection[]
 }
 
 function Navigation({ startPage, calendarPage, sections }: Props) {
@@ -63,9 +60,9 @@ function Navigation({ startPage, calendarPage, sections }: Props) {
         }
     }, [location]);
 
-    function chapterList(section: SectionT) {
+    function chapterList(section: HApiSection) {
         const chapters = section.chapters
-        const chapterItems = chapters.map((chapter: ChapterT) => {
+        const chapterItems = chapters.map((chapter: HApiChapter) => {
             const isActive = currentChapterSlug === chapter.slug
             return <li key={chapter.slug_with_section} className="subMenu" onClick={handleToggle}>
                 <Link to={chapter.slug_with_section} className={isActive ? 'active' : ''}>{chapter.menu_name}</Link>
@@ -77,7 +74,7 @@ function Navigation({ startPage, calendarPage, sections }: Props) {
         </ul>
     }
 
-    const sectionList = sections.map((section: SectionT) => {
+    const sectionList = sections.map((section: HApiSection) => {
         const isActive = location.pathname.replace('/', '') === section.slug
         const className = isActive ? 'active' : ''
         return <details key={section.slug} className={className} open={isActive}>

src/components/navigation/Navigation.tsx

@@ -1,22 +1,15 @@
-import React, {useEffect} from 'react'
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
+import React, { useEffect } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import {LinkComponent} from '../../helper/MarkdownComponents'
+import { LinkComponent } from '../../helper/MarkdownComponents'
 import CalendarForm from './components/CalendarForm'
-import {faCalendarDays} from "@fortawesome/free-solid-svg-icons"
+import { faCalendarDays } from "@fortawesome/free-solid-svg-icons"
 import './calendar.less'
-import {IconT} from "../../shared/types";
-
-export type CalendarPageT = {
-    title: string
-    menu_name: string
-    icon: IconT
-    content: string
-}
+import { HApiCalendarPage } from "../../apis/hering-api";
 
 type Props = {
-    page: CalendarPageT
+    page: HApiCalendarPage
 }
 
 function CalendarPage(props: Props) {