Implemented history of nested folders

package.json

@@ -50,7 +50,7 @@
     "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

@@ -141,4 +141,14 @@
 
 .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

@@ -1,2 +1,3 @@
 /* istanbul ignore file */
 export const PAGE_SIZE_CANDIDATES = 12;
+export const PAGE_SIZE_FILES = 3;

src/pages/FilesPage/FileTable.js

@@ -25,6 +25,7 @@ import Button from "../../components/Button/Button";
 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);
@@ -68,7 +69,7 @@ const FileTable = ({ trigger }) => {
     dispatch(
       getFilesReq({
         payload: {
-          pageSize: 3,
+          pageSize: PAGE_SIZE_FILES,
           currentPage: page,
           categoryId: id,
           extensions: [],
@@ -98,7 +99,7 @@ const FileTable = ({ trigger }) => {
     dispatch(
       getFilesReq({
         payload: {
-          pageSize: 3,
+          pageSize: PAGE_SIZE_FILES,
           currentPage: value,
           categoryId: id,
           extensions: extFilters,
@@ -147,7 +148,7 @@ const FileTable = ({ trigger }) => {
       dispatch(
         getFilesReq({
           payload: {
-            pageSize: 3,
+            pageSize: PAGE_SIZE_FILES,
             currentPage: page,
             categoryId: id,
             extensions: extFilters,
@@ -305,7 +306,7 @@ const FileTable = ({ trigger }) => {
           display: "flex",
           justifyContent: "space-between",
           position: "relative",
-          width: "100%",
+          width: "calc(100% - 144px)",
         }}
       >
         <div>
@@ -356,7 +357,7 @@ const FileTable = ({ trigger }) => {
         }}
       >
         <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={{
@@ -468,9 +469,9 @@ const FileTable = ({ trigger }) => {
           <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

@@ -3,7 +3,10 @@ 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 { 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";
@@ -11,6 +14,7 @@ import { useParams } from "react-router-dom";
 
 const FilesPage = ({ history }) => {
   const categories = useSelector(selectCategories);
+  const childParentRelations = useSelector(selectChildParentRelations);
   const dispatch = useDispatch();
   const [trigger, setTrigger] = useState(0);
   let { id } = useParams();
@@ -42,6 +46,23 @@ const FilesPage = ({ history }) => {
         <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

@@ -11,6 +11,7 @@ import createReducer from "../../utils/createReducer";
 
 const initialState = {
   categories: [],
+  childParentRelations: [],
   isCategoriesChecked: [],
   changedCategories: [],
   errorMessage: "",
@@ -32,7 +33,8 @@ export default createReducer(
 function setStateCategories(state, action) {
   return {
     ...state,
-    categories: action.payload,
+    categories: action.payload.categories,
+    childParentRelations: action.payload.childParentRelations
   };
 }
 

src/store/saga/categoriesSaga.js

@@ -33,8 +33,7 @@ export function* getRootCategoriesSaga({ payload }) {
     } 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

@@ -7,6 +7,11 @@ export const selectCategories = createSelector(
   (state) => state.categories
 );
 
+export const selectChildParentRelations = createSelector(
+  categoriesSelector,
+  (state) => state.childParentRelations
+);
+
 export const selectCategoriesError = createSelector(
   categoriesSelector,
   (state) => state.errorMessage