src/AppRoutes.js

   REGISTER_PAGE,
   CREATE_AD_PAGE,
   FILES_PAGE,
+  FILES_VIEW_PAGE,
 } from "./constants/pages";
 
 import LoginPage from "./pages/LoginPage/LoginPageMUI";
 import StatsPage from "./pages/StatsPage/StatsPage";
 import RegisterPage from "./pages/RegisterPage/RegisterPage";
 import CreateAdPage from "./pages/AdsPage/CreateAdPage";
-import DocsPage from "./pages/DocsPage/DocsPage";
 import FilesPage from "./pages/FilesPage/FilesPage";
+import FilesViewPage from "./pages/FilesPage/FilesViewPage";
 
 const AppRoutes = () => {
   const dispatch = useDispatch();
   }, [location]);
   return (
     <Switch>
-      <Route exact path={'/docs'} component={DocsPage} />
+      <Route exact path={FILES_VIEW_PAGE} component={FilesViewPage} />
       <Route exact path={BASE_PAGE} component={LoginPage} />
       <Route path={NOT_FOUND_PAGE} component={NotFoundPage} />
       {/* <Route path={USERS_PAGE} component={UsersPage} /> */}

src/components/Docs/DocsFilters.js

 } from "@mui/material";
 import filterIcon from "../../assets/images/filter_vector.png";
 import x from "../../assets/images/x.png";
+import { useSelector } from "react-redux";
 
-const tags = [
-  { name: "Tag", isChecked: false },
-  { name: "Second tag", isChecked: true },
-];
+// const tags = [
+//   { name: ".txt", isChecked: false },
+//   { name: ".pdf", isChecked: true },
+//   { name: ".docx", isChecked: true },
+// ];
 
 const DocsFilters = ({ open, handleClose }) => {
+  const { filters } = useSelector((s) => s.fileFilters);
+
   const handleCheckboxes = (e) => {
     const { value } = e.target;
-    // dispatch(changeIsCheckedValue(value));
     console.log(value);
   };
 
-  const submitFiltersHandler = () =>{
-    alert('Pamet u glavu')
-  }
+  const submitFiltersHandler = () => {
+    alert("Pamet u glavu");
+  };
 
   const list = () => (
     <Box
           </div>
           <div className="ad-filters-technologies-checkboxes">
             <FormGroup>
-              {tags?.map((tag, index) => (
+              {filters?.extensions?.map((tag, index) => (
                 <FormControlLabel
                   key={index}
                   control={
           </div>
           <div className="ad-filters-technologies-checkboxes">
             <FormGroup>
-              {tags?.map((tag, index) => (
+              {filters?.tags?.map((tag, index) => (
                 <FormControlLabel
                   key={index}
                   control={
           </div>
           <div className="ad-filters-technologies-checkboxes">
             <FormGroup>
-              {tags?.map((tag, index) => (
+              {filters?.categories?.map((tag, index) => (
                 <FormControlLabel
                   key={index}
                   control={

src/constants/pages.js

 export const REGISTER_PAGE = '/register';
 export const CREATE_AD_PAGE = '/create-ad';
 export const FILES_PAGE = '/files';
+export const FILES_VIEW_PAGE = '/files-view';

src/pages/DocsPage/DocsPage.js → src/pages/FilesPage/FilesViewPage.js

 import React from "react";
+import { useEffect } from "react";
 import { useState } from "react";
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import FilterButton from "../../components/Button/FilterButton";
 import DocsFilters from "../../components/Docs/DocsFilters";
+import { getFileFiltersReq, getFilesReq } from "../../store/actions/files/fileActions";
 
-const docs = [
-  {
-    id: 1,
-    name: "probaFile",
-    type: ".jpg",
-    sizeMb: 0.005,
-  },
-  {
-    id: 1,
-    name: "probaFile",
-    type: ".txt",
-    sizeMb: 0.005,
-  },
-  {
-    id: 1,
-    name: "probaFile",
-    type: ".docx",
-    sizeMb: 0.005,
-  },
-];
-const DocsPage = () => {
+const FilesViewPage = () => {
   const [toggleFiltersDrawer, setToggleFiltersDrawer] = useState(false);
+  const {files} = useSelector(s => s.files)
+
+  const dispatch = useDispatch();
 
   const handleToggleFiltersDrawer = () => {
     setToggleFiltersDrawer((oldState) => !oldState);
   };
 
+  useEffect(() => {
+    dispatch(getFileFiltersReq());
+  }, []);
+
+  // disjoin the effect because we want the metods to trigger on different occassions
+  useEffect(() => {
+    dispatch(getFilesReq());
+  }, []);
+
   return (
     <div>
       <div className="l-t-rectangle"></div>
                   Veličina dokumenta
                 </th>
                 {/* <th> */}
-                  {/* {t("users.position")} */}
-                  {/* Document size (MB) */}
-                  {/* Kategorija dokumenta */}
+                {/* {t("users.position")} */}
+                {/* Document size (MB) */}
+                {/* Kategorija dokumenta */}
                 {/* </th> */}
                 {/* {editEnable && <th></th>} */}
               </tr>
             </thead>
 
             <tbody>
-              {docs.map((n) => (
+              {files?.map((n) => (
                 <tr key={n.id} className="secondaryRow">
                   <td className="docs-name">{n.name}</td>
-                  <td>{n.type}</td>
-                  <td className="profession">{n.sizeMb}MB</td>
+                  <td>{n.extension}</td>
+                  <td className="profession">{n.size}kB</td>
                   {/* <td className="profession">cat</td> */}
                 </tr>
               ))}
   );
 };
 
-export default DocsPage;
+export default FilesViewPage;

src/request/apiEndpoints.js

   },
   screeningTest: {
     allTests: base + "/screeningtest",
-    createTest:base + '/screeningtest'
+    createTest: base + "/screeningtest",
   },
+  fileTags: {
+    filters: base + "/tags",
+  },
+  files:{
+    all: base + "/files"
+  }
 };

src/request/fileRequests.js

+import { getRequest } from ".";
+import apiEndpoints from "./apiEndpoints";
+
+export const getAllFilesReq = () => getRequest(apiEndpoints.files.all);

src/request/tagsRequest.js

+import { getRequest } from ".";
+import apiEndpoints from "./apiEndpoints";
+
+export const getFileFilters = () => getRequest(apiEndpoints.fileTags.filters);

src/store/actions/files/fileActionConstants.js

+import {
+  createErrorType,
+  createFetchType,
+  createLoadingType,
+  createSuccessType,
+} from "../actionHelpers";
+
+const FILE_FILTERS_SCOPE = "FILE_FILTERS";
+export const FILE_FILTERS_REQ = createFetchType(FILE_FILTERS_SCOPE);
+export const FILE_FILTERS_ERR = createErrorType(FILE_FILTERS_SCOPE);
+export const FILE_FILTERS_SUCCESS = createSuccessType(FILE_FILTERS_SCOPE);
+export const FILE_FILTERS_LOADING = createLoadingType(FILE_FILTERS_SCOPE);
+
+const FETCH_FILES_SCOPE = "FETCH_FILES";
+export const FETCH_FILES_REQ = createFetchType(FETCH_FILES_SCOPE);
+export const FETCH_FILES_ERR = createErrorType(FETCH_FILES_SCOPE);
+export const FETCH_FILES_SUCCESS = createSuccessType(FETCH_FILES_SCOPE);
+export const FETCH_FILES_LOADING = createLoadingType(FETCH_FILES_SCOPE);

src/store/actions/files/fileActions.js

+import {
+    FETCH_FILES_ERR,
+    FETCH_FILES_REQ,
+    FETCH_FILES_SUCCESS,
+  FILE_FILTERS_ERR,
+  FILE_FILTERS_REQ,
+  FILE_FILTERS_SUCCESS,
+} from "./fileActionConstants";
+
+export const getFileFiltersReq = () => ({
+  type: FILE_FILTERS_REQ,
+});
+
+export const getFileFiltersError = (payload) => ({
+  type: FILE_FILTERS_ERR,
+  payload,
+});
+
+export const getFileFiltersSuccess = (payload) => ({
+  type: FILE_FILTERS_SUCCESS,
+  payload,
+});
+
+export const getFilesReq = () => ({
+  type: FETCH_FILES_REQ,
+});
+
+export const getFileError = (payload) => ({
+  type: FETCH_FILES_ERR,
+  payload,
+});
+
+export const getFileSuccess = (payload) => ({
+  type: FETCH_FILES_SUCCESS,
+  payload,
+});

src/store/reducers/files/fileFiltersReducer.js

+import createReducer from "../../utils/createReducer";
+import {
+  FILE_FILTERS_ERR,
+  FILE_FILTERS_SUCCESS,
+} from "../../actions/files/fileActionConstants";
+
+const initialState = {
+  filters: {},
+  fetchFileFiltersErrorMessage: "",
+};
+
+export default createReducer(
+  {
+    [FILE_FILTERS_SUCCESS]: setFileFilters,
+    [FILE_FILTERS_ERR]: setFileFiltersErrorMessage,
+  },
+  initialState
+);
+
+function setFileFilters(state, action) {
+  return {
+    ...state,
+    filters: {
+      categories: action.payload.categories.map((n) => ({
+        ...n,
+        isChecked: false,
+      })),
+      tags: action.payload.tags.map((n) => ({ ...n, isChecked: false })),
+      extensions: action.payload.extensions.map((n) => ({ name: n, isChecked: false })),
+    },
+  };
+}
+
+function setFileFiltersErrorMessage(state, action) {
+  return {
+    ...state,
+    fetchFileFiltersErrorMessage: action.payload,
+  };
+}

src/store/reducers/files/getFilesReducer.js

+import createReducer from "../../utils/createReducer";
+import {
+  FETCH_FILES_ERR,
+  FETCH_FILES_SUCCESS,
+} from "../../actions/files/fileActionConstants";
+
+const initialState = {
+  files: [],
+  fetchFilesErrorMessage: "",
+};
+
+export default createReducer(
+  {
+    [FETCH_FILES_SUCCESS]: setFiles,
+    [FETCH_FILES_ERR]: setFilesErrorMessage,
+  },
+  initialState
+);
+
+function setFiles(state, action) {
+  return {
+    ...state,
+    files: action.payload,
+  };
+}
+
+function setFilesErrorMessage(state, action) {
+  return {
+    ...state,
+    fetchFilesErrorMessage: action.payload,
+  };
+}

src/store/reducers/index.js

 import statusUpdateReducer from "./processes/statusUpdateReducer";
 import interviewerUpdateReducer from "./processes/interviewerUpdateReducer";
 import screeningTestsReducer from "./screeningTests/screeningTestsReducer";
+import fileFiltersReducer from "./files/fileFiltersReducer";
+import getFilesReducer from "./files/getFilesReducer";
 
 export default combineReducers({
   login: loginReducer,
   applyForAd: applyForAdReducer,
   statusUpdate: statusUpdateReducer,
   interviewerUpdate: interviewerUpdateReducer,
-  screeningTests:screeningTestsReducer
+  screeningTests:screeningTestsReducer,
+  fileFilters: fileFiltersReducer,
+  files: getFilesReducer
 });

src/store/saga/filesSaga.js

+import { all, call, put, takeEvery } from "redux-saga/effects";
+import { JWT_TOKEN } from "../../constants/localStorage";
+import { addHeaderToken } from "../../request";
+import { getAllFilesReq } from "../../request/fileRequests";
+import { authScopeStringGetHelper } from "../../util/helpers/authScopeHelpers";
+import { rejectErrorCodeHelper } from "../../util/helpers/rejectErrorCodeHelper";
+import { FETCH_FILES_REQ } from "../actions/files/fileActionConstants";
+import {
+    getFileError,
+  getFileSuccess,
+} from "../actions/files/fileActions";
+
+export function* getAll() {
+  try {
+    const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
+    yield call(addHeaderToken, JwtToken);
+    const result = yield call(getAllFilesReq);
+    yield put(getFileSuccess(result.data));
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const errorMessage = yield call(rejectErrorCodeHelper, error);
+      yield put(getFileError(errorMessage));
+    }
+  }
+}
+export default function* filesSaga() {
+  yield all([takeEvery(FETCH_FILES_REQ, getAll)]);
+}

src/store/saga/index.js

 import registerSaga from "./registerSaga";
 import applicantsSaga from "./applicantsSaga";
 import screeningTestsSaga from "./screeningTestsSaga";
+import tagsSaga from "./tagsSaga";
+import filesSaga from "./filesSaga";
 
 export default function* rootSaga() {
   yield all([
     scheduleSaga(),
     registerSaga(),
     applicantsSaga(),
-    screeningTestsSaga()
+    screeningTestsSaga(),
+    tagsSaga(),
+    filesSaga()
   ]);
 }

src/store/saga/tagsSaga.js

+import { all, call, put, takeEvery } from "redux-saga/effects";
+import { JWT_TOKEN } from "../../constants/localStorage";
+import { addHeaderToken } from "../../request";
+import { getFileFilters } from "../../request/tagsRequest";
+import { authScopeStringGetHelper } from "../../util/helpers/authScopeHelpers";
+import { rejectErrorCodeHelper } from "../../util/helpers/rejectErrorCodeHelper";
+import { FILE_FILTERS_REQ } from "../actions/files/fileActionConstants";
+import {
+  getFileFiltersError,
+  getFileFiltersSuccess,
+} from "../actions/files/fileActions";
+
+export function* getFileFiltersGen() {
+  try {
+    const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
+    yield call(addHeaderToken, JwtToken);
+    const result = yield call(getFileFilters);
+    yield put(getFileFiltersSuccess(result.data));
+  } catch (error) {
+    if (error.response && error.response.data) {
+      const errorMessage = yield call(rejectErrorCodeHelper, error);
+      yield put(getFileFiltersError(errorMessage));
+    }
+  }
+}
+export default function* tagsSaga() {
+  yield all([takeEvery(FILE_FILTERS_REQ, getFileFiltersGen)]);
+}