Random bugs (#157)

components/default-flat-list.tsx

@@ -73,6 +73,13 @@ const ActivityIndicator_ = () => {
 }
 
 const DefaultFlatList = forwardRef(<ItemT,>(props: DefaultFlatListProps<ItemT>, ref) => {
+  // This is a workaround for what I think might be a bug in React Native
+  // where the FlatList stops redrawing list items when the flatlist goes
+  // off-screen.
+  const [, _forceRender] = useState({});
+  const forceRender = () => _forceRender({});
+  const allItemsWereInvisible = useRef<boolean>(false);
+
   const flatList = useRef<any>(null);
   const [datas, setDatas] = useState<{[dataKey: string]: ItemT[]} >({});
   const [isRefreshing, setIsRefreshing] = useState(false);
@@ -332,6 +339,15 @@ const DefaultFlatList = forwardRef(<ItemT,>(props: DefaultFlatListProps<ItemT>,
     fetchNextPage
   ]);
 
+  const onViewableItemsChanged = useCallback((x: any) => {
+    allItemsWereInvisible.current ||= x.viewableItems.length === 0;
+
+    if (x.viewableItems.length > 0 && allItemsWereInvisible.current) {
+      allItemsWereInvisible.current = false;
+      forceRender();
+    }
+  }, []);
+
   if (data === undefined) {
     return (
       <View
@@ -363,6 +379,8 @@ const DefaultFlatList = forwardRef(<ItemT,>(props: DefaultFlatListProps<ItemT>,
         ListHeaderComponent={ListHeaderComponent}
         onContentSizeChange={onContentSizeChange}
         keyExtractor={keyExtractor}
+        onViewableItemsChanged={onViewableItemsChanged}
+        initialNumToRender={1}
       />
     );
   }

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>;

components/prospect-profile-screen.tsx

@@ -698,7 +698,7 @@ const Body = ({
         {!data?.name &&
           <Title>About ...</Title>
         }
-        {data?.name && data?.about && data.about.trim() &&
+        {!!data?.name && !!data?.about && data.about.trim() &&
           <>
             <Title>About {data.name}</Title>
             <DefaultText selectable={true}>

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,