Revize d281786c

re #10454: ItemView: SetConcordance refactor

src/components/item/ItemTabBar.tsx

@@ +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";
+
+// custom render Tab
+const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances : Concordance[], index: number, onIndexChange : any }) => {
+
+    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>
+      )
+    else {
+      return <LoadingBox text={`Loading concordances...`}></LoadingBox>
+    }
+  };
+
+  export default ItemTabBar

src/components/item/ItemView.tsx

@@ -21 +21 @@
                 item && (
                     <ScrollView>
                         <VStack>
-                            <Spacer/>
-                            <Spacer/>
                             <Text>id: {item.id}</Text>
                             <Text>name: {item.workName}</Text>
                             {

src/pages/ItemViewPage.tsx

@@ -1 @@
-import React, { useEffect } from "react"
+import React, { ReactNode, useEffect } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { AppDispatch, RootState } from "../stores/store"
-import { getItem, getItemNotes, setConcordances, setSelectedConcordance } from "../stores/actions/itemThunks"
+import { getItem, getItemNotes, setConcordances } from "../stores/actions/itemThunks"
 import { login } from "../stores/actions/userThunks"
-import { NavigationState, SceneRendererProps, TabBar, TabView } from "react-native-tab-view"
+import { NavigationState, SceneMap, SceneRendererProps, TabBar, TabView } from "react-native-tab-view"
 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 { CertaintyWithColors } from "../stores/reducers/itemSlice"
+import ItemTabBar from "../components/item/ItemTabBar"
 
 
 interface ItemViewProps {
   itemId: string
 }
 
+
 const ItemViewPage = (props: ItemViewProps) => {
 
   const layout = useWindowDimensions();
+
   const [routes, setRoutes] = React.useState([
     // initial tab
     { key: 'loading', title: 'Loading item...' },
   ]);
-  const [loadedScenes, setLoadedScenes] = React.useState({});
 
+  // // TODO vyřešit, aby nebyly freezy při přepínání
+  // const [renderSceneDict, setRenderSceneDict] = React.useState({});
 
+  const [index, setIndex] = React.useState(0);
 
   const dispatch = useDispatch<AppDispatch>();
 
-  const { item, itemLoading, notes, notesLoading, concordances, selectedConcordance } = useSelector((state: RootState) => state.itemViewState)
+  const { item, itemLoading, notes, notesLoading, concordances } = useSelector((state: RootState) => state.itemViewState)
 
   // initial: load main item
   useEffect(() => {
@@ -43 +48 @@
     if (item && concordances && concordances.length > 0) {
       let concordanceRoutes = [];
 
+      // let _renderSceneDict: any = {};
+
       for (let i = 0; i < concordances.length; i++) {
         let concordance = concordances[i];
         concordanceRoutes.push({
           key: concordance.id,
           title: concordance.id
         })
+        // _renderSceneDict[concordance.id] = <LoadingBox text={`Loading item ${concordance.id}...`}></LoadingBox>;
       }
+
       setRoutes(concordanceRoutes);
+      // setRenderSceneDict(_renderSceneDict);
     }
   }, [concordances]);
 
-  const handleTabChange = (index: number) => {
-  
-    dispatch(setSelectedConcordance(index));
-  };
-
   // selected concordance changes
   useEffect(() => {
+    console.log("index changed");
     if (concordances && concordances.length > 0) {
-      dispatch(getItem(concordances[selectedConcordance].id));
+      dispatch(getItem(concordances[index].id));
     }
-
-  }, [selectedConcordance]);
+  }, [index]);
 
   // item changes
   useEffect(() => {
     if (!itemLoading && item && item.id) {
-      if (selectedConcordance == 0) {
+      if (index == 0) {
         dispatch(setConcordances(item.concordances));
       }
       // set item notes if item is loaded
@@ -80 +85 @@
     }
   }, [item]);
 
-  // custom render Tab
-  const _renderTabBar = (props: { navigationState: { routes: any[] } }) => {
-    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={selectedConcordance == i ? "subtle" : "outline"}
-                    rightIcon={<CircleIcon size="2" color={CertaintyWithColors[concordances[i].cert].color} />}
-                    onPress={() => handleTabChange(i)}
-                  >
-                    {concordances[i].id}
-                  </Button>
-                );
-              })}
-            </HStack>
-
-          </ScrollView>
-        </View>
-      )
-    else {
-      return <LoadingBox text={`Loading concordances...`}></LoadingBox>
-    }
-  };
-
   return (
     !concordances || concordances.length < 1 ?
       <LoadingBox text={`Loading item ${props.itemId}...`}></LoadingBox>
       :
       <TabView
-        renderTabBar={_renderTabBar}
-        navigationState={{ index: selectedConcordance, routes }}
-        renderScene={() => (
-          <ItemView item={item} notes={notes} itemLoading={itemLoading} notesLoading={notesLoading} />
-        )}
-        initialLayout={{ width: layout.width }}
+        renderTabBar={() => ItemTabBar({
+          navigationState: {
+            routes: routes,
+          },
+          concordances: concordances,
+          index: index,
+          onIndexChange: setIndex
+        })}
+
+        navigationState={{ index, routes }}
+        renderScene={() => <ItemView item={item} notes={notes} itemLoading={itemLoading} notesLoading={notesLoading} />}
 
+        initialLayout={{ width: layout.width }}
         // prevent default action on index change
-        onIndexChange={handleTabChange}
+        onIndexChange={setIndex}
 
       />
   );

src/stores/reducers/itemSlice.ts

@@ -13 +13 @@
 
 const initialState: ItemViewState = {
     item: {} as Item,
-    selectedConcordance: 0,
     concordances: [],
     notes: [],
     lastError: "",
@@ -25 +24 @@
     name: "item",
     initialState: initialState,
     reducers: {
-        setSelectedConcordance: (state, action) => {
-            state.selectedConcordance = action.payload.selectedConcordance;
-        },
         setConcordances: (state, action) => {
             state.concordances = action.payload.concordances;
         }

src/types/item.ts

@@ -30 +30 @@
     item: Item
     itemLoading: boolean
     concordances: Concordance[]
-    selectedConcordance: number
     notes: Note[]
     notesLoading: boolean
     lastError?: string