fix: fix issues present in short answer app (#23)

close #22

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
-    "@graasp/apps-query-client": "3.2.1",
+    "@graasp/apps-query-client": "3.4.4",
     "@graasp/sdk": "3.3.0",
     "@graasp/ui": "4.1.1",
     "@mui/icons-material": "5.15.10",

src/config/i18n.ts

@@ -21,6 +21,7 @@ declare module 'react-i18next' {
 i18n.use(initReactI18next).init({
   resources,
   lng: 'en',
+  fallbackLng: 'en',
   // debug only when not in production
   debug: import.meta.env.DEV,
   ns: [defaultNS],

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 {
@@ -39,20 +39,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>
   );