Implemented history of nested folders

package.json

     "yup": "^0.32.9"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

src/assets/styles/components/_files.scss

 
 .pg-viewer-wrapper .document-container{
   margin:0 !important;
+}
+
+.page-navigation-buttons {
+  display: flex;
+  margin-top: 12px;
+}
+
+.page-navigation-buttons > button {
+  margin: 0 !important;
+  margin-right: 12px !important;
 }

src/constants/keyCodeConstants.js

 /* istanbul ignore file */
 export const PAGE_SIZE_CANDIDATES = 12;
+export const PAGE_SIZE_FILES = 3;

src/pages/FilesPage/FileTable.js

 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import { FETCH_FILES_LOADING } from "../../store/actions/files/fileActionConstants";
 import { useHistory, useParams } from "react-router";
+import { PAGE_SIZE_FILES } from "../../constants/keyCodeConstants";
 
 const FileTable = ({ trigger }) => {
   const [file, setFile] = useState(null);
     dispatch(
       getFilesReq({
         payload: {
-          pageSize: 3,
+          pageSize: PAGE_SIZE_FILES,
           currentPage: page,
           categoryId: id,
           extensions: [],
     dispatch(
       getFilesReq({
         payload: {
-          pageSize: 3,
+          pageSize: PAGE_SIZE_FILES,
           currentPage: value,
           categoryId: id,
           extensions: extFilters,
       dispatch(
         getFilesReq({
           payload: {
-            pageSize: 3,
+            pageSize: PAGE_SIZE_FILES,
             currentPage: page,
             categoryId: id,
             extensions: extFilters,
           display: "flex",
           justifyContent: "space-between",
           position: "relative",
-          width: "100%",
+          width: "calc(100% - 144px)",
         }}
       >
         <div>
         }}
       >
         <div className="table-cont">
-          <div style={{ display: "flex", height: "300px" }}>
+          <div style={{ display: "flex", height: "300px", width: "calc(100% - 144px)" }}>
             <table
               className={"usersTable-users mini"}
               style={{
           <Pagination
             size={"small"}
             count={
-              parseInt(data.total) <= 6
+              parseInt(data.total) <= PAGE_SIZE_FILES
                 ? 1
-                : Math.ceil(parseInt(data.total) / 6)
+                : Math.ceil(parseInt(data.total) / PAGE_SIZE_FILES)
             }
             color="primary"
             className="candidates-pagination"

src/pages/FilesPage/FilesPage.js

 import { useSelector, useDispatch } from "react-redux";
 import IconButton from "../../components/IconButton/IconButton";
 import { setCategoriesReq } from "../../store/actions/categories/categoriesAction";
-import { selectCategories } from "../../store/selectors/categoriesSelector";
+import {
+  selectCategories,
+  selectChildParentRelations,
+} from "../../store/selectors/categoriesSelector";
 import table from "../../assets/images/table.png";
 import { FILES_PAGE } from "../../constants/pages";
 import FileTable from "./FileTable";
 
 const FilesPage = ({ history }) => {
   const categories = useSelector(selectCategories);
+  const childParentRelations = useSelector(selectChildParentRelations);
   const dispatch = useDispatch();
   const [trigger, setTrigger] = useState(0);
   let { id } = useParams();
         <div style={{ marginBottom: "50px" }}>
           <div style={{ marginBottom: "30px" }}>
             <h1 className="page-heading">Folderi</h1>
+            <div className="page-navigation-buttons">
+              <IconButton
+                className="c-btn c-btn--primary-outlined files-view-page-delete-btn"
+                onClick={() => history.push({ pathname: FILES_PAGE })}
+              >
+                <p>Root</p>
+              </IconButton>
+              {childParentRelations.map((relation) => (
+                <IconButton
+                  className="c-btn c-btn--primary-outlined files-view-page-delete-btn"
+                  key={relation.id}
+                  onClick={() => history.push({ pathname: relation.id })}
+                >
+                  <p>{relation.name}</p>
+                </IconButton>
+              ))}
+            </div>
           </div>
           <div className="files-page-categories">
             {categories &&

src/store/reducers/category/categoriesReducer.js

 
 const initialState = {
   categories: [],
+  childParentRelations: [],
   isCategoriesChecked: [],
   changedCategories: [],
   errorMessage: "",
 function setStateCategories(state, action) {
   return {
     ...state,
-    categories: action.payload,
+    categories: action.payload.categories,
+    childParentRelations: action.payload.childParentRelations
   };
 }
 

src/store/saga/categoriesSaga.js

     } else {
       result = yield call(getRootCategories2, payload.parentCategoryId);
     }
-    console.log("Result:", result);
-    yield put(setCategories(result.data));
+    yield put(setCategories({categories: result.data.categories, childParentRelations: result.data.childParentRelations}));
   } catch (error) {
     const errorMessage = yield call(rejectErrorCodeHelper, error);
     yield put(setCategoriesError(errorMessage));

src/store/selectors/categoriesSelector.js

   (state) => state.categories
 );
 
+export const selectChildParentRelations = createSelector(
+  categoriesSelector,
+  (state) => state.childParentRelations
+);
+
 export const selectCategoriesError = createSelector(
   categoriesSelector,
   (state) => state.errorMessage