Cache changed answers in frontend

duolicious · Dec 19, 2023 · 20dea5f · 20dea5f
1 parent 131cf2a
commit 20dea5f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git a/components/in-depth-screen.tsx b/components/in-depth-screen.tsx
@@ -26,24 +26,14 @@ import { useFocusEffect } from '@react-navigation/native';
 import { api } from '../api/api';
 import { StatusBarSpacer } from './status-bar-spacer';
 import { FloatingBackButton } from './prospect-profile-screen';
+import { CardState } from './quiz-card';
 
 const sideMargins: StyleProp<ViewStyle> = {
   marginLeft: 10,
   marginRight: 10,
 };
 
-const AnsweredQuizCard_ = (props: {
-  children: any,
-  questionNumber: number
-  topic: string,
-  user1: string,
-  answer1: boolean | null,
-  user2: string,
-  answer2: boolean | null,
-  answer2Publicly: boolean,
-}) => <AnsweredQuizCard {...props}/>;
-
-const AnsweredQuizCardMemo = memo(AnsweredQuizCard_);
+const AnsweredQuizCardMemo = memo(AnsweredQuizCard);
 
 const Subtitle = ({children}) => {
   return (
@@ -232,6 +222,11 @@ const InDepthScreen = (navigationRef) => ({navigation, route}) => {
   const [idx4, setIdx4] = useState(0);
 
   const renderItem = useCallback(({item}) => {
+    const onStateChange = (state: CardState) => {
+      item.item.person_answer = state.answer;
+      item.item.person_public_ = state.public_;
+    };
+
     switch (item.kind) {
       case 'answer':
         return <AnsweredQuizCardMemo
@@ -242,6 +237,7 @@ const InDepthScreen = (navigationRef) => ({navigation, route}) => {
             user2="You"
             answer2={item.item.person_answer}
             answer2Publicly={item.item.person_public_ ?? true}
+            onStateChange={onStateChange}
           >
             {item.item.question}
           </AnsweredQuizCardMemo>;

diff --git a/components/quiz-card.tsx b/components/quiz-card.tsx
@@ -43,6 +43,11 @@ const cardPadding = {
   paddingBottom: 10,
 };
 
+type CardState = {
+  answer: boolean | null,
+  public_: boolean,
+}
+
 const LeftComponent = ({percentage}) => {
   return (
     <View
@@ -537,12 +542,18 @@ const AnsweredQuizCard = ({
   user2,
   answer2,
   answer2Publicly,
+  onStateChange,
+}: {
+  children: any,
+  questionNumber: number
+  topic: string,
+  user1: string,
+  answer1: boolean | null,
+  user2: string,
+  answer2: boolean | null,
+  answer2Publicly: boolean,
+  onStateChange: (state: CardState) => void,
 }) => {
-  type CardState = {
-    answer: boolean | null,
-    public_: boolean,
-  }
-
   const [state, setState] = useState<CardState>({
     answer: answer2,
     public_: answer2Publicly
@@ -576,10 +587,14 @@ const AnsweredQuizCard = ({
         markTraitDataDirty();
       });
 
-      return {
+      const nextState = {
         ...state,
         answer: nextAnswer_,
       };
+
+      onStateChange(nextState);
+
+      return nextState;
     });
   }, [setState]);
 
@@ -905,6 +920,7 @@ const NoMoreCards = () => {
 
 export {
   AnsweredQuizCard,
+  CardState,
   NoMoreCards,
   QuizCard,
   SearchQuizCard,