Merge branch 'dev' of gitlab.liu.se:tddd96-grupp11/teknikattan-scoring-system...

Merge branch 'dev' of gitlab.liu.se:tddd96-grupp11/teknikattan-scoring-system into 178-improve-sockets

client/src/pages/presentationEditor/components/QuestionComponentDisplay.tsx

+/**
+ * What it is:
+ * This file contains the question component function which returns the question component.
+ * This component is used for displaying a question component for the participants with correct type of answer alternatives to interact with
+ * (see the function getAlternatives).
+ *
+ * How it's used:
+ * This file is used when a question component is to be displayed which happens in RndComponent.tsx for rendering in the editor
+ * and PresentationComponent.tsx for rendering in the presentation (the actual competition).
+ *
+ * @module
+ */
+
 import { Card, Divider, ListItem, Typography } from '@material-ui/core'
 import React from 'react'
 import { useAppSelector } from '../../../hooks'
@@ -29,6 +42,10 @@ const QuestionComponentDisplay = ({ variant, currentSlideId }: QuestionComponent
     (state) => state.types.questionTypes.find((qType) => qType.id === questionTypeId)?.name
   )
 
+  /**
+   * This function is used for displaying the correct answer alternatives which is the part of the question component
+   * which the participants will interact with to submit their answers.
+   */
   const getAlternatives = () => {
     switch (questionTypeName) {
       case 'Text':

client/src/pages/presentationEditor/components/answerComponents/AnswerMultiple.tsx

+/**
+ * What it is:
+ * Contains the component for the multiple choice question type ("Kryssfråga")
+ * which is displayed in the participant view in the editor and presentation.
+ * This is a part of a question component which the users will interact with to answer multiple choice questions.
+ * The participants get multiple alternatives and can mark multiple of these alternatives as correct.
+ *
+ * How it's used:
+ * This file is used when a question component is to be rendered which only happens in QuestionComponentDisplay.tsx.
+ * For more information read the documentation of that file.
+ *
+ * @module
+ */
+
 import { Checkbox, ListItem, ListItemText, Typography, withStyles } from '@material-ui/core'
 import { CheckboxProps } from '@material-ui/core/Checkbox'
 import { green, grey } from '@material-ui/core/colors'

client/src/pages/presentationEditor/components/answerComponents/AnswerSingle.tsx

+/**
+ * What it is:
+ * Contains the component for the single choice question type ("Alternativfråga")
+ * which is displayed in the participant view in the editor and presentation.
+ * This is a part of a question component which the users will interact with to answer multiple choice questions.
+ * The participants get multiple alternatives but can only mark one of these alternatives as correct.
+ *
+ * How it's used:
+ * This file is used when a question component is to be rendered which only happens in QuestionComponentDisplay.tsx.
+ * For more information read the documentation of that file.
+ *
+ * @module
+ */
+
 import { Checkbox, ListItem, ListItemText, Typography, withStyles } from '@material-ui/core'
 import { CheckboxProps } from '@material-ui/core/Checkbox'
 import { green, grey } from '@material-ui/core/colors'
@@ -35,8 +49,8 @@ const AnswerSingle = ({ variant, activeSlide, competitionId }: AnswerSingleProps
 
   const updateAnswer = async (alternative: QuestionAlternative) => {
     if (activeSlide) {
-      // TODO: ignore API calls when an answer is already checked
       if (team?.question_answers[0]) {
+        // If an alternative was already marked
         await axios
           .put(`/api/competitions/${competitionId}/teams/${teamId}/answers/${answerId}`, {
             answer: alternative.text,
@@ -50,6 +64,7 @@ const AnswerSingle = ({ variant, activeSlide, competitionId }: AnswerSingleProps
           })
           .catch(console.log)
       } else {
+        // If no alternative was already marked
         await axios
           .post(`/api/competitions/${competitionId}/teams/${teamId}/answers`, {
             answer: alternative.text,
@@ -87,6 +102,9 @@ const AnswerSingle = ({ variant, activeSlide, competitionId }: AnswerSingleProps
     checked: {},
   })((props: CheckboxProps) => <Checkbox color="default" {...props} />)
 
+  /**
+   * Renders the radio button which the participants will click to mark their answer.
+   */
   const renderRadioButton = (alt: QuestionAlternative) => {
     if (variant === 'presentation') {
       if (decideChecked(alt)) {

client/src/pages/presentationEditor/components/answerComponents/AnswerText.tsx

+/**
+ * What it is:
+ * Returns the component for the text question type ("Skriftlig fråga")
+ * which is a part of a question component which displayed in the participant view in the editor and presentation.
+ * This is the component the users will interact with to answer text questions.
+ * In practice the participants writes their answer in a text field.
+ *
+ * How it's used:
+ * This file is used when a question component is to be rendered which only happens in QuestionComponentDisplay.tsx.
+ * For more information read the documentation of that file.
+ *
+ * @module
+ */
+
 import { ListItem, ListItemText, TextField } from '@material-ui/core'
 import axios from 'axios'
 import React from 'react'
@@ -18,6 +32,7 @@ const AnswerText = ({ activeSlide, competitionId }: AnswerTextProps) => {
   const teamId = useAppSelector((state) => state.competitionLogin.data?.team_id)
   const team = useAppSelector((state) => state.presentation.competition.teams.find((team) => team.id === teamId))
   const answerId = team?.question_answers.find((answer) => answer.question_id === activeSlide?.questions[0].id)?.id
+
   const onAnswerChange = (answer: string) => {
     if (timerHandle) {
       clearTimeout(timerHandle)

client/src/pages/presentationEditor/components/answerComponents/Description.txt

+The files in this directory generates the part of a question component which the participants
+interacts with to change and submit their answer.
\ No newline at end of file

client/src/pages/presentationEditor/components/slideSettingsComponents/Description.txt

+Every file in this folder is only used in SlideSettings.tsx.
+These files constitutes the content of the slide settings panel to the right in the editor.
\ No newline at end of file

client/src/pages/presentationEditor/components/slideSettingsComponents/Images.tsx

-/* This file handles creating and removing image components, and uploading and removing image files from the server.
+/**
+ * This file handles creating and removing image components, and uploading and removing image files from the server.
+ *
+ * @module
  */
+
 import { ListItem, ListItemText } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
 import axios from 'axios'

client/src/pages/presentationEditor/components/slideSettingsComponents/Instructions.tsx

+/**
+ * This file returns the instructions component
+ * The creator of a competition can add a description of how a question will be corrected.
+ * This information is showed in the judge view and will help the judges decide what answer was correct.
+ *
+ * @module
+ */
+
 import { ListItem, ListItemText, TextField } from '@material-ui/core'
 import axios from 'axios'
 import React from 'react'
@@ -25,7 +33,6 @@ const Instructions = ({ activeSlide, competitionId }: InstructionsProps) => {
       window.setTimeout(async () => {
         if (activeSlide && activeSlide.questions?.[0]) {
           await axios
-            // TODO: Implement instructions field in question and add put API
             .put(
               `/api/competitions/${competitionId}/slides/${activeSlide.id}/questions/${activeSlide.questions[0].id}`,
               {

client/src/pages/presentationEditor/components/slideSettingsComponents/MultipleChoiceAlternatives.tsx

+/**
+ * Lets a competition creator add, remove and handle alternatives for multiple choice questions ("Kryssfråga") in the slide settings panel.
+ *
+ * @module
+ */
+
 import { Checkbox, ListItem, ListItemText, withStyles } from '@material-ui/core'
 import { CheckboxProps } from '@material-ui/core/Checkbox'
 import { green, grey } from '@material-ui/core/colors'
@@ -18,6 +24,7 @@ type MultipleChoiceAlternativeProps = {
 const MultipleChoiceAlternatives = ({ activeSlide, competitionId }: MultipleChoiceAlternativeProps) => {
   const dispatch = useAppDispatch()
   const activeSlideId = useAppSelector((state) => state.editor.activeSlideId)
+
   const GreenCheckbox = withStyles({
     root: {
       color: grey[900],
@@ -28,6 +35,9 @@ const MultipleChoiceAlternatives = ({ activeSlide, competitionId }: MultipleChoi
     checked: {},
   })((props: CheckboxProps) => <Checkbox color="default" {...props} />)
 
+  /**
+   * A checked checkbox is represented with 1 and an unchecked with 0.
+   */
   const numberToBool = (num: number) => {
     if (num === 0) return false
     else return true

client/src/pages/presentationEditor/components/slideSettingsComponents/QuestionSettings.tsx

+/**
+ * This file contatins the question settings component, which in turn lets the competition editor
+ * change the name of the question and how many points the participants can get when submittning the correct answer.
+ *
+ * @module
+ */
+
 import { ListItem, ListItemText, TextField } from '@material-ui/core'
 import axios from 'axios'
 import React, { useEffect, useState } from 'react'
@@ -14,6 +21,7 @@ type QuestionSettingsProps = {
 const QuestionSettings = ({ activeSlide, competitionId }: QuestionSettingsProps) => {
   const dispatch = useAppDispatch()
   const [timerHandle, setTimerHandle] = useState<number | undefined>(undefined)
+
   const handleChangeQuestion = (
     updateTitle: boolean,
     event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
@@ -28,6 +36,8 @@ const QuestionSettings = ({ activeSlide, competitionId }: QuestionSettingsProps)
       setName(event.target.value)
     } else setScore(+event.target.value)
   }
+
+  // Set to not let the editor set a bigger number than this to affect the server in a bad way.
   const maxScore = 1000000
 
   const updateQuestion = async (

client/src/pages/presentationEditor/components/slideSettingsComponents/SingleChoiceAlternatives.tsx

+/**
+ * Lets a competition creator add, remove and handle alternatives for single choice questions ("Alternativfråga") in the slide settings panel.
+ *
+ * @module
+ */
+
 import { ListItem, ListItemText } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
 import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonCheckedOutlined'

client/src/pages/presentationEditor/components/slideSettingsComponents/SlideType.tsx

+/**
+ * Lets a competition creator set the slide type for a slide such as "Informationssida" or "Skriftlig fråga" etc.
+ *
+ * @module
+ */
+
 import {
   Button,
   Dialog,