Resolve "Minor bug fixes"

Closes #175 (closed)

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

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react'
 import { getEditorCompetition } from '../../../../actions/editor'
 import { useAppDispatch } from '../../../../hooks'
 import { RichSlide } from '../../../../interfaces/ApiRichModels'
-import { Center, SettingsList } from '../styled'
+import { Center, SettingsItemContainer, SettingsList } from '../styled'
 
 type QuestionSettingsProps = {
   activeSlide: RichSlide
@@ -13,7 +13,22 @@ type QuestionSettingsProps = {
 
 const QuestionSettings = ({ activeSlide, competitionId }: QuestionSettingsProps) => {
   const dispatch = useAppDispatch()
-  const maxScore = 1000
+  const [timerHandle, setTimerHandle] = useState<number | undefined>(undefined)
+  const handleChangeQuestion = (
+    updateTitle: boolean,
+    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+  ) => {
+    if (timerHandle) {
+      clearTimeout(timerHandle)
+      setTimerHandle(undefined)
+    }
+    //Only updates question and api 500ms after last input was made
+    setTimerHandle(window.setTimeout(() => updateQuestion(updateTitle, event), 300))
+    if (updateTitle) {
+      setName(event.target.value)
+    } else setScore(+event.target.value)
+  }
+  const maxScore = 1000000
 
   const updateQuestion = async (
     updateTitle: boolean,
@@ -30,40 +45,24 @@ const QuestionSettings = ({ activeSlide, competitionId }: QuestionSettingsProps)
           })
           .catch(console.log)
       } else {
-        if (+event.target.value > maxScore) {
-          setScore(maxScore)
-          await axios
-            .put(
-              `/api/competitions/${competitionId}/slides/${activeSlide.id}/questions/${activeSlide.questions[0].id}`,
-              {
-                total_score: maxScore,
-              }
-            )
-            .then(() => {
-              dispatch(getEditorCompetition(competitionId))
-            })
-            .catch(console.log)
-          return maxScore
-        } else {
-          setScore(+event.target.value)
-          await axios
-            .put(
-              `/api/competitions/${competitionId}/slides/${activeSlide.id}/questions/${activeSlide.questions[0].id}`,
-              {
-                total_score: event.target.value,
-              }
-            )
-            .then(() => {
-              dispatch(getEditorCompetition(competitionId))
-            })
-            .catch(console.log)
-        }
+        // Sets score to event.target.value if it's between 0 and max
+        const score = Math.max(0, Math.min(+event.target.value, maxScore))
+        setScore(score)
+        await axios
+          .put(`/api/competitions/${competitionId}/slides/${activeSlide.id}/questions/${activeSlide.questions[0].id}`, {
+            total_score: score,
+          })
+          .then(() => {
+            dispatch(getEditorCompetition(competitionId))
+          })
+          .catch(console.log)
       }
     }
   }
-
   const [score, setScore] = useState<number | undefined>(0)
+  const [name, setName] = useState<string | undefined>('')
   useEffect(() => {
+    setName(activeSlide?.questions?.[0]?.name)
     setScore(activeSlide?.questions?.[0]?.total_score)
   }, [activeSlide])
 
@@ -77,26 +76,28 @@ const QuestionSettings = ({ activeSlide, competitionId }: QuestionSettingsProps)
       <ListItem divider>
         <TextField
           id="outlined-basic"
-          defaultValue={''}
           label="Frågans titel"
-          onChange={(event) => updateQuestion(true, event)}
+          onChange={(event) => handleChangeQuestion(true, event)}
           variant="outlined"
           fullWidth={true}
+          value={name || ''}
         />
       </ListItem>
       <ListItem>
         <Center>
-          <TextField
-            fullWidth={true}
-            variant="outlined"
-            placeholder="Antal poäng"
-            helperText="Välj hur många poäng frågan ska ge för rätt svar."
-            label="Poäng"
-            type="number"
-            InputProps={{ inputProps: { min: 0, max: maxScore } }}
-            value={score || 0}
-            onChange={(event) => updateQuestion(false, event)}
-          />
+          <SettingsItemContainer>
+            <TextField
+              fullWidth={true}
+              variant="outlined"
+              placeholder="Antal poäng"
+              helperText="Välj hur många poäng frågan ska ge för rätt svar.   Lämna blank för att inte använda poängfunktionen"
+              label="Poäng"
+              type="number"
+              InputProps={{ inputProps: { min: 0, max: maxScore } }}
+              value={score || ''}
+              onChange={(event) => handleChangeQuestion(false, event)}
+            />
+          </SettingsItemContainer>
         </Center>
       </ListItem>
     </SettingsList>