Partly finished feature 649

src/AppRoutes.js

   MY_OFFERS_PAGE,
   // PRICES_PAGE,
   ABOUT_PAGE,
-    ADMIN_HOME_PAGE,
+  ADMIN_HOME_PAGE,
+  ADMIN_USERS_PAGE,
   // POLICY_PRIVACY_PAGE,
 } from "./constants/pages";
 import LoginPage from "./pages/LoginPage/LoginPage";
 import AboutPage from "./pages/About/AboutPage";
 import AuthRoute from "./components/Router/AuthRoute";
 import AdminHomePage from "./pages/AdminHomePage/AdminHomePage";
+import AdminUsersPage from "./pages/AdminUsersPage/AdminUsersPage";
 // import PrivacyPolicyPage from "./pages/PrivacyPolicy/PrivacyPolicyPage";
 
 const AppRoutes = () => {
       <AuthRoute exact path={LOGIN_PAGE} component={LoginPage} />
       <AuthRoute exact path={ADMIN_LOGIN_PAGE} component={AdminLoginPage} />
       <Route path={ADMIN_HOME_PAGE} component={AdminHomePage} />
+      <Route path={ADMIN_USERS_PAGE} component={AdminUsersPage} />
       <Route path={NOT_FOUND_PAGE} component={NotFoundPage} />
       <Route path={ERROR_PAGE} component={ErrorPage} />
-      <AuthRoute path={REGISTER_SUCCESSFUL_PAGE} component={RegisterSuccessful} />
+      <AuthRoute
+        path={REGISTER_SUCCESSFUL_PAGE}
+        component={RegisterSuccessful}
+      />
       <AuthRoute path={REGISTER_PAGE} component={Register} />
       <AuthRoute path={FORGOT_PASSWORD_MAIL_SENT} component={MailSent} />
       <AuthRoute path={FORGOT_PASSWORD_PAGE} component={ForgotPasswordPage} />

src/assets/images/svg/pin-outlined.svg

+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1833_10358)">
+<path d="M17.5239 6.36219L16.7758 5.93024L16.4025 6.70932L14.1445 11.4218L13.9563 11.8146L14.1841 12.1859C14.8482 13.2683 15.1028 14.5843 14.8378 15.889L14.8162 15.9944C14.8162 15.9945 14.8161 15.9947 14.8161 15.9949C14.8045 16.0494 14.745 16.1479 14.6047 16.2108L14.5786 16.2225L14.5533 16.2361C14.5179 16.2551 14.4348 16.27 14.3339 16.2118L4.59109 10.5868C4.49874 10.5334 4.44062 10.442 4.4307 10.3405L4.43071 10.3405L4.43022 10.3357C4.41975 10.2349 4.46016 10.1311 4.53653 10.0637L4.53726 10.063L4.6205 9.9893L4.62095 9.9889C5.6152 9.10697 6.88296 8.67 8.15351 8.70427L8.58904 8.71602L8.83518 8.35652L11.7873 4.04478L12.2754 3.33195L11.5272 2.9L10.6279 2.38074C10.4725 2.29105 10.4192 2.09214 10.5089 1.93679C10.5986 1.78144 10.7975 1.72814 10.9529 1.81783L18.7471 6.31783C18.9029 6.4078 18.956 6.60601 18.8661 6.76179C18.7761 6.91756 18.5779 6.97072 18.4221 6.88074L17.5239 6.36219ZM8.38144 15.9217L7.09394 18.1517C7.00372 18.3079 6.80624 18.3609 6.64998 18.2706C6.49372 18.1804 6.4408 17.9829 6.53102 17.8267L7.81852 15.5967L8.38144 15.9217Z" stroke="#5A3984" stroke-width="1.6"/>
+</g>
+<defs>
+<clipPath id="clip0_1833_10358">
+<rect width="13.5" height="18" fill="white" transform="translate(9.4043) rotate(30)"/>
+</clipPath>
+</defs>
+</svg>

src/components/Cards/OfferCard/OfferCard.js

   LikeIcon,
   LikeIconContainer,
   CategoryIcon,
+  PinIconContainer,
+  PinOutlinedIcon,
 } from "./OfferCard.styled";
 import DeleteOffer from "./DeleteOffer/DeleteOffer";
 import { ReactComponent as Message } from "../../../assets/images/svg/mail.svg";
   const userId = useSelector(selectUserId);
   const { isMobile } = useIsMobile();
 
+  const pinOffer = (event) => {
+    event.stopPropagation();
+  };
   const routeToItem = (itemId) => {
     if (!props.disabledCheckButton) {
       history.push(`/proizvodi/${itemId}`);
               <Message />
             </MessageIcon>
           )}
+          {props.isAdmin && !props.pinned && (
+            <PinIconContainer showMessageIcon onClick={pinOffer}>
+              <PinOutlinedIcon />
+            </PinIconContainer>
+          )}
           {props?.offer?.pinned && <PinIcon isMyOffer={props.isMyOffer} />}
         </OfferFlexContainer>
       </OfferCardContainer>
   dontShowViews: PropTypes.bool,
   skeleton: PropTypes.bool,
   disabledCheckButton: PropTypes.bool,
+  isAdmin: PropTypes.bool,
 };
 OfferCard.defaultProps = {
   halfwidth: false,

src/components/Cards/OfferCard/OfferCard.styled.js

 import { ReactComponent as Edit } from "../../../assets/images/svg/edit.svg";
 import { ReactComponent as Like } from "../../../assets/images/svg/like.svg";
 import { ReactComponent as Pin } from "../../../assets/images/svg/pin.svg";
+import { ReactComponent as PinOutlined } from "../../../assets/images/svg/pin-outlined.svg";
 import { ReactComponent as Category } from "../../../assets/images/svg/category.svg";
 
 export const OfferCardContainer = styled(Container)`
 
   @media screen and (max-width: 600px) {
     display: block;
-    position: ${props => props.vertical && "absolute"};
-    top: ${props => props.vertical && "325px"};
-    left: ${props => props.vertical && "59px"};
+    position: ${(props) => props.vertical && "absolute"};
+    top: ${(props) => props.vertical && "325px"};
+    left: ${(props) => props.vertical && "59px"};
   }
 `;
 export const RemoveIcon = styled(Remove)``;
   @media screen and (max-width: 600px) {
     position: absolute;
     display: block;
-    right: ${props => !props.vertical && "64px"};
-    top: ${props => props.vertical && "325px"};
-    left: ${props => props.vertical && "18px"};
+    right: ${(props) => !props.vertical && "64px"};
+    top: ${(props) => props.vertical && "325px"};
+    left: ${(props) => props.vertical && "18px"};
   }
 `;
 export const EditIcon = styled(Edit)``;
     }
   `}
 `;
+export const PinIconContainer = styled(MessageIcon)`
+  right: 134px;
+  top: 18px;
+`;
 export const LikeIcon = styled(Like)`
   & path {
     stroke: ${(props) =>
     top: -1px;
   }
 `;
+export const PinOutlinedIcon = styled(PinOutlined)`
+  & g path {
+    /* fill: transparent !important; */
+    /* stroke-width: 2; */
+    /* stroke: ${selectedTheme.colors.primaryPurple} !important; */
+  }
+`;
 export const PinIcon = styled(Pin)`
   position: absolute;
   top: 20px;

src/components/MarketPlace/Header/Header.js

 import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
 // import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
 import history from "../../../store/utils/history";
+import { AccountCircle } from "@mui/icons-material";
 
 const DownArrow = (props) => (
   <IconStyled {...props}>
 
 const Header = (props) => {
   const { t } = useTranslation();
-  const sorting = props.sorting;
+  const sorting = props?.sorting;
   const headerString = useSelector(selectHeaderString);
   const { isMobile } = useIsMobile();
   // Changing header string on refresh or on load
 
   const altString = useMemo(() => {
-    if (sorting.selectedSortOption === sortEnum.OLD) {
-      return `: ${t("header.oldOffers")}`;
-    }
-    if (sorting.selectedSortOption === sortEnum.POPULAR) {
-      return `: ${t("header.popularOffers")}`;
+    if (!props?.users) {
+      if (sorting?.selectedSortOption === sortEnum.OLD) {
+        return `: ${t("header.oldOffers")}`;
+      }
+      if (sorting?.selectedSortOption === sortEnum.POPULAR) {
+        return `: ${t("header.popularOffers")}`;
+      }
     }
     return `: ${t("header.newOffers")}`;
-  }, [sorting.selectedSortOption]);
+  }, [sorting?.selectedSortOption]);
 
   const handleChangeSelect = (event) => {
-    sorting.changeSorting(event.target.value);
+    if (!props.users) sorting?.changeSorting(event.target.value);
   };
   const handleClickCategory = () => {
-    props.offers.filters.locations.clear();
-    props.offers.filters.subcategory.clear();
-    props.offers.applyFilters();
+    props?.offers?.filters?.locations.clear();
+    props?.offers?.filters?.subcategory.clear();
+    props?.offers?.applyFilters();
   };
   const handleClickSubcategory = () => {
-    props.offers.filters.locations.clear();
-    props.offers.applyFilters();
+    props?.offers?.filters?.locations.clear();
+    props?.offers?.applyFilters();
   };
   const goBack = () => {
     history.goBack();
 
   return (
     <>
-      <SkeletonHeader skeleton={props.skeleton} myOffers={props.myOffers} />
-      <HeaderWrapperContainer skeleton={props.skeleton} isAdmin={props.isAdmin}>
+      <SkeletonHeader skeleton={props?.skeleton} myOffers={props?.myOffers} />
+      <HeaderWrapperContainer
+        skeleton={props?.skeleton}
+        isAdmin={props?.isAdmin}
+      >
         <HeaderContainer>
           {/* Setting appropriate header title if page is market place or my offers */}
           <Tooltip title={headerString.text}>
             <TooltipInnerContainer>
-              {!props.myOffers ? (
+              {!props?.myOffers ? (
                 <>
                   <CategoryHeaderIcon />
                   <HeaderLocation>
                 <>
                   {!isMobile ? (
                     <HeaderTitleContainer>
-                      <SwapsHeaderIcon />
-                      <HeaderTitleText>{t("header.myOffers")}</HeaderTitleText>
+                      {props.users ? <AccountCircle /> : <SwapsHeaderIcon />}
+                      <HeaderTitleText>
+                        {props.users
+                          ? t("admin.users.headerTitle")
+                          : t("header.myOffers")}
+                      </HeaderTitleText>
                     </HeaderTitleContainer>
                   ) : (
                     <ButtonContainer onClick={goBack}>
               {/* Setting display of offer cards to full width */}
               <HeaderButton
                 iconColor={
-                  props.isGrid
+                  props?.isGrid
                     ? selectedTheme.colors.iconStrokeColor
                     : selectedTheme.colors.primaryPurple
                 }
-                onClick={() => props.setIsGrid(false)}
+                onClick={() => props?.setIsGrid(false)}
               >
                 <GridLine />
               </HeaderButton>
               {/* Setting display of offer cards to half width (Grid) */}
               <HeaderButton
                 iconColor={
-                  props.isGrid
+                  props?.isGrid
                     ? selectedTheme.colors.primaryPurple
                     : selectedTheme.colors.iconStrokeColor
                 }
-                onClick={() => props.setIsGrid(true)}
+                onClick={() => props?.setIsGrid(true)}
               >
                 <GridSquare />
               </HeaderButton>
             {/* Select option to choose sorting */}
             <HeaderSelect
               value={
-                sorting.selectedSortOption?.value
-                  ? sorting.selectedSortOption
+                sorting?.selectedSortOption?.value
+                  ? sorting?.selectedSortOption
                   : "default"
               }
               IconComponent={DownArrow}
               onChange={handleChangeSelect}
-              myOffers={props.myOffers}
+              myOffers={props?.myOffers}
             >
               <SelectOption style={{ display: "none" }} value="default">
                 {t("reviews.sortBy")}
           <PageTitleContainer>
             <SwapsIcon />
             <SwapsTitle>
-              {props.myOffers ? t("header.myOffers") : t("offer.offers")}
+              {props?.myOffers ? t("header.myOffers") : t("offer.offers")}
             </SwapsTitle>
           </PageTitleContainer>
         )}
   skeleton: PropTypes.bool,
   sorting: PropTypes.any,
   isAdmin: PropTypes.bool,
+  users: PropTypes.bool,
 };
 Header.defaultProps = {
   isGrid: false,

src/components/MarketPlace/MarketPlace.js

         offers={props.offers}
         skeleton={props.skeleton}
         isAdmin={props.isAdmin}
+        users={props.users}
       />
       <Offers
         isGrid={isGrid}
   offers: PropTypes.any,
   toggleFilters: PropTypes.func,
   isAdmin: PropTypes.bool,
+  users: PropTypes.bool,
+};
+MarketPlace.defaultProps = {
+  offers: {
+    sorting: {},
+    filters: {
+      numOfFiltersChosen: 0,
+    },
+  },
 };
 
 export default MarketPlace;

src/components/MarketPlace/Offers/HeaderMyOffers.js/HeadersMyOffers.js

-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import { EndIcon, SearchIcon, SearchInput } from "./HeadersMyOffers.styled";
 import { useTranslation } from "react-i18next";
     },
     [searchRef.current]
   );
+  useEffect(() => {
+    searchRef.current.value = search.searchString || "";
+  }, []);
   const handleFocusSearch = () => {
     searchRef.current.addEventListener("keyup", listener);
   };

src/components/MarketPlace/Offers/Offers.js

   const chats = useSelector(selectLatestChats);
   const offersRef = useRef(null);
   const userId = useSelector(selectUserId);
-  const offers = props.offers;
+  const offers = props?.offers;
   // For skeleton screen
   const arrayForMapping = Array.apply(null, Array(4)).map(() => {});
 
     startChat(chats, offer, userId);
   };
   const toggleFilters = () => {
-    props.toggleFilters();
+    props?.toggleFilters();
   };
 
   return (
     <>
-      {!props.skeleton ? (
+      {!props?.skeleton ? (
         <>
           <FilterContainer
-            isAdmin={props.isAdmin}
+            isAdmin={props?.isAdmin}
             onClick={toggleFilters}
-            number={offers.filters.numOfFiltersChosen}
-            myOffers={props.myOffers}
+            number={offers?.filters?.numOfFiltersChosen}
+            myOffers={props?.myOffers}
           >
             <FilterIcon />
           </FilterContainer>
-          {(props.myOffers || props.isAdmin) && (
+          {(props?.myOffers || props?.isAdmin) && (
             <HeadersMyOffers
-              searchMyOffers={offers.search.searchOffers}
-              handleSearch={offers.apply}
-              isAdmin={props.isAdmin}
+              searchMyOffers={offers?.search?.searchOffers}
+              handleSearch={offers?.apply}
+              isAdmin={props?.isAdmin}
               offers={offers}
             />
           )}
-          {offers.allOffersToShow.length === 0 ? (
+          {offers?.allOffersToShow?.length === 0 ? (
             <OffersNotFound />
           ) : (
             <OffersContainer ref={offersRef}>
-              {offers.allOffersToShow.map((item) => {
+              {offers?.allOffersToShow?.map((item) => {
                 return (
                   <OfferCard
                     key={item._id}
                     offer={item}
-                    halfwidth={props.isGrid}
+                    halfwidth={props?.isGrid}
                     messageUser={messageOneUser}
-                    isMyOffer={item?.userId === userId || props.isAdmin}
+                    isMyOffer={item?.userId === userId || props?.isAdmin}
+                    isAdmin={props?.isAdmin}
                   />
                 );
               })}
               <Paging
-                totalElements={offers.totalOffers}
+                totalElements={offers?.totalOffers}
                 elementsPerPage={10}
-                current={parseInt(offers.paging.currentPage)}
-                changePage={offers.paging.changePage}
+                current={parseInt(offers?.paging?.currentPage)}
+                changePage={offers?.paging?.changePage}
               />
             </OffersContainer>
           )}

src/constants/pages.js

 export const PRICES_PAGE = "/prices";
 export const POLICY_PRIVACY_PAGE = "/policy";
 export const ADMIN_HOME_PAGE = "/admin/home";
+export const ADMIN_USERS_PAGE = "/admin/users";

src/i18n/resources/rs.js

       passwordRequired: "Lozinka je obavezna!",
       wrongCredentials: "Pogrešan mail ili lozinka!",
       headerTitle: "Ulogujte se",
+    },
+    users: {
+      headerTitle: "Profili korisnika"
     }
   }
 };

src/pages/AdminHomePage/AdminHomePage.js

 import PropTypes from "prop-types";
 import MarketPlace from "../../components/MarketPlace/MarketPlace";
 import useOffers from "../../hooks/useOffers/useOffers";
+import { useSelector } from "react-redux";
+import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
+import { OFFERS_SCOPE } from "../../store/actions/offers/offersActionConstants";
 
 const AdminHomePage = () => {
   const offers = useOffers();
-  return <MarketPlace offers={offers} isAdmin />;
+  const isLoadingOffers = useSelector(
+    selectIsLoadingByActionType(OFFERS_SCOPE)
+  );
+  return <MarketPlace offers={offers} isAdmin skeleton={isLoadingOffers} />;
 };
 
 AdminHomePage.propTypes = {

src/pages/AdminUsersPage/AdminUsersPage.js

+import React from "react";
+import PropTypes from "prop-types";
+import MarketPlace from "../../components/MarketPlace/MarketPlace";
+
+const AdminUsersPage = () => {
+  return <MarketPlace isAdmin myOffers users />;
+};
+
+AdminUsersPage.propTypes = {
+  children: PropTypes.node,
+};
+
+export default AdminUsersPage;

src/store/saga/loginSaga.js

       const accessToken = {
         token: token,
         exp: tokenDecoded.exp,
+        roles: tokenDecoded.roles,
       };
       const refreshToken = {
         token: refresh,

src/util/helpers/routeHelpers.js

 import {
   ADMIN_HOME_PAGE,
   ADMIN_LOGIN_PAGE,
+  ADMIN_USERS_PAGE,
   FORGOT_PASSWORD_MAIL_SENT,
   FORGOT_PASSWORD_PAGE,
   LOGIN_PAGE,
   return false;
 };
 export const isAdminRoute = () => {
-  if (routeMatches(ADMIN_LOGIN_PAGE) || routeMatches(ADMIN_HOME_PAGE))
+  if (
+    routeMatches(ADMIN_LOGIN_PAGE) ||
+    routeMatches(ADMIN_HOME_PAGE) ||
+    routeMatches(ADMIN_USERS_PAGE)
+  )
     return true;
   return false;
 };