commit 846f4f3cbc49846193fa4c44b869b3d177c1f8e8
Author: Vaclav Honzik <vaclavhonzik98@gmail.com>
Date:   Fri Mar 25 21:16:58 2022 +0100

    re #9130 catalog start

diff --git a/frontend/package.json b/frontend/package.json
index 15a0eeb..dfa5070 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.5.1",
+    "@mui/material": "^5.5.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -19,8 +19,10 @@
     "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
+    "redux": "^4.1.2",
     "swagger-typescript-api": "^9.3.1",
     "ts-node": "^10.7.0",
     "typescript": "^4.4.2",
diff --git a/frontend/requests/login.http b/frontend/requests/login.http
new file mode 100644
index 0000000..69bb9f9
--- /dev/null
+++ b/frontend/requests/login.http
@@ -0,0 +1,9 @@
+POST /login
+Host: localhost:8080
+Content-Type: application/json
+
+{
+    "username": "ultrabanger",
+    "email": "ultra@banger.com",
+    "password": "thereisnone"
+}
\ No newline at end of file
diff --git a/frontend/requests/register.http b/frontend/requests/register.http
new file mode 100644
index 0000000..ba4fa8f
--- /dev/null
+++ b/frontend/requests/register.http
@@ -0,0 +1,12 @@
+POST /register
+Host: localhost:8080
+Content-Type: application/json
+
+
+{
+    "name": "ultrabanger3000",
+    "email": "ultra@banger.com",
+    "canRead": true,
+    "canWrite": true,
+    "canDelete": true
+}
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5b23327..8a3942f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,22 +1,33 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
 import './App.css'
 import { Routes, Route, Link } from 'react-router-dom'
 import Home from './features/Home/Home'
 import Catalog from './features/Catalog/Catalog'
 import NotFound from './features/NotFound/NotFound'
+import { Paper, Theme } from '@mui/material'
+import { ThemeProvider } from '@emotion/react'
+import { useSelector } from 'react-redux'
+import { RootState } from './features/redux/store'
+import { createTheme } from '@mui/material/styles'
 
-const App = () => (
-    <div className="App">
-        <nav>
-            <Link to="/">Home</Link>
-            <Link to="/catalog">Catalog</Link>
-        </nav>
-        <Routes>
-            <Route path="/" element={ <Home /> } />
-            <Route path="/catalog" element={ <Catalog /> } />
-            <Route path="*" element={ <NotFound /> } />
-        </Routes>
-    </div>
-)
+const App = () => {
+    const theme: Theme = useSelector((state: RootState) => state.theme.theme)
+
+    return (
+        <ThemeProvider theme={theme}>
+            <Paper style={{ minHeight: '100vh', borderRadius: 0 }}>
+                <nav>
+                    <Link to="/">Home</Link>
+                    <Link to="/catalog">Catalog</Link>
+                </nav>
+                <Routes>
+                    <Route path="/" element={<Home />} />
+                    <Route path="/catalog" element={<Catalog />} />
+                    <Route path="*" element={<NotFound />} />
+                </Routes>
+            </Paper>
+        </ThemeProvider>
+    )
+}
 
 export default App
diff --git a/frontend/src/features/Catalog/CatalogItemDetail.tsx b/frontend/src/features/Catalog/CatalogItemDetail.tsx
index e69de29..4833a02 100644
--- a/frontend/src/features/Catalog/CatalogItemDetail.tsx
+++ b/frontend/src/features/Catalog/CatalogItemDetail.tsx
@@ -0,0 +1,2 @@
+
+export default {}
\ No newline at end of file
diff --git a/frontend/src/features/Catalog/CatalogService.ts b/frontend/src/features/Catalog/CatalogService.ts
index d5ecc33..18e9e2d 100644
--- a/frontend/src/features/Catalog/CatalogService.ts
+++ b/frontend/src/features/Catalog/CatalogService.ts
@@ -1,4 +1,4 @@
-import axios from "../../api/axios"
+import axios from "../../api/axiosInstance"
 import { CatalogDto } from "../../swagger/data-contracts"
 
 export const getCatalogItems = async (componentMounted: boolean, setCatalog: (catalogItems: CatalogDto[]) => void, ) => {
diff --git a/frontend/src/features/Theme/ThemeChanger.tsx b/frontend/src/features/Theme/ThemeChanger.tsx
new file mode 100644
index 0000000..56004c9
--- /dev/null
+++ b/frontend/src/features/Theme/ThemeChanger.tsx
@@ -0,0 +1 @@
+export default {}
\ No newline at end of file
diff --git a/frontend/src/features/Theme/themeReducer.ts b/frontend/src/features/Theme/themeReducer.ts
new file mode 100644
index 0000000..8586ddd
--- /dev/null
+++ b/frontend/src/features/Theme/themeReducer.ts
@@ -0,0 +1,39 @@
+import { createTheme, Theme } from '@mui/material/styles'
+import { AnyAction } from 'redux'
+import { persist } from '../../utils/statePersistence'
+
+export interface ThemeState {
+    theme: Theme
+    themeType: 'Light' | 'Dark'
+}
+
+const statePersistName = 'theme'
+
+const initialTheme = createTheme({
+    palette: {
+        mode: 'light'
+    }
+})
+const initialState: ThemeState = {
+    theme: initialTheme,
+    themeType: 'Light',
+}
+
+export enum ThemeStateActions {
+    TOGGLE_THEME = 'TOGGLE_THEME',
+    SET_LIGHT_MODE = 'SET_LIGHT_MODE',
+    SET_DARK_MODE = 'SET_DARK_MODE',
+}
+
+const themeReducer = (state: ThemeState = initialState, action: AnyAction) => {
+    // TODO add all the actions
+    switch (action.type) {
+        case ThemeStateActions.TOGGLE_THEME:
+            return persist(statePersistName, state)
+
+        default:
+            return state
+    }
+}
+
+export default themeReducer
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 08810d7..498b837 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -4,13 +4,21 @@ import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 import { BrowserRouter } from 'react-router-dom'
+import store from './features/redux/store'
+import { Provider } from 'react-redux'
+import { injectStore } from './api/axiosInstance'
+
+// Injects store to the axios instance in ./api/axiosInstance
+injectStore(store)
 
 ReactDOM.render(
-    <React.StrictMode>
-        <BrowserRouter>
-            <App />
-        </BrowserRouter>
-    </React.StrictMode>,
+    <Provider store={store}>
+        <React.StrictMode>
+            <BrowserRouter>
+                <App />
+            </BrowserRouter>
+        </React.StrictMode>
+    </Provider>,
     document.getElementById('root')
 )
 
