fix: settings title, helper text, and saved data (#75)

* fix(style): fix big header

close #72

* fix: add hint for answer setting

close #74

* fix: show previous data to user

close #73

* fix: add initial answer state

src/langs/en.json

@@ -27,7 +27,8 @@
           "KEY_LABEL": "Key",
           "VALUE_LABEL": "Value",
           "ANSWER_LABEL": "Answer"
-        }
+        },
+        "HELPER_TEXT": "[Optional] If there is one correct answer, then you can include it here and you can automatically see who submitted a correct answer."
       },
       "GENERAL": {
         "TITLE": "General"

src/modules/answers/AnswersView.tsx

@@ -24,7 +24,7 @@ const AnswersView: FC = () => {
 
   return (
     <Stack spacing={2}>
-      <Typography variant="h1">{t('TITLE')}</Typography>
+      <Typography variant="h3">{t('TITLE')}</Typography>
       <TableContainer component={Paper}>
         <Table sx={{ minWidth: 650 }} aria-label="answers table">
           <TableHead>

src/modules/main/PlayerView.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useMemo, useState } from 'react';
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Grid, TextField, Typography } from '@mui/material';
@@ -30,20 +30,23 @@ const PlayerView = (): JSX.Element => {
   const { data: appData } = hooks.useAppData();
   const { mutate: postAppData } = mutations.usePostAppData();
 
-  // use effect to get required app data
-  let savedAnswer = '';
+  const [answer, setAnswer] = useState<string>('');
+  const [savedAnswer, setSavedAnswer] = useState<string>('');
 
-  if (appData) {
-    // only show the last answer
-    const savedAnswerObject = sortBy(appData, ['createdAt'])
-      .reverse()
-      .find(isAnswer) as AppData<UserAnswer>;
-    if (savedAnswerObject) {
-      savedAnswer = savedAnswerObject.data.answer ?? '';
+  // use effect to get required app data
+  useEffect(() => {
+    if (appData) {
+      // only show the last answer
+      const savedAnswerObject = sortBy(appData, ['createdAt'])
+        .reverse()
+        .find(isAnswer) as AppData<UserAnswer>;
+      if (savedAnswerObject) {
+        const savedAnswerText = savedAnswerObject.data.answer ?? '';
+        setAnswer(savedAnswerText);
+        setSavedAnswer(savedAnswerText);
+      }
     }
-  }
-
-  const [answer, setAnswer] = useState<string>(savedAnswer);
+  }, [appData]);
 
   const disableSave = useMemo(() => {
     // disable if there is no user (logged out or anonymous)

src/modules/settings/AnswersSettings.tsx

@@ -25,6 +25,7 @@ const AnswerSettings: FC<PropTypes> = ({ answer, onChange }) => {
         }}
         value={answerContent}
         onChange={(e) => onChange({ content: e.target.value })}
+        helperText={t('SETTINGS.ANSWER.HELPER_TEXT')}
       />
     </Stack>
   );