commit 1c710f4f6090fd1cd1c85c6b8990f90c971f865d
Author: Vaclav Honzik <vaclavhonzik98@gmail.com>
Date:   Thu Apr 21 21:49:16 2022 +0200

    filter functional
    
    re #9545

diff --git a/frontend/package.json b/frontend/package.json
index 9851cc8..35adf2e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -63,6 +63,7 @@
     "@types/react-dom": "^17.0.9",
     "@types/react-redux": "^7.1.23",
     "@types/redux-persist": "^4.3.1",
-    "@types/yup": "^0.29.13"
+    "@types/yup": "^0.29.13",
+    "redux-devtools-extension": "^2.13.9"
   }
 }
diff --git a/frontend/src/features/Catalog/Catalog.tsx b/frontend/src/features/Catalog/Catalog.tsx
index c3b9e5a..44f1d03 100644
--- a/frontend/src/features/Catalog/Catalog.tsx
+++ b/frontend/src/features/Catalog/Catalog.tsx
@@ -1,22 +1,14 @@
 import {
-    Box,
-    Button,
-    Collapse,
     Container,
-    Grid,
     Paper,
-    Stack,
-    TextField,
     Typography,
 } from '@mui/material'
 import CatalogTable from './CatalogTable'
-import { Fragment, useState } from 'react'
+import { Fragment } from 'react'
+import CatalogFilter from './CatalogFilter'
 
 const Catalog = () => {
-    const [filterOpen, setFilterOpen] = useState(false)
-    const toggleFilter = () => {
-        setFilterOpen(!filterOpen)
-    }
+    
 
     return (
         <Fragment>
@@ -27,63 +19,8 @@ const Catalog = () => {
             >
                 <Container sx={{ mt: 4 }}>
                     <Typography variant="h3" sx={{mb: 2}} fontWeight="bold" >Catalog</Typography>
-                    <Button variant="outlined" color="primary" onClick={toggleFilter}>
-                        Filter
-                    </Button>
-                    <Collapse in={filterOpen} timeout="auto" unmountOnExit>
-                        <Grid container spacing={1} alignItems="stretch">
-                            <Grid item xs={6}>
-                                <Stack
-                                    direction="column"
-                                    spacing={1}
-                                    sx={{ mt: 2 }}
-                                >
-                                    <Stack direction="row" spacing={2}>
-                                        <TextField
-                                            size="small"
-                                            id="name"
-                                            label="Name"
-                                        />
-                                        <TextField
-                                            size="small"
-                                            id="type"
-                                            label="Type"
-                                        />
-                                    </Stack>
-                                    <Stack direction="row" spacing={2}>
-                                        <TextField
-                                            size="small"
-                                            id="writtenForm"
-                                            label="Written form"
-                                        />
-                                        <TextField
-                                            size="small"
-                                            id="stateOrTerritory"
-                                            label="State or territory"
-                                        />
-                                        <TextField
-                                            size="small"
-                                            id="groupBy"
-                                            label="Group by"
-                                        />
-                                    </Stack>
-                                </Stack>
-                            </Grid>
-                            <Grid item xs sx={{ mt: 'auto', ml: 1, mb: 1 }}>
-                                <Stack
-                                    direction="row"
-                                    justifyContent="flex-start"
-                                    alignItems="flex-end"
-                                >
-                                    <Button variant="outlined">Search</Button>
-                                </Stack>
-                            </Grid>
-                        </Grid>
-                    </Collapse>
-
-                    <Box sx={{ mt: 4 }}>
+                        <CatalogFilter />
                         <CatalogTable />
-                    </Box>
                 </Container>
             </Paper>
         </Fragment>
diff --git a/frontend/src/features/Catalog/CatalogFilter.tsx b/frontend/src/features/Catalog/CatalogFilter.tsx
new file mode 100644
index 0000000..bbbacc3
--- /dev/null
+++ b/frontend/src/features/Catalog/CatalogFilter.tsx
@@ -0,0 +1,89 @@
+import { Button, Collapse, Grid, Stack, TextField } from '@mui/material'
+import { Fragment, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { setFilter, CatalogFilter as Filter } from './catalogSlice'
+import { fetchItems } from './catalogThunks'
+
+const CatalogFilter = () => {
+    const dispatch = useDispatch()
+
+    const [filterOpen, setFilterOpen] = useState(false)
+    const toggleFilter = () => {
+        setFilterOpen(!filterOpen)
+    }
+
+    // current filter object
+    const filter: Filter = {}
+    const applyFilter = () => {
+        dispatch(fetchItems())
+    }
+
+
+    return (
+        <Fragment>
+            <Button variant="outlined" color="primary" onClick={toggleFilter}>
+                Filter
+            </Button>
+            <Collapse in={filterOpen} timeout="auto" unmountOnExit>
+                <Grid container spacing={1} alignItems="stretch">
+                    <Grid item xs={6}>
+                        <Stack direction="column" spacing={1} sx={{ mt: 2 }}>
+                            <Stack direction="row" spacing={2}>
+                                <TextField
+                                    size="small"
+                                    id="name"
+                                    label="Name"
+                                    onChange={(e: any) => { 
+                                        filter.name = e.target.value 
+                                        dispatch(setFilter(filter))
+                                    }}
+                                />
+                                <TextField
+                                    size="small"
+                                    id="type"
+                                    label="Type"
+                                    onChange={(e: any) => {
+                                        filter.type = e.target.value
+                                        dispatch(setFilter(filter))
+                                     }}
+                                />
+                            </Stack>
+                            <Stack direction="row" spacing={2}>
+                                <TextField
+                                    size="small"
+                                    id="writtenForm"
+                                    label="Written form"
+                                />
+                                <TextField
+                                    size="small"
+                                    id="stateOrTerritory"
+                                    label="State or territory"
+                                    onChange={(e: any) => { 
+                                        filter.country = e.target.value 
+                                        dispatch(setFilter(filter))
+                                    }}
+                                />
+                                <TextField
+                                    size="small"
+                                    id="groupBy"
+                                    label="Group by"
+                                />
+                            </Stack>
+                        </Stack>
+                    </Grid>
+                    <Grid item xs sx={{ mt: 'auto', ml: 1, mb: 1 }}>
+                        <Stack
+                            direction="row"
+                            justifyContent="flex-start"
+                            alignItems="flex-end"
+                        >
+                            <Button variant="outlined" onClick={applyFilter}>Search</Button>
+                        </Stack>
+                    </Grid>
+                </Grid>
+            </Collapse>
+        </Fragment>
+    )
+}
+
+export default CatalogFilter
diff --git a/frontend/src/features/Catalog/catalogSlice.tsx b/frontend/src/features/Catalog/catalogSlice.tsx
index 7a0159c..cf4248e 100644
--- a/frontend/src/features/Catalog/catalogSlice.tsx
+++ b/frontend/src/features/Catalog/catalogSlice.tsx
@@ -26,14 +26,14 @@ const catalogSlice = createSlice({
     name: 'catalog',
     initialState,
     reducers: {
-        setCatalogFilter: (state, action) => ({
+        setFilter: (state, action) => ({
             ...state,
-            catalogFilter: action.payload.catalogFilter,
+            filter: {...action.payload},
         }),
         clearFilter: (state, action) => ({
             ...state,
             loading: true,
-            catalogFilter: {},
+            filter: {},
         }),
         clear: (state) => ({ ...initialState }),
         setLoading: (state) => ({ ...state, loading: true }),
@@ -57,6 +57,6 @@ const catalogSlice = createSlice({
     },
 })
 
-export const { setCatalogFilter, clearFilter, clear, setLoading, consumeError } = catalogSlice.actions
+export const { setFilter, clearFilter, clear, setLoading, consumeError } = catalogSlice.actions
 const reducer = catalogSlice.reducer
 export default reducer
diff --git a/frontend/src/features/redux/store.ts b/frontend/src/features/redux/store.ts
index c759e31..b3addad 100644
--- a/frontend/src/features/redux/store.ts
+++ b/frontend/src/features/redux/store.ts
@@ -1,16 +1,25 @@
-
 import { applyMiddleware, combineReducers, createStore } from 'redux'
 import { persistStore } from 'redux-persist'
 import thunk from 'redux-thunk'
 import userReducer from '../Auth/userSlice'
 import themeReducer from '../Theme/themeReducer'
 import catalogReducer from '../Catalog/catalogSlice'
+import { composeWithDevTools } from 'redux-devtools-extension'
 
+const composeEnhancers = composeWithDevTools({})
 
 // Store holds shared state in the application
 const store = createStore(
-    combineReducers({ user: userReducer, theme: themeReducer, catalog: catalogReducer }),
-    applyMiddleware(thunk) // Thunk middleware so we can async fetch data from the api
+    combineReducers({
+        user: userReducer,
+        theme: themeReducer,
+        catalog: catalogReducer,
+    }),
+    process.env.REACT_APP_DEV_ENV === 'true'
+        ? composeEnhancers(
+              applyMiddleware(thunk) // Thunk middleware so we can async fetch data from the api
+          )
+        : applyMiddleware(thunk)
 )
 
 export default store
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 6d4c989..9d8e362 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -15,11 +15,11 @@ injectStore(store)
 ReactDOM.render(
     <Provider store={store}>
         <PersistGate loading={null} persistor={persistor}>
-            <React.StrictMode>
+            {/* <React.StrictMode> */}
                 <BrowserRouter>
                     <App />
                 </BrowserRouter>
-            </React.StrictMode>
+            {/* </React.StrictMode> */}
         </PersistGate>
     </Provider>,
     document.getElementById('root')
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 42913e2..9a33cf0 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -7759,6 +7759,11 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux-devtools-extension@^2.13.9:
+  version "2.13.9"
+  resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz#6b764e8028b507adcb75a1cae790f71e6be08ae7"
+  integrity sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==
+
 redux-persist@*, redux-persist@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
