fix: update local state conditionally and remove white background (#45)

* fix: make bg transparent

* fix: update local state conditionally

src/modules/Root.tsx

@@ -54,6 +54,7 @@ const theme = createTheme({
     secondary: pink,
     default: grey['500'],
     background: {
+      default: 'transparent',
       paper: '#fff',
     },
   },

src/modules/context/UserAnswersContext.tsx

@@ -33,12 +33,14 @@ type UserAnswersContextType = {
   submitAnswer: () => void;
   deleteAnswer: (id?: UserAnswerAppData['id']) => void;
   allAnswersAppData?: UserAnswerAppData[];
+  status: 'loading' | 'error' | 'success';
 };
 
 const defaultContextValue: UserAnswersContextType = {
   setAnswer: () => null,
   submitAnswer: () => null,
   deleteAnswer: () => null,
+  status: 'loading',
 };
 
 const UserAnswersContext =
@@ -47,7 +49,7 @@ const UserAnswersContext =
 export const UserAnswersProvider: FC<{
   children: ReactElement | ReactElement[];
 }> = ({ children }) => {
-  const { data, isSuccess } = hooks.useAppData<UserAnswer>({
+  const { data, isSuccess, status } = hooks.useAppData<UserAnswer>({
     type: AppDataType.UserAnswer,
   });
   const [userAnswerAppData, setUserAnswerAppData] =
@@ -150,12 +152,14 @@ export const UserAnswersProvider: FC<{
       submitAnswer,
       allAnswersAppData: isAdmin ? allAnswersAppData : undefined,
       deleteAnswer,
+      status,
     }),
     [
       allAnswersAppData,
       deleteAnswer,
       isAdmin,
       setAnswer,
+      status,
       submitAnswer,
       userAnswerAppData?.data,
     ],

src/modules/question-view/QuestionView.tsx

@@ -49,9 +49,11 @@ const QuestionView = (): JSX.Element => {
     deleteAnswer,
     submitAnswer,
     setAnswer: setSavedAnswer,
+    status,
   } = useUserAnswers();
 
   const [answer, setAnswer] = useState<string>('');
+  const [isInit, setIsInit] = useState<boolean>(false);
 
   const userAuthentified = useMemo(
     () => typeof memberId === 'string' && memberId.length > 0,
@@ -60,8 +62,16 @@ const QuestionView = (): JSX.Element => {
 
   // Update the answer if the stored value change
   useEffect(() => {
-    setAnswer(userAnswer?.answer ?? '');
-  }, [userAnswer]);
+    if (
+      status === 'success' &&
+      answer.length === 0 &&
+      !isInit &&
+      typeof userAnswer !== 'undefined'
+    ) {
+      setAnswer(userAnswer?.answer ?? '');
+      setIsInit(true);
+    }
+  }, [answer.length, isInit, status, userAnswer]);
   const answerStatus = useMemo(() => userAnswer?.status, [userAnswer?.status]);
 
   const showSubmitButton = useMemo(
@@ -162,7 +172,10 @@ const QuestionView = (): JSX.Element => {
               <Button
                 disabled={!userAnswer}
                 variant="outlined"
-                onClick={() => deleteAnswer()}
+                onClick={() => {
+                  setAnswer('');
+                  deleteAnswer();
+                }}
                 startIcon={<ReplayIcon />}
                 data-cy={RESET_BTN_CY}
               >