Button archive ad

src/assets/styles/components/_ads.scss

   cursor: pointer;
 }
 .active-ads-ads-no-ads {
+  position: relative;
+  width: 100% !important;
   height: 75vh;
   display: flex;
   flex-direction: column;
   margin-bottom: 36px !important;
 }
 
+.active-ads-ads-no-ads-filters {
+  position: absolute;
+  right: 72px;
+  top: 0;
+}
+
 .active-ads-ads-ad {
   padding-left: 81px;
   display: flex;

src/pages/AdsPage/AdDetailsPage.js

 import arrow_right from "../../assets/images/arrow_right.png";
 import AdDetailsCandidateCard from "../../components/Ads/AdDetailsCandidateCard";
 import { selectLogo } from "../../util/helpers/technologiesLogos";
+import { archiveActiveAdReq } from "../../store/actions/archiveActiveAd/archiveActiveAdActions";
+import { ADS_PAGE } from "../../constants/pages";
+import { useHistory } from "react-router-dom";
 
 const AdDetailsPage = () => {
   const theme = useTheme();
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const archiveAdsSliderRef = useRef();
+  const history = useHistory();
 
   useEffect(() => {
     dispatch(setAdReq({ id }));
     ],
   };
 
+  const navigateToAds = () => {
+    history.push(ADS_PAGE);
+  };
+
+  const archiveAdHandler = () => {
+    dispatch(archiveActiveAdReq({ id, navigateToAds }));
+  };
+
   const archiveAdsArrowLeftHandler = () => {
     archiveAdsSliderRef.current.slickPrev();
   };
             <Link className="ad-details-buttons-link" to="/ads">
               Nazad na sve oglase
             </Link>
-            <IconButton className="c-btn c-btn--primary add-ad-btn">
-              PRIJAVI SE
-            </IconButton>
+            {!(new Date(ad.expiredAt) < new Date()) && (
+              <IconButton
+                className="c-btn c-btn--primary add-ad-btn"
+                onClick={archiveAdHandler}
+              >
+                ARCHIVE AD
+              </IconButton>
+            )}
+            {!(new Date(ad.expiredAt) < new Date()) && (
+              <IconButton className="c-btn c-btn--primary add-ad-btn">
+                PRIJAVI SE
+              </IconButton>
+            )}
           </div>
         </div>
       )}

src/pages/AdsPage/AdsPage.js

     archiveAdsSliderRef.current.slickNext();
   };
 
-  const deleteFiltersHandler = () => {
-    history.push("/ads");
-    dispatch(setAdsReq());
-  };
+  // const deleteFiltersHandler = () => {
+  //   history.push("/ads");
+  //   dispatch(setAdsReq());
+  // };
 
   const getDummyAds = (len) => {
     const ads = [];
         )}
         {(!ads || ads.length === 0) && (
           <div className="active-ads-ads-no-ads">
+            <div className="active-ads-ads-no-ads-filters">
+              <FilterButton onShowFilters={handleToggleFiltersDrawer} />
+            </div>
             <img src={noActiveAds} alt="noActiveAds" />
             <h1>Nažalost, trenutno nema aktivnih oglasa</h1>
             <p>Uvek možete dodati novi u samo par jednostavnih koraka</p>
                 Dodaj Oglas
               </IconButton>
             </div>
-            {search && (
-              <div>
-                <IconButton
-                  className="c-btn c-btn--primary delete-filters-btn"
-                  onClick={deleteFiltersHandler}
-                >
-                  Obrisite filtere
-                </IconButton>
-              </div>
-            )}
           </div>
         )}
         {archiveAds && archiveAds.length > 0 && (

src/request/adsRequest.js

-import { getRequest, postRequest } from ".";
+import { getRequest, postRequest, putRequest } from ".";
 import apiEndpoints from "./apiEndpoints";
 
 export const getAllAds = () => getRequest(apiEndpoints.ads.allAds);
 export const getAdDetailsById = (id) =>
   getRequest(`${apiEndpoints.ads.adDetails}/${id}`);
 export const createNewAd = (ad) => postRequest(apiEndpoints.ads.createAd, ad);
+export const archiveActiveAdRequest = (payload) =>
+  putRequest(
+    apiEndpoints.ads.archiveActiveAd.replace(":id", payload.id),
+    payload
+  );

src/request/apiEndpoints.js

     forgetPassword: base + "/authentications/ForgotPassword",
     resetPassword: base + "/authentications/RessetPassword",
   },
-  users:{
-    allUsers: base + '/users',
-    user: base + '/users/{id}',
-    toggleEnabled: base + '/users/toggleEnable/{id}',
-    invite: base + '/users/invite',
+  users: {
+    allUsers: base + "/users",
+    user: base + "/users/{id}",
+    toggleEnabled: base + "/users/toggleEnable/{id}",
+    invite: base + "/users/invite",
   },
   candidates: {
-    filteredCandidates:base + "/applicants",
-    allFilteredAdsCandidates: base + "/applicants/adsApplicants"
+    filteredCandidates: base + "/applicants",
+    allFilteredAdsCandidates: base + "/applicants/adsApplicants",
   },
   ads: {
     allAds: base + "/ads",
     allFilteredAds: base + "/ads/filtered",
     allArchiveAds: base + "/ads/archive",
     adDetails: base + "/ads/details",
+    archiveActiveAd: base + "/ads/archive-active-ad/:id",
   },
   technologies: {
     allTechnologies: base + "/technologies",
     createPattern: base + "/patterns",
     updatePattern: base + "/patterns/:id",
   },
-  stats:{
-    stats: base + "/stats"
+  stats: {
+    stats: base + "/stats",
+  },
+  schedule: {
+    specificSchedule: base + "/schedule",
   },
-  schedule:{
-    specificSchedule:base + "/schedule"
-  }
 };

src/store/actions/archiveActiveAd/archiveActiveAdActionConstants.js

+import {
+  createFetchType,
+  createSuccessType,
+  createErrorType,
+} from "../actionHelpers";
+
+const ARCHIVE_ACTIVE_AD_SCOPE = "ARCHIVE_ACTIVE_AD";
+
+export const ARCHIVE_ACTIVE_AD_REQ = createFetchType(ARCHIVE_ACTIVE_AD_SCOPE);
+export const ARCHIVE_ACTIVE_AD_ERR = createErrorType(ARCHIVE_ACTIVE_AD_SCOPE);
+export const ARCHIVE_ACTIVE_AD_SUCCESS = createSuccessType(
+  ARCHIVE_ACTIVE_AD_SCOPE
+);

src/store/actions/archiveActiveAd/archiveActiveAdActions.js

+import {
+  ARCHIVE_ACTIVE_AD_REQ,
+  ARCHIVE_ACTIVE_AD_ERR,
+  ARCHIVE_ACTIVE_AD_SUCCESS,
+} from "./archiveActiveAdActionConstants";
+
+export const archiveActiveAdReq = (payload) => ({
+  type: ARCHIVE_ACTIVE_AD_REQ,
+  payload,
+});
+
+export const archiveActiveAdError = (payload) => ({
+  type: ARCHIVE_ACTIVE_AD_ERR,
+  payload,
+});
+
+export const archiveActiveAd = (payload) => ({
+  type: ARCHIVE_ACTIVE_AD_SUCCESS,
+  payload,
+});

src/store/reducers/ad/archiveActiveAdReducer.js

+import {
+  ARCHIVE_ACTIVE_AD_SUCCESS,
+  ARCHIVE_ACTIVE_AD_ERR,
+} from "../../actions/archiveActiveAd/archiveActiveAdActionConstants";
+import createReducer from "../../utils/createReducer";
+
+const initialState = {
+  errorMessage: "",
+};
+
+export default createReducer(
+  {
+    [ARCHIVE_ACTIVE_AD_SUCCESS]: setArchiveActiveAd,
+    [ARCHIVE_ACTIVE_AD_ERR]: setArchiveActiveAdErrorMessage,
+  },
+  initialState
+);
+
+function setArchiveActiveAd(state) {
+  return {
+    ...state,
+  };
+}
+
+function setArchiveActiveAdErrorMessage(state, action) {
+  return {
+    ...state,
+    errorMessage: action.payload,
+  };
+}

src/store/reducers/index.js

 import updatePatternReducer from "./pattern/updatePatternReducer";
 import statsReducer from "./stats/statsReducer";
 import scheduleReducer from "./schedule/scheduleReducer";
+import archiveActiveAdReducer from "./ad/archiveActiveAdReducer";
 
 export default combineReducers({
   login: loginReducer,
   technologies: technologiesReducer,
   addAdTechnologies: addAddTechnologiesReducer,
   createAd: createAdReducer,
+  archiveActiveAd: archiveActiveAdReducer,
   candidates: candidatesReducer,
   processes: processesReducer,
   process: processReducer,

src/store/saga/adsSaga.js

   getAllArchiveAds,
   getAllFilteredAds,
   createNewAd,
+  archiveActiveAdRequest,
 } from "../../request/adsRequest";
 import {
   setAds,
 import { FETCH_AD_REQ } from "../actions/ad/adActionConstants";
 import { FETCH_ARCHIVE_ADS_REQ } from "../actions/archiveAds/archiveAdsActionConstants";
 import { CREATE_AD_REQ } from "../actions/createAd/createAdActionConstants";
+import { ARCHIVE_ACTIVE_AD_REQ } from "../actions/archiveActiveAd/archiveActiveAdActionConstants";
 import {
   setCreateAd,
   setCreateAdError,
 } from "../actions/createAd/createAdActions";
+import { authScopeStringGetHelper } from "../../util/helpers/authScopeHelpers";
+import { JWT_TOKEN } from "../../constants/localStorage";
+import { addHeaderToken } from "../../request";
+import { rejectErrorCodeHelper } from "../../util/helpers/rejectErrorCodeHelper";
+import { archiveActiveAd, archiveActiveAdError } from "../actions/archiveActiveAd/archiveActiveAdActions";
 
 export function* getAds() {
   try {
   }
 }
 
+export function* archiveActiveAdSaga({ payload }) {
+  try {
+    const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
+    yield call(addHeaderToken, JwtToken);
+    const { data } = yield call(archiveActiveAdRequest, payload);
+    yield put(archiveActiveAd(data));
+    const resultAds = yield call(getAllAds);
+    yield put(setAds(resultAds.data));
+    const resultArchiveAds = yield call(getAllArchiveAds);
+    yield put(setArchiveAds(resultArchiveAds.data));
+    if(payload.navigateToAds){
+      yield call(payload.navigateToAds)
+    }
+  } catch (error) {
+    const errorMessage = yield call(rejectErrorCodeHelper, error);
+    yield put(archiveActiveAdError(errorMessage));
+  }
+}
+
 export default function* adsSaga() {
   yield all([
     takeLatest(FETCH_ADS_REQ, getAds),
     takeLatest(FETCH_AD_REQ, getAd),
     takeLatest(FETCH_ARCHIVE_ADS_REQ, getArchiveAds),
     takeLatest(CREATE_AD_REQ, createAd),
+    takeLatest(ARCHIVE_ACTIVE_AD_REQ, archiveActiveAdSaga),
   ]);
 }