Revize 394f2d16

catalog slice

re #9545

frontend/src/features/Catalog/CatalogTable.tsx

@@ -13 +13 @@
 import { CatalogItemDto } from '../../swagger/data-contracts'
 import ShowErrorIfPresent from '../Reusables/ShowErrorIfPresent'
 import ContentLoading from '../Reusables/ContentLoading'
-import axiosInstance from '../../api/api'
-
-const apiError =
-    'Error while fetching data from the server, please try again later.'
+import { RootState } from '../redux/store'
+import { useDispatch, useSelector } from 'react-redux'
+import { consumeError, setLoading } from './catalogSlice'
+import { fetchItems } from './catalogThunks'
 
 // Catalog table component
 const CatalogTable = () => {
@@ -28 +28 @@
         rowsPerPage[0]
     )
 
-    const [items, setItems] = useState<CatalogItemDto[]>([])
-    const [areItemsLoading, setAreItemsLoading] = useState(true)
-    const [err, setErr] = useState<string | undefined>(undefined)
+    // Subscribe to the store
+    const items = useSelector((state: RootState) => state.catalog.items)
+    const loading = useSelector((state: RootState) => state.catalog.loading)
+    const apiError = useSelector((state: RootState) => state.catalog.error)
+
+    const [displayError, setDisplayError] = useState<string | undefined>(undefined)
 
     // When changing rows per page set the selected number and reset to the first page
     const onRowsPerPageChange = (
@@ -40 +43 @@
         setPage(0)
     }
 
-    // Use effect hook to fetch rows from the server
+    const dispatch = useDispatch()
+
     useEffect(() => {
-        // Function to fetch items from the API
-        const fetchItems = async () => {
-            try {
-                const { data, status } = await axiosInstance.get(
-                    '/catalog-items'
-                )
-                if (status !== 200) {
-                    setErr(apiError)
-                    return
-                }
+        // Fetch items when the component is mounted
+        // This will automatically search whenever the filter changes
+        dispatch(fetchItems())
 
-                setItems(data)
-                setAreItemsLoading(false)
-            } catch (err: any) {
-                setErr(apiError)
-            }
+        return () => {
+            // Invalidate the state when unmounting so that the old list is not rerendered when the user returns to the page
+            dispatch(setLoading())
+        }
+    }, [dispatch])
+
+    // Use effect to read the error and consume it
+    useEffect(() => {
+        if (apiError) {
+            setDisplayError(apiError)
+            dispatch(consumeError())
         }
+    }, [apiError, dispatch])
 
-        fetchItems()
-    }, [])
 
     // Name of columns in the header
     const columns = [
@@ -107 +109 @@
 
     return (
         <Fragment>
-            <ShowErrorIfPresent err={err} />
-            {areItemsLoading && !err ? <ContentLoading /> : null}
-            {!areItemsLoading && !err ? (
-                <Fragment>
+            <ShowErrorIfPresent err={displayError} />
+            {loading && !displayError ? <ContentLoading /> : null}
+            {!loading && !displayError ? (
+                 <Fragment>
                     <TableContainer>
                         <Table
                             stickyHeader