infinity search of folders and files

src/AppRoutes.js

@@ -28,6 +28,7 @@ import {
   // FILES_VIEW_PAGE,
   ADD_FILE,
   FILES_PAGE,
+  FILES_DEPTH_PAGE
 } from "./constants/pages";
 
 import LoginPage from "./pages/LoginPage/LoginPageMUI";
@@ -88,6 +89,7 @@ const AppRoutes = () => {
       {/* <PrivateRoute exact path={FILES_VIEW_PAGE} component={FilesViewPage} /> */}
       <PrivateRoute exact path={ADD_FILE} component={AddFile}/>
       <PrivateRoute exact path={FILES_PAGE} component={FilesPage}/>
+      <PrivateRoute exact path={FILES_DEPTH_PAGE} component={FilesPage}/>
       {/* <PrivateRoute
         exact
         path={CANDIDATES_DETAILS_PAGE}

src/components/Docs/DocsFilters.js

@@ -12,30 +12,24 @@ import x from "../../assets/images/x.png";
 import { useDispatch, useSelector } from "react-redux";
 import {
   getFilesReq,
-  // updateFileFilterCat,
   updateFileFilterExt,
   updateFileFilterTag,
 } from "../../store/actions/files/fileActions";
+import { useParams } from "react-router-dom";
 
-const DocsFilters = ({ open, handleClose, setPage, category }) => {
+const DocsFilters = ({ open, handleClose, setPage }) => {
   const dispatch = useDispatch();
   const { filters } = useSelector((s) => s.fileFilters);
+  let { id } = useParams();
 
   const handleCheckboxesExt = (e) =>
     dispatch(updateFileFilterExt(e.target.value));
   const handleCheckboxesTags = (e) =>
     dispatch(updateFileFilterTag(e.target.value));
-  // const handleCheckboxesCat = (e) =>
-  //   dispatch(updateFileFilterCat(e.target.value));
 
   const submitFiltersHandler = (e) => {
     e.preventDefault();
 
-    var catFilters = [category && category];
-    // filters.categories
-    //   ?.filter((n) => n.isChecked)
-    //   .forEach((m) => catFilters.push(m.name));
-
     var extFilters = [];
     filters.extensions
       ?.filter((n) => n.isChecked)
@@ -51,11 +45,10 @@ const DocsFilters = ({ open, handleClose, setPage, category }) => {
         payload: {
           pageSize: 6,
           currentPage: 1,
-          categories: catFilters,
+          categoryId: id,
           extensions: extFilters,
           tags: tagFilters,
-          content:filters.content
-
+          content: filters.content === undefined ? "" : filters.content,
         },
         apiSuccess: handleClose,
       })
@@ -138,36 +131,11 @@ const DocsFilters = ({ open, handleClose, setPage, category }) => {
               ))}
             </FormGroup>
           </div>
-          {/* <div
-            style={{ paddingTop: "10px" }}
-            className="custom-drawer-sub-card-label"
-          >
-            <p>Kategorija</p>
-          </div>
-          <div className="ad-filters-technologies-checkboxes">
-            <FormGroup>
-              {filters?.categories?.map((tag, index) => (
-                <FormControlLabel
-                  key={index}
-                  control={
-                    <Checkbox
-                      onChange={handleCheckboxesCat}
-                      value={tag.name}
-                      checked={tag.isChecked}
-                      className="ad-filters-checkbox"
-                    />
-                  }
-                  label={tag.name}
-                />
-              ))}
-            </FormGroup>
-          </div> */}
         </div>
         <div className="custom-drawer-submit">
           <button
             className="c-btn c-btn--primary"
             data-testid="custom-drawer-submit-search"
-            // disabled={!hasSelectedFilters()}
           >
             {/* {t("common.search")} */}
             Pretraži
@@ -179,12 +147,7 @@ const DocsFilters = ({ open, handleClose, setPage, category }) => {
 
   return (
     <div className="docs-filters">
-      <Drawer
-        // PaperProps={{ style: { minWidth: "300px" } }}
-        anchor="right"
-        open={open}
-        onClose={handleClose}
-      >
+      <Drawer anchor="right" open={open} onClose={handleClose}>
         {list()}
       </Drawer>
     </div>
@@ -195,7 +158,6 @@ DocsFilters.propTypes = {
   open: PropType.any,
   handleClose: PropType.func,
   setPage: PropType.func,
-  category: PropType.string
 };
 
 export default DocsFilters;

src/constants/pages.js

@@ -21,5 +21,6 @@ export const STATS_PAGE = '/statistics';
 export const REGISTER_PAGE = '/register';
 export const CREATE_AD_PAGE = '/create-ad';
 export const FILES_PAGE = '/files';
+export const FILES_DEPTH_PAGE = '/files/:id';
 export const FILES_VIEW_PAGE = '/files-view';
 export const ADD_FILE = '/add-file';

src/pages/FilesPage/FileTable.js

@@ -24,7 +24,7 @@ import xIcon from "../../assets/images/x.png";
 import Button from "../../components/Button/Button";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import { FETCH_FILES_LOADING } from "../../store/actions/files/fileActionConstants";
-import { useHistory } from "react-router";
+import { useHistory, useParams } from "react-router";
 
 const FileTable = ({ trigger }) => {
   const [file, setFile] = useState(null);
@@ -33,6 +33,7 @@ const FileTable = ({ trigger }) => {
   const [page, setPage] = useState(1);
   const [toggleFiltersDrawer, setToggleFiltersDrawer] = useState(false);
   const [isSearchFieldVisible, setIsSearchFieldVisible] = useState(false);
+  let { id } = useParams();
   const [fileForDelete, setFileForDelete] = useState({
     open: false,
     title: "",
@@ -69,14 +70,14 @@ const FileTable = ({ trigger }) => {
         payload: {
           pageSize: 3,
           currentPage: page,
-          categories: [null],
+          categoryId: id,
           extensions: [],
           tags: [],
           content: "",
         },
       })
     );
-  }, []);
+  }, [id]);
 
   const handleChange = (_, value) => {
     handleFilters(value);
@@ -84,8 +85,6 @@ const FileTable = ({ trigger }) => {
   };
 
   const handleFilters = (value) => {
-    var catFilters = [null];
-
     var extFilters = [];
     filters.extensions
       ?.filter((n) => n.isChecked)
@@ -101,10 +100,10 @@ const FileTable = ({ trigger }) => {
         payload: {
           pageSize: 3,
           currentPage: value,
-          categories: catFilters,
+          categoryId: id,
           extensions: extFilters,
           tags: tagFilters,
-          content: filters.content === null ? "" : filters.content,
+          content: filters.content === undefined ? "" : filters.content,
         },
       })
     );
@@ -135,8 +134,6 @@ const FileTable = ({ trigger }) => {
 
   const handleKeyDown = (event) => {
     if (event.key === "Enter" && filters.content !== "") {
-      var catFilters = [null];
-
       var extFilters = [];
       filters.extensions
         ?.filter((n) => n.isChecked)
@@ -152,10 +149,10 @@ const FileTable = ({ trigger }) => {
           payload: {
             pageSize: 3,
             currentPage: page,
-            categories: catFilters,
+            categoryId: id,
             extensions: extFilters,
             tags: tagFilters,
-            content: filters.content,
+            content: filters.content === undefined ? "" : filters.content,
           },
         })
       );
@@ -301,7 +298,6 @@ const FileTable = ({ trigger }) => {
         open={toggleFiltersDrawer}
         handleClose={handleToggleFiltersDrawer}
         setPage={setPage}
-        category={null}
       />
 
       <div

src/pages/FilesPage/FilesPage.js

@@ -2,38 +2,26 @@ 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,
-  setChildCategoriesReq,
-} from "../../store/actions/categories/categoriesAction";
+import { setCategoriesReq } 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";
+import { FILES_PAGE } from "../../constants/pages";
 import FileTable from "./FileTable";
+import { useParams } from "react-router-dom";
 
 const FilesPage = ({ history }) => {
   const categories = useSelector(selectCategories);
-  const [categoryName, setCategoryName] = useState("");
   const dispatch = useDispatch();
   const [trigger, setTrigger] = useState(0);
+  let { id } = useParams();
 
   useEffect(() => {
-    dispatch(setCategoriesReq());
-  }, []);
-
-  const redirectToFilesPage = () => {
-    history.push(FILES_VIEW_PAGE, { category: categoryName });
-  };
-
-  const getChildCategories = (categoryId, categoryName) => {
-    setCategoryName(categoryName);
-    dispatch(
-      setChildCategoriesReq({
-        parentCategoryId: categoryId,
-        handleApiResponseSuccess: redirectToFilesPage,
-      })
-    );
-  };
+    if (id === undefined) {
+      dispatch(setCategoriesReq(undefined));
+    } else {
+      dispatch(setCategoriesReq({ parentCategoryId: id }));
+    }
+  }, [id]);
 
   const getNameHandler = (name) => {
     if (name.length > 15) return name.substr(0, 15) + "...";
@@ -66,7 +54,9 @@ const FilesPage = ({ history }) => {
                     className="c-btn c-btn--primary-outlined files-page-category-button"
                     data-testid="pattern-details-send-email"
                     onClick={() =>
-                      getChildCategories(category.id, category.name)
+                      history.push({
+                        pathname: FILES_PAGE + "/" + category.id,
+                      })
                     }
                   >
                     <img

src/request/apiEndpoints.js

@@ -71,7 +71,6 @@ export default {
   },
   categories: {
     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,12 +1,12 @@
 import { getRequest, postRequest } from ".";
 import apiEndpoints from "./apiEndpoints";
 
-export const getRootCategories = () =>
+export const getRootCategories = () => 
   getRequest(apiEndpoints.categories.rootCategories);
 
-export const getChildCategories = (parentCategoryId) =>
-  getRequest(apiEndpoints.categories.childCategories + "?parentCategoryId=" + parentCategoryId);
-
+export const getRootCategories2 = (parentCategoryId) => 
+  getRequest(apiEndpoints.categories.rootCategories + "/" + parentCategoryId);
+  
 export const getIsCategoriesChecked = (userId) =>
   getRequest(apiEndpoints.categories.isCategoriesChecked + "?userId=" + userId);
 

src/request/fileRequests.js

@@ -2,11 +2,6 @@ import { getRequest } from ".";
 import apiEndpoints from "./apiEndpoints";
 
 export const getAllFilesReq = (payload) => {
-  let categoryQuery = "";
-  for (let i = 0; i < payload.categories.length; i++) {
-    categoryQuery += `&categories=${payload.categories[i]}`;
-  }
-
   let tagQuery = "";
   for (let i = 0; i < payload.tags.length; i++) {
     tagQuery += `&tags=${payload.tags[i]}&`;
@@ -23,11 +18,11 @@ export const getAllFilesReq = (payload) => {
       payload.currentPage +
       "&pageSize=" +
       payload.pageSize +
-      categoryQuery +
       extQuery +
-      tagQuery + 
-      (payload.content === undefined ? "" : 
-      ("&content=" +
-      payload.content))
-    )
+      tagQuery +
+      (payload.categoryId === undefined
+        ? ""
+        : "&categoryId=" + payload.categoryId) +
+      (payload.content === "" ? "" : "&content=" + payload.content)
+  );
 };

src/store/actions/categories/categoriesAction.js

@@ -2,20 +2,18 @@ import {
   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,
   CHANGE_IC_CHECKED_CATEGORY,
   GRANT_CATEGORY_REQ,
   GRANT_CATEGORY_ERR,
-  GRANT_CATEGORY_SUCCESS
+  GRANT_CATEGORY_SUCCESS,
 } from "./categoriesActionConstants";
 
-export const setCategoriesReq = () => ({
+export const setCategoriesReq = (payload) => ({
   type: FETCH_ROOT_CATEGORIES_REQ,
+  payload,
 });
 
 export const setCategoriesError = (payload) => ({
@@ -28,24 +26,9 @@ export const setCategories = (payload) => ({
   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,
-});
-
 export const setIsCategoriesCheckedReq = (payload) => ({
   type: FETCH_IS_CATEGORIES_CHECKED_REQ,
-  payload
+  payload,
 });
 
 export const setIsCategoriesCheckedError = (payload) => ({
@@ -65,7 +48,7 @@ export const changeIsCheckedCategory = (payload) => ({
 
 export const setGrantCategoriesReq = (payload) => ({
   type: GRANT_CATEGORY_REQ,
-  payload
+  payload,
 });
 
 export const setGrantCategoriesError = (payload) => ({
@@ -77,4 +60,3 @@ export const setGrantCategories = (payload) => ({
   type: GRANT_CATEGORY_SUCCESS,
   payload,
 });
-

src/store/actions/categories/categoriesActionConstants.js

@@ -5,7 +5,6 @@ import {
 } from "../actionHelpers";
 
 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";
 
@@ -18,17 +17,6 @@ export const FETCH_ROOT_CATEGORIES_ERR = createErrorType(
 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(
   FETCH_IS_CATEGORIES_CHECKED_SCOPE
 );

src/store/reducers/category/categoriesReducer.js

@@ -2,8 +2,6 @@ import {
   CHANGE_IC_CHECKED_CATEGORY,
   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,
@@ -22,8 +20,6 @@ export default createReducer(
   {
     [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,
@@ -47,20 +43,6 @@ 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

@@ -13,42 +13,28 @@ import { addHeaderToken } from "../../request";
 import { rejectErrorCodeHelper } from "../../util/helpers/rejectErrorCodeHelper";
 import {
   FETCH_ROOT_CATEGORIES_REQ,
-  FETCH_CHILD_CATEGORIES_REQ,
   FETCH_IS_CATEGORIES_CHECKED_REQ,
   GRANT_CATEGORY_REQ,
 } from "../actions/categories/categoriesActionConstants";
 import {
   getRootCategories,
-  getChildCategories,
   getIsCategoriesChecked,
   grantCategoryRequest,
+  getRootCategories2,
 } from "../../request/categoriesRequest";
 
-export function* getRootCategoriesSaga() {
+export function* getRootCategoriesSaga({ payload }) {
   try {
     const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
     yield call(addHeaderToken, JwtToken);
-    const result = yield call(getRootCategories);
-    yield put(setCategories(result.data));
-  } catch (error) {
-    const errorMessage = yield call(rejectErrorCodeHelper, error);
-    yield put(setCategoriesError(errorMessage));
-  }
-}
-
-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);
+    let result = null;
+    if (payload === undefined) {
+      result = yield call(getRootCategories);
     } else {
-      // get child categories of selected category
-      yield put(setCategories(result.data));
+      result = yield call(getRootCategories2, payload.parentCategoryId);
     }
+    console.log("Result:", result);
+    yield put(setCategories(result.data));
   } catch (error) {
     const errorMessage = yield call(rejectErrorCodeHelper, error);
     yield put(setCategoriesError(errorMessage));
@@ -82,7 +68,6 @@ export function* grantCategoriesCheckedSaga({ payload }) {
 export default function* categoriesSaga() {
   yield all([
     takeLatest(FETCH_ROOT_CATEGORIES_REQ, getRootCategoriesSaga),
-    takeLatest(FETCH_CHILD_CATEGORIES_REQ, getChildCategoriesSaga),
     takeLatest(FETCH_IS_CATEGORIES_CHECKED_REQ, getIsCategoriesCheckedSaga),
     takeLatest(GRANT_CATEGORY_REQ, grantCategoriesCheckedSaga),
   ]);