Partly finished feature 649

src/AppRoutes.js

@@ -22,7 +22,8 @@ import {
   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";
@@ -46,6 +47,7 @@ import MyOffers from "./pages/MyOffers/MyOffers";
 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 = () => {
@@ -55,9 +57,13 @@ 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

@@ -0,0 +1,10 @@
+<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

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

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

@@ -8,6 +8,7 @@ import { ReactComponent as Remove } from "../../../assets/images/svg/trash.svg";
 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)`
@@ -302,9 +303,9 @@ export const RemoveIconContainer = styled(MessageIcon)`
 
   @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)``;
@@ -316,9 +317,9 @@ export const EditIconContainer = styled(MessageIcon)`
   @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)``;
@@ -334,6 +335,10 @@ export const LikeIconContainer = styled(MessageIcon)`
     }
   `}
 `;
+export const PinIconContainer = styled(MessageIcon)`
+  right: 134px;
+  top: 18px;
+`;
 export const LikeIcon = styled(Like)`
   & path {
     stroke: ${(props) =>
@@ -346,6 +351,13 @@ export const LikeIcon = styled(Like)`
     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

@@ -42,6 +42,7 @@ import useIsMobile from "../../../hooks/useIsMobile";
 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}>
@@ -51,32 +52,34 @@ const DownArrow = (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();
@@ -84,13 +87,16 @@ const Header = (props) => {
 
   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>
@@ -123,8 +129,12 @@ const Header = (props) => {
                 <>
                   {!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}>
@@ -143,11 +153,11 @@ const Header = (props) => {
               {/* 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>
@@ -156,11 +166,11 @@ const Header = (props) => {
               {/* 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>
@@ -170,13 +180,13 @@ const Header = (props) => {
             {/* 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")}
@@ -200,7 +210,7 @@ const Header = (props) => {
           <PageTitleContainer>
             <SwapsIcon />
             <SwapsTitle>
-              {props.myOffers ? t("header.myOffers") : t("offer.offers")}
+              {props?.myOffers ? t("header.myOffers") : t("offer.offers")}
             </SwapsTitle>
           </PageTitleContainer>
         )}
@@ -219,6 +229,7 @@ Header.propTypes = {
   skeleton: PropTypes.bool,
   sorting: PropTypes.any,
   isAdmin: PropTypes.bool,
+  users: PropTypes.bool,
 };
 Header.defaultProps = {
   isGrid: false,

src/components/MarketPlace/MarketPlace.js

@@ -18,6 +18,7 @@ const MarketPlace = (props) => {
         offers={props.offers}
         skeleton={props.skeleton}
         isAdmin={props.isAdmin}
+        users={props.users}
       />
       <Offers
         isGrid={isGrid}
@@ -38,6 +39,15 @@ MarketPlace.propTypes = {
   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

@@ -1,4 +1,4 @@
-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";
@@ -18,6 +18,9 @@ const HeadersMyOffers = (props) => {
     },
     [searchRef.current]
   );
+  useEffect(() => {
+    searchRef.current.value = search.searchString || "";
+  }, []);
   const handleFocusSearch = () => {
     searchRef.current.addEventListener("keyup", listener);
   };

src/components/MarketPlace/Offers/Offers.js

@@ -15,7 +15,7 @@ const Offers = (props) => {
   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(() => {});
 
@@ -23,49 +23,50 @@ const Offers = (props) => {
     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

@@ -19,3 +19,4 @@ export const ABOUT_PAGE = "/about";
 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

@@ -423,6 +423,9 @@ export default {
       passwordRequired: "Lozinka je obavezna!",
       wrongCredentials: "Pogrešan mail ili lozinka!",
       headerTitle: "Ulogujte se",
+    },
+    users: {
+      headerTitle: "Profili korisnika"
     }
   }
 };

src/pages/AdminHomePage/AdminHomePage.js

@@ -2,10 +2,16 @@ import React from "react";
 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

@@ -0,0 +1,13 @@
+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

@@ -53,6 +53,7 @@ function* fetchLogin({ payload }) {
       const accessToken = {
         token: token,
         exp: tokenDecoded.exp,
+        roles: tokenDecoded.roles,
       };
       const refreshToken = {
         token: refresh,

src/util/helpers/routeHelpers.js

@@ -1,6 +1,7 @@
 import {
   ADMIN_HOME_PAGE,
   ADMIN_LOGIN_PAGE,
+  ADMIN_USERS_PAGE,
   FORGOT_PASSWORD_MAIL_SENT,
   FORGOT_PASSWORD_PAGE,
   LOGIN_PAGE,
@@ -42,7 +43,11 @@ export const isAuthRoute = () => {
   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;
 };