commit a7a9a204eb61969c269a43816d40be6cf2e6d557
Author: Fantič <58391275+FantaFantic@users.noreply.github.com>
Date:   Wed Apr 26 15:59:20 2023 +0200

    re #10454: ItemView: refactor setIndex

diff --git a/src/components/item/ItemTabBar.tsx b/src/components/item/ItemTabBar.tsx
index c66daad..f7b4c0f 100644
--- a/src/components/item/ItemTabBar.tsx
+++ b/src/components/item/ItemTabBar.tsx
@@ -1,36 +1,36 @@
 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
\ No newline at end of file
+export default ItemTabBar
\ No newline at end of file
diff --git a/src/components/item/ItemView.tsx b/src/components/item/ItemView.tsx
index 5112d3e..fb4ec50 100644
--- a/src/components/item/ItemView.tsx
+++ b/src/components/item/ItemView.tsx
@@ -2,7 +2,7 @@ import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spa
 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,
diff --git a/src/components/loading/loadingBox.tsx b/src/components/loading/loadingBox.tsx
index 541eab2..b417382 100644
--- a/src/components/loading/loadingBox.tsx
+++ b/src/components/loading/loadingBox.tsx
@@ -2,11 +2,11 @@ import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, Heading,
 import React from "react"
 
 
-interface loadingBoxProps {
+interface LoadingBoxProps {
     text: string
 }
 
-const LoadingBox = (props: loadingBoxProps) => {
+const LoadingBox = (props: LoadingBoxProps) => {
     const { text } = props;
 
     return (
diff --git a/src/components/notes/NoteView.tsx b/src/components/notes/NoteView.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/notes/NotesListView.tsx b/src/components/notes/NotesListView.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/ItemViewPage.tsx b/src/pages/ItemViewPage.tsx
index d7cc6e6..4a7ac40 100644
--- a/src/pages/ItemViewPage.tsx
+++ b/src/pages/ItemViewPage.tsx
@@ -7,7 +7,7 @@ import { NavigationState, SceneMap, SceneRendererProps, TabBar, TabView } from "
 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,14 +64,6 @@ const ItemViewPage = (props: ItemViewProps) => {
     }
   }, [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,6 +77,14 @@ const ItemViewPage = (props: ItemViewProps) => {
     }
   }, [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,7 +96,7 @@ const ItemViewPage = (props: ItemViewProps) => {
           },
           concordances: concordances,
           index: index,
-          onIndexChange: setIndex
+          onIndexChange: handleIndexChanged
         })}
 
         navigationState={{ index, routes }}
@@ -104,7 +104,7 @@ const ItemViewPage = (props: ItemViewProps) => {
 
         initialLayout={{ width: layout.width }}
         // prevent default action on index change
-        onIndexChange={setIndex}
+        onIndexChange={handleIndexChanged}
 
       />
   );
