add views comments

client/src/pages/views/AudienceViewPage.tsx

+/**
+ * This file contains the view that is to be shown for the audience watching the competition.
+ */
 import { Snackbar, Typography } from '@material-ui/core'
 import { Alert } from '@material-ui/lab'
 import React, { useEffect, useState } from 'react'
@@ -7,6 +10,7 @@ import SlideDisplay from '../presentationEditor/components/SlideDisplay'
 import Scoreboard from './components/Scoreboard'
 import { PresentationBackground, PresentationContainer } from './styled'
 
+/** Connects a device to a competition and renders out the correct components for the audience viewType */
 const AudienceViewPage: React.FC = () => {
   const code = useAppSelector((state) => state.presentation.code)
   const viewTypes = useAppSelector((state) => state.types.viewTypes)
@@ -16,6 +20,7 @@ const AudienceViewPage: React.FC = () => {
   const showScoreboard = useAppSelector((state) => state.presentation.show_scoreboard)
 
   useEffect(() => {
+    /** Connect as audience */
     if (code && code !== '') {
       socketConnect('Audience')
     }
@@ -26,6 +31,7 @@ const AudienceViewPage: React.FC = () => {
         <PresentationContainer>
           <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />
         </PresentationContainer>
+        {/** Confirm that the connection was successful */}
         <Snackbar open={successMessageOpen} autoHideDuration={4000} onClose={() => setSuccessMessageOpen(false)}>
           <Alert severity="success">{`Du har gått med i tävlingen "${competitionName}" som åskådare`}</Alert>
         </Snackbar>

client/src/pages/views/JudgeViewPage.tsx

+/**
+ * This file contains the view that is to be shown for the judges of the competition.
+ */
 import { Divider, List, ListItemText, Snackbar, Typography } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { Alert } from '@material-ui/lab'
@@ -40,6 +43,7 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
+/** Connects a device to a competition and renders out the correct components for the judge viewType */
 const JudgeViewPage: React.FC = () => {
   const classes = useStyles()
   const dispatch = useAppDispatch()
@@ -61,6 +65,7 @@ const JudgeViewPage: React.FC = () => {
     setCurrentSlide(slides[index])
   }
   useEffect(() => {
+    /** Connect as judge */
     if (code && code !== '') {
       socketConnect('Judge')
     }
@@ -104,6 +109,7 @@ const JudgeViewPage: React.FC = () => {
   }, [timer.enabled])
   return (
     <div style={{ height: '100%' }}>
+      {/** Top app bar */}
       <JudgeAppBar position="fixed">
         <JudgeToolbar>
           <JudgeQuestionsLabel variant="h5">Frågor</JudgeQuestionsLabel>
@@ -113,6 +119,7 @@ const JudgeViewPage: React.FC = () => {
           <JudgeAnswersLabel variant="h5">Svar</JudgeAnswersLabel>
         </JudgeToolbar>
       </JudgeAppBar>
+      {/** List of slides */}
       <LeftDrawer
         width={leftDrawerWidth}
         variant="permanent"
@@ -125,6 +132,7 @@ const JudgeViewPage: React.FC = () => {
         <List>
           {slides.map((slide, index) => (
             <div key={slide.id}>
+              {/** Render icons, show active slide and active operator slide */}
               <SlideListItem
                 selected={slide.order === currentSlide?.order}
                 onClick={() => handleSelectSlide(index)}
@@ -139,6 +147,7 @@ const JudgeViewPage: React.FC = () => {
           ))}
         </List>
       </LeftDrawer>
+      {/** Panel to distribute points and correct submitted answers from teams*/}
       <RightDrawer
         width={rightDrawerWidth}
         variant="permanent"
@@ -174,6 +183,7 @@ const JudgeViewPage: React.FC = () => {
           )}
         </InnerContent>
       </Content>
+      {/** Confirm that the connection was successful */}
       <Snackbar open={successMessageOpen} autoHideDuration={4000} onClose={() => setSuccessMessageOpen(false)}>
         <Alert severity="success">{`Du har gått med i tävlingen "${competitionName}" som domare`}</Alert>
       </Snackbar>

client/src/pages/views/OperatorViewPage.tsx

+/**
+ * This file contains the view that is to be shown for the person operating the presentation for the competition.
+ */
 import {
   Box,
   Button,
@@ -74,6 +77,7 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
+// interface to keep track of important id's
 interface Code {
   id: number
   code: string
@@ -82,6 +86,7 @@ interface Code {
   team_id: number
 }
 
+/** Connects a device to a competition and renders out the correct components for the operator viewType */
 const OperatorViewPage: React.FC = () => {
   // for dialog alert
   const [openAlert, setOpen] = React.useState(false)
@@ -113,6 +118,7 @@ const OperatorViewPage: React.FC = () => {
   const showScoreboard = useAppSelector((state) => state.presentation.show_scoreboard)
 
   useEffect(() => {
+    /** Connect as operator */
     socketConnect('Operator')
   }, [])
 

client/src/pages/views/TeamViewPage.tsx

+/**
+ * This file contains the view that is to be shown for the participating teams.
+ */
 import { Snackbar } from '@material-ui/core'
 import { Alert } from '@material-ui/lab'
 import React, { useEffect, useState } from 'react'
@@ -6,6 +9,7 @@ import { socketConnect } from '../../sockets'
 import SlideDisplay from '../presentationEditor/components/SlideDisplay'
 import { OperatorContainer, PresentationBackground, PresentationContainer } from './styled'
 
+/** Connects a device to a competition and renders out the correct components for the team viewType */
 const TeamViewPage: React.FC = () => {
   const code = useAppSelector((state) => state.presentation.code)
   const viewTypes = useAppSelector((state) => state.types.viewTypes)
@@ -22,6 +26,7 @@ const TeamViewPage: React.FC = () => {
       state.presentation.competition.teams.find((team) => team.id === state.competitionLogin.data?.team_id)?.name
   )
   useEffect(() => {
+    /** Connect as team */
     if (code && code !== '') {
       socketConnect('Team')
     }
@@ -32,6 +37,7 @@ const TeamViewPage: React.FC = () => {
         <PresentationContainer>
           {activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />}
         </PresentationContainer>
+        {/** Confirm that the connection was successful */}
         <Snackbar open={successMessageOpen} autoHideDuration={4000} onClose={() => setSuccessMessageOpen(false)}>
           <Alert severity="success">{`Du har gått med i tävlingen "${competitionName}" som lag ${teamName}`}</Alert>
         </Snackbar>

client/src/pages/views/ViewSelectPage.tsx

+/**
+ * This file contains the page that redirects a user to the correct view when entered via a url with a code.
+ */
 import { CircularProgress, Typography } from '@material-ui/core'
 import React, { useEffect } from 'react'
 import { Redirect, useHistory, useParams } from 'react-router-dom'

client/src/pages/views/components/JudgeScoreDisplay.tsx

+/**
+ * This file contains JudgeScoreDisplay component rendered in the right panel in JudgeViewPage.tsx.
+ */
 import { Box, Card, Divider, Typography } from '@material-ui/core'
 import axios from 'axios'
 import React from 'react'
@@ -36,6 +39,7 @@ const JudgeScoreDisplay = ({ teamIndex, activeSlide }: ScoreDisplayProps) => {
       scores.push(correctTeamScore.score)
     } else scores.push(undefined)
   }
+  /** Edit the points for an answered question */
   const handleEditScore = async (newScore: number, questionId: number) => {
     await axios
       .put(`/api/competitions/${currentCompetititonId}/teams/${currentTeam.id}/answers/question_scores/${questionId}`, {
@@ -44,6 +48,7 @@ const JudgeScoreDisplay = ({ teamIndex, activeSlide }: ScoreDisplayProps) => {
       .then(() => dispatch(getPresentationCompetition(currentCompetititonId.toString())))
   }
 
+  /** Sum two values */
   const sumTwoScores = (a: number | undefined, b: number | undefined) => {
     let aValue = 0
     let bValue = 0
@@ -109,6 +114,7 @@ const JudgeScoreDisplay = ({ teamIndex, activeSlide }: ScoreDisplayProps) => {
         )}
       </ScoreDisplayHeader>
       <Typography variant="h6">
+        {/** Slides */}
         Sidor:
         <div style={{ display: 'flex' }}>
           {questions.map((question, index) => (
@@ -128,6 +134,7 @@ const JudgeScoreDisplay = ({ teamIndex, activeSlide }: ScoreDisplayProps) => {
             </Card>
           ))}
         </div>
+        {/** Team points for each question */}
         Poäng:
         <div style={{ display: 'flex' }}>
           {scores.map((score, index) => (
@@ -147,6 +154,7 @@ const JudgeScoreDisplay = ({ teamIndex, activeSlide }: ScoreDisplayProps) => {
             </Card>
           ))}
         </div>
+        {/** Team total points */}
         Totala poäng: {scores.reduce((a, b) => sumTwoScores(a, b), 0)}
       </Typography>
       <AnswersDisplay>

client/src/pages/views/components/JudgeScoringInstructions.tsx

+/**
+ * This file contains JudgeScoringInstructions component rendered in the right panel in JudgeViewPage.tsx.
+ */
 import { Typography } from '@material-ui/core'
 import React from 'react'
 import { RichQuestion } from '../../../interfaces/ApiRichModels'

client/src/pages/views/components/Scoreboard.tsx

+/**
+ * This file contains the scoreboard component that the operator can
+ * bring up in OperatorViewPage.tsx to show current standings.
+ */
 import {
   Button,
   Dialog,
@@ -18,6 +22,7 @@ type ScoreboardProps = {
   isOperator?: boolean
 }
 
+/** Render the scoreboard */
 const Scoreboard = ({ isOperator }: ScoreboardProps) => {
   const teams = useAppSelector((state) => state.presentation.competition.teams)
 
@@ -57,6 +62,7 @@ const Scoreboard = ({ isOperator }: ScoreboardProps) => {
 
       {isOperator && (
         <DialogActions>
+          {/** Stop showing the standings */}
           <Button onClick={() => socketSync({ show_scoreboard: false })} color="primary">
             Stäng
           </Button>

client/src/pages/views/components/Timer.tsx

+/**
+ * This file contains the component to display a timer for the presentation slides.
+ */
 import React, { useEffect, useState } from 'react'
 import { setPresentationTimer } from '../../../actions/presentation'
 import { useAppDispatch, useAppSelector } from '../../../hooks'

client/src/pages/views/components/styled.tsx

+/**
+ * This file supplies CSS styles to the view components.
+ */
 import { Paper, TextField, Typography } from '@material-ui/core'
 import styled from 'styled-components'
 

client/src/pages/views/styled.tsx

+/**
+ * This file supplies CSS styles for the different viewtypes.
+ */
 import { AppBar, Button, Card, Drawer, Toolbar, Typography } from '@material-ui/core'
 import styled from 'styled-components'