separate root and child categories requests

src/pages/FilesPage/FilesPage.js

@@ -1,20 +1,38 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useSelector, useDispatch } from "react-redux";
 import IconButton from "../../components/IconButton/IconButton";
-import { setCategoriesReq } from "../../store/actions/categories/categoriesAction";
+import {
+  setCategoriesReq,
+  setChildCategoriesReq,
+} from "../../store/actions/categories/categoriesAction";
 import { selectCategories } from "../../store/selectors/categoriesSelector";
 import table from "../../assets/images/table.png";
 import { FILES_VIEW_PAGE } from "../../constants/pages";
 
 const FilesPage = ({ history }) => {
   const categories = useSelector(selectCategories);
+  const [categoryName, setCategoryName] = useState("");
   const dispatch = useDispatch();
 
   useEffect(() => {
     dispatch(setCategoriesReq());
   }, []);
 
+  const redirectToFilesPage = () => {
+    history.push(FILES_VIEW_PAGE, { category: categoryName });
+  };
+
+  const getChildCategories = (categoryId, categoryName) => {
+    setCategoryName(categoryName);
+    dispatch(
+      setChildCategoriesReq({
+        parentCategoryId: categoryId,
+        handleApiResponseSuccess: redirectToFilesPage,
+      })
+    );
+  };
+
   return (
     <>
       <div className="l-t-rectangle"></div>
@@ -30,9 +48,10 @@ const FilesPage = ({ history }) => {
                 <IconButton
                   className="c-btn c-btn--primary-outlined files-page-category-button"
                   data-testid="pattern-details-send-email"
-                  onClick={() =>
-                    history.push(FILES_VIEW_PAGE, { category: category.name })
-                  }
+                  onClick={() => getChildCategories(category.id, category.name)}
+                  // onClick={() =>
+                  //
+                  // }
                 >
                   <img
                     style={{

src/request/apiEndpoints.js

@@ -70,7 +70,8 @@ export default {
     createTest: base + "/screeningtest",
   },
   categories: {
-    allCategories: base + "/categories/names",
+    rootCategories: base + "/categories/root-categories",
+    childCategories: base + "/categories/child-categories",
     isCategoriesChecked: base + "/categories/granted-categories",
     grantCategory: base + "/users/grant-category",
   },

src/request/categoriesRequest.js

@@ -1,8 +1,11 @@
 import { getRequest, postRequest } from ".";
 import apiEndpoints from "./apiEndpoints";
 
-export const getAllCategories = () =>
-  getRequest(apiEndpoints.categories.allCategories);
+export const getRootCategories = () =>
+  getRequest(apiEndpoints.categories.rootCategories);
+
+export const getChildCategories = (parentCategoryId) =>
+  getRequest(apiEndpoints.categories.childCategories + "?parentCategoryId=" + parentCategoryId);
 
 export const getIsCategoriesChecked = (userId) =>
   getRequest(apiEndpoints.categories.isCategoriesChecked + "?userId=" + userId);

src/store/actions/categories/categoriesAction.js

@@ -1,7 +1,10 @@
 import {
-  FETCH_CATEGORIES_REQ,
-  FETCH_CATEGORIES_SUCCESS,
-  FETCH_CATEGORIES_ERR,
+  FETCH_ROOT_CATEGORIES_REQ,
+  FETCH_ROOT_CATEGORIES_SUCCESS,
+  FETCH_ROOT_CATEGORIES_ERR,
+  FETCH_CHILD_CATEGORIES_REQ,
+  FETCH_CHILD_CATEGORIES_SUCCESS,
+  FETCH_CHILD_CATEGORIES_ERR,
   FETCH_IS_CATEGORIES_CHECKED_ERR,
   FETCH_IS_CATEGORIES_CHECKED_REQ,
   FETCH_IS_CATEGORIES_CHECKED_SUCCESS,
@@ -12,16 +15,31 @@ import {
 } from "./categoriesActionConstants";
 
 export const setCategoriesReq = () => ({
-  type: FETCH_CATEGORIES_REQ,
+  type: FETCH_ROOT_CATEGORIES_REQ,
 });
 
 export const setCategoriesError = (payload) => ({
-  type: FETCH_CATEGORIES_ERR,
+  type: FETCH_ROOT_CATEGORIES_ERR,
   payload,
 });
 
 export const setCategories = (payload) => ({
-  type: FETCH_CATEGORIES_SUCCESS,
+  type: FETCH_ROOT_CATEGORIES_SUCCESS,
+  payload,
+});
+
+export const setChildCategoriesReq = (payload) => ({
+  type: FETCH_CHILD_CATEGORIES_REQ,
+  payload
+});
+
+export const setChildCategoriesError = (payload) => ({
+  type: FETCH_CHILD_CATEGORIES_ERR,
+  payload,
+});
+
+export const setChildCategories = (payload) => ({
+  type: FETCH_CHILD_CATEGORIES_SUCCESS,
   payload,
 });
 

src/store/actions/categories/categoriesActionConstants.js

@@ -4,14 +4,29 @@ import {
   createErrorType,
 } from "../actionHelpers";
 
-const FETCH_CATEGORIES_SCOPE = "FETCH_CATEGORIES";
+const FETCH_ROOT_CATEGORIES_SCOPE = "FETCH_ROOT_CATEGORIES";
+const FETCH_CHILD_CATEGORIES_SCOPE = "FETCH_CHILD_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);
-export const FETCH_CATEGORIES_SUCCESS = createSuccessType(
-  FETCH_CATEGORIES_SCOPE
+export const FETCH_ROOT_CATEGORIES_REQ = createFetchType(
+  FETCH_ROOT_CATEGORIES_SCOPE
+);
+export const FETCH_ROOT_CATEGORIES_ERR = createErrorType(
+  FETCH_ROOT_CATEGORIES_SCOPE
+);
+export const FETCH_ROOT_CATEGORIES_SUCCESS = createSuccessType(
+  FETCH_ROOT_CATEGORIES_SCOPE
+);
+
+export const FETCH_CHILD_CATEGORIES_REQ = createFetchType(
+  FETCH_CHILD_CATEGORIES_SCOPE
+);
+export const FETCH_CHILD_CATEGORIES_ERR = createErrorType(
+  FETCH_CHILD_CATEGORIES_SCOPE
+);
+export const FETCH_CHILD_CATEGORIES_SUCCESS = createSuccessType(
+  FETCH_CHILD_CATEGORIES_SCOPE
 );
 
 export const FETCH_IS_CATEGORIES_CHECKED_REQ = createFetchType(

src/store/reducers/category/categoriesReducer.js

@@ -1,7 +1,9 @@
 import {
   CHANGE_IC_CHECKED_CATEGORY,
-  FETCH_CATEGORIES_ERR,
-  FETCH_CATEGORIES_SUCCESS,
+  FETCH_ROOT_CATEGORIES_ERR,
+  FETCH_ROOT_CATEGORIES_SUCCESS,
+  FETCH_CHILD_CATEGORIES_ERR,
+  FETCH_CHILD_CATEGORIES_SUCCESS,
   FETCH_IS_CATEGORIES_CHECKED_ERR,
   FETCH_IS_CATEGORIES_CHECKED_SUCCESS,
   GRANT_CATEGORY_ERR,
@@ -18,8 +20,10 @@ const initialState = {
 
 export default createReducer(
   {
-    [FETCH_CATEGORIES_SUCCESS]: setStateCategories,
-    [FETCH_CATEGORIES_ERR]: setCategoriesErrorMessage,
+    [FETCH_ROOT_CATEGORIES_SUCCESS]: setStateCategories,
+    [FETCH_ROOT_CATEGORIES_ERR]: setCategoriesErrorMessage,
+    [FETCH_CHILD_CATEGORIES_SUCCESS]: setStateChildCategories,
+    [FETCH_CHILD_CATEGORIES_ERR]: setChildCategoriesErrorMessage,
     [FETCH_IS_CATEGORIES_CHECKED_SUCCESS]: setStateIsCategoriesChecked,
     [FETCH_IS_CATEGORIES_CHECKED_ERR]: setIsCategoriesCheckedErrorMessage,
     [CHANGE_IC_CHECKED_CATEGORY]: setIsCheckedCategory,
@@ -43,6 +47,20 @@ function setCategoriesErrorMessage(state, action) {
   };
 }
 
+function setStateChildCategories(state, action) {
+  return {
+    ...state,
+    categories: action.payload,
+  };
+}
+
+function setChildCategoriesErrorMessage(state, action) {
+  return {
+    ...state,
+    errorMessage: action.payload,
+  };
+}
+
 function setStateIsCategoriesChecked(state, action) {
   return {
     ...state,

src/store/saga/categoriesSaga.js

@@ -5,28 +5,30 @@ import {
   setIsCategoriesChecked,
   setIsCategoriesCheckedError,
   setGrantCategories,
-  setGrantCategoriesError
+  setGrantCategoriesError,
 } from "../actions/categories/categoriesAction";
 import { authScopeStringGetHelper } from "../../util/helpers/authScopeHelpers";
 import { JWT_TOKEN } from "../../constants/localStorage";
 import { addHeaderToken } from "../../request";
 import { rejectErrorCodeHelper } from "../../util/helpers/rejectErrorCodeHelper";
 import {
-  FETCH_CATEGORIES_REQ,
+  FETCH_ROOT_CATEGORIES_REQ,
+  FETCH_CHILD_CATEGORIES_REQ,
   FETCH_IS_CATEGORIES_CHECKED_REQ,
   GRANT_CATEGORY_REQ,
 } from "../actions/categories/categoriesActionConstants";
 import {
-  getAllCategories,
+  getRootCategories,
+  getChildCategories,
   getIsCategoriesChecked,
   grantCategoryRequest,
 } from "../../request/categoriesRequest";
 
-export function* getCategories() {
+export function* getRootCategoriesSaga() {
   try {
     const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
     yield call(addHeaderToken, JwtToken);
-    const result = yield call(getAllCategories);
+    const result = yield call(getRootCategories);
     yield put(setCategories(result.data));
   } catch (error) {
     const errorMessage = yield call(rejectErrorCodeHelper, error);
@@ -34,6 +36,25 @@ export function* getCategories() {
   }
 }
 
+export function* getChildCategoriesSaga({ payload }) {
+  try {
+    const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
+    yield call(addHeaderToken, JwtToken);
+    const result = yield call(getChildCategories, payload.parentCategoryId);
+    console.log(result.data.length === 0);
+    if (result.data.length === 0) {
+      // get all files for selected category
+      yield call(payload.handleApiResponseSuccess);
+    } else {
+      // get child categories of selected category
+      yield put(setCategories(result.data));
+    }
+  } catch (error) {
+    const errorMessage = yield call(rejectErrorCodeHelper, error);
+    yield put(setCategoriesError(errorMessage));
+  }
+}
+
 export function* getIsCategoriesCheckedSaga({ payload }) {
   try {
     const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
@@ -60,7 +81,8 @@ export function* grantCategoriesCheckedSaga({ payload }) {
 
 export default function* categoriesSaga() {
   yield all([
-    takeLatest(FETCH_CATEGORIES_REQ, getCategories),
+    takeLatest(FETCH_ROOT_CATEGORIES_REQ, getRootCategoriesSaga),
+    takeLatest(FETCH_CHILD_CATEGORIES_REQ, getChildCategoriesSaga),
     takeLatest(FETCH_IS_CATEGORIES_CHECKED_REQ, getIsCategoriesCheckedSaga),
     takeLatest(GRANT_CATEGORY_REQ, grantCategoriesCheckedSaga),
   ]);