Connect granting categories on BE & FE

src/pages/UsersPage/UserDetails.js

 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 { changeIsCheckedCategory, setIsCategoriesCheckedReq } from "../../store/actions/categories/categoriesAction";
+import {
+  selectChangedCategories,
+  selectIsCategoriesChecked,
+} from "../../store/selectors/categoriesSelector";
+import {
+  changeIsCheckedCategory,
+  setGrantCategoriesReq,
+  setIsCategoriesCheckedReq,
+} from "../../store/actions/categories/categoriesAction";
 import Button from "../../components/Button/Button";
 
 const UserDetails = ({ history }) => {
   const [showDelete, setDelete] = useState(false);
   const { t } = useTranslation();
   const categories = useSelector(selectIsCategoriesChecked);
+  const changedCategories = useSelector(selectChangedCategories);
 
   const { user, errorMessage } = useSelector((s) => s.userDetails);
 
   );
 
   const handleChangingCategoriesIsChecked = (id, isChecked) => {
-    dispatch(changeIsCheckedCategory({id, isChecked}))
+    dispatch(changeIsCheckedCategory({ id, isChecked }));
+  };
+
+  const onGrantCategoriesHandler = () => {
+    dispatch(
+      setGrantCategoriesReq({ userId: id, categories: changedCategories })
+    );
   };
 
   return isLoading ? (
                   <div style={{ display: "flex", justifyContent: "center" }}>
                     <Button
                       variant="contained"
-                      disabled
+                      disabled={
+                        !changedCategories || changedCategories.length === 0
+                      }
                       sx={{ mt: 3, mb: 2 }}
                       fullWidth
                       className="c-btn c-btn--primary w-289 f"
                       type="submit"
+                      onClick={onGrantCategoriesHandler}
                     >
                       Apply Changes
                     </Button>

src/request/apiEndpoints.js

   },
   categories: {
     allCategories: base + "/categories/names",
-    isCategoriesChecked: base + "/categories/granted-categories"
+    isCategoriesChecked: base + "/categories/granted-categories",
+    grantCategory: base + "/users/grant-category",
   },
   tags: {
     allTags: base + "/tags/names",
   fileTags: {
     filters: base + "/tags",
   },
-  files:{
+  files: {
     uploadFile: base + "/files",
-    all: base + "/files/filtered"
-  }
+    all: base + "/files/filtered",
+  },
 };

src/request/categoriesRequest.js

-import { getRequest } from ".";
+import { getRequest, postRequest } from ".";
 import apiEndpoints from "./apiEndpoints";
 
 export const getAllCategories = () =>
 
 export const getIsCategoriesChecked = (userId) =>
   getRequest(apiEndpoints.categories.isCategoriesChecked + "?userId=" + userId);
+
+export const grantCategoryRequest = (payload) =>
+  postRequest(apiEndpoints.categories.grantCategory, payload);

src/store/actions/categories/categoriesAction.js

   FETCH_IS_CATEGORIES_CHECKED_ERR,
   FETCH_IS_CATEGORIES_CHECKED_REQ,
   FETCH_IS_CATEGORIES_CHECKED_SUCCESS,
-  CHANGE_IC_CHECKED_CATEGORY
+  CHANGE_IC_CHECKED_CATEGORY,
+  GRANT_CATEGORY_REQ,
+  GRANT_CATEGORY_ERR,
+  GRANT_CATEGORY_SUCCESS
 } from "./categoriesActionConstants";
 
 export const setCategoriesReq = () => ({
   payload,
 });
 
+export const setGrantCategoriesReq = (payload) => ({
+  type: GRANT_CATEGORY_REQ,
+  payload
+});
+
+export const setGrantCategoriesError = (payload) => ({
+  type: GRANT_CATEGORY_ERR,
+  payload,
+});
+
+export const setGrantCategories = (payload) => ({
+  type: GRANT_CATEGORY_SUCCESS,
+  payload,
+});
+

src/store/actions/categories/categoriesActionConstants.js

 
 const FETCH_CATEGORIES_SCOPE = "FETCH_CATEGORIES";
 const FETCH_IS_CATEGORIES_CHECKED_SCOPE = "FETCH_IS_CATEGORIES_CHECKED";
+const GRANT_CATEGORY_SCOPE = "GRANT_CATEGORY";
 
 export const FETCH_CATEGORIES_REQ = createFetchType(FETCH_CATEGORIES_SCOPE);
 export const FETCH_CATEGORIES_ERR = createErrorType(FETCH_CATEGORIES_SCOPE);
   FETCH_IS_CATEGORIES_CHECKED_SCOPE
 );
 
+export const GRANT_CATEGORY_REQ = createFetchType(GRANT_CATEGORY_SCOPE);
+export const GRANT_CATEGORY_ERR = createErrorType(GRANT_CATEGORY_SCOPE);
+export const GRANT_CATEGORY_SUCCESS = createSuccessType(GRANT_CATEGORY_SCOPE);
+
 export const CHANGE_IC_CHECKED_CATEGORY = "CHANGE_IC_CHECKED_CATEGORY";

src/store/reducers/category/categoriesReducer.js

   FETCH_CATEGORIES_SUCCESS,
   FETCH_IS_CATEGORIES_CHECKED_ERR,
   FETCH_IS_CATEGORIES_CHECKED_SUCCESS,
+  GRANT_CATEGORY_ERR,
+  GRANT_CATEGORY_SUCCESS,
 } from "../../actions/categories/categoriesActionConstants";
 import createReducer from "../../utils/createReducer";
 
     [FETCH_CATEGORIES_ERR]: setCategoriesErrorMessage,
     [FETCH_IS_CATEGORIES_CHECKED_SUCCESS]: setStateIsCategoriesChecked,
     [FETCH_IS_CATEGORIES_CHECKED_ERR]: setIsCategoriesCheckedErrorMessage,
-    [CHANGE_IC_CHECKED_CATEGORY]: setIsCheckedCategory
+    [CHANGE_IC_CHECKED_CATEGORY]: setIsCheckedCategory,
+    [GRANT_CATEGORY_SUCCESS]: setStateGrantCategories,
+    [GRANT_CATEGORY_ERR]: setGrantCategoriesErrorMessage,
   },
   initialState
 );
   );
 
   var tmpChangedCategories = [...state.changedCategories];
-    if (tmpChangedCategoriesIndex === -1) {
+  if (tmpChangedCategoriesIndex === -1) {
     tmpChangedCategories = [
       ...tmpChangedCategories,
       { id: action.payload.id, isChecked: !action.payload.isChecked },
     tmpChangedCategories.splice(tmpChangedCategoriesIndex, 1);
   }
 
-  const tmpIndex = state.isCategoriesChecked.findIndex((x) => x.id === action.payload.id);
+  const tmpIndex = state.isCategoriesChecked.findIndex(
+    (x) => x.id === action.payload.id
+  );
 
   if (tmpIndex === -1) {
     return state;
   }
 
-    return {
+  return {
     ...state,
     isCategoriesChecked: state.isCategoriesChecked.map((category, index) =>
       tmpIndex === index
     changedCategories: tmpChangedCategories,
   };
 }
+
+function setStateGrantCategories(state) {
+  return {
+    ...state,
+    changedCategories: []
+  };
+}
+
+function setGrantCategoriesErrorMessage(state, action) {
+  return {
+    ...state,
+    errorMessage: action.payload,
+  };
+}

src/store/saga/categoriesSaga.js

   setCategoriesError,
   setIsCategoriesChecked,
   setIsCategoriesCheckedError,
+  setGrantCategories,
+  setGrantCategoriesError
 } from "../actions/categories/categoriesAction";
 import { authScopeStringGetHelper } from "../../util/helpers/authScopeHelpers";
 import { JWT_TOKEN } from "../../constants/localStorage";
 import {
   FETCH_CATEGORIES_REQ,
   FETCH_IS_CATEGORIES_CHECKED_REQ,
+  GRANT_CATEGORY_REQ,
 } from "../actions/categories/categoriesActionConstants";
 import {
   getAllCategories,
   getIsCategoriesChecked,
+  grantCategoryRequest,
 } from "../../request/categoriesRequest";
 
 export function* getCategories() {
   }
 }
 
+export function* grantCategoriesCheckedSaga({ payload }) {
+  try {
+    const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
+    yield call(addHeaderToken, JwtToken);
+    const result = yield call(grantCategoryRequest, payload);
+    yield put(setGrantCategories(result.data));
+  } catch (error) {
+    const errorMessage = yield call(rejectErrorCodeHelper, error);
+    yield put(setGrantCategoriesError(errorMessage));
+  }
+}
+
 export default function* categoriesSaga() {
   yield all([
     takeLatest(FETCH_CATEGORIES_REQ, getCategories),
     takeLatest(FETCH_IS_CATEGORIES_CHECKED_REQ, getIsCategoriesCheckedSaga),
+    takeLatest(GRANT_CATEGORY_REQ, grantCategoriesCheckedSaga),
   ]);
 }

src/store/selectors/categoriesSelector.js

   categoriesSelector,
   (state) => state.errorMessage
 );
+
+export const selectChangedCategories = createSelector(
+  categoriesSelector,
+  (state) => state.changedCategories
+);