Revize 3a4bf532

re #10454: ItemView: concordance tabs

App.tsx

@@ -10 +10 @@
   return (
     <Provider store={store}>
       <NativeBaseProvider>
-        <VStack space={4} alignItems="center">
           {/* TODO: remove placeholder pro header / nav */}
           <Center w="100%" h="40" bg="primary.100" rounded="md" shadow={3} />
           <ItemViewPage itemId={'PrgA-811'} />
-        </VStack>
       </NativeBaseProvider>
     </Provider>
   )

src/components/item/ItemDetail.tsx

@@ -1 @@
-import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text } from "native-base"
+import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text, Divider } from "native-base"
 import React, { useState } from "react"
+import { Item } from "../../types/item"
 
-const ItemDetail = () => {
+interface ItemDetailProps {
+    item: Item
+}
+
+
+const ItemView = (props: ItemDetailProps) => {
+    const item = props.item;
     return (
-        <Center w="100%">
-            <Box>
-                Item Detail :-)
-            </Box>
+        <Center>
+            {item && (
+                <VStack>
+                    <Text>
+                        id: {item.id}
+                    </Text>
+                    <Text>
+                        name: {item.workName}
+                    </Text>
+                </VStack>
+            )}
+
         </Center>
     )
 }
 
+const ItemDetail = (props: ItemDetailProps) => {
+
+    return (
+        <ItemView item={props.item}></ItemView>
+    )
+}
+
 export default ItemDetail

src/components/item/ItemNotes.tsx

@@ -1 @@
-import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text } from "native-base"
-import React, { useState } from "react"
-
-const ItemNotes = () => {
-    return (
-        <Center w="100%">
-            <Box>
-                Item notes :-)
-            </Box>
-        </Center>
-    )
-}
-
-export default ItemNotes

src/pages/ItemViewPage.tsx

@@ -1 @@
-import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text, StatusBar, Container, Divider, Spacer, Row } from "native-base"
+import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text, StatusBar, Container, Divider, Spacer, Row, View } from "native-base"
 import React, { useState, 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 { Item, ItemViewState } from "../types/item"
 import { login } from "../stores/actions/userThunks"
+import { SceneRendererProps, TabView } from "react-native-tab-view"
+import { useWindowDimensions } from "react-native"
+import ItemDetail from "../components/item/ItemDetail"
 
 interface ItemViewProps {
   itemId: string
@@ -12 +15 @@
 
 const ItemViewPage = (props: ItemViewProps) => {
 
+  const layout = useWindowDimensions();
+
+  const [routes, setRoutes] = React.useState([
+    // initial tab
+    { key: 'loading', title: 'Loading item...' },
+  ]);
+
   const dispatch = useDispatch<AppDispatch>();
 
   const { item, notes, concordances, selectedConcordance } = useSelector((state: RootState) => state.itemViewState)
 
-  const handleGetPreviousConcordance = async () => {
-    if (selectedConcordance - 1 >= 0) {
-      dispatch(setSelectedConcordance(selectedConcordance - 1));
-      dispatch(getItem(concordances[selectedConcordance].id));
-    }
-  };
+  const [index, setIndex] = React.useState(0);
 
-  const handleGetNextConcordance = async () => {
-    if (selectedConcordance + 1 < concordances.length) {
-      dispatch(setSelectedConcordance(selectedConcordance + 1))
-      dispatch(getItem(concordances[selectedConcordance].id));
-    }
-  };
 
   // load main item
   useEffect(() => {
     // TODO remove login from here
     dispatch(login({ username: "Viktorie", password: "Golem123." }));
     dispatch(getItem(props.itemId));
-  }, []);
+  }, [props.itemId]);
+
+  console.log(item.id);
+
 
-  // item changes
+  // concordances changed
   useEffect(() => {
+    if (item && concordances && concordances.length > 0) {
+      let concordanceRoutes = [];
+      concordanceRoutes.push({
+        key: item.id,
+        title: item.id
+      })
 
-    if (selectedConcordance == 0) {
-      dispatch(setConcordances(item.concordances));
+      for (let i = 0; i < concordances.length; i++) {
+        let concordance = concordances[i];
+        concordanceRoutes.push({
+          key: concordance.id,
+          title: concordance.id
+        })
+      }
+      setRoutes(concordanceRoutes);
     }
+  }, [concordances]);
 
-    // set item notes if item is loaded
-    if(item.id){
-      dispatch(getItemNotes(item.id));
-    }
+  // change tab
+  useEffect(() => {
+    dispatch(setSelectedConcordance(index));
+  }, [index]);
 
-  }, [item]);
+  useEffect(() => {
+    if (concordances && concordances.length > 0) {
+      dispatch(getItem(concordances[selectedConcordance].id));
+    }
+  }, [selectedConcordance]);
 
-  console.log(notes);
+    // item changes
+    useEffect(() => {
+      if (selectedConcordance == 0) {
+        dispatch(setConcordances(item.concordances));
+      }
+  
+      // set item notes if item is loaded
+      if (item && item.id) {
+        dispatch(getItemNotes(item.id));
+      }
+  
+    }, [item]);
 
   return (
-    <VStack>
-      <Center>
-        {concordances && concordances.length > 0 && item && ( // concordances && item are loaded
-          <VStack>
-            <Text>
-              Concordances: {concordances.map((concordance) => concordance.id).join(', ')}
-            </Text>
-            <Text>
-              {/* Selected: {concordances[selectedConcordance].id} */}
-              Selected: {concordances[selectedConcordance].id}
-            </Text>
-            <HStack>
-              <Button onPress={handleGetPreviousConcordance} mr={2}>
-                Previous Concordance
-              </Button>
-              <Button onPress={handleGetNextConcordance}>Next Concordance</Button>
-            </HStack>
-            <Text>
-              current item: {item.workName}
-            </Text>
-          </VStack>
-        )}
-
-        <Divider my="2" />
-      </Center>
-    </VStack>
+    <TabView
+      navigationState={{ index, routes }}
+      renderScene={() => <ItemDetail item={item} />}
+      onIndexChange={setIndex}
+      initialLayout={{ width: layout.width }}
+    />
+
+
   );
 }
 
-export default ItemViewPage;
+export default ItemViewPage;

src/stores/actions/itemThunks.ts

@@ -8 +8 @@
     "item/getItem",
     async (itemId: string) => {
         try {
-
-            console.log("¨GET item/getItem/" + itemId);
+            console.log("GET item/getItem/" + itemId);
 
             const response = await getItemRequest(itemId);
-
-
+            
+        
             // data with image
             if (response.status === 200 && response.data.object.length > 1) {
                 return {
@@ -128 +127 @@
                             noteColor: (note as any).note_color,
                         })
                     }
-                    
+
                     return {
                         notes,
                     }