Revize a69da1e3

re #9367 - redux-persist for data persistence

frontend/package.json

@@ -9 +9 @@
     "@faker-js/faker": "^6.0.0",
     "@mui/icons-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",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
     "axios": "^0.26.0",
     "dotenv": "^16.0.0",
     "formik": "^2.2.9",
@@ -25 +18 @@
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "redux": "^4.1.2",
+    "redux-persist": "^6.0.0",
     "swagger-typescript-api": "^9.3.1",
     "ts-node": "^10.7.0",
     "typescript": "^4.4.2",
@@ -54 +48 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-redux": "^7.1.23",
+    "@types/redux-persist": "^4.3.1",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^17.0.20",
+    "@types/react-dom": "^17.0.9"
   }
 }

frontend/src/api/axiosInstance.ts

@@ -16 +16 @@
 axiosInstance.interceptors.request.use(config => {
     config.headers = {
         ...config.headers,
-        Authorization: store.getState().auth.token
+        Authorization: store.getState().user.accessToken ?? ''
     }
 })
 
 axiosInstance.interceptors.response.use(response => response, error => {
 
     if (error?.response?.status === 401) {
-        const refreshToken = store.getState().auth.refreshToken
+        const refreshToken = store.getState().user.refreshToken
         // TODO send the refresh token correctly
         console.log('401 called they want their token refreshed');
     }

frontend/src/features/Auth/authReducer.ts

@@ -1 @@
-import { AnyAction } from 'redux'
-import { persist, load } from '../../utils/statePersistence'
-
-export interface UserInfo {
-    accessToken: string | undefined // to send api requests
-    refreshToken: string | undefined // to refresh the api key
-    username: string // to display the username
-    roles: string[]
-}
-
-export interface AuthState extends UserInfo {
-    isAuthenticated: boolean // if this is false all other values should be ignored
-}
-
-const statePersistName = 'auth'
-
-// Initial state when the user first starts the application
-const initialState: AuthState = (load(statePersistName) as AuthState) || {
-    isAuthenticated: false,
-    username: '',
-    roles: [],
-}
-
-// All possible actions
-export enum AuthStateActions {
-    LOG_IN = 'LOG_IN',
-    LOG_OUT = 'LOG_OUT',
-    UPDATE_ACCESS_TOKEN = 'REFRESH_ACCESS_TOKEN',
-    UPDATE_REFRESH_TOKEN = 'UPDATE_REFRESH_TOKEN',
-    UPDATE_TOKENS = 'UPDATE_TOKENS',
-}
-
-// Actions
-const authReducer = (state: AuthState = initialState, action: AnyAction) => {
-    switch (action.type) {
-        case AuthStateActions.LOG_IN:
-            return persist(statePersistName, {
-                ...action.payload,
-                isAuthenticated: true,
-            })
-
-        case AuthStateActions.LOG_OUT:
-            return persist(statePersistName, initialState)
-
-        case AuthStateActions.UPDATE_ACCESS_TOKEN:
-            return persist(statePersistName, {
-                ...state,
-                accessToken: action.payload,
-            })
-
-        case AuthStateActions.UPDATE_REFRESH_TOKEN:
-            return persist(statePersistName, {
-                ...state,
-                refreshToken: action.payload,
-            })
-
-        case AuthStateActions.UPDATE_TOKENS:
-            return persist(statePersistName, { ...state, ...action.payload })
-
-        default:
-            return state
-    }
-}
-
-export default authReducer

frontend/src/features/Auth/userReducer.ts

@@ +1 @@
+import { AnyAction } from 'redux'
+import persistReducer from 'redux-persist/es/persistReducer'
+import storage from 'redux-persist/lib/storage'
+
+export interface UserState {
+    accessToken?: string
+    refreshToken?: string
+    username: string
+    roles: string[]
+    isLoggedIn: boolean
+}
+
+const initialState: UserState = {
+    roles: [],
+    isLoggedIn: false,
+    username: '',
+}
+
+// All possible actions
+export enum AuthStateActions {
+    LOG_IN = 'LOG_IN',
+    LOG_OUT = 'LOG_OUT',
+    UPDATE_ACCESS_TOKEN = 'REFRESH_ACCESS_TOKEN',
+    UPDATE_REFRESH_TOKEN = 'UPDATE_REFRESH_TOKEN',
+    UPDATE_TOKENS = 'UPDATE_TOKENS',
+}
+
+// Only needed if the state is to be persisted
+const persistConfig = {
+    key: 'auth',
+    storage
+}
+
+const _authReducer = (
+    state: UserState = initialState,
+    action: AnyAction
+): UserState => {
+    switch (action.type) {
+        case AuthStateActions.LOG_IN:
+            return {
+                ...action.payload,
+                isAuthenticated: true,
+            }
+        case AuthStateActions.LOG_OUT:
+            return initialState
+
+        case AuthStateActions.UPDATE_ACCESS_TOKEN:
+            return {
+                ...state,
+                accessToken: action.payload,
+            }
+
+        case AuthStateActions.UPDATE_REFRESH_TOKEN:
+            return {
+                ...state,
+                refreshToken: action.payload,
+            }
+
+        case AuthStateActions.UPDATE_TOKENS:
+            return { ...state, ...action.payload }
+
+        default:
+            return state
+    }
+}
+
+const authReducer = persistReducer(persistConfig, _authReducer)
+
+export default authReducer

frontend/src/features/Catalog/Catalog.tsx

@@ -8 +8 @@
     Stack,
     TextField,
 } from '@mui/material'
-import { CatalogDto } from '../../swagger/data-contracts'
+import { CatalogItemDto } from '../../swagger/data-contracts'
 import CatalogTable from './CatalogTable'
 import { faker } from '@faker-js/faker'
 import { useState } from 'react'
@@ -20 +20 @@
     }
 
     // Creates a generic row for the table
-    const createRow = (): CatalogDto => ({
+    const createRow = (): CatalogItemDto => ({
         name: faker.commerce.product(),
         certainty: faker.random.number({ min: 1, max: 1000 }),
         longitude: faker.address.latitude() as unknown as number,
@@ -31 +31 @@
         countries: [faker.address.country()],
         alternativeNames: [faker.commerce.productName()],
     })
-    const data: CatalogDto[] = Array(33)
+    const data: CatalogItemDto[] = Array(33)
         .fill({})
         .map(() => createRow())
 

frontend/src/features/Catalog/CatalogTable.tsx

@@ -2 +2 @@
 import {
     Box,
     Paper,
-    Stack,
     Table,
     TableBody,
     TableCell,
     TableContainer,
-    TableFooter,
     TableHead,
     TablePagination,
     TableRow,
     Typography,
 } from '@mui/material'
-import TablePaginationActions, {
+import {
     TablePaginationActionsProps,
 } from '@mui/material/TablePagination/TablePaginationActions'
 import { FunctionComponent, useState } from 'react'
@@ -22 +20 @@
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'
 import LastPageIcon from '@mui/icons-material/LastPage'
-import { CatalogDto } from '../../swagger/data-contracts'
+import { CatalogItemDto } from '../../swagger/data-contracts'
 
 // Currently adapted from https://mui.com/components/tables/
 
@@ -129 +127 @@
 ].sort((a, b) => (a.calories < b.calories ? -1 : 1))
 
 export interface CatalogTableProps {
-    data: CatalogDto[]
+    data: CatalogItemDto[]
 }
 
 const CatalogTable: FunctionComponent<CatalogTableProps> = ({ data }) => {

frontend/src/features/redux/store.ts

@@ -1 @@
-// Store that holds the state of the application
 
 import { combineReducers, createStore } from 'redux'
-import authReducer from '../Auth/authReducer'
+import { persistStore } from 'redux-persist'
+import userReducer from '../Auth/userReducer'
 import themeReducer from '../Theme/themeReducer'
 
+// Store holds shared state in the application
 const store = createStore(
-    combineReducers({ auth: authReducer, theme: themeReducer }),
+    combineReducers({ user: userReducer, theme: themeReducer }),
     {}
 )
 
 export default store
-
+export const persistor = persistStore(store)
 export type AppStore = typeof store
-
 export type RootState = ReturnType<typeof store.getState>
-
 export type AppDispatch = typeof store.dispatch

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 store, { persistor } from './features/redux/store'
 import { Provider } from 'react-redux'
 import { injectStore } from './api/axiosInstance'
+import { PersistGate } from 'redux-persist/integration/react'
 
 // Injects store to the axios instance in ./api/axiosInstance
 injectStore(store)
 
 ReactDOM.render(
     <Provider store={store}>
-        <React.StrictMode>
-            <BrowserRouter>
-                <App />
-            </BrowserRouter>
-        </React.StrictMode>
+        <PersistGate loading={null} persistor={persistor}>
+            <React.StrictMode>
+                <BrowserRouter>
+                    <App />
+                </BrowserRouter>
+            </React.StrictMode>
+        </PersistGate>
     </Provider>,
     document.getElementById('root')
 )

frontend/src/swagger/Catalog.ts

@@ -9 +9 @@
  * ---------------------------------------------------------------
  */
 
-import { CatalogDto } from "./data-contracts";
+import { CatalogItemDto } from "./data-contracts";
 import { ContentType, HttpClient, RequestParams } from "./http-client";
 
 export class Catalog<SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
@@ -20 +20 @@
    * @name UpdateCatalogEntry
    * @request PUT:/catalog/{id}
    */
-  updateCatalogEntry = (id: string, data: CatalogDto, params: RequestParams = {}) =>
+  updateCatalogEntry = (id: string, data: CatalogItemDto, params: RequestParams = {}) =>
     this.request<void, any>({
       path: `/catalog/${id}`,
       method: "PUT",
@@ -49 +49 @@
    * @request GET:/catalog
    */
   getAllUsers1 = (params: RequestParams = {}) =>
-    this.request<CatalogDto[], any>({
+    this.request<CatalogItemDto[], any>({
       path: `/catalog`,
       method: "GET",
       ...params,
@@ -61 +61 @@
    * @name AddCatalogEntry
    * @request POST:/catalog
    */
-  addCatalogEntry = (data: CatalogDto, params: RequestParams = {}) =>
+  addCatalogEntry = (data: CatalogItemDto, params: RequestParams = {}) =>
     this.request<void, any>({
       path: `/catalog`,
       method: "POST",

frontend/src/swagger/CatalogItems.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 { CatalogItemDto } from "./data-contracts";
+import { ContentType, HttpClient, RequestParams } from "./http-client";
+
+export class CatalogItems<SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
+  /**
+   * No description
+   *
+   * @tags catalog-controller
+   * @name UpdateCatalogItem
+   * @summary updates catalog item with given ID
+   * @request PUT:/catalog-items/{id}
+   */
+  updateCatalogItem = (id: string, data: CatalogItemDto, params: RequestParams = {}) =>
+    this.request<void, any>({
+      path: `/catalog-items/${id}`,
+      method: "PUT",
+      body: data,
+      type: ContentType.Json,
+      ...params,
+    });
+  /**
+   * No description
+   *
+   * @tags catalog-controller
+   * @name DeleteCatalogItem
+   * @summary deletes catalog item with given ID
+   * @request DELETE:/catalog-items/{id}
+   */
+  deleteCatalogItem = (id: string, params: RequestParams = {}) =>
+    this.request<void, any>({
+      path: `/catalog-items/${id}`,
+      method: "DELETE",
+      ...params,
+    });
+  /**
+   * No description
+   *
+   * @tags catalog-controller
+   * @name GetCatalog
+   * @summary returns catalog items based on filter
+   * @request GET:/catalog-items
+   */
+  getCatalog = (query?: { name?: string; country?: string; type?: string }, params: RequestParams = {}) =>
+    this.request<CatalogItemDto[], any>({
+      path: `/catalog-items`,
+      method: "GET",
+      query: query,
+      ...params,
+    });
+  /**
+   * No description
+   *
+   * @tags catalog-controller
+   * @name AddCatalogItem
+   * @summary creates new catalog item
+   * @request POST:/catalog-items
+   */
+  addCatalogItem = (data: CatalogItemDto, params: RequestParams = {}) =>
+    this.request<void, any>({
+      path: `/catalog-items`,
+      method: "POST",
+      body: data,
+      type: ContentType.Json,
+      ...params,
+    });
+}

frontend/src/swagger/Users.ts

@@ -9 +9 @@
  * ---------------------------------------------------------------
  */
 
-import { UserDto } from "./data-contracts";
-import { HttpClient, RequestParams } from "./http-client";
+import { PasswordDto, PermissionDto, UserDto } from "./data-contracts";
+import { ContentType, HttpClient, RequestParams } from "./http-client";
 
 export class Users<SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
   /**
@@ -18 +18 @@
    *
    * @tags user-controller
    * @name GetAllUsers
+   * @summary returns all users
    * @request GET:/users
    */
   getAllUsers = (params: RequestParams = {}) =>
@@ -26 +27 @@
       method: "GET",
       ...params,
     });
+  /**
+   * No description
+   *
+   * @tags user-controller
+   * @name RegisterNewUser
+   * @summary registers new user
+   * @request POST:/users
+   */
+  registerNewUser = (data: UserDto, params: RequestParams = {}) =>
+    this.request<void, any>({
+      path: `/users`,
+      method: "POST",
+      body: data,
+      type: ContentType.Json,
+      ...params,
+    });
+  /**
+   * No description
+   *
+   * @tags user-controller
+   * @name UpdatePermissions
+   * @summary changes permissions to given user
+   * @request PATCH:/users/{username}/permissions
+   */
+  updatePermissions = (username: string, data: PermissionDto, params: RequestParams = {}) =>
+    this.request<void, any>({
+      path: `/users/${username}/permissions`,
+      method: "PATCH",
+      body: data,
+      type: ContentType.Json,
+      ...params,
+    });
+  /**
+   * No description
+   *
+   * @tags user-controller
+   * @name ResetPassword
+   * @summary changes password to given user
+   * @request PATCH:/users/{username}/password
+   */
+  resetPassword = (username: string, data: PasswordDto, params: RequestParams = {}) =>
+    this.request<void, any>({
+      path: `/users/${username}/password`,
+      method: "PATCH",
+      body: data,
+      type: ContentType.Json,
+      ...params,
+    });
+  /**
+   * No description
+   *
+   * @tags user-controller
+   * @name ChangePassword
+   * @summary changes password to logged-in user
+   * @request PATCH:/users/password
+   */
+  changePassword = (query: { oldPassword: string }, data: PasswordDto, params: RequestParams = {}) =>
+    this.request<void, any>({
+      path: `/users/password`,
+      method: "PATCH",
+      query: query,
+      body: data,
+      type: ContentType.Json,
+      ...params,
+    });
+  /**
+   * No description
+   *
+   * @tags user-controller
+   * @name RefreshToken
+   * @summary returns a new access token and a refresh token to user
+   * @request GET:/users/token
+   */
+  refreshToken = (params: RequestParams = {}) =>
+    this.request<void, any>({
+      path: `/users/token`,
+      method: "GET",
+      ...params,
+    });
+  /**
+   * No description
+   *
+   * @tags user-controller
+   * @name DeleteUser
+   * @summary deletes user with given username
+   * @request DELETE:/users/{username}
+   */
+  deleteUser = (username: string, params: RequestParams = {}) =>
+    this.request<void, any>({
+      path: `/users/${username}`,
+      method: "DELETE",
+      ...params,
+    });
 }

frontend/src/swagger/data-contracts.ts

@@ -9 +9 @@
  * ---------------------------------------------------------------
  */
 
-export interface UserDto {
-  name?: string;
-  email: string;
-  canRead?: boolean;
-  canWrite?: boolean;
-  canDelete?: boolean;
-}
-
-export interface CatalogDto {
+export interface CatalogItemDto {
   /** @format uuid */
   id?: string;
   name?: string;
@@ -36 +28 @@
   alternativeNames?: string[];
   types?: string[];
 }
+
+export interface PasswordDto {
+  password: string;
+  confirmationPassword: string;
+}
+
+export interface PermissionDto {
+  canRead?: boolean;
+  canWrite?: boolean;
+  canDelete?: boolean;
+}
+
+export interface UserDto {
+  name?: string;
+  email: string;
+  permissions?: PermissionDto;
+  passwords: PasswordDto;
+}
+
+export interface TitlePage {
+  title?: string;
+  content?: string;
+}