fix(roles): roles page bugs

src/routes/Roles/components/RoleForm/index.jsx

@@ -89,6 +89,14 @@ function RoleForm() {
 
   const editRate = useCallback(
     (index, changes) => {
+      // a num field is `null` but user trying to increase/decrease it
+      // start with 0
+      for (const key in changes) {
+        if (isNaN(changes[key])) {
+          changes[key] = 0;
+        }
+      }
+      // apply changes
       dispatch(
         setModalRole({
           ...roleState,

src/routes/Roles/index.jsx

@@ -3,7 +3,12 @@ import { useDispatch, useSelector } from "react-redux";
 import debounce from "lodash/debounce";
 import omit from "lodash/omit";
 import withAuthentication from "hoc/withAuthentication";
-import { setFilter, setIsModalOpen, setModalRole } from "store/actions/roles";
+import {
+  setFilter,
+  setIsModalOpen,
+  setModalError,
+  setModalRole,
+} from "store/actions/roles";
 import { createRole, deleteRole, updateRole } from "store/thunks/roles";
 import {
   getRolesIsModalOpen,
@@ -48,6 +53,7 @@ const Roles = () => {
 
   const onCreateClick = useCallback(() => {
     setModalOperationType("CREATE");
+    dispatch(setModalError(null));
     // role template with initial values
     dispatch(
       setModalRole({
@@ -65,6 +71,7 @@ const Roles = () => {
   const onEditClick = useCallback(
     (role) => {
       setModalOperationType("EDIT");
+      dispatch(setModalError(null));
       dispatch(setModalRole(role));
       dispatch(setIsModalOpen(true));
     },
@@ -74,6 +81,7 @@ const Roles = () => {
   const onDeleteClick = useCallback(
     (role) => {
       setModalOperationType("DELETE");
+      dispatch(setModalError(null));
       dispatch(setModalRole(role));
       dispatch(setIsModalOpen(true));
     },

src/store/thunks/roles.js

@@ -39,7 +39,7 @@ export const createRole = (body) => async (dispatch) => {
     const role = extractResponseData(response);
     dispatch(actions.createRole(role));
     dispatch(actions.setIsModalOpen(false));
-    makeToast("Successfully craeted the role.", "success");
+    makeToast("Successfully created the role.", "success");
   } catch (error) {
     dispatch(
       actions.setModalError(`Failed to create the role.\n${error.toString()}`)