Added logic for managing grant categories

src/pages/UsersPage/UserDetails.js

@@ -18,13 +18,19 @@ import { USERS_PAGE } from "../../constants/pages";
 import { forgetPassword } from "../../store/actions/login/loginActions";
 import { useEffect } from "react";
 import { useTheme } from "@emotion/react";
-import { Checkbox, FormControlLabel, FormGroup, useMediaQuery } from "@mui/material";
+import {
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  useMediaQuery,
+} from "@mui/material";
 import ConfirmDialog from "../../components/MUI/ConfirmDialog";
 import { useTranslation } from "react-i18next";
 import { USER_DETAILS_LOADING } from "../../store/actions/users/usersActionConstants";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import { selectIsCategoriesChecked } from "../../store/selectors/categoriesSelector";
-import { setIsCategoriesCheckedReq } from "../../store/actions/categories/categoriesAction";
+import { changeIsCheckedCategory, setIsCategoriesCheckedReq } from "../../store/actions/categories/categoriesAction";
+import Button from "../../components/Button/Button";
 
 const UserDetails = ({ history }) => {
   const theme = useTheme();
@@ -49,8 +55,8 @@ const UserDetails = ({ history }) => {
   };
 
   useEffect(() => {
-    if(id){
-      dispatch(setIsCategoriesCheckedReq({userId:id}));
+    if (id) {
+      dispatch(setIsCategoriesCheckedReq({ userId: id }));
     }
   }, [id]);
 
@@ -97,6 +103,10 @@ const UserDetails = ({ history }) => {
     selectIsLoadingByActionType(USER_DETAILS_LOADING)
   );
 
+  const handleChangingCategoriesIsChecked = (id, isChecked) => {
+    dispatch(changeIsCheckedCategory({id, isChecked}))
+  };
+
   return isLoading ? (
     <div>
       <div className="l-t-rectangle"></div>
@@ -338,21 +348,37 @@ const UserDetails = ({ history }) => {
                 </div>
                 <div className="user-details-middle-checkboxes">
                   <FormGroup>
-                    {categories?.map((tag, index) => (
+                    {categories?.map((category, index) => (
                       <FormControlLabel
                         key={index}
                         control={
                           <Checkbox
-                            // onChange={handleCheckboxesCat}
-                            value={tag.name}
-                            checked={tag.isChecked}
+                            onChange={handleChangingCategoriesIsChecked.bind(
+                              this,
+                              category.id,
+                              category.isChecked
+                            )}
+                            value={category.name}
+                            checked={category.isChecked}
                             className="ad-filters-checkbox"
                           />
                         }
-                        label={tag.name}
+                        label={category.name}
                       />
                     ))}
                   </FormGroup>
+                  <div style={{ display: "flex", justifyContent: "center" }}>
+                    <Button
+                      variant="contained"
+                      disabled
+                      sx={{ mt: 3, mb: 2 }}
+                      fullWidth
+                      className="c-btn c-btn--primary w-289 f"
+                      type="submit"
+                    >
+                      Apply Changes
+                    </Button>
+                  </div>
                 </div>
               </div>
             </div>

src/store/actions/categories/categoriesAction.js

@@ -4,7 +4,8 @@ import {
   FETCH_CATEGORIES_ERR,
   FETCH_IS_CATEGORIES_CHECKED_ERR,
   FETCH_IS_CATEGORIES_CHECKED_REQ,
-  FETCH_IS_CATEGORIES_CHECKED_SUCCESS
+  FETCH_IS_CATEGORIES_CHECKED_SUCCESS,
+  CHANGE_IC_CHECKED_CATEGORY
 } from "./categoriesActionConstants";
 
 export const setCategoriesReq = () => ({
@@ -36,3 +37,8 @@ export const setIsCategoriesChecked = (payload) => ({
   payload,
 });
 
+export const changeIsCheckedCategory = (payload) => ({
+  type: CHANGE_IC_CHECKED_CATEGORY,
+  payload,
+});
+

src/store/actions/categories/categoriesActionConstants.js

@@ -9,8 +9,18 @@ const FETCH_IS_CATEGORIES_CHECKED_SCOPE = "FETCH_IS_CATEGORIES_CHECKED";
 
 export const FETCH_CATEGORIES_REQ = createFetchType(FETCH_CATEGORIES_SCOPE);
 export const FETCH_CATEGORIES_ERR = createErrorType(FETCH_CATEGORIES_SCOPE);
-export const FETCH_CATEGORIES_SUCCESS = createSuccessType(FETCH_CATEGORIES_SCOPE);
+export const FETCH_CATEGORIES_SUCCESS = createSuccessType(
+  FETCH_CATEGORIES_SCOPE
+);
 
-export const FETCH_IS_CATEGORIES_CHECKED_REQ = createFetchType(FETCH_IS_CATEGORIES_CHECKED_SCOPE);
-export const FETCH_IS_CATEGORIES_CHECKED_ERR = createErrorType(FETCH_IS_CATEGORIES_CHECKED_SCOPE);
-export const FETCH_IS_CATEGORIES_CHECKED_SUCCESS = createSuccessType(FETCH_IS_CATEGORIES_CHECKED_SCOPE);
+export const FETCH_IS_CATEGORIES_CHECKED_REQ = createFetchType(
+  FETCH_IS_CATEGORIES_CHECKED_SCOPE
+);
+export const FETCH_IS_CATEGORIES_CHECKED_ERR = createErrorType(
+  FETCH_IS_CATEGORIES_CHECKED_SCOPE
+);
+export const FETCH_IS_CATEGORIES_CHECKED_SUCCESS = createSuccessType(
+  FETCH_IS_CATEGORIES_CHECKED_SCOPE
+);
+
+export const CHANGE_IC_CHECKED_CATEGORY = "CHANGE_IC_CHECKED_CATEGORY";

src/store/reducers/category/categoriesReducer.js

@@ -1,4 +1,5 @@
 import {
+  CHANGE_IC_CHECKED_CATEGORY,
   FETCH_CATEGORIES_ERR,
   FETCH_CATEGORIES_SUCCESS,
   FETCH_IS_CATEGORIES_CHECKED_ERR,
@@ -9,6 +10,7 @@ import createReducer from "../../utils/createReducer";
 const initialState = {
   categories: [],
   isCategoriesChecked: [],
+  changedCategories: [],
   errorMessage: "",
 };
 
@@ -18,6 +20,7 @@ export default createReducer(
     [FETCH_CATEGORIES_ERR]: setCategoriesErrorMessage,
     [FETCH_IS_CATEGORIES_CHECKED_SUCCESS]: setStateIsCategoriesChecked,
     [FETCH_IS_CATEGORIES_CHECKED_ERR]: setIsCategoriesCheckedErrorMessage,
+    [CHANGE_IC_CHECKED_CATEGORY]: setIsCheckedCategory
   },
   initialState
 );
@@ -49,3 +52,35 @@ function setIsCategoriesCheckedErrorMessage(state, action) {
     errorMessage: action.payload,
   };
 }
+
+function setIsCheckedCategory(state, action) {
+  const tmpChangedCategoriesIndex = state.changedCategories.findIndex(
+    (x) => x.id === action.payload.id
+  );
+
+  var tmpChangedCategories = [...state.changedCategories];
+    if (tmpChangedCategoriesIndex === -1) {
+    tmpChangedCategories = [
+      ...tmpChangedCategories,
+      { id: action.payload.id, isChecked: !action.payload.isChecked },
+    ];
+  } else {
+    tmpChangedCategories.splice(tmpChangedCategoriesIndex, 1);
+  }
+
+  const tmpIndex = state.isCategoriesChecked.findIndex((x) => x.id === action.payload.id);
+
+  if (tmpIndex === -1) {
+    return state;
+  }
+
+    return {
+    ...state,
+    isCategoriesChecked: state.isCategoriesChecked.map((category, index) =>
+      tmpIndex === index
+        ? { ...category, isChecked: !category.isChecked }
+        : category
+    ),
+    changedCategories: tmpChangedCategories,
+  };
+}