feat: use text area as input field

src/config/appSettings.ts

@@ -5,3 +5,14 @@ export type QuestionSettingsType = {
 export type AnswerSettings = {
   content: string;
 };
+
+export type RowsSettings = {
+  numRows: number;
+  maxRows: number;
+  minRows: number;
+};
+
+export type CharsSettings = {
+  minChars: number;
+  maxChars: number;
+};

src/langs/en.json

@@ -35,7 +35,8 @@
     },
     "PLAYER": {
       "SAVED_MESSAGE": "Saved",
-      "SAVE_BUTTON": "Save"
+      "SAVE_BUTTON": "Save",
+      "CHARACTERS": "characters"
     }
   }
 }

src/modules/context/SettingsContext.tsx

@@ -1,6 +1,11 @@
 import { FC, ReactElement, createContext, useContext } from 'react';
 
-import { AnswerSettings, QuestionSettingsType } from '@/config/appSettings';
+import {
+  AnswerSettings,
+  CharsSettings,
+  QuestionSettingsType,
+  RowsSettings,
+} from '@/config/appSettings';
 import { hooks, mutations } from '@/config/queryClient';
 
 import Loader from '../common/Loader';
@@ -10,6 +15,8 @@ import Loader from '../common/Loader';
 type AllSettingsType = {
   question: QuestionSettingsType;
   answer: AnswerSettings;
+  rows: RowsSettings;
+  chars: CharsSettings;
 };
 
 // default values for the data property of settings by name
@@ -20,13 +27,26 @@ const defaultSettingsValues: AllSettingsType = {
   answer: {
     content: '',
   },
+  // zero values means the setting is unset
+  rows: {
+    minRows: 0,
+    maxRows: 0,
+    numRows: 0,
+  },
+  // zero values means the setting is unset
+  chars: {
+    minChars: 0,
+    maxChars: 0,
+  },
 };
 
 // list of the settings names
 const ALL_SETTING_NAMES = [
   // name of your settings
   'question',
   'answer',
+  'rows',
+  'chars',
 ] as const;
 
 // automatically generated types

src/modules/main/PlayerView.tsx

@@ -1,7 +1,14 @@
 import { ChangeEvent, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, Grid, TextField, Typography } from '@mui/material';
+import {
+  Box,
+  FormControl,
+  FormHelperText,
+  Grid,
+  OutlinedInput,
+  Typography,
+} from '@mui/material';
 
 import { useLocalContext } from '@graasp/apps-query-client';
 import { AppData, PermissionLevel } from '@graasp/sdk';
@@ -26,6 +33,8 @@ const PlayerView = (): JSX.Element => {
   const {
     question,
     // answer: answerSavedState,
+    rows: { maxRows, minRows, numRows },
+    chars: { maxChars, minChars },
   } = useSettings();
   const { data: appData } = hooks.useAppData();
   const { mutate: postAppData } = mutations.usePostAppData();
@@ -51,8 +60,17 @@ const PlayerView = (): JSX.Element => {
       return true;
     }
     // disable if answer is equal
-    return isEqual(savedAnswer, answer);
-  }, [answer, savedAnswer, permission]);
+    if (isEqual(savedAnswer, answer)) {
+      return true;
+    }
+
+    // disable if minimum length is not achieved
+    if (answer.length < minChars) {
+      return true;
+    }
+
+    return false;
+  }, [answer, savedAnswer, permission, minChars]);
 
   const disabledMessage = useMemo(() => {
     if (permission === PermissionLevel.Read) {
@@ -74,6 +92,10 @@ const PlayerView = (): JSX.Element => {
     });
   };
 
+  // todo: figure out how to handle min/max/num rows
+
+  // todo: figure out how to handle min/max chars
+
   return (
     <div data-cy={PLAYER_VIEW_CY}>
       <Box p={2}>
@@ -86,17 +108,33 @@ const PlayerView = (): JSX.Element => {
           alignItems="center"
           justifyContent="space-around"
         >
-          <Grid item xs={9} sm={10}>
-            <TextField
-              inputProps={{
-                'data-cy': ANSWER_CY,
-              }}
-              fullWidth
-              value={answer}
-              onChange={handleChangeAnswer}
-            />
+          <Grid item xs={12}>
+            <FormControl fullWidth>
+              <OutlinedInput
+                id="input-component"
+                inputProps={{
+                  'data-cy': ANSWER_CY,
+                  maxlength: maxChars || undefined,
+                  minlength: minChars || undefined,
+                }}
+                multiline
+                minRows={minRows}
+                maxRows={maxRows}
+                rows={numRows}
+                value={answer}
+                onChange={handleChangeAnswer}
+              />
+              <FormHelperText
+                id="input-component-helper-text"
+                error={answer.length === maxChars}
+              >
+                {maxChars
+                  ? `${answer.length} / ${maxChars} ${t('CHARACTERS')}`
+                  : ''}
+              </FormHelperText>
+            </FormControl>
           </Grid>
-          <Grid item xs={3} sm={2}>
+          <Grid item xs={12}>
             <SubmitButton disabled={disableSave} handler={handleSubmitAnswer}>
               {disableSave ? disabledMessage : t('SAVE_BUTTON')}
             </SubmitButton>