Revize c03fd43c

re #10454: ItemView concordances switching

App.tsx

@@ -11 +11 @@
     <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} />
+          {/* TODO: remove placeholder pro header / nav */}
+          <Center w="100%" h="40" bg="primary.100" rounded="md" shadow={3} />
           <ItemViewPage itemId={'BxlA-2'} />
           {/* <ItemViewPage itemId={'BxlA-5'} /> */}
         </VStack>

src/pages/ItemViewPage.tsx

@@ -2 +2 @@
 import React, { useState, useEffect } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { AppDispatch, RootState } from "../stores/store"
-import { getPreviousConcordance, getNextConcordance, getItem } from "../stores/actions/itemThunks"
+import { getItem, setConcordances, setSelectedConcordance } from "../stores/actions/itemThunks"
 import { Item, ItemViewState } from "../types/item"
 import { login } from "../stores/actions/userThunks"
 
@@ -14 +14 @@
 
   const dispatch = useDispatch<AppDispatch>();
 
-  const {item, concordances, selectedConcordance} = useSelector((state: RootState) => state.itemViewState)
+  const { item, concordances, selectedConcordance } = useSelector((state: RootState) => state.itemViewState)
 
   const handleGetPreviousConcordance = async () => {
-    dispatch(getPreviousConcordance());
+    if (selectedConcordance - 1 >= 0) {
+      dispatch(setSelectedConcordance(selectedConcordance - 1));
+      dispatch(getItem(concordances[selectedConcordance].id));
+    }
   };
 
   const handleGetNextConcordance = async () => {
-    dispatch(getNextConcordance());
+    if (selectedConcordance + 1 < concordances.length) {
+      dispatch(setSelectedConcordance(selectedConcordance + 1))
+      dispatch(getItem(concordances[selectedConcordance].id));
+    }
   };
 
+  // initialize with base item (set concordances from it)
   useEffect(() => {
     // TODO remove login from here
     dispatch(login({ username: "Viktorie", password: "Golem123." }));
-
     dispatch(getItem(props.itemId));
+    dispatch(setConcordances(item.concordances));
   }, []);
 
-  console.log(concordances);
-  console.log(item);
 
   return (
     <VStack>
       <Center>
-
-
-
         <VStack>
           <Text>
             Concordances: {concordances.map((concordance) => concordance.id).join(', ')}
           </Text>
           <Text>
-            Selected: {concordances[selectedConcordance].id} 
+            {/* Selected: {concordances[selectedConcordance].id} */}
+            Selected: {selectedConcordance}
           </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" />

src/stores/actions/itemThunks.ts

@@ -1 +1 @@
 import { createAsyncThunk } from "@reduxjs/toolkit"
 import { getItemRequest } from "../../api/itemservice"
 import { getItemNotesRequest } from "../../api/notesservice"
-import { ItemViewState } from "../../types/item";
+import { Concordance, ItemViewState } from "../../types/item";
 
 
 export const getItem = createAsyncThunk(
@@ -16 +16 @@
 
             // data with image
             if (response.status === 200 && response.data.object.length > 1) {
-                
                 return {
                     id: itemId,
                     fullView: true,
@@ -28 +27 @@
 
                     inventoryItem: response.data.text,
                     searchSubjects: response.data.search_subject,
-                
+
                     // additional fields
                     authorName: response.data.object[1].name[0].getty_data.display_name,
 
@@ -36 +35 @@
                     title: response.data.object[1].images[0].text,
 
                     institution: {
-                        name :response.data.object[1].institution,
+                        name: response.data.object[1].institution,
                         inventoryNumber: response.data.object[1].id_number,
                         country: response.data.object[1].country,
                         city: response.data.object[1].city
@@ -67 +66 @@
     }
 )
 
-export const getNextConcordance = createAsyncThunk(
-    "item/getNextConcordance",
-    async (_, { getState, dispatch }) => {
-        const state = getState() as ItemViewState;
-
-        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 ItemViewState;
-        const previousIndex = (state.selectedConcordance - 1 + state.concordances.length) % state.concordances.length;
-        await dispatch(getItem(state.concordances[previousIndex].id));
-        return previousIndex;
-    }
-);
+export const setSelectedConcordance = (selectedConcordance: number) => {
+    return {
+      type: "item/setSelectedConcordance",
+      payload: {
+        selectedConcordance,
+      },
+    };
+  };
+
+  export const setConcordances = (concordances: Concordance[]) => {
+    return {
+      type: "item/setConcordances",
+      payload: {
+        concordances,
+      },
+    };
+  };
 
 // export const getItemConcordances = createAsyncThunk(
 //     "item/getItemConcordances",

src/stores/reducers/itemSlice.ts

@@ -1 +1 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit"
-import { getItem, getItemNotes, getNextConcordance, getPreviousConcordance } from "../actions/itemThunks"
+import { getItem, getItemNotes } from "../actions/itemThunks"
 import { Certainty, ItemViewState, Item } from "../../types/item";
 
 
@@ -22 +22 @@
     name: "item",
     initialState: initialState,
     reducers: {
+        setSelectedConcordance: (state, action) => {
+            state.selectedConcordance = action.payload.selectedConcordance;
+        },
+        setConcordances: (state, action) => {
+            state.concordances = action.payload.concordances;
+        }
     },
     extraReducers: (builder) => {
         // getItem
         builder.addCase(getItem.fulfilled, (state, action) => {
 
-            state.item.id= action.payload.id;
-            state.item.authorDisplayName= action.payload.authorDisplayName;
-            state.item.workName= action.payload.workName;
-            state.item.concordances= action.payload.concordances;
-            state.item.searchSubjects= action.payload.searchSubjects;
-            state.item.inventoryItem= action.payload.inventoryItem;
-            state.item.fullView= action.payload.fullView;
-        
+            state.item.id = action.payload.id;
+            state.item.authorDisplayName = action.payload.authorDisplayName;
+            state.item.workName = action.payload.workName;
+            state.item.concordances = action.payload.concordances;
+            state.item.searchSubjects = action.payload.searchSubjects;
+            state.item.inventoryItem = action.payload.inventoryItem;
+            state.item.fullView = action.payload.fullView;
+
             if (action.payload.fullView) {
                 state.item.institution = action.payload.institution;
                 state.item.authorName = action.payload.authorName;
@@ -44 +50 @@
                 state.item.provenance = action.payload.provenance;
                 state.item.description = action.payload.description;
             }
-            else{
+            else {
                 state.item.institution = undefined;
                 state.item.authorName = undefined;
                 state.item.imageUrl = undefined;
@@ -53 +59 @@
                 state.item.provenance = undefined;
                 state.item.description = undefined;
             }
-        
-            // set concordances from item, if selected concordance is 0
-            if (state.selectedConcordance === 0) {
-                console.log("Tohle se vola!");
-                state.concordances = action.payload.concordances;
-            }
 
+            // // set concordances from item, if selected concordance is 0
+            // if (state.selectedConcordance === 0) {
+            //     state.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;
-        });
-
     }
 })
 

src/types/item.ts

@@ -2 +2 @@
 
 export type  Item = {
     id: string
-    
+
     concordances: Concordance[]
 
     authorDisplayName: string