Revize b88520f8

re #10454: ItemView: switching notes / item view

src/components/item/ItemDetail.tsx

@@ -1 @@
-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"
-import { Note } from "../../types/note"
-
-interface ItemDetailProps {
-    item: Item,
-    notes: Note[]
-}
-
-
-const ItemView = (props: {item: Item}) => {
-    const item = props.item;
-    return (
-        <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/ItemView.tsx

@@ +1 @@
+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"
+import { Note } from "../../types/note"
+
+interface ItemDetailProps {
+    item: Item,
+    notes: Note[]
+}
+
+
+const ItemDetail = (props: { item: Item }) => {
+    const item = props.item;
+    return (
+        <Center>
+            {
+                item && (
+                    <VStack>
+                        <Text>id: {item.id}</Text>
+                        <Text>name: {item.workName}</Text>
+                    </VStack>
+                )
+            }
+        </Center>
+    );
+}
+
+const ItemNotes = (props: { notes: Note[] }) => {
+    const notes = props.notes;
+    return (
+        <Center>
+            {
+                notes && notes.length > 0 ? (
+                    <VStack>
+                        {notes.map((note, index) => (
+                            <Box key={index}>
+                                <Text>{note.username}</Text>
+                                <Text>{note.note}</Text>
+                            </Box>
+                        ))}
+                    </VStack>
+                ) : (
+                    <Text>There are no notes for selected item.</Text>
+                )
+            }
+        </Center>
+    );
+}
+
+
+const ItemView = (props: ItemDetailProps) => {
+
+    // item shown / note shown
+    const [itemShown, setItemShown] = React.useState(true);
+
+    const handleItemClick = () => {
+        setItemShown(true);
+    }
+
+    const handleNotesClick = () => {
+        setItemShown(false);
+    }
+
+
+    return (
+        <>
+            {itemShown ? (
+                <ItemDetail item={props.item} />
+            ) : (
+                <ItemNotes notes={props.notes} />
+            )}
+            <HStack mt={4}>
+                <Button
+                    colorScheme={itemShown ? "blue" : undefined}
+                    onPress={handleItemClick}
+                >
+                    Item
+                </Button>
+                <Button
+                    colorScheme={!itemShown ? "blue" : undefined}
+                    onPress={handleNotesClick}
+                >
+                    Notes
+                </Button>
+            </HStack>
+        </>
+    )
+}
+
+export default ItemView

src/pages/ItemViewPage.tsx

@@ -3 +3 @@
 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"
+import ItemView from "../components/item/ItemView"
+
 
 interface ItemViewProps {
   itemId: string
@@ -65 +65 @@
 
   // item changes
   useEffect(() => {
-    
+
     if (item && item.id) {
       if (selectedConcordance == 0) {
         dispatch(setConcordances(item.concordances));
@@ -81 +81 @@
   return (
     <TabView
       navigationState={{ index: selectedConcordance, routes }}
-      renderScene={() => <ItemDetail item={item} />}
+      renderScene={() => <ItemView item={item} notes={notes} />}
       onIndexChange={handleTabChange}
       initialLayout={{ width: layout.width }}
     />

src/stores/actions/itemThunks.ts

@@ -122 +122 @@
                         notes.push({
                             username: (note as any).created_by,
                             userId: (note as any).created_by_id,
+                            note: (note as any).note,
                             avatarUrl: (note as any).avatar,
                             items: (note as any).items,
                             createdTime: (note as any).created, 

src/types/note.ts

@@ -1 +1 @@
 export interface Note {
     username: string
     userId: string
+    note: string // text
     avatarUrl: string
     items: string[]
     createdTime: Date