Use redux-saga to handle REST API requests in the authservice user ad…

…min frontend
steinarb · Jan 2, 2021 · 57455b0 · 57455b0
1 parent 1c323ea
commit 57455b0
Show file tree

Hide file tree

Showing 33 changed files with 4,616 additions and 4,008 deletions.
diff --git a/authservice.web.users.frontend/src/main/frontend/package-lock.json b/authservice.web.users.frontend/src/main/frontend/package-lock.json
diff --git a/authservice.web.users.frontend/src/main/frontend/package.json b/authservice.web.users.frontend/src/main/frontend/package.json
@@ -3,13 +3,15 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
+        "@babel/runtime": "^7.12.5",
         "@reduxjs/toolkit": "^1.5.0",
         "axios": "^0.18.1",
         "react": "^16.13.0",
         "react-dom": "^16.13.0",
         "react-redux": "^7.2.2",
         "react-router-dom": "^5.1.2",
         "react-scripts": "^2.1.5",
+        "redux-saga": "^1.1.3",
         "terser": "^3.14.1"
     },
     "scripts": {
@@ -35,6 +37,7 @@
     },
     "devDependencies": {
         "@babel/core": "^7.2.2",
+        "@babel/plugin-transform-runtime": "^7.12.10",
         "@babel/preset-env": "^7.3.1",
         "@babel/preset-react": "^7.0.0",
         "babel-loader": "^8.0.5",

diff --git a/authservice.web.users.frontend/src/main/frontend/src/actiontypes.js b/authservice.web.users.frontend/src/main/frontend/src/actiontypes.js
@@ -1,17 +1,33 @@
 import { createAction } from '@reduxjs/toolkit';
 
+export const USERS_REQUEST = createAction('USERS_REQUEST');
 export const USERS_RECEIVED = createAction('USERS_RECEIVED');
 export const USERS_ERROR = createAction('USERS_ERROR');
 export const USER_UPDATE = createAction('USER_UPDATE');
+export const USER_MODIFY = createAction('USER_MODIFY');
+export const USER_ADD = createAction('USER_ADD');
+export const USER_ADD_ROLES = createAction('USER_ADD_ROLES');
+export const USER_REMOVE_ROLES = createAction('USER_REMOVE_ROLES');
+export const USERROLES_REQUEST = createAction('USERROLES_REQUEST');
 export const USERROLES_RECEIVED = createAction('USERROLES_RECEIVED');
 export const USERROLES_ERROR = createAction('USERROLES_ERROR');
 export const PASSWORDS_UPDATE = createAction('PASSWORDS_UPDATE');
+export const PASSWORDS_MODIFY = createAction('PASSWORDS_MODIFY');
+export const ROLES_REQUEST = createAction('ROLES_REQUEST');
 export const ROLES_RECEIVED = createAction('ROLES_RECEIVED');
 export const ROLES_ERROR = createAction('ROLES_ERROR');
 export const ROLE_UPDATE = createAction('ROLE_UPDATE');
+export const ROLE_MODIFY = createAction('ROLE_MODIFY');
+export const ROLE_ADD = createAction('ROLE_ADD');
+export const ROLE_ADD_PERMISSIONS = createAction('ROLE_ADD_PERMISSIONS');
+export const ROLE_REMOVE_PERMISSIONS = createAction('ROLE_REMOVE_PERMISSIONS');
+export const ROLEPERMISSIONS_REQUEST = createAction('ROLEPERMISSIONS_REQUEST');
 export const ROLEPERMISSIONS_RECEIVED = createAction('ROLEPERMISSIONS_RECEIVED');
 export const ROLEPERMISSIONS_ERROR = createAction('ROLEPERMISSIONS_ERROR');
+export const PERMISSIONS_REQUEST = createAction('PERMISSIONS_REQUEST');
 export const PERMISSIONS_RECEIVED = createAction('PERMISSIONS_RECEIVED');
 export const PERMISSIONS_ERROR = createAction('PERMISSIONS_ERROR');
 export const PERMISSION_UPDATE = createAction('PERMISSION_UPDATE');
+export const PERMISSION_MODIFY = createAction('PERMISSION_MODIFY');
+export const PERMISSION_ADD = createAction('PERMISSION_ADD');
 export const FORMFIELD_UPDATE = createAction('FORMFIELD_UPDATE');
diff --git a/authservice.web.users.frontend/src/main/frontend/src/components/PermissionAdd.js b/authservice.web.users.frontend/src/main/frontend/src/components/PermissionAdd.js
@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import axios from 'axios';
-import { PERMISSIONS_RECEIVED, PERMISSIONS_ERROR, PERMISSION_UPDATE } from '../actiontypes';
+import {
+    PERMISSION_UPDATE,
+    PERMISSION_ADD,
+} from '../actiontypes';
 import { emptyPermission } from '../constants';
 import { Header } from './bootstrap/Header';
 import { Container } from './bootstrap/Container';
@@ -60,13 +62,7 @@ const mapDispatchToProps = dispatch => {
             const permission = { ...originalPermission, ...formValue };
             dispatch(PERMISSION_UPDATE(permission));
         },
-        onAddPermission: (permission) => {
-            axios
-                .post('/authservice/useradmin/api/permission/add', permission)
-                .then(result => dispatch(PERMISSIONS_RECEIVED(result.data)))
-                .catch(error => dispatch(PERMISSIONS_ERROR(error)));
-            dispatch(PERMISSION_UPDATE({ ...emptyPermission }));
-        },
+        onAddPermission: (permission) => dispatch(PERMISSION_ADD(permission)),
     };
 };
 

diff --git a/authservice.web.users.frontend/src/main/frontend/src/components/PermissionModify.js b/authservice.web.users.frontend/src/main/frontend/src/components/PermissionModify.js
@@ -1,7 +1,10 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import axios from 'axios';
-import { PERMISSIONS_RECEIVED, PERMISSIONS_ERROR, PERMISSION_UPDATE } from '../actiontypes';
+import {
+    PERMISSIONS_REQUEST,
+    PERMISSION_UPDATE,
+    PERMISSION_MODIFY,
+} from '../actiontypes';
 import PermissionSelect from './PermissionSelect';
 import { emptyPermission } from '../constants';
 import { Header } from './bootstrap/Header';
@@ -72,12 +75,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        onPermissions: () => {
-            axios
-                .get('/authservice/useradmin/api/permissions')
-                .then(result => dispatch(PERMISSIONS_RECEIVED(result.data)))
-                .catch(error => dispatch(PERMISSIONS_ERROR(error)));
-        },
+        onPermissions: () => dispatch(PERMISSIONS_REQUEST()),
         onPermissionsFieldChange: (selectedValue, permissionsMap) => {
             let permission = permissionsMap.get(selectedValue);
             dispatch(PERMISSION_UPDATE(permission));
@@ -86,13 +84,7 @@ const mapDispatchToProps = dispatch => {
             const permission = { ...originalPermission, ...formValue };
             dispatch(PERMISSION_UPDATE(permission));
         },
-        onSaveUpdatedPermission: (permission) => {
-            axios
-                .post('/authservice/useradmin/api/permission/modify', permission)
-                .then(result => dispatch(PERMISSIONS_RECEIVED(result.data)))
-                .catch(error => dispatch(PERMISSIONS_ERROR(error)));
-            dispatch(PERMISSION_UPDATE({ ...emptyPermission }));
-        },
+        onSaveUpdatedPermission: (permission) => dispatch(PERMISSION_MODIFY(permission)),
     };
 };
 

diff --git a/authservice.web.users.frontend/src/main/frontend/src/components/Permissions.js b/authservice.web.users.frontend/src/main/frontend/src/components/Permissions.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import axios from 'axios';
-import { PERMISSIONS_RECEIVED, PERMISSIONS_ERROR } from '../actiontypes';
+import {
+    PERMISSIONS_REQUEST,
+} from '../actiontypes';
 import { Header } from './bootstrap/Header';
 import { Container } from './bootstrap/Container';
 import { StyledLinkLeft } from './bootstrap/StyledLinkLeft';
@@ -36,12 +37,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        onPermissions: () => {
-            axios
-                .get('/authservice/useradmin/api/permissions')
-                .then(result => dispatch(PERMISSIONS_RECEIVED(result.data)))
-                .catch(error => dispatch(PERMISSIONS_ERROR(error)));
-        },
+        onPermissions: () => dispatch(PERMISSIONS_REQUEST()),
     };
 };
 

diff --git a/authservice.web.users.frontend/src/main/frontend/src/components/RoleAdd.js b/authservice.web.users.frontend/src/main/frontend/src/components/RoleAdd.js
@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import axios from 'axios';
-import { ROLES_RECEIVED, ROLES_ERROR, ROLE_UPDATE } from '../actiontypes';
+import {
+    ROLE_UPDATE,
+    ROLE_ADD,
+} from '../actiontypes';
 import { emptyRole } from '../constants';
 import { Header } from './bootstrap/Header';
 import { Container } from './bootstrap/Container';
@@ -60,13 +62,7 @@ const mapDispatchToProps = dispatch => {
             const role = { ...originalRole, ...formValue };
             dispatch(ROLE_UPDATE(role));
         },
-        onAddRole: (role) => {
-            axios
-                .post('/authservice/useradmin/api/role/add', role)
-                .then(result => dispatch(ROLES_RECEIVED(result.data)))
-                .catch(error => dispatch(ROLES_ERROR(error)));
-            dispatch(ROLE_UPDATE({ ...emptyRole }));
-        },
+        onAddRole: (role) => dispatch(ROLE_ADD(role)),
     };
 };
 

diff --git a/authservice.web.users.frontend/src/main/frontend/src/components/RoleModify.js b/authservice.web.users.frontend/src/main/frontend/src/components/RoleModify.js
@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import axios from 'axios';
-import { ROLES_RECEIVED, ROLES_ERROR, ROLE_UPDATE } from '../actiontypes';
+import {
+    ROLES_REQUEST,
+    ROLE_UPDATE,
+    ROLE_MODIFY,
+} from '../actiontypes';
 import RoleSelect from './RoleSelect';
-import { emptyRole } from '../constants';
 import { Header } from './bootstrap/Header';
 import { Container } from './bootstrap/Container';
 import { StyledLinkLeft } from './bootstrap/StyledLinkLeft';
@@ -72,12 +74,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        onRoles: () => {
-            axios
-                .get('/authservice/useradmin/api/roles')
-                .then(result => dispatch(ROLES_RECEIVED(result.data)))
-                .catch(error => dispatch(ROLES_ERROR(error)));
-        },
+        onRoles: () => dispatch(ROLES_REQUEST()),
         onRolesFieldChange: (selectedValue, rolesMap) => {
             let role = rolesMap.get(selectedValue);
             dispatch(ROLE_UPDATE(role));
@@ -86,13 +83,7 @@ const mapDispatchToProps = dispatch => {
             const role = { ...originalRole, ...formValue };
             dispatch(ROLE_UPDATE(role));
         },
-        onSaveUpdatedRole: (role) => {
-            axios
-                .post('/authservice/useradmin/api/role/modify', role)
-                .then(result => dispatch(ROLES_RECEIVED(result.data)))
-                .catch(error => dispatch(ROLES_ERROR(error)));
-            dispatch(ROLE_UPDATE({ ...emptyRole }));
-        },
+        onSaveUpdatedRole: (role) => dispatch(ROLE_MODIFY(role)),
     };
 };
 

diff --git a/authservice.web.users.frontend/src/main/frontend/src/components/RolePermissions.js b/authservice.web.users.frontend/src/main/frontend/src/components/RolePermissions.js
@@ -1,7 +1,14 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import axios from 'axios';
-import { ROLES_RECEIVED, ROLES_ERROR, ROLE_UPDATE, PERMISSIONS_RECEIVED, PERMISSIONS_ERROR, ROLEPERMISSIONS_RECEIVED, ROLEPERMISSIONS_ERROR, FORMFIELD_UPDATE } from '../actiontypes';
+import {
+    ROLES_REQUEST,
+    ROLE_UPDATE,
+    PERMISSIONS_REQUEST,
+    ROLEPERMISSIONS_REQUEST,
+    ROLE_ADD_PERMISSIONS,
+    ROLE_REMOVE_PERMISSIONS,
+    FORMFIELD_UPDATE,
+} from '../actiontypes';
 import RoleSelect from './RoleSelect';
 import PermissionList from './PermissionList';
 import { Header } from './bootstrap/Header';
@@ -109,24 +116,9 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        onRoles: () => {
-            axios
-                .get('/authservice/useradmin/api/roles')
-                .then(result => dispatch(ROLES_RECEIVED(result.data)))
-                .catch(error => dispatch(ROLES_ERROR(error)));
-        },
-        onPermissions: () => {
-            axios
-                .get('/authservice/useradmin/api/permissions')
-                .then(result => dispatch(PERMISSIONS_RECEIVED(result.data)))
-                .catch(error => dispatch(PERMISSIONS_ERROR(error)));
-        },
-        onRolePermissions: () => {
-            axios
-                .get('/authservice/useradmin/api/roles/permissions')
-                .then(result => dispatch(ROLEPERMISSIONS_RECEIVED(result.data)))
-                .catch(error => dispatch(ROLEPERMISSIONS_ERROR(error)));
-        },
+        onRoles: () => dispatch(ROLES_REQUEST()),
+        onPermissions: () => dispatch(PERMISSIONS_REQUEST()),
+        onRolePermissions: () => dispatch(ROLEPERMISSIONS_REQUEST()),
         onRolesFieldChange: (selectedValue, rolesMap) => {
             let role = rolesMap.get(selectedValue);
             dispatch(ROLE_UPDATE(role));
@@ -136,27 +128,13 @@ const mapDispatchToProps = dispatch => {
             const payload = { permissionsNotOnRoleSelected, permissionsNotOnRoleSelectedNames };
             dispatch(FORMFIELD_UPDATE(payload));
         },
-        onAddPermission: (role, permissionsOnRole, permissionsNotOnRoleSelected) => {
-            const permissions = [ permissionsNotOnRoleSelected ];
-            const rolewithpermissions = { role, permissions };
-            axios
-                .post('/authservice/useradmin/api/role/addpermissions', rolewithpermissions)
-                .then(result => dispatch(ROLEPERMISSIONS_RECEIVED(result.data)))
-                .catch(error => dispatch(ROLEPERMISSIONS_ERROR(error)));
-        },
+        onAddPermission: (role, permissionsOnRole, permissionsNotOnRoleSelected) => dispatch(ROLE_ADD_PERMISSIONS({ role, permissionsNotOnRoleSelected })),
         onPermissionsOnRoleChange: (permissionsOnRoleSelectedNames, permissionMap) => {
             const permissionsOnRoleSelected = permissionMap.get(permissionsOnRoleSelectedNames);
             const payload = { permissionsOnRoleSelected, permissionsOnRoleSelectedNames };
             dispatch(FORMFIELD_UPDATE(payload));
         },
-        onRemovePermission: (role, permissionsOnRoleSelected) => {
-            const permissions = [ permissionsOnRoleSelected ];
-            const rolewithpermissions = { role, permissions };
-            axios
-                .post('/authservice/useradmin/api/role/removepermissions', rolewithpermissions)
-                .then(result => dispatch(ROLEPERMISSIONS_RECEIVED(result.data)))
-                .catch(error => dispatch(ROLEPERMISSIONS_ERROR(error)));
-        },
+        onRemovePermission: (role, permissionsOnRoleSelected) => dispatch(ROLE_REMOVE_PERMISSIONS({ role, permissionsOnRoleSelected })),
     };
 };
 

diff --git a/authservice.web.users.frontend/src/main/frontend/src/components/Roles.js b/authservice.web.users.frontend/src/main/frontend/src/components/Roles.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import axios from 'axios';
-import { ROLES_RECEIVED, ROLES_ERROR } from '../actiontypes';
+import {
+    ROLES_REQUEST,
+} from '../actiontypes';
 import { Header } from './bootstrap/Header';
 import { Container } from './bootstrap/Container';
 import { StyledLinkLeft } from './bootstrap/StyledLinkLeft';
@@ -37,12 +38,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        onRoles: () => {
-            axios
-                .get('/authservice/useradmin/api/roles')
-                .then(result => dispatch(ROLES_RECEIVED(result.data)))
-                .catch(error => dispatch(ROLES_ERROR(error)));
-        },
+        onRoles: () => dispatch(ROLES_REQUEST())
     };
 };
 

diff --git a/authservice.web.users.frontend/src/main/frontend/src/components/UserAdd.js b/authservice.web.users.frontend/src/main/frontend/src/components/UserAdd.js
@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import axios from 'axios';
-import { USERS_RECEIVED, USERS_ERROR, PASSWORDS_UPDATE } from '../actiontypes';
+import {
+    PASSWORDS_UPDATE,
+    USER_ADD,
+} from '../actiontypes';
 import { emptyUserAndPasswords } from '../constants';
 import UserSelect from './UserSelect';
 import { Header } from './bootstrap/Header';
@@ -104,13 +106,7 @@ const mapDispatchToProps = dispatch => {
             const passwordsNotIdentical = checkIfPasswordsAreNotIdentical(passwords);
             dispatch(PASSWORDS_UPDATE({ ...passwords, passwordsNotIdentical }));
         },
-        onAddUser: (passwords) => {
-            axios
-                .post('/authservice/useradmin/api/user/add', passwords)
-                .then(result => dispatch(USERS_RECEIVED(result.data)))
-                .catch(error => dispatch(USERS_ERROR(error)));
-            dispatch(PASSWORDS_UPDATE({ ...emptyUserAndPasswords }));
-        },
+        onAddUser: (userAndPasswords) => dispatch(USER_ADD(userAndPasswords)),
     };
 };
 

diff --git a/authservice.web.users.frontend/src/main/frontend/src/components/UserChangePasswords.js b/authservice.web.users.frontend/src/main/frontend/src/components/UserChangePasswords.js
@@ -1,7 +1,10 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import axios from 'axios';
-import { USERS_RECEIVED, USERS_ERROR, PASSWORDS_UPDATE } from '../actiontypes';
+import {
+    USERS_REQUEST,
+    PASSWORDS_UPDATE,
+    PASSWORDS_MODIFY,
+} from '../actiontypes';
 import UserSelect from './UserSelect';
 import { emptyUserAndPasswords } from '../constants';
 import { Header } from './bootstrap/Header';
@@ -86,12 +89,7 @@ const checkIfPasswordsAreNotIdentical = (passwords) => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        onUsers: () => {
-            axios
-                .get('/authservice/useradmin/api/users')
-                .then(result => dispatch(USERS_RECEIVED(result.data)))
-                .catch(error => dispatch(USERS_ERROR(error)));
-        },
+        onUsers: () => dispatch(USERS_REQUEST()),
         onUsersFieldChange: (selectedValue, usersMap) => {
             const user = usersMap.get(selectedValue);
             const passwords = { ...emptyUserAndPasswords, user };
@@ -106,13 +104,7 @@ const mapDispatchToProps = dispatch => {
             };
             dispatch(PASSWORDS_UPDATE(changedField));
         },
-        onSaveUpdatedPassword: (user) => {
-            axios
-                .post('/authservice/useradmin/api/passwords/update', user)
-                .then(result => dispatch(USERS_RECEIVED(result.data)))
-                .catch(error => dispatch(USERS_ERROR(error)));
-            dispatch(PASSWORDS_UPDATE(emptyUserAndPasswords));
-        },
+        onSaveUpdatedPassword: (userAndPasswords) => dispatch(PASSWORDS_MODIFY(userAndPasswords)),
     };
 };