Merge pull request #298 from ls1intum/code-cleanup

Code cleanup

client/src/app/layout/ContentContainer/ContentContainer.tsx

@@ -1,8 +1,8 @@
 import { PropsWithChildren } from 'react'
-import { Container } from '@mantine/core'
+import { Container, MantineSize } from '@mantine/core'
 
 interface IContentContainerProps {
-  size?: 'xl' | 'md'
+  size?: MantineSize
 }
 
 const ContentContainer = (props: PropsWithChildren<IContentContainerProps>) => {

client/src/app/layout/PublicArea/PublicArea.tsx

@@ -0,0 +1,33 @@
+import React, { PropsWithChildren } from 'react'
+import Footer from './components/Footer/Footer'
+import { Link } from 'react-router-dom'
+import { CaretLeft } from 'phosphor-react'
+import { Anchor, MantineSize } from '@mantine/core'
+import ContentContainer from '../ContentContainer/ContentContainer'
+import ScrollToTop from '../ScrollToTop/ScrollToTop'
+
+interface IPublicAreaProps {
+  withBackButton?: boolean
+  size?: MantineSize
+}
+
+const PublicArea = (props: PropsWithChildren<IPublicAreaProps>) => {
+  const { withBackButton = false, size = 'md', children } = props
+
+  return (
+    <div>
+      <ContentContainer size={size}>
+        {withBackButton && (
+          <Anchor component={Link} c='dimmed' fz='xs' to='/'>
+            <CaretLeft size={10} /> Back
+          </Anchor>
+        )}
+        {children}
+      </ContentContainer>
+      <Footer />
+      <ScrollToTop />
+    </div>
+  )
+}
+
+export default PublicArea

client/src/pages/LandingPage/components/Footer/Footer.tsx → client/src/app/layout/PublicArea/components/Footer/Footer.tsx

@@ -1,8 +1,8 @@
 import * as classes from './Footer.module.css'
 import { Anchor, Container, Group } from '@mantine/core'
-import { GLOBAL_CONFIG } from '../../../../config/global'
+import { GLOBAL_CONFIG } from '../../../../../config/global'
 import { Link } from 'react-router-dom'
-import ColorSchemeToggleButton from '../../../../components/ColorSchemeToggleButton/ColorSchemeToggleButton'
+import ColorSchemeToggleButton from '../../../../../components/ColorSchemeToggleButton/ColorSchemeToggleButton'
 
 const links = [
   { link: '/about', label: 'About', visible: true },

client/src/app/layout/ScrollToTop/ScrollToTop.tsx

@@ -1,10 +1,8 @@
 import React, { useEffect } from 'react'
-import { useWindowScroll } from '@mantine/hooks'
 import { useLocation } from 'react-router-dom'
 import { useNavigationType } from 'react-router'
 
 const ScrollToTop = () => {
-  const [, scrollTo] = useWindowScroll()
   const navigationType = useNavigationType()
   const location = useLocation()
 
@@ -13,7 +11,7 @@ const ScrollToTop = () => {
       return
     }
 
-    scrollTo({ y: 0 })
+    window.scrollTo(0, 0)
   }, [location.pathname, navigationType])
 
   return <></>

client/src/config/global.ts

@@ -15,9 +15,9 @@ const getEnvironmentVariable = <T = string>(key: string, useJson = false): T | u
 }
 
 export const GLOBAL_CONFIG: IGlobalConfig = {
-  title: getEnvironmentVariable('APPLICATION_TITLE') || 'Thesis Track',
+  title: getEnvironmentVariable('APPLICATION_TITLE') || 'ThesisTrack',
 
-  chair_name: getEnvironmentVariable('CHAIR_NAME') || 'Thesis Track',
+  chair_name: getEnvironmentVariable('CHAIR_NAME') || 'ThesisTrack',
   chair_url: getEnvironmentVariable('CHAIR_URL') || window.origin,
 
   allow_suggested_topics: (getEnvironmentVariable('ALLOW_SUGGESTED_TOPICS') || 'true') === 'true',

client/src/hooks/theme.ts

@@ -1,6 +1,7 @@
-import { useDocumentTitle, useMediaQuery } from '@mantine/hooks'
+import { useMediaQuery } from '@mantine/hooks'
 import { useMantineColorScheme, useMantineTheme } from '@mantine/core'
 import { GLOBAL_CONFIG } from '../config/global'
+import { useEffect } from 'react'
 
 export function useIsSmallerBreakpoint(breakpoint: string) {
   const theme = useMantineTheme()
@@ -15,7 +16,15 @@ export function useIsBiggerThanBreakpoint(breakpoint: string) {
 }
 
 export function usePageTitle(title: string) {
-  useDocumentTitle(`${title} - ${GLOBAL_CONFIG.title}`)
+  useEffect(() => {
+    const previousTitle = document.title
+
+    document.title = `${title} - ${GLOBAL_CONFIG.title}`
+
+    return () => {
+      document.title = previousTitle
+    }
+  }, [title])
 }
 
 export function useHighlightedBackgroundColor(selected: boolean) {

client/src/pages/AboutPage/AboutPage.tsx

@@ -1,24 +1,22 @@
-import ContentContainer from '../../app/layout/ContentContainer/ContentContainer'
 import { Anchor, Center, Image, List, Stack, Text, Title } from '@mantine/core'
-import { Link } from 'react-router-dom'
 import flowchart from './flowchart.svg'
-import { CaretLeft } from 'phosphor-react'
+import { usePageTitle } from '../../hooks/theme'
+import PublicArea from '../../app/layout/PublicArea/PublicArea'
 
 const AboutPage = () => {
+  usePageTitle('About')
+
   return (
-    <ContentContainer size='md'>
+    <PublicArea withBackButton={true}>
       <Stack>
-        <Anchor component={Link} c='dimmed' fz='xs' to='/'>
-          <CaretLeft size={10} /> Back
-        </Anchor>
-        <Title>Thesis Track</Title>
+        <Title>ThesisTrack</Title>
         <Text>
-          Thesis Track is an{' '}
+          ThesisTrack is an{' '}
           <Anchor href='https://github.com/ls1intum/thesis-track' target='_blank' rel='noreferrer'>
             open source
           </Anchor>{' '}
-          web application that represents the complete thesis lifecycle of theses applied for and
-          supervised at the chair.
+          web application that integrates the complete thesis lifecycle for theses supervised at a
+          chair. It should help advisors and supervisors to save time on reoccurring processes.
         </Text>
         <Title order={3}>Contributors</Title>
         <List>
@@ -38,7 +36,7 @@ const AboutPage = () => {
           <Image src={flowchart} style={{ maxWidth: '600px' }} />
         </Center>
       </Stack>
-    </ContentContainer>
+    </PublicArea>
   )
 }
 

client/src/pages/ImprintPage/ImprintPage.tsx

@@ -1,14 +1,17 @@
-import ContentContainer from '../../app/layout/ContentContainer/ContentContainer'
 import { Title } from '@mantine/core'
 import DocumentEditor from '../../components/DocumentEditor/DocumentEditor'
 import { GLOBAL_CONFIG } from '../../config/global'
+import { usePageTitle } from '../../hooks/theme'
+import PublicArea from '../../app/layout/PublicArea/PublicArea'
 
 const ImprintPage = () => {
+  usePageTitle('Imprint')
+
   return (
-    <ContentContainer size='md'>
+    <PublicArea withBackButton={true}>
       <Title mb='md'>Imprint</Title>
       <DocumentEditor value={GLOBAL_CONFIG.imprint_text} />
-    </ContentContainer>
+    </PublicArea>
   )
 }
 

client/src/pages/LandingPage/LandingPage.tsx

@@ -1,18 +1,20 @@
 import HeroSection from './components/HeroSection/HeroSection'
 import TopicsProvider from '../../contexts/TopicsProvider/TopicsProvider'
 import TopicsTable from '../../components/TopicsTable/TopicsTable'
-import ContentContainer from '../../app/layout/ContentContainer/ContentContainer'
 import { Button, Group, Space, Title } from '@mantine/core'
 import React from 'react'
 import { Link } from 'react-router-dom'
 import PublishedTheses from './components/PublishedTheses/PublishedTheses'
-import Footer from './components/Footer/Footer'
+import { usePageTitle } from '../../hooks/theme'
+import PublicArea from '../../app/layout/PublicArea/PublicArea'
 
 const LandingPage = () => {
+  usePageTitle('Find or Propose a Thesis Topic')
+
   return (
     <div>
       <HeroSection />
-      <ContentContainer size='md'>
+      <PublicArea>
         <TopicsProvider limit={10}>
           <Title order={2} mb='sm'>
             Open Topics
@@ -50,8 +52,7 @@ const LandingPage = () => {
         </TopicsProvider>
         <Space my='md' />
         <PublishedTheses />
-      </ContentContainer>
-      <Footer />
+      </PublicArea>
     </div>
   )
 }

client/src/pages/LandingPage/components/HeroSection/HeroSection.tsx

@@ -21,7 +21,7 @@ export function HeroSection() {
 
         <Container p={0} size={700}>
           <Text size='lg' c='dimmed' className={classes.description}>
-            Whether you&apos;re looking for inspiration or have a unique idea in mind, Thesis Track
+            Whether you&apos;re looking for inspiration or have a unique idea in mind, ThesisTrack
             makes it easy. Explore topics posted by instructors or suggest your own.
           </Text>
         </Container>

client/src/pages/PresentationPage/PresentationPage.tsx

@@ -12,12 +12,15 @@ import { Anchor, Divider, Grid, Stack, Title } from '@mantine/core'
 import LabeledItem from '../../components/LabeledItem/LabeledItem'
 import { formatDate, formatPresentationType } from '../../utils/format'
 import { GLOBAL_CONFIG } from '../../config/global'
+import { usePageTitle } from '../../hooks/theme'
 
 const PresentationPage = () => {
   const { presentationId } = useParams<{ presentationId: string }>()
 
   const [presentation, setPresentation] = useState<IPublishedPresentation | false>()
 
+  usePageTitle(presentation ? presentation.thesis.title : 'Presentation')
+
   useEffect(() => {
     setPresentation(undefined)
 

client/src/pages/PrivacyPage/PrivacyPage.tsx

@@ -1,14 +1,17 @@
-import ContentContainer from '../../app/layout/ContentContainer/ContentContainer'
 import { Title } from '@mantine/core'
 import { GLOBAL_CONFIG } from '../../config/global'
 import DocumentEditor from '../../components/DocumentEditor/DocumentEditor'
+import { usePageTitle } from '../../hooks/theme'
+import PublicArea from '../../app/layout/PublicArea/PublicArea'
 
 const PrivacyPage = () => {
+  usePageTitle('Privacy')
+
   return (
-    <ContentContainer size='md'>
+    <PublicArea withBackButton={true}>
       <Title mb='md'>Privacy</Title>
       <DocumentEditor value={GLOBAL_CONFIG.privacy_text} />
-    </ContentContainer>
+    </PublicArea>
   )
 }
 

client/src/pages/ReplaceApplicationPage/ReplaceApplicationPage.tsx

@@ -7,13 +7,15 @@ import SelectTopicStep from './components/SelectTopicStep/SelectTopicStep'
 import StudentInformationStep from './components/StudentInformationStep/StudentInformationStep'
 import MotivationStep from './components/MotivationStep/MotivationStep'
 import TopicsProvider from '../../contexts/TopicsProvider/TopicsProvider'
-import { useWindowScroll } from '@mantine/hooks'
 import { IApplication } from '../../requests/responses/application'
 import { doRequest } from '../../requests/request'
+import { usePageTitle } from '../../hooks/theme'
 
 const ReplaceApplicationPage = () => {
   const { topicId, applicationId } = useParams<{ topicId: string; applicationId: string }>()
 
+  usePageTitle('Submit Application')
+
   const [application, setApplication] = useState<IApplication>()
 
   useEffect(() => {
@@ -35,7 +37,6 @@ const ReplaceApplicationPage = () => {
     }
   }, [applicationId])
 
-  const [, scrollTo] = useWindowScroll()
   const navigate = useNavigate()
   const topic = useTopic(topicId)
 
@@ -50,7 +51,7 @@ const ReplaceApplicationPage = () => {
       navigate(`/submit-application`, { replace: true })
     }
 
-    scrollTo({ y: 0 })
+    window.scrollTo(0, 0)
     setStep(value)
   }
 

client/src/pages/ReviewApplicationPage/ReviewApplicationPage.tsx

@@ -6,13 +6,15 @@ import ApplicationsProvider from '../../contexts/ApplicationsProvider/Applicatio
 import { Grid, Text, Center } from '@mantine/core'
 import ApplicationsSidebar from './components/ApplicationsSidebar/ApplicationsSidebar'
 import ApplicationReviewBody from './components/ApplicationReviewBody/ApplicationReviewBody'
-import { useIsSmallerBreakpoint } from '../../hooks/theme'
+import { useIsSmallerBreakpoint, usePageTitle } from '../../hooks/theme'
 import ApplicationModal from '../../components/ApplicationModal/ApplicationModal'
 
 const ReviewApplicationPage = () => {
   const navigate = useNavigate()
   const { applicationId } = useParams<{ applicationId: string }>()
 
+  usePageTitle('Review Applications')
+
   const isSmallScreen = useIsSmallerBreakpoint('md')
 
   const [application, setApplication] = useState<IApplication>()
@@ -58,6 +60,7 @@ const ReviewApplicationPage = () => {
         <Grid.Col span={{ md: 3 }}>
           <ApplicationsSidebar
             selected={application}
+            isSmallScreen={isSmallScreen}
             onSelect={(newApplication) => {
               navigate(`/applications/${newApplication.applicationId}`, {
                 replace: true,

client/src/pages/ReviewApplicationPage/components/ApplicationReviewBody/ApplicationReviewBody.tsx

@@ -3,7 +3,6 @@ import ApplicationReviewForm from '../../../../components/ApplicationReviewForm/
 import { Divider, Stack } from '@mantine/core'
 import React, { useEffect } from 'react'
 import { IApplication } from '../../../../requests/responses/application'
-import { useWindowScroll } from '@mantine/hooks'
 import ApplicationRejectButton from '../../../../components/ApplicationRejectButton/ApplicationRejectButton'
 
 interface IApplicationReviewBodyProps {
@@ -14,10 +13,8 @@ interface IApplicationReviewBodyProps {
 const ApplicationReviewBody = (props: IApplicationReviewBodyProps) => {
   const { application, onChange } = props
 
-  const [, scrollTo] = useWindowScroll()
-
   useEffect(() => {
-    scrollTo({ y: 0 })
+    window.scrollTo(0, 0)
   }, [application.applicationId])
 
   return (

client/src/pages/ReviewApplicationPage/components/ApplicationsSidebar/ApplicationsSidebar.tsx

@@ -7,11 +7,12 @@ import ApplicationListItem from '../ApplicationListItem/ApplicationListItem'
 
 interface IApplicationsSidebarProps {
   selected: IApplication | undefined
+  isSmallScreen: boolean
   onSelect: (application: IApplication) => unknown
 }
 
 const ApplicationsSidebar = (props: IApplicationsSidebarProps) => {
-  const { selected, onSelect } = props
+  const { selected, isSmallScreen, onSelect } = props
 
   const { page, setPage, applications } = useApplicationsContext()
 
@@ -54,6 +55,10 @@ const ApplicationsSidebar = (props: IApplicationsSidebarProps) => {
   }, [applications, page, selectedIndex])
 
   useEffect(() => {
+    if (isSmallScreen) {
+      return
+    }
+
     if (page === 0 && !startAtLastApplication) {
       return
     }
@@ -65,7 +70,12 @@ const ApplicationsSidebar = (props: IApplicationsSidebarProps) => {
           : applications.content[0],
       )
     }
-  }, [page, startAtLastApplication, applications?.content.map((x) => x.applicationId).join(',')])
+  }, [
+    page,
+    startAtLastApplication,
+    isSmallScreen,
+    applications?.content.map((x) => x.applicationId).join(','),
+  ])
 
   return (
     <Stack gap='sm'>

client/src/pages/TopicPage/TopicPage.tsx

@@ -19,7 +19,7 @@ const TopicPage = () => {
 
   const topic = useTopic(topicId)
 
-  usePageTitle('Topic')
+  usePageTitle(topic ? topic.title : 'Topic')
 
   if (topic === false) {
     return <NotFound />