Implemented add category & added new design

src/assets/styles/components/_files.scss

 .files-file-routing:hover {
   background-color: #f0f0f0;
 }
+
+.add-categories-files {
+  display: flex;
+}
+
+.add-categories-files > * {
+  margin-left: 6px !important;
+}
+
+.files-page-card-input {
+  display: flex;
+}
+
+.add-category-input input,
+.files-page-card-input input {
+  width: 100%;
+  border: 1px solid #e4e4e4 !important;
+  padding: 16.5px 20px !important;
+  border-radius: 4px;
+  outline: none;
+}
+
+.files-page-card-input > button {
+  margin-left: 6px;
+}
+
+.files-category-custom-modal-buttons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+
+.files-category-custom-modal-buttons button {
+  margin-left: 8px;
+}

src/components/Docs/DocsFilters.js

   updateFileFilterTag,
 } from "../../store/actions/files/fileActions";
 import { useParams } from "react-router-dom";
+import { PAGE_SIZE_FILES } from "../../constants/keyCodeConstants";
 
 const DocsFilters = ({ open, handleClose, setPage, setFile }) => {
   const dispatch = useDispatch();
     dispatch(
       getFilesReq({
         payload: {
-          pageSize: 6,
+          pageSize: PAGE_SIZE_FILES,
           currentPage: 1,
           categoryId: id,
           extensions: extFilters,

src/components/Files/TreeViewFiles.js

 import { useDispatch, useSelector } from "react-redux";
 import { setAllCategoriesReq } from "../../store/actions/categories/categoriesAction";
 import { selectAllCategories } from "../../store/selectors/categoriesSelector";
+import PropTypes from "prop-types";
 
-function TreeViewFiles() {
+function TreeViewFiles({ onSelectCategory }) {
   const dispatch = useDispatch();
   const categories = useSelector(selectAllCategories);
   useEffect(() => {
   }, []);
 
   const renderTree = (nodes) => (
-    <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
+    <TreeItem
+      key={nodes.id}
+      nodeId={nodes.id}
+      label={nodes.name}
+      onClick={() => onSelectCategory({ id: nodes.id, name: nodes.name })}
+    >
       {Array.isArray(nodes.treeViewCategories)
         ? nodes.treeViewCategories.map((node) => renderTree(node))
         : null}
   );
 }
 
+TreeViewFiles.propTypes = {
+  onSelectCategory: PropTypes.func,
+};
+
 export default TreeViewFiles;

src/pages/FilesPage/AddFile.js

 } from "../../store/actions/tags/tagsAction";
 import { selectTags } from "../../store/selectors/tagsSelector";
 import { uploadFileReq } from "../../store/actions/uploadFile/uploadFileActions";
-import { FILES_VIEW_PAGE } from "../../constants/pages";
+import { FILES_PAGE } from "../../constants/pages";
 import PropTypes from "prop-types";
 import TreeViewFiles from "../../components/Files/TreeViewFiles";
+import Button from "../../components/Button/Button";
 
 const AddFile = ({ history }) => {
   const [dropzoneActive, setDropzoneActive] = useState(false);
   const dispatch = useDispatch();
   // const categories = useSelector(selectCategories);
   const tags = useSelector(selectTags);
-  // const [selectedCategory, setSelectedCategory] = useState(null);
+  const [selectedCategory, setSelectedCategory] = useState({
+    id: -1,
+    name: "",
+  });
   const { t } = useTranslation();
 
   useEffect(() => {
     setPdfFile(null);
     setTitle("");
     setShowMessage(true);
+    setSelectedCategory({ id: -1, name: "" });
   };
 
   useEffect(() => {
     setPdfFile(selectedFile);
   };
 
-  // const selectCategoryHandler = (e) => {
-  //   setSelectedCategory(e.target.value);
-  // };
+  const selectCategoryHandler = (category) => {
+    setSelectedCategory(category);
+  };
 
   const onChangeTagsCheckbox = (id) => {
     dispatch(changeTagIsCheckedValue(id));
       .filter((tag) => tag.isChecked === true)
       .map((tag) => Number(tag.id));
 
-    if (
-      title === "" ||
-      tagsIds.length === 0 ||
-      pdfFile === null
-    )
-      return;
+    if (title === "" || tagsIds.length === 0 || pdfFile === null) return;
 
     dispatch(
       uploadFileReq({
         title,
-        categoryId: -1,
+        categoryId: selectedCategory.id,
         tagsIds,
         fileToUpload: pdfFile,
         onSuccessUploadFile,
                 </MenuItem>
               ))}
           </Select> */}
-          <TreeViewFiles/>
+          <TreeViewFiles onSelectCategory={selectCategoryHandler} />
+        </div>
+      </div>
+
+      <div className="files-page-card">
+        <div className="files-page-card-title">
+          <h1>Selected Category</h1>
+        </div>
+        <div className="files-page-card-input">
+          <input
+            type="text"
+            disabled={true}
+            value={selectedCategory.id !== -1 ? selectedCategory.name : "null"}
+          />
+          <Button
+            type="button"
+            variant="contained"
+            className="c-btn c-btn--primary"
+            onClick={() => setSelectedCategory({ id: -1, name: "" })}
+            disabled={selectedCategory.id === -1}
+          >
+            Set root
+          </Button>
         </div>
       </div>
 
         >
           <p
             className="applicant-ads-back-button"
-            onClick={() => history.push(FILES_VIEW_PAGE)}
+            onClick={() => history.push(FILES_PAGE)}
           >
             Nazad na sve fajlove
           </p>

src/pages/FilesPage/FilesPage.js

 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 {
+  createCategoryReq,
+  setCategoriesReq,
+} from "../../store/actions/categories/categoriesAction";
 import {
   selectCategories,
   selectChildParentRelations,
 import FileTable from "./FileTable";
 import { useParams } from "react-router-dom";
 import { ADD_FILE } from "../../constants/pages";
+import CustomModal from "../../components/UI/CustomModal";
+import xIcon from "../../assets/images/x.png";
+import plusIcon from "../../assets/images/plus.png";
+import Button from "../../components/Button/Button";
 
 const FilesPage = ({ history }) => {
   const categories = useSelector(selectCategories);
   const childParentRelations = useSelector(selectChildParentRelations);
   const dispatch = useDispatch();
   const [trigger, setTrigger] = useState(0);
+  const [openCreateCategoryModal, setOpenCreateCategoryModal] = useState(false);
+  const [createCategoryName, setCreateCategoryName] = useState("");
   let { id } = useParams();
 
   useEffect(() => {
     }
   }, [id]);
 
+  const changeOpenCreateCategoryModal = () => {
+    setOpenCreateCategoryModal((oldState) => !oldState);
+  };
+
   const getNameHandler = (name) => {
     if (name.length > 15) return name.substr(0, 15) + "...";
     return name;
   };
 
+  const onSuccessCreatingCategoryHandler = () => {
+    dispatch(
+      setCategoriesReq(id === undefined ? undefined : { parentCategoryId: id })
+    );
+    setOpenCreateCategoryModal(false);
+  };
+
+  const createCategoryHandler = () => {
+    dispatch(
+      createCategoryReq({
+        name: createCategoryName,
+        parentId: id !== undefined ? id : null,
+        onSuccess: onSuccessCreatingCategoryHandler,
+      })
+    );
+    setCreateCategoryName("");
+  };
+
   const ColoredLine = () => (
     <hr
       style={{
     <>
       <div className="l-t-rectangle"></div>
       <div className="r-b-rectangle"></div>
+      <CustomModal
+        classes="files-custom-modal"
+        open={openCreateCategoryModal}
+        onCloseModal={changeOpenCreateCategoryModal}
+      >
+        <div className="add-pattern-modal-header">
+          <div className="add-pattern-modal-header-title">
+            <div className="add-pattern-modal-header-title-image">
+              <img src={plusIcon} alt="plus" />
+            </div>
+            <div className="add-pattern-modal-header-title-title">
+              <p>Create category</p>
+            </div>
+          </div>
+          <div
+            className="add-pattern-modal-header-close"
+            onClick={changeOpenCreateCategoryModal}
+          >
+            <img src={xIcon} alt="close" />
+          </div>
+        </div>
+        <div className="add-category-input">
+          <input
+            type="text"
+            placeholder="Category name"
+            value={createCategoryName}
+            onChange={(e) => setCreateCategoryName(e.target.value)}
+          />
+        </div>
+        <div className="files-category-custom-modal-buttons">
+          <Button
+            type="button"
+            variant="contained"
+            className="c-btn c-btn--primary-outlined"
+            onClick={changeOpenCreateCategoryModal}
+          >
+            Close
+          </Button>
+          <Button
+            type="button"
+            variant="contained"
+            className="c-btn c-btn--primary"
+            onClick={createCategoryHandler}
+          >
+            Create category
+          </Button>
+        </div>
+      </CustomModal>
       <div
         className="pl-144"
         style={{ paddingTop: "36px" }}
               }}
             >
               <h1 className="page-heading">Folderi</h1>
-              <div style={{ display: "flex" }}>
+              <div className="add-categories-files">
                 <IconButton
                   className="c-btn ads-page-btn c-btn--primary add-ad-btn filesPage"
                   onClick={() => history.push(ADD_FILE)}
                 </IconButton>
                 <IconButton
                   className="c-btn ads-page-btn c-btn--primary add-ad-btn filesPage"
-                  onClick={() => history.push(ADD_FILE)}
+                  onClick={changeOpenCreateCategoryModal}
                 >
                   + Kategorija
                 </IconButton>

src/pages/FilesPage/FilesViewPage.js

 import xIcon from "../../assets/images/x.png";
 import ConfirmDialog from "../../components/MUI/ConfirmDialog";
 import CustomModal from "../../components/UI/CustomModal";
+import { PAGE_SIZE_FILES } from "../../constants/keyCodeConstants";
 
 const FilesViewPage = ({ history }) => {
   const [toggleFiltersDrawer, setToggleFiltersDrawer] = useState(false);
     dispatch(
       getFilesReq({
         payload: {
-          pageSize: 6,
+          pageSize: PAGE_SIZE_FILES,
           currentPage: page,
           categories: [state && state.category],
           extensions: [],
     dispatch(
       getFilesReq({
         payload: {
-          pageSize: 6,
+          pageSize: PAGE_SIZE_FILES,
           currentPage: value,
           categories: catFilters,
           extensions: extFilters,
       dispatch(
         getFilesReq({
           payload: {
-            pageSize: 6,
+            pageSize: PAGE_SIZE_FILES,
             currentPage: page,
             categories: catFilters,
             extensions: extFilters,

src/request/apiEndpoints.js

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

src/request/categoriesRequest.js

 
 export const getAllCategories = () =>
   getRequest(apiEndpoints.categories.allCategories);
+
+export const createCategoryRequest = (payload) =>
+  postRequest(apiEndpoints.categories.createCategory, payload);

src/store/actions/categories/categoriesAction.js

   FETCH_ALL_CATEGORIES_ERR,
   FETCH_ALL_CATEGORIES_REQ,
   FETCH_ALL_CATEGORIES_SUCCESS,
+  CREATE_CATEGORY_REQ,
+  CREATE_CATEGORY_ERR,
+  CREATE_CATEGORY_SUCCESS,
 } from "./categoriesActionConstants";
 
 export const setCategoriesReq = (payload) => ({
   type: FETCH_ALL_CATEGORIES_SUCCESS,
   payload,
 });
+
+export const createCategoryReq = (payload) => ({
+  type: CREATE_CATEGORY_REQ,
+  payload,
+});
+
+export const createCategoryError = () => ({
+  type: CREATE_CATEGORY_ERR
+});
+
+export const setCreateCategory = (payload) => ({
+  type: CREATE_CATEGORY_SUCCESS,
+  payload,
+});

src/store/actions/categories/categoriesActionConstants.js

 const FETCH_IS_CATEGORIES_CHECKED_SCOPE = "FETCH_IS_CATEGORIES_CHECKED";
 const GRANT_CATEGORY_SCOPE = "GRANT_CATEGORY";
 const FETCH_ALL_CATEGORIES_SCOPE = "FETCH_ALL_CATEGORIES";
+const CREATE_CATEGORY_SCOPE = "CREATE_CATEGORY";
 
 export const FETCH_ROOT_CATEGORIES_REQ = createFetchType(
   FETCH_ROOT_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 CREATE_CATEGORY_REQ = createFetchType(CREATE_CATEGORY_SCOPE);
+export const CREATE_CATEGORY_ERR = createErrorType(CREATE_CATEGORY_SCOPE);
+export const CREATE_CATEGORY_SUCCESS = createSuccessType(CREATE_CATEGORY_SCOPE);
+
 export const CHANGE_IC_CHECKED_CATEGORY = "CHANGE_IC_CHECKED_CATEGORY";

src/store/reducers/category/categoriesReducer.js

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

src/store/saga/categoriesSaga.js

   setGrantCategories,
   setGrantCategoriesError,
   setAllCategories,
-  setAllCategoriesError
+  setAllCategoriesError,
+  setCreateCategory,
 } 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
+  FETCH_ALL_CATEGORIES_REQ,
+  CREATE_CATEGORY_REQ,
 } from "../actions/categories/categoriesActionConstants";
 import {
   getRootCategories,
   getIsCategoriesChecked,
   grantCategoryRequest,
   getRootCategories2,
-  getAllCategories
+  getAllCategories,
+  createCategoryRequest,
 } from "../../request/categoriesRequest";
 
 export function* getRootCategoriesSaga({ payload }) {
     } else {
       result = yield call(getRootCategories2, payload.parentCategoryId);
     }
-    yield put(setCategories({categories: result.data.categories, childParentRelations: result.data.childParentRelations}));
+    yield put(
+      setCategories({
+        categories: result.data.categories,
+        childParentRelations: result.data.childParentRelations,
+      })
+    );
   } catch (error) {
     const errorMessage = yield call(rejectErrorCodeHelper, error);
     yield put(setCategoriesError(errorMessage));
   }
 }
 
+export function* createCategorySaga({ payload }) {
+  try {
+    const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
+    yield call(addHeaderToken, JwtToken);
+    yield call(createCategoryRequest, {
+      name: payload.name,
+      parentId: payload.parentId,
+    });
+    yield put(setCreateCategory());
+    if (payload.onSuccess) yield call(payload.onSuccess);
+  } catch (error) {
+    const errorMessage = yield call(rejectErrorCodeHelper, error);
+    yield put(setGrantCategoriesError(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),
+    takeLatest(CREATE_CATEGORY_REQ, createCategorySaga),
   ]);
 }

src/store/saga/filesSaga.js

   try {
     const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
     yield call(addHeaderToken, JwtToken);
+
     const result = yield call(getAllFilesReq, payload.payload);
     yield put(getFileSuccess(result.data));
     if (payload.payload.onSuccess) {