Revize 846f4f3c

re #9130 catalog start

frontend/package.json

@@ -6 +6 @@
   "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 +19 @@
     "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",

frontend/requests/login.http

@@ +1 @@
+POST /login
+Host: localhost:8080
+Content-Type: application/json
+
+{
+    "username": "ultrabanger",
+    "email": "[e-mail]",
+    "password": "thereisnone"
+}

frontend/requests/register.http

@@ +1 @@
+POST /register
+Host: localhost:8080
+Content-Type: application/json
+
+
+{
+    "name": "ultrabanger3000",
+    "email": "[e-mail]",
+    "canRead": true,
+    "canWrite": true,
+    "canDelete": true
+}

frontend/src/App.tsx

@@ -1 @@
-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

frontend/src/features/Catalog/CatalogItemDetail.tsx

@@ +1 @@
+
+export default {}

frontend/src/features/Catalog/CatalogService.ts

@@ -1 @@
-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, ) => {

frontend/src/features/Theme/ThemeChanger.tsx

@@ +1 @@
+export default {}

frontend/src/features/Theme/themeReducer.ts

@@ +1 @@
+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

frontend/src/index.tsx

@@ -4 +4 @@
 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')
 )