Fix navigation

web/package.json

@@ -33,7 +33,8 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "test": "vitest --watch=false",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "format": "prettier --write **/*.{ts,tsx}"
   },
   "browserslist": {
     "production": [

web/src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { ConfigDataProvider } from './data-providers/ConfigDataProvider'
 import { MessageBannerProvider } from './data-providers/MessageBannerProvider'

web/src/components/DocumentControlButtons.tsx

@@ -21,7 +21,9 @@ interface Props {
   onVersionChange: (version: string) => void
 }
 
-export default function DocumentControlButtons(props: Props): React.JSX.Element {
+export default function DocumentControlButtons(
+  props: Props
+): React.JSX.Element {
   const buttonStyle = { width: '25px', height: '25px' }
 
   const [shareModalOpen, setShareModalOpen] = useState<boolean>(false)
@@ -61,12 +63,12 @@ export default function DocumentControlButtons(props: Props): React.JSX.Element
       <FormControl>
         <Select
           sx={{
-            "&.MuiOutlinedInput-root": {
-              "&:hover fieldset": {
-                borderColor: "rgba(0, 0, 0, 0.33)"
+            '&.MuiOutlinedInput-root': {
+              '&:hover fieldset': {
+                borderColor: 'rgba(0, 0, 0, 0.33)'
               },
-              "&.Mui-focused fieldset": {
-                borderColor: "rgba(0, 0, 0, 0.33)"
+              '&.Mui-focused fieldset': {
+                borderColor: 'rgba(0, 0, 0, 0.33)'
               }
             }
           }}

web/src/components/Footer.tsx

@@ -5,10 +5,7 @@ import { useConfig } from '../data-providers/ConfigDataProvider'
 import styles from './../style/components/Footer.module.css'
 
 export default function Footer(): JSX.Element {
-
-  const defaultFooter = (
-    <></>
-  )
+  const defaultFooter = <></>
 
   const [footer, setFooter] = useState<JSX.Element>(defaultFooter)
   const config = useConfig()
@@ -24,12 +21,20 @@ export default function Footer(): JSX.Element {
         HELP
       </Link>
 
-      <Box sx={{ fontSize: '1.05em', fontWeight: 300, opacity: 0.6, marginLeft: '8px', marginTop: 1 }}>
+      <Box
+        sx={{
+          fontSize: '1.05em',
+          fontWeight: 300,
+          opacity: 0.6,
+          marginLeft: '8px',
+          marginTop: 1
+        }}
+      >
         {footer}
       </Box>
 
       <div className={styles['version-info']}>
-        <Link to="https://github.com/docat-org/docat" target='_blank'>
+        <Link to="https://github.com/docat-org/docat" target="_blank">
           VERSION{'  '}
           {import.meta.env.VITE_DOCAT_VERSION ?? 'unknown'}
         </Link>

web/src/components/Header.tsx

@@ -6,7 +6,6 @@ import { useConfig } from '../data-providers/ConfigDataProvider'
 import docatLogo from '../assets/logo.png'
 import styles from './../style/components/Header.module.css'
 
-
 export default function Header(): JSX.Element {
   const defaultHeader = (
     <>

web/src/components/IFrame.tsx

@@ -42,7 +42,10 @@ export default function IFrame(props: Props): React.JSX.Element {
     iFrameRef.current.contentDocument
       ?.querySelectorAll('a')
       .forEach((a: HTMLAnchorElement) => {
-        if (typeof a.href === 'string' && !a.href.startsWith(window.location.origin)) {
+        if (
+          typeof a.href === 'string' &&
+          !a.href.startsWith(window.location.origin)
+        ) {
           a.setAttribute('target', '_blank')
           return
         }
@@ -95,7 +98,9 @@ export default function IFrame(props: Props): React.JSX.Element {
     props.onFaviconChanged?.(favicon)
   }
 
-  const extractFaviconUrl = (doc: Document | null | undefined): string | null => {
+  const extractFaviconUrl = (
+    doc: Document | null | undefined
+  ): string | null => {
     if (doc == null) {
       return null
     }

web/src/components/InfoBanner.tsx

@@ -9,11 +9,11 @@ interface Props {
 
 export default function Banner(props: Props): React.JSX.Element {
   const [show, setShow] = useState<boolean>(false)
-  const [prevMessage, setPrevMessage] = useState(props.message);
+  const [prevMessage, setPrevMessage] = useState(props.message)
 
   if (props.message !== prevMessage) {
-    setPrevMessage(props.message);
-    setShow(true);
+    setPrevMessage(props.message)
+    setShow(true)
   }
 
   return (

web/src/components/NavigationTitle.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import { ArrowBackIos } from '@mui/icons-material'
 import { Link } from 'react-router-dom'
 

web/src/components/Project.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import { Link } from 'react-router-dom'
 import { type Project as ProjectType } from '../models/ProjectsResponse'
 import ProjectRepository from '../repositories/ProjectRepository'
@@ -13,51 +13,54 @@ interface Props {
 }
 
 function timeSince(date: Date) {
-  const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
-  let interval = seconds / 31536000;
+  const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000)
+  let interval = seconds / 31536000
 
   if (interval > 1) {
-    return Math.floor(interval) + " years";
+    return Math.floor(interval) + ' years'
   }
-  interval = seconds / 2592000;
+  interval = seconds / 2592000
   if (interval > 1) {
-    return Math.floor(interval) + " months";
+    return Math.floor(interval) + ' months'
   }
-  interval = seconds / 86400;
+  interval = seconds / 86400
   if (interval > 1) {
-    return Math.floor(interval) + " days";
+    return Math.floor(interval) + ' days'
   }
-  interval = seconds / 3600;
+  interval = seconds / 3600
   if (interval > 1) {
-    return Math.floor(interval) + " hours";
+    return Math.floor(interval) + ' hours'
   }
-  interval = seconds / 60;
+  interval = seconds / 60
   if (interval > 1) {
-    return Math.floor(interval) + " minutes";
+    return Math.floor(interval) + ' minutes'
   }
-  return Math.floor(seconds) + " seconds";
+  return Math.floor(seconds) + ' seconds'
 }
 
 export default function Project(props: Props): React.JSX.Element {
-  const latestVersion = ProjectRepository.getLatestVersion(props.project.versions)
+  const latestVersion = ProjectRepository.getLatestVersion(
+    props.project.versions
+  )
 
   return (
     <div className={styles['project-card']}>
-
-        {props.project.logo ?
-            <>
-              <Link to={`${props.project.name}/latest`}>
-                <img
-                  className={styles['project-logo']}
-                  src={ProjectRepository.getProjectLogoURL(props.project.name)}
-                  alt={`${props.project.name} project logo`}
-                />
-              </Link>
-            </> : <></>
-        }
+      {props.project.logo ? (
+        <>
+          <Link to={`${props.project.name}/latest/`}>
+            <img
+              className={styles['project-logo']}
+              src={ProjectRepository.getProjectLogoURL(props.project.name)}
+              alt={`${props.project.name} project logo`}
+            />
+          </Link>
+        </>
+      ) : (
+        <></>
+      )}
 
       <div className={styles['project-header']}>
-        <Link to={`${props.project.name}/latest`}>
+        <Link to={`${props.project.name}/latest/`}>
           <div className={styles['project-card-title']}>
             {props.project.name}{' '}
             <span className={styles['secondary-typography']}>
@@ -66,13 +69,23 @@ export default function Project(props: Props): React.JSX.Element {
           </div>
         </Link>
 
-        <Tooltip title={new Date(latestVersion.timestamp).toISOString().slice(0, -8).replace('T', ' ')} placement="left" arrow >
-          <Box sx={{
+        <Tooltip
+          title={new Date(latestVersion.timestamp)
+            .toISOString()
+            .slice(0, -8)
+            .replace('T', ' ')}
+          placement="left"
+          arrow
+        >
+          <Box
+            sx={{
               display: {
                 xs: 'none',
                 sm: 'inherit'
               }
-            }} className={styles['secondary-typography']}>
+            }}
+            className={styles['secondary-typography']}
+          >
             {timeSince(new Date(latestVersion.timestamp))} ago
           </Box>
         </Tooltip>
@@ -82,7 +95,14 @@ export default function Project(props: Props): React.JSX.Element {
           {props.project.versions.length === 1
             ? `${props.project.versions.length} version`
             : `${props.project.versions.length} versions`}
-            <Typography sx={{ marginLeft: 1.5 }} fontSize={'0.9em'} component={'span'} fontWeight={300}>{props.project.storage}</Typography>
+          <Typography
+            sx={{ marginLeft: 1.5 }}
+            fontSize={'0.9em'}
+            component={'span'}
+            fontWeight={300}
+          >
+            {props.project.storage}
+          </Typography>
         </div>
 
         <FavoriteStar

web/src/components/ProjectList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import Project from './Project'
 
 import { type Project as ProjectType } from '../models/ProjectsResponse'

web/src/components/SearchBar.tsx

@@ -1,49 +1,47 @@
-import SearchIcon from '@mui/icons-material/Search';
-import StarIcon from '@mui/icons-material/Star';
-import StarBorderIcon from '@mui/icons-material/StarBorder';
-import { Divider, IconButton, InputBase, Paper, Tooltip } from '@mui/material';
-import React, { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { useSearch } from '../data-providers/SearchProvider';
-
+import SearchIcon from '@mui/icons-material/Search'
+import StarIcon from '@mui/icons-material/Star'
+import StarBorderIcon from '@mui/icons-material/StarBorder'
+import { Divider, IconButton, InputBase, Paper, Tooltip } from '@mui/material'
+import React, { useEffect, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { useSearch } from '../data-providers/SearchProvider'
 
 interface Props {
   showFavourites: boolean
   onShowFavourites: (all: boolean) => void
 }
 
 export default function SearchBar(props: Props): React.JSX.Element {
-  const [showFavourites, setShowFavourites] = useState(true);
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [showFavourites, setShowFavourites] = useState(true)
+  const [searchParams, setSearchParams] = useSearchParams()
 
   const { query, setQuery } = useSearch()
   const [searchQuery, setSearchQuery] = useState<string>(query)
 
-
   const updateSearch = (q: string) => {
     setSearchQuery(q)
     setQuery(q)
 
     if (q) {
-      setSearchParams({q})
+      setSearchParams({ q })
     } else {
       setSearchParams({})
     }
   }
 
   useEffect(() => {
-    const q = searchParams.get("q")
+    const q = searchParams.get('q')
     if (q) {
       updateSearch(q)
     }
     setShowFavourites(props.showFavourites)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.showFavourites]);
+  }, [props.showFavourites])
 
   const onFavourites = (show: boolean): void => {
     setSearchParams({})
-    setSearchQuery("")
-    setQuery("")
+    setSearchQuery('')
+    setQuery('')
 
     setShowFavourites(show)
     props.onShowFavourites(!show)
@@ -62,7 +60,7 @@ export default function SearchBar(props: Props): React.JSX.Element {
         display: 'flex',
         alignItems: 'center',
         maxWidth: 600,
-        marginLeft: '16px',
+        marginLeft: '16px'
       }}
     >
       <InputBase
@@ -77,15 +75,22 @@ export default function SearchBar(props: Props): React.JSX.Element {
             setQuery(searchQuery)
           }
         }}
-
       />
       <IconButton type="button" sx={{ p: '10px' }} aria-label="search">
         <SearchIcon />
       </IconButton>
       <Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
-      <Tooltip title={`Show ${showFavourites ? 'all docs' : 'favourites only'}`} placement="right" arrow>
-        <IconButton onClick={() => onFavourites(!showFavourites)} sx={{ p: '10px' }} aria-label="directions">
-          { showFavourites  ?  <StarIcon /> : <StarBorderIcon /> }
+      <Tooltip
+        title={`Show ${showFavourites ? 'all docs' : 'favourites only'}`}
+        placement="right"
+        arrow
+      >
+        <IconButton
+          onClick={() => onFavourites(!showFavourites)}
+          sx={{ p: '10px' }}
+          aria-label="directions"
+        >
+          {showFavourites ? <StarIcon /> : <StarBorderIcon />}
         </IconButton>
       </Tooltip>
     </Paper>

web/src/components/StyledForm.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import styles from './../style/components/StyledForm.module.css'
 
 interface Props {

web/src/data-providers/MessageBannerProvider.tsx

@@ -28,7 +28,8 @@ export const Context = React.createContext<MessageBannerState>({
 
 export function MessageBannerProvider({ children }: any): JSX.Element {
   // We need to store the last timeout, so we can clear when a new message is shown
-  const [lastTimeout, setLastTimeout] = useState<ReturnType<typeof setTimeout>>()
+  const [lastTimeout, setLastTimeout] =
+    useState<ReturnType<typeof setTimeout>>()
   const [message, setMessage] = useState<Message>({
     content: undefined,
     type: 'success',

web/src/data-providers/ProjectDataProvider.tsx

@@ -3,7 +3,13 @@
   We need any, because we don't know the type of the children
 */
 
-import React, { createContext, useContext, useEffect, useState, JSX } from 'react'
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  JSX
+} from 'react'
 import { type Project } from '../models/ProjectsResponse'
 import type ProjectsResponse from '../models/ProjectsResponse'
 import { useMessageBanner } from './MessageBannerProvider'