Revize 97deff21

#re 10343 ItemView: Redux thunks, slice

App.tsx

@@ -1 +1 @@
 
 import { StyleSheet, Text, View } from 'react-native'
-import { NativeBaseProvider, Box } from "native-base"
+import { NativeBaseProvider, Box, Center, VStack } from "native-base"
 import { Provider } from "react-redux"
 import store from "./src/stores/store"
 import ItemViewPage from './src/pages/ItemViewPage'
+import LoginPage from './src/pages/LoginPage'
 
 export default function App() {
   return (
-      <Provider store={store}>
-          <NativeBaseProvider>
-            <ItemViewPage />
-          </NativeBaseProvider>
-      </Provider>
+    <Provider store={store}>
+      <NativeBaseProvider>
+        <VStack space={4} alignItems="center">
+          {/* TODO: remove placeholder pro navbar */}
+          <Center w="100%" h="40" bg="indigo.300" rounded="md" shadow={3} />
+          <ItemViewPage itemId={'PrgA-811'} />
+        </VStack>
+      </NativeBaseProvider>
+    </Provider>
   )
 }
 

src/api/itemservice.ts

@@ -1 +1 @@
 import { axiosInstance } from "./api"
+
+
+export const getItemRequest = async (itemId : string) => {
+    return await axiosInstance.get(
+        `/api/item/${itemId}`
+    )
+}
+
+// export const getItemConcordancesRequest = async (itemId : string) => {
+//     return await axiosInstance.get(
+//         `/api/concordances/${itemId}`
+//     )
+// }

src/api/notesservice.ts

@@ +1 @@
+import { axiosInstance } from "./api"
+
+
+export const getItemNotesRequest = async (itemId : string) => {
+    return await axiosInstance.get(
+        `/api/notes/?item_id[]=${itemId}`
+    )
+}

src/components/ItemDetail.tsx

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

src/components/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/components/item/ItemDetail.tsx

@@ +1 @@
+import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text } from "native-base"
+import React, { useState } from "react"
+
+const ItemDetail = () => {
+    return (
+        <Center w="100%">
+            <Box>
+                Item Detail :-)
+            </Box>
+        </Center>
+    )
+}
+
+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 } from "native-base"
+import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text, StatusBar, Container, Divider, Spacer } from "native-base"
 import React, { useState } from "react"
-import { useDispatch } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 import { AppDispatch } from "../stores/store"
-import { useWindowDimensions } from "react-native"
-import { SceneMap, TabView } from "react-native-tab-view"
-import ItemDetail from "../components/ItemDetail"
-import ItemNotes from "../components/ItemNotes"
-  
-const renderScene = SceneMap({
-    first: ItemDetail,
-    second: ItemNotes,
-  });
-
-const ItemViewPage = () => {
-      
-    const layout = useWindowDimensions();
-
-    const [index, setIndex] = React.useState(0);
-    const [routes] = React.useState([
-      { key: 'first', title: 'Detail' },
-      { key: 'second', title: 'Notes' },
-    ]);
-
-
-    return (
-      <TabView
-        navigationState={{ index, routes }}
-        renderScene={renderScene}
-        onIndexChange={setIndex}
-        initialLayout={{ width: layout.width }}
-        tabBarPosition="bottom"
-      />
-    );
+import { getPreviousConcordance, getNextConcordance, getItem } from "../stores/actions/itemThunks"
+import { Item, ItemState } from "../stores/reducers/itemSlice"
+
+interface ItemViewProps {
+  itemId: string
 }
 
-export default ItemViewPage
+const ItemViewPage = (props: ItemViewProps) => {
+
+  const dispatch = useDispatch<AppDispatch>();
+
+  const itemState = useSelector((state: ItemState) => state)
+
+  useEffect(() => {
+    dispatch(getItem(props.itemId));
+  }, []);
+
+  const handleGetPreviousConcordance = async () => {
+    await dispatch(getPreviousConcordance());
+  };
+
+  const handleGetNextConcordance = async () => {
+    await dispatch(getNextConcordance());
+  };
+
+
+
+  return (
+    <VStack>
+      <Center>
+        <Heading
+          size="lg"
+          fontWeight="600"
+          color="coolGray.800"
+          _dark={{ color: "warmGrey.50" }}
+        >
+          {item.authorName}
+        </Heading>
+
+        <Text fontSize="xl" mt="2">
+          {item.caption}
+        </Text>
+
+        <HStack>
+          <Button onPress={handleGetPreviousConcordance} mr={2}>
+            Previous Concordance
+          </Button>
+          <Button onPress={handleGetNextConcordance}>Next Concordance</Button>
+        </HStack>
+        <Divider my="2" />
+      </Center>
+    </VStack>
+  );
+}
+
+export default ItemViewPage
+
+function useEffect(arg0: () => void, arg1: (string | (import("redux-thunk").ThunkDispatch<{ user: import("../stores/reducers/userSlice").UserState; item: import("../stores/reducers/itemSlice").ItemState }, undefined, import("redux").AnyAction> & import("redux").Dispatch<...>))[]) {
+  throw new Error("Function not implemented.")
+}

src/stores/actions/itemThunks.ts

@@ +1 @@
+import { createAsyncThunk } from "@reduxjs/toolkit"
+import { getItemRequest } from "../../api/itemservice"
+import { getItemNotesRequest } from "../../api/notesservice"
+import { ItemState } from "../reducers/itemSlice"
+
+export const getItem = createAsyncThunk(
+    "item/getItem",
+    async (itemId: string) => {
+        try {
+            const response = await getItemRequest(itemId)
+            console.log(response)
+            if (response.status === 200) {
+                return {
+                    authorName: response.data.object[0].getty_data.display_name,
+                    caption: response.data.object[0].caption,
+                    concordances: response.data.concordances
+                }
+            } else {
+                return Promise.reject(response.data ? response.data : "Error")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
+)
+
+export const getNextConcordance = createAsyncThunk(
+    "item/getNextConcordance",
+    async (_, { getState, dispatch }) => {
+        const state = getState() as ItemState;
+
+        const nextIndex = (state.selectedConcordance + 1) % state.concordances.length;
+
+        // Dispatch the getItem action with the next concordance id
+        await dispatch(getItem(state.concordances[nextIndex].id));
+
+        // Return the next concordance index for updating the state in the reducer
+        return nextIndex;
+    }
+);
+
+export const getPreviousConcordance = createAsyncThunk(
+    "item/getPreviousConcordance",
+    async (_, { getState, dispatch }) => {
+        const state = getState() as ItemState;
+        const previousIndex = (state.selectedConcordance - 1 + state.concordances.length) % state.concordances.length;
+        await dispatch(getItem(state.concordances[previousIndex].id));
+        return previousIndex;
+    }
+);
+
+// export const getItemConcordances = createAsyncThunk(
+//     "item/getItemConcordances",
+//     async (itemId : string) => {
+//         try {
+//             const response = await getItemConcordancesRequest(itemId)
+//             console.log(response)
+//             if (response.status === 200) {
+//                 return {
+//                     // TODO set item concordances
+//                 }
+//             } else {
+//                 return Promise.reject(response.data ? response.data : "Error")
+//             }
+//         } catch (err: any) {
+//             return Promise.reject(err.response.data)
+//         }
+//     }
+// )
+
+export const getItemNotes = createAsyncThunk(
+    "item/getItemNotes",
+    async (itemId: string) => {
+        try {
+            const response = await getItemNotesRequest(itemId)
+            console.log(response)
+            if (response.status === 200) {
+                return {
+                    // TODO set item notes
+                }
+            } else {
+                return Promise.reject(response.data ? response.data : "Error")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
+)

src/stores/reducers/itemSlice.ts

@@ +1 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit"
+import { getItem, getItemNotes, getNextConcordance, getPreviousConcordance } from "../actions/itemThunks"
+import { Note } from "./notesSlice"
+
+
+export interface Item {
+    authorName: string
+    caption: string
+
+
+    concordances: Concordance[]
+}
+
+export interface ItemState {
+    item: Item
+    concordances: Concordance[]
+    selectedConcordance: number
+    notes: Note[]
+    lastError?: string
+}
+
+export interface Concordance {
+    id: string
+    certainty: Certainty
+}
+
+enum Certainty {
+    SameAs = "same_as",
+    High = "high",
+    Medium = "medium",
+    Low = "low",
+}
+
+export const CertaintyWithColors: Record<Certainty, { certainty: Certainty; color: string }> = {
+    same_as: { certainty: Certainty.SameAs, color: "#000000" },
+    high: { certainty: Certainty.High, color: "#FF0000" },
+    medium: { certainty: Certainty.Medium, color: "#FFFF00" },
+    low: { certainty: Certainty.Low, color: "#00FF00" },
+};
+
+const initialState: ItemState = {
+    item: {} as Item,
+    selectedConcordance: 0,
+    concordances: [],
+    notes: [],
+    lastError: ""
+}
+
+export const itemSlice = createSlice({
+    name: "item",
+    initialState: initialState,
+    reducers: {
+    },
+    extraReducers: (builder) => {
+        // getItem
+        builder.addCase(getItem.fulfilled, (state, action) => {
+
+            // set concordances from item, if selected concordance is 0
+            if (state.selectedConcordance === 0) {
+                state.concordances = action.payload.concordances;
+            }
+
+            state.item = {
+                authorName: action.payload.authorName,
+                caption: action.payload.caption,
+                concordances: action.payload.concordances
+            }
+
+        })
+        builder.addCase(getItem.rejected, (state, action) => {
+            state.lastError = action.error.message
+        })
+
+        // getNextConcordance
+        builder.addCase(getNextConcordance.fulfilled, (state, action) => {
+            state.selectedConcordance = action.payload;
+        });
+
+        builder.addCase(getNextConcordance.rejected, (state, action) => {
+            state.lastError = action.error.message;
+        });
+
+        // getPreviousConcordance
+        builder.addCase(getPreviousConcordance.fulfilled, (state, action) => {
+            state.selectedConcordance = action.payload;
+        });
+
+        builder.addCase(getPreviousConcordance.rejected, (state, action) => {
+            state.lastError = action.error.message;
+        });
+
+    }
+})
+
+export default itemSlice.reducer

src/stores/reducers/notesSlice.ts

@@ +1 @@
+
+export interface Note {
+    username: string
+    userId: string
+    avatarUrl: string
+    items: string[]
+    createdTime: Date 
+    updatedTime: Date
+    noteColor: string
+    lastError?: string
+}

src/stores/store.ts

@@ -1 +1 @@
 import { configureStore } from "@reduxjs/toolkit"
 import userReducer from "./reducers/userSlice"
+import itemReducer from "./reducers/itemSlice"
 
 const store = configureStore({
     reducer: {
         user: userReducer,
+        item: itemReducer
     },
 })