represent categories and files as tree vire

package.json

     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@mui/icons-material": "^5.0.5",
-    "@mui/material": "^5.0.6",
+    "@mui/lab": "^5.0.0-alpha.120",
+    "@mui/material": "^5.11.10",
     "@mui/x-data-grid": "^5.0.1",
     "@mui/x-date-pickers": "^5.0.10",
     "@reduxjs/toolkit": "^1.5.1",

src/components/Files/TreeViewFiles.js

+import React, { useEffect } from "react";
+import TreeView from "@mui/lab/TreeView";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import TreeItem from "@mui/lab/TreeItem";
+import { useDispatch, useSelector } from "react-redux";
+import { setAllCategoriesReq } from "../../store/actions/categories/categoriesAction";
+import { selectAllCategories } from "../../store/selectors/categoriesSelector";
+
+function TreeViewFiles() {
+  const dispatch = useDispatch();
+  const categories = useSelector(selectAllCategories);
+  useEffect(() => {
+    dispatch(setAllCategoriesReq());
+  }, []);
+
+  const renderTree = (nodes) => (
+    <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
+      {Array.isArray(nodes.treeViewCategories)
+        ? nodes.treeViewCategories.map((node) => renderTree(node))
+        : null}
+    </TreeItem>
+  );
+  return categories.length < 0 ? (
+    <p>Loading....</p>
+  ) : (
+    categories.map((category) => (
+      <TreeView
+        key={category.id}
+        aria-label="rich object"
+        defaultCollapseIcon={<ExpandMoreIcon />}
+        defaultExpandIcon={<ChevronRightIcon />}
+        sx={{ flexGrow: 1, overflowY: "auto" }}
+      >
+        {renderTree(category)}
+      </TreeView>
+    ))
+  );
+}
+
+export default TreeViewFiles;

src/pages/FilesPage/AddFile.js

 import React, { useState } from "react";
-import { Checkbox, FormControlLabel, MenuItem, Select } from "@mui/material";
+import { Checkbox, FormControlLabel } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import uploadIcon from "../../assets/images/upload.png";
 import IconButton from "../../components/IconButton/IconButton";
 import { useSelector, useDispatch } from "react-redux";
-import { selectCategories } from "../../store/selectors/categoriesSelector";
+// import { selectCategories } from "../../store/selectors/categoriesSelector";
 import { useEffect } from "react";
 import { setCategoriesReq } from "../../store/actions/categories/categoriesAction";
 import {
 import { uploadFileReq } from "../../store/actions/uploadFile/uploadFileActions";
 import { FILES_VIEW_PAGE } from "../../constants/pages";
 import PropTypes from "prop-types";
+import TreeViewFiles from "../../components/Files/TreeViewFiles";
 
 const AddFile = ({ history }) => {
   const [dropzoneActive, setDropzoneActive] = useState(false);
   const [title, setTitle] = useState("");
   const [showMessage, setShowMessage] = useState(false);
   const dispatch = useDispatch();
-  const categories = useSelector(selectCategories);
+  // const categories = useSelector(selectCategories);
   const tags = useSelector(selectTags);
-  const [selectedCategory, setSelectedCategory] = useState(null);
+  // const [selectedCategory, setSelectedCategory] = useState(null);
   const { t } = useTranslation();
 
   useEffect(() => {
     setPdfFile(selectedFile);
   };
 
-  const selectCategoryHandler = (e) => {
-    setSelectedCategory(e.target.value);
-  };
+  // const selectCategoryHandler = (e) => {
+  //   setSelectedCategory(e.target.value);
+  // };
 
   const onChangeTagsCheckbox = (id) => {
     dispatch(changeTagIsCheckedValue(id));
     dispatch(
       uploadFileReq({
         title,
-        categoryId: selectedCategory === null ? -1 : selectedCategory,
+        categoryId: -1,
         tagsIds,
         fileToUpload: pdfFile,
         onSuccessUploadFile,
           <h1>Categories</h1>
         </div>
         <div className="files-page-card-content">
-          <Select
+          {/* <Select
             labelId="files-page-card-content-select"
             id="files-page-card-content-selectt"
             sx={{ width: "100%", borderColor: "#e4e4e4 !important" }}
                   {category.name}
                 </MenuItem>
               ))}
-          </Select>
+          </Select> */}
+          <TreeViewFiles/>
         </div>
       </div>
 

src/request/apiEndpoints.js

     rootCategories: base + "/categories/root-categories",
     isCategoriesChecked: base + "/categories/granted-categories",
     grantCategory: base + "/users/grant-category",
+    allCategories:base + "/categories/all-categories"
   },
   tags: {
     allTags: base + "/tags/names",

src/request/categoriesRequest.js

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

src/store/actions/categories/categoriesAction.js

   GRANT_CATEGORY_REQ,
   GRANT_CATEGORY_ERR,
   GRANT_CATEGORY_SUCCESS,
+  FETCH_ALL_CATEGORIES_ERR,
+  FETCH_ALL_CATEGORIES_REQ,
+  FETCH_ALL_CATEGORIES_SUCCESS,
 } from "./categoriesActionConstants";
 
 export const setCategoriesReq = (payload) => ({
   type: GRANT_CATEGORY_SUCCESS,
   payload,
 });
+
+export const setAllCategoriesReq = () => ({
+  type: FETCH_ALL_CATEGORIES_REQ,
+});
+
+export const setAllCategoriesError = (payload) => ({
+  type: FETCH_ALL_CATEGORIES_ERR,
+  payload,
+});
+
+export const setAllCategories = (payload) => ({
+  type: FETCH_ALL_CATEGORIES_SUCCESS,
+  payload,
+});

src/store/actions/categories/categoriesActionConstants.js

 const FETCH_ROOT_CATEGORIES_SCOPE = "FETCH_ROOT_CATEGORIES";
 const FETCH_IS_CATEGORIES_CHECKED_SCOPE = "FETCH_IS_CATEGORIES_CHECKED";
 const GRANT_CATEGORY_SCOPE = "GRANT_CATEGORY";
+const FETCH_ALL_CATEGORIES_SCOPE = "FETCH_ALL_CATEGORIES";
 
 export const FETCH_ROOT_CATEGORIES_REQ = createFetchType(
   FETCH_ROOT_CATEGORIES_SCOPE
 export const GRANT_CATEGORY_ERR = createErrorType(GRANT_CATEGORY_SCOPE);
 export const GRANT_CATEGORY_SUCCESS = createSuccessType(GRANT_CATEGORY_SCOPE);
 
+export const FETCH_ALL_CATEGORIES_REQ = createFetchType(FETCH_ALL_CATEGORIES_SCOPE);
+export const FETCH_ALL_CATEGORIES_ERR = createErrorType(FETCH_ALL_CATEGORIES_SCOPE);
+export const FETCH_ALL_CATEGORIES_SUCCESS = createSuccessType(FETCH_ALL_CATEGORIES_SCOPE);
+
 export const CHANGE_IC_CHECKED_CATEGORY = "CHANGE_IC_CHECKED_CATEGORY";

src/store/reducers/category/categoriesReducer.js

   FETCH_IS_CATEGORIES_CHECKED_SUCCESS,
   GRANT_CATEGORY_ERR,
   GRANT_CATEGORY_SUCCESS,
+  FETCH_ALL_CATEGORIES_ERR,
+  FETCH_ALL_CATEGORIES_SUCCESS
 } from "../../actions/categories/categoriesActionConstants";
 import createReducer from "../../utils/createReducer";
 
 const initialState = {
   categories: [],
   childParentRelations: [],
+  allCategories:[],
   isCategoriesChecked: [],
   changedCategories: [],
   errorMessage: "",
     [CHANGE_IC_CHECKED_CATEGORY]: setIsCheckedCategory,
     [GRANT_CATEGORY_SUCCESS]: setStateGrantCategories,
     [GRANT_CATEGORY_ERR]: setGrantCategoriesErrorMessage,
+    [FETCH_ALL_CATEGORIES_SUCCESS]: setStateAllCategories,
+    [FETCH_ALL_CATEGORIES_ERR]: setStateAllCategoriesErrorMessage,
   },
   initialState
 );
     errorMessage: action.payload,
   };
 }
+
+function setStateAllCategories(state, action) {
+  return {
+    ...state,
+    allCategories:action.payload
+  };
+}
+
+function setStateAllCategoriesErrorMessage(state, action) {
+  return {
+    ...state,
+    errorMessage: action.payload,
+  };
+}

src/store/saga/categoriesSaga.js

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

src/store/selectors/categoriesSelector.js

   categoriesSelector,
   (state) => state.changedCategories
 );
+
+export const selectAllCategories = createSelector(
+  categoriesSelector,
+  (state) => state.allCategories
+);
+
+export const selectAllCategoriesError = createSelector(
+  categoriesSelector,
+  (state) => state.errorMessage
+);