Revize 2b71499c

re #10871: ListView refactor

src/components/listView/ListView.tsx

@@ -3 +3 @@
 import { useSelector } from "react-redux"
 import { RootState } from "../../stores/store"
 import ItemPreview from "./ItemPreview"
-import { ItemPreviewType } from "../../types/listViewTypes"
+import { ItemPreviewType, LoadedPagesOfInventories } from "../../types/listViewTypes"
 import { log } from "../../logging/logger"
 import ListViewInventoryGroup from "./ListViewInventoryGroup"
 import { ErrorToast } from "../toast/ErrorToast"
+import { Inventory } from "../../types/searchFormTypes"
 
 type ListViewProps = {
-    navigation: any
+    navigation: any,
+
+    inventories: Inventory[],
+    numOfResults?: number,
+
+    lastError?: string
+
+    data: {[key: string]: ItemPreviewType[]}
+    loadedPages: LoadedPagesOfInventories
+    inventoriesDataLoading: {[key: string]: boolean}
+
+    handleLoadMoreItems: (inventoryName: string, cursor: number) => void; 
 }
 
 const ListView = (props: ListViewProps) => {
 
-    const inventories = useSelector((state: RootState) => state.listView.inventories)
-    const numberOfResults = useSelector((state: RootState) => state.listView.numOfResults)
+    const inventories = props.inventories
+    const numberOfResults = props.numOfResults
 
+    const data = props.data
+    const loadedPages = props.loadedPages
+    const inventoriesDataLoading = props.inventoriesDataLoading
 
     const lastError = useSelector((state: RootState) => state.listView.lastError)
     const toast = useToast();
@@ -44 +59 @@
                         <ListViewInventoryGroup
                             inventoryName={inventory.name}
                             inventoryLabel={inventory.label}
+
                             navigation={props.navigation}
-                        />
+
+                            // items
+                            items={data[inventory.name]}
+                            loading={inventoriesDataLoading[inventory.name]}
+                            loadedPages={loadedPages[inventory.name]} 
+                            
+                            handleLoadMoreItems={props.handleLoadMoreItems } 
+                            />
                     )
                     ) : (
                         <ListViewInventoryGroup
@@ -53 +76 @@
                             inventoryLabel={inventories[0].label}
                             navigation={props.navigation}
                             defaultOpen={true}
-                        />
+
+                            // items
+                            items={data[inventories[0].name]}
+                            loading={inventoriesDataLoading[inventories[0].name]}
+                            loadedPages={loadedPages[inventories[0].name]} 
+                            
+                            handleLoadMoreItems={props.handleLoadMoreItems }                         />
                     )) : (
                     <Text alignSelf={"center"}>No results found</Text>
                 )

src/components/listView/ListViewInventoryGroup.tsx

@@ -11 +11 @@
     inventoryLabel: string
     navigation: any
     defaultOpen?: boolean
+
+    items: ItemPreviewType[]
+    loading: boolean
+    loadedPages: {
+        cursor: number
+        items: number
+        records: number
+    }
+
+    handleLoadMoreItems: (inventoryName: string, cursor: number) => void; 
 }
 
 const ListViewInventoryGroup = (props: ListViewInventoryGroupProps) => {
-    const items = useSelector((state: RootState) => state.listView.data[props.inventoryName])
-    const loading = useSelector((state: RootState) => state.listView.loading)
-    const [isExpanded, setIsExpanded] = useState(props.defaultOpen ? props.defaultOpen : false)
-    const pagination = useSelector((state: RootState) => state.listView.loadedPages[props.inventoryName])
 
-    const dispatch = useDispatch<AppDispatch>()
+    const items = props.items
+    const loading = props.loading
+    const [isExpanded, setIsExpanded] = useState(false)
+    const pagination = props.loadedPages
+
+    const handleLoadMoreItems = props.handleLoadMoreItems
+
+    useEffect(() => {
+        if(props.defaultOpen != undefined){
+            setIsExpanded(props.defaultOpen)
+        }
+    }, [props.defaultOpen])
 
     /**
      * Searches through names by given role, return getty_data.display_name if exists otherwise name.value
@@ -66 +83 @@
     useEffect(() => {
         if (isExpanded) {
             if (!items || items.length == 0) {
-                dispatch(loadItemsByInventory(props.inventoryName))
+                handleLoadMoreItems(props.inventoryName, 0)
             }
         }
     }, [isExpanded])
 
-    useEffect(() => {
-        if (loading) {
-            setIsExpanded(false)
-        }
-    }, [loading])
+    // Po načtení prvních data zůstal inventory results zavřený...  -> zakomentováno
+    // useEffect(() => {
+    //     if (loading) {
+    //         setIsExpanded(false)
+    //     }
+    // }, [loading])
 
     useEffect(() => {
         if (props.defaultOpen) {
             if (!items || items.length == 0) {
-                dispatch(loadItemsByInventory(props.inventoryName))
+                handleLoadMoreItems(props.inventoryName, 0)
             }
         }
     }, [])
@@ -113 +131 @@
             ))}
             {isExpanded && items && pagination && pagination.cursor < pagination.records && (
                 <Button
-                    onPress={() => dispatch(loadItemsByInventory(props.inventoryName))}
+                    onPress={() => {
+                        handleLoadMoreItems(props.inventoryName, pagination.cursor)
+                    }}
                     variant={"Link"}
                     mt={0}
                     size={"sm"}

src/pages/SearchPage.tsx

@@ -17 +17 @@
     fetchSubjects,
     fetchTechniques
 } from "../stores/actions/searchFormThunks"
-import { useDispatch } from "react-redux"
-import { AppDispatch } from "../stores/store"
+import { useDispatch, useSelector } from "react-redux"
+import { AppDispatch, RootState } from "../stores/store"
 import { log } from "../logging/logger"
 import { DrawerScreenProps } from "@react-navigation/drawer"
 import { RootDrawerParamList } from "./Navigation"
+import { loadItemsByInventory } from "../stores/actions/listViewThunks"
 
 
 const SearchPage = ({route, navigation}: DrawerScreenProps<RootDrawerParamList, 'Search'>) => {
     const dispatch = useDispatch<AppDispatch>()
 
+    const inventories = useSelector((state: RootState) => state.listView.inventories)
+    const numberOfResults = useSelector((state: RootState) => state.listView.numOfResults)
+
+    const data = useSelector((state: RootState) => state.listView.data)
+    const dataLoading = useSelector((state: RootState) => state.listView.inventoriesDataLoading)
+    const pagination = useSelector((state: RootState) => state.listView.loadedPages)
+
+
     useEffect(() => {
         log.debug("SearchPage", "useEffect", "fetchEverything")
 
@@ -48 +57 @@
         log.debug("SearchPage", "props", route.params.inventoryId)
     }, [])
 
+    console.log(data)
+
     return (
         <Center m={ 2 } mr={0} mb={6} flex={1}>
 
             <ScrollView flex={1} w={"100%"} >
                 <VStack space={ 1 } mr={ 4 }>
                     <SearchForm inventoryId={route.params.inventoryId}/>
-                    <ListView navigation={navigation}/>
+                    <ListView navigation={navigation} 
+                    
+                    inventories={inventories} 
+                    numOfResults={numberOfResults}
+
+                    data={data} 
+                    loadedPages={pagination} 
+                    inventoriesDataLoading={dataLoading} 
+                    handleLoadMoreItems={(inventoryName: string, cursor: number) => {
+                        dispatch(loadItemsByInventory(inventoryName))
+                    } }/>
                 </VStack>
             </ScrollView>
         </Center>