Revize 394f2d16

catalog slice

re #9545

frontend/.env

@@ -1 @@
-REACT_APP_API_BASE_URL=/api
+REACT_APP_API_BASE_URL=/api
+REACT_APP_DEV_ENV=true

frontend/src/config/conf.ts

@@ -1 +1 @@
 const conf = {
-    baseUrl: '/api'
+    baseUrl:
+        process.env.REACT_APP_DEV_ENV === 'true'
+            ? 'http://localhost:8080'
+            : '/api',
 }
 
-export default conf;
+export default conf

frontend/src/features/Catalog/Catalog.tsx

@@ -49 +49 @@
                                             id="type"
                                             label="Type"
                                         />
-                                        <TextField
-                                            size="small"
-                                            id="coordinates"
-                                            label="Coordinates"
-                                        />
                                     </Stack>
                                     <Stack direction="row" spacing={2}>
                                         <TextField

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

frontend/src/features/Catalog/catalogSlice.tsx

@@ +1 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { CatalogItemDto } from '../../swagger/data-contracts'
+import { fetchItems } from './catalogThunks'
+
+export interface CatalogFilter {
+    name?: string
+    type?: string
+    country?: string
+}
+
+export interface CatalogState {
+    items: CatalogItemDto[] // list of all fetched items
+    filter: CatalogFilter // filter object
+    loading: boolean // whether the catalog is loading
+    error?: string
+}
+
+const initialState: CatalogState = {
+    items: [],
+    filter: {},
+    loading: true,
+    error: undefined,
+}
+
+const catalogSlice = createSlice({
+    name: 'catalog',
+    initialState,
+    reducers: {
+        setCatalogFilter: (state, action) => ({
+            ...state,
+            catalogFilter: action.payload.catalogFilter,
+        }),
+        clearFilter: (state, action) => ({
+            ...state,
+            loading: true,
+            catalogFilter: {},
+        }),
+        clear: (state) => ({ ...initialState }),
+        setLoading: (state) => ({ ...state, loading: true }),
+        consumeError: (state) => ({ ...state, error: undefined }),
+    },
+    extraReducers: (builder) => {
+        builder.addCase(fetchItems.pending, (state) => ({
+            ...state,
+            loading: true,
+        }))
+        builder.addCase(fetchItems.fulfilled, (state, action) => ({
+            ...state,
+            items: action.payload,
+            loading: false,
+        }))
+        builder.addCase(fetchItems.rejected, (state, action) => ({
+            ...state,
+            loading: false,
+            error: action.payload as string,
+        }))
+    },
+})
+
+export const { setCatalogFilter, clearFilter, clear, setLoading, consumeError } = catalogSlice.actions
+const reducer = catalogSlice.reducer
+export default reducer

frontend/src/features/Catalog/catalogThunks.tsx

@@ +1 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import axiosInstance from '../../api/api'
+import { CatalogFilter, CatalogState } from './catalogSlice'
+
+const apiError = 'Error, server is currently unavailable.'
+
+// Builds query string from the filter object
+const buildQuery = (catalogFilter: CatalogFilter): string => {
+    return Object.entries(catalogFilter).length === 0
+        ? ''
+        : `?${Object.entries(catalogFilter)
+              .map(([key, value]) => `${key}=${value}`)
+              .join('&')}`
+}
+
+// Thunk to fetch catalog items from the API
+export const fetchItems = createAsyncThunk(
+    'catalog/fetchItems',
+    async (dispatch, { getState }) => {
+        try {
+            // To make typescript happy we fool it like this
+            const { catalog } = getState() as { catalog: CatalogState }
+
+            
+            // Send request with the filter
+            const { data, status } = await axiosInstance.get(
+                `/catalog-items${buildQuery(catalog.filter)}`
+            )
+
+            // If the request was successful return the items
+            if (status === 200) {
+                return data
+            }
+
+            return Promise.reject(apiError)
+        } catch (err: any) {
+            return Promise.reject(apiError)
+        }
+    }
+)

frontend/src/features/redux/store.ts

@@ -4 +4 @@
 import thunk from 'redux-thunk'
 import userReducer from '../Auth/userSlice'
 import themeReducer from '../Theme/themeReducer'
+import catalogReducer from '../Catalog/catalogSlice'
 
 
 // Store holds shared state in the application
 const store = createStore(
-    combineReducers({ user: userReducer, theme: themeReducer }),
+    combineReducers({ user: userReducer, theme: themeReducer, catalog: catalogReducer }),
     applyMiddleware(thunk) // Thunk middleware so we can async fetch data from the api
 )
 

frontend/src/swagger/CatalogItems.ts

@@ -25 +25 @@
     this.request<CatalogItemDto, any>({
       path: `/catalog-items/${id}`,
       method: "GET",
-      format: "json",
       ...params,
     });
   /**

frontend/src/swagger/Path.ts

@@ +1 @@
+/* eslint-disable */
+/* tslint:disable */
+/*
+ * ---------------------------------------------------------------
+ * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
+ * ##                                                           ##
+ * ## AUTHOR: acacode                                           ##
+ * ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
+ * ---------------------------------------------------------------
+ */
+
+import { PathDto } from "./data-contracts";
+import { HttpClient, RequestParams } from "./http-client";
+
+export class Path<SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
+  /**
+   * No description
+   *
+   * @tags path-controller
+   * @name GetPath
+   * @request GET:/path
+   */
+  getPath = (query: { pathDto: PathDto }, params: RequestParams = {}) =>
+    this.request<PathDto, any>({
+      path: `/path`,
+      method: "GET",
+      query: query,
+      ...params,
+    });
+}

frontend/src/swagger/data-contracts.ts

@@ -13 +13 @@
   /** @format uuid */
   id?: string;
   name?: string;
-
-  /** @format int32 */
-  certainty?: number;
+  alternativeNames?: string[];
+  writtenForms?: string[];
+  types?: string[];
+  countries?: string[];
+  bibliography?: string[];
 
   /** @format double */
   longitude?: number;
 
   /** @format double */
   latitude?: number;
-  bibliography?: string[];
-  countries?: string[];
-  writtenForms?: string[];
-  alternativeNames?: string[];
-  types?: string[];
+
+  /** @format int32 */
+  certainty?: number;
+  description?: string;
 }
 
 export interface PasswordDto {
@@ -51 +52 @@
   title?: string;
   content?: string;
 }
+
+export interface PathDto {
+  text?: string;
+  foundCatalogItems?: CatalogItemDto[][];
+}

frontend/src/swagger/http-client.ts

@@ -54 +54 @@
 }
 
 export class HttpClient<SecurityDataType = unknown> {
-  public baseUrl: string = "/api";
+  public baseUrl: string = "http://localhost:8080";
   private securityData: SecurityDataType | null = null;
   private securityWorker?: ApiConfig<SecurityDataType>["securityWorker"];
   private abortControllers = new Map<CancelToken, AbortController>();