Revize fedb75d6

re #10454: ItemView: get itemViewState fix

App.tsx

@@ -13 +13 @@
         <VStack space={4} alignItems="center">
           {/* TODO: remove placeholder pro navbar */}
           <Center w="100%" h="40" bg="indigo.300" rounded="md" shadow={3} />
-          {/* <ItemViewPage itemId={'BxlA-2'} /> */}
-          <ItemViewPage itemId={'BxlA-5'} />
+          <ItemViewPage itemId={'BxlA-2'} />
+          {/* <ItemViewPage itemId={'BxlA-5'} /> */}
         </VStack>
       </NativeBaseProvider>
     </Provider>

src/pages/ItemViewPage.tsx

@@ -1 @@
-import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text, StatusBar, Container, Divider, Spacer } from "native-base"
+import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text, StatusBar, Container, Divider, Spacer, Row } from "native-base"
 import React, { useState, useEffect } from "react"
 import { useDispatch, useSelector } from "react-redux"
-import { AppDispatch } from "../stores/store"
+import { AppDispatch, RootState } from "../stores/store"
 import { getPreviousConcordance, getNextConcordance, getItem } from "../stores/actions/itemThunks"
 import { Item, ItemViewState } from "../types/item"
 import { login } from "../stores/actions/userThunks"
@@ -14 +14 @@
 
   const dispatch = useDispatch<AppDispatch>();
 
-  const itemViewState = useSelector((itemState: ItemViewState) => itemState)
+  const {item, concordances, selectedConcordance} = useSelector((state: RootState) => state.itemViewState)
 
   const handleGetPreviousConcordance = async () => {
     dispatch(getPreviousConcordance());
@@ -24 +24 @@
     dispatch(getNextConcordance());
   };
 
-  useEffect(() => { 
+  useEffect(() => {
+    // TODO remove login from here
     dispatch(login({ username: "Viktorie", password: "Golem123." }));
+
     dispatch(getItem(props.itemId));
   }, []);
 
-  console.log(itemViewState.item)
+  console.log(concordances);
+  console.log(item);
 
   return (
     <VStack>
       <Center>
-        <Heading
-          size="lg"
-          fontWeight="600"
-          color="coolGray.800"
-          _dark={{ color: "warmGrey.50" }}
-        >
-          {itemViewState.item.authorName}
-        </Heading>
-
-        <Text fontSize="xl" mt="2">
-          {itemViewState.item.workName}
-        </Text>
-
-        <HStack>
-          <Button onPress={handleGetPreviousConcordance} mr={2}>
-            Previous Concordance
-          </Button>
-          <Button onPress={handleGetNextConcordance}>Next Concordance</Button>
-        </HStack>
+
+
+
+        <VStack>
+          <Text>
+            Concordances: {concordances.map((concordance) => concordance.id).join(', ')}
+          </Text>
+          <Text>
+            Selected: {concordances[selectedConcordance].id} 
+          </Text>
+          <HStack>
+
+            <Button onPress={handleGetPreviousConcordance} mr={2}>
+              Previous Concordance
+            </Button>
+            <Button onPress={handleGetNextConcordance}>Next Concordance</Button>
+          </HStack>
+        </VStack>
+
         <Divider my="2" />
       </Center>
     </VStack>

src/stores/actions/itemThunks.ts

@@ -16 +16 @@
 
             // data with image
             if (response.status === 200 && response.data.object.length > 1) {
+                
                 return {
                     id: itemId,
                     fullView: true,

src/stores/reducers/itemSlice.ts

@@ -25 +25 @@
     },
     extraReducers: (builder) => {
         // getItem
-        builder.addCase(getItem.fulfilled, (state, action) => { 
+        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;
+        
+            if (action.payload.fullView) {
+                state.item.institution = action.payload.institution;
+                state.item.authorName = action.payload.authorName;
+                state.item.imageUrl = action.payload.imageUrl;
+                state.item.title = action.payload.title;
+                state.item.repository = action.payload.repository;
+                state.item.provenance = action.payload.provenance;
+                state.item.description = action.payload.description;
+            }
+            else{
+                state.item.institution = undefined;
+                state.item.authorName = undefined;
+                state.item.imageUrl = undefined;
+                state.item.title = undefined;
+                state.item.repository = undefined;
+                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;
             }
 
-            state.item = {
-                id: action.payload.id,
-                authorDisplayName: action.payload.authorDisplayName,
-                workName: action.payload.workName,
-                concordances: action.payload.concordances,
-                searchSubjects: action.payload.searchSubjects,
-                inventoryItem: action.payload.inventoryItem,
-                fullView: action.payload.fullView,
-            } as Item
-
-            if(action.payload.fullView){
-                state.item = {
-                    ...state.item,
-                    // additional
-                    institution: action.payload.institution,
-                    authorName: action.payload.authorName,
-                    imageUrl: action.payload.imageUrl,
-                    title: action.payload.title,
-                    repository: action.payload.repository,
-                    provenance: action.payload.provenance,
-                    description: action.payload.description
-                }
-            }
         })
         builder.addCase(getItem.rejected, (state, action) => {
             state.lastError = action.error.message

src/stores/store.ts

@@ -5 +5 @@
 const store = configureStore({
     reducer: {
         user: userReducer,
-        item: itemReducer
+        itemViewState: itemReducer
     },
 })