Revize a7a9a204

re #10454: ItemView: refactor setIndex

src/components/item/ItemTabBar.tsx

@@ -1 +1 @@
 import { HStack, CircleIcon, View, ScrollView, Button } from "native-base";
 import { CertaintyWithColors } from "../../stores/reducers/itemSlice";
 import { Concordance } from "../../types/item";
-import LoadingBox from "../loading/loadingBox";
+import LoadingBox from "../loading/LoadingBox";
 
 // custom render Tab
-const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances : Concordance[], index: number, onIndexChange : any }) => {
+const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: Concordance[], index: number, onIndexChange: any }) => {
 
-    const {concordances, onIndexChange, index} = props 
+    const { concordances, onIndexChange, index } = props
 
     if (concordances && concordances.length > 0)
-      return (
-        <View h="16">
-          <ScrollView horizontal={true} >
-            <HStack>
-              {props.navigationState.routes.map((route, i) => {
-                return (
-                  <Button size="lg" key={i}
-                    variant={index == i ? "subtle" : "outline"}
-                    rightIcon={<CircleIcon size="2" color={CertaintyWithColors[concordances[i].cert].color} />}
-                    onPress={() => onIndexChange(i)}
-                  >
-                    {concordances[i].id}
-                  </Button>
-                );
-              })}
-            </HStack>
-          </ScrollView>
-        </View>
-      )
+        return (
+            <View h="16">
+                <ScrollView horizontal={true} >
+                    <HStack>
+                        {props.navigationState.routes.map((route, i) => {
+                            return (
+                                <Button size="lg" key={i}
+                                    variant={index == i ? "subtle" : "outline"}
+                                    rightIcon={<CircleIcon size="2" color={CertaintyWithColors[concordances[i].cert].color} />}
+                                    onPress={() => onIndexChange(i)}
+                                >
+                                    {concordances[i].id}
+                                </Button>
+                            );
+                        })}
+                    </HStack>
+                </ScrollView>
+            </View>
+        )
     else {
-      return <LoadingBox text={`Loading concordances...`}></LoadingBox>
+        return <LoadingBox text={`Loading concordances...`}></LoadingBox>
     }
-  };
+};
 
-  export default ItemTabBar
+export default ItemTabBar

src/components/item/ItemView.tsx

@@ -2 +2 @@
 import React from "react"
 import { Item } from "../../types/item"
 import { Note } from "../../types/note"
-import LoadingBox from "../loading/loadingBox"
+import LoadingBox from "../loading/LoadingBox"
 
 interface ItemDetailProps {
     item: Item,

src/components/loading/loadingBox.tsx

@@ -2 +2 @@
 import React from "react"
 
 
-interface loadingBoxProps {
+interface LoadingBoxProps {
     text: string
 }
 
-const LoadingBox = (props: loadingBoxProps) => {
+const LoadingBox = (props: LoadingBoxProps) => {
     const { text } = props;
 
     return (

src/pages/ItemViewPage.tsx

@@ -7 +7 @@
 import ItemView from "../components/item/ItemView"
 import { Button, Pressable, View, Text, Icon, CircleIcon, ScrollView, HStack, VStack } from "native-base"
 import { useWindowDimensions } from "react-native"
-import LoadingBox from "../components/loading/loadingBox"
+import LoadingBox from "../components/loading/LoadingBox"
 import { CertaintyWithColors } from "../stores/reducers/itemSlice"
 import ItemTabBar from "../components/item/ItemTabBar"
 
@@ -64 +64 @@
     }
   }, [concordances]);
 
-  // selected concordance changes
-  useEffect(() => {
-    console.log("index changed");
-    if (concordances && concordances.length > 0) {
-      dispatch(getItem(concordances[index].id));
-    }
-  }, [index]);
-
   // item changes
   useEffect(() => {
     if (!itemLoading && item && item.id) {
@@ -85 +77 @@
     }
   }, [item]);
 
+  const handleIndexChanged = (index: number) => {
+    console.log("index changed");
+    setIndex(index);
+    if (concordances && concordances.length > 0) {
+      dispatch(getItem(concordances[index].id));
+    }
+  }
+
   return (
     !concordances || concordances.length < 1 ?
       <LoadingBox text={`Loading item ${props.itemId}...`}></LoadingBox>
@@ -96 +96 @@
           },
           concordances: concordances,
           index: index,
-          onIndexChange: setIndex
+          onIndexChange: handleIndexChanged
         })}
 
         navigationState={{ index, routes }}
@@ -104 +104 @@
 
         initialLayout={{ width: layout.width }}
         // prevent default action on index change
-        onIndexChange={setIndex}
+        onIndexChange={handleIndexChanged}
 
       />
   );