Finished #3616

src/assets/images/svg/logo-broken-purple.svg

@@ -0,0 +1,4 @@
+<svg width="85" height="84" viewBox="0 0 85 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="50.7617" cy="64.8516" r="10.5693" transform="rotate(-135 50.7617 64.8516)" fill="#5A3984"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.0578 71.2912C36.7593 73.9927 41.1392 73.9927 43.8406 71.2912L57.9946 57.1372C57.9945 57.1371 57.9943 57.137 57.9942 57.1368C53.8666 53.0092 53.8666 46.3171 57.9942 42.1895C62.1006 38.0831 68.7453 38.0621 72.8778 42.1264C74.8238 39.4231 74.5809 35.6315 72.1492 33.1998L43.8407 4.89118C41.1392 2.18972 36.7593 2.18972 34.0578 4.89118L5.74922 33.1998C3.04776 35.9012 3.04777 40.2811 5.74922 42.9826L34.0578 71.2912Z" fill="#5A3984"/>
+</svg>

src/assets/images/svg/logo-image-round.svg

@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="13.1621" width="18.6127" height="18.6127" rx="4.77827" transform="rotate(45 13.1621 0)" fill="#5A3984"/>
+<rect x="26.3213" y="13.1602" width="18.6127" height="18.6127" rx="4.77827" transform="rotate(45 26.3213 13.1602)" fill="#FEB005"/>
+<circle cx="22.2412" cy="17.0786" r="3.65185" transform="rotate(45 22.2412 17.0786)" fill="#FEB005"/>
+<circle cx="17.1602" cy="22.3247" r="3.65185" transform="rotate(45 17.1602 22.3247)" fill="#5A3984"/>
+</svg>

src/components/Cards/FilterCard/FilterCard.js

@@ -9,6 +9,7 @@ import SubcategoryChoser from "./Choser/SubcategoryChoser/SubcategoryChoser";
 import LocationChoser from "./Choser/LocationChoser/LocationChoser";
 import CompanyChoser from "./Choser/CompanyChoser/CompanyChoser";
 import SkeletonFilterCard from "./Skeleton/SkeletonFilterCard";
+import FilterFooter from "./FilterFooter/FilterFooter";
 
 const FilterCard = (props) => {
   const offers = props.offers;
@@ -66,12 +67,12 @@ const FilterCard = (props) => {
         )}
       </ContentContainer>
 
-      {/* <FilterFooter
+      <FilterFooter
         toggleFilters={props.toggleFilters}
         filters={offers}
         closeAllSections={closeAllSections}
         isMyOffers={props.myOffers}
-      /> */}
+      />
     </FilterCardContainer>
   );
 };

src/components/Cards/FilterCard/FilterFooter/FilterFooter.js

@@ -10,12 +10,12 @@ const FilterFooter = (props) => {
   const { t } = useTranslation();
   const { isMobile } = useIsMobile();
   const filters = props.filters;
-  const handleFilters = () => {
-    filters.paging.changePage(1);
-    // filters.search.clear();
-    filters.applyFilters();
-    props.toggleFilters();
-  };
+  // const handleFilters = () => {
+  //   filters.paging.changePage(1);
+  //   // filters.search.clear();
+  //   filters.applyFilters();
+  //   props.toggleFilters();
+  // };
   const clearFilters = () => {
     if (props.isMyOffers) {
       filters.clear();
@@ -44,7 +44,7 @@ const FilterFooter = (props) => {
           {t("filters.cancel")}
         </PrimaryButton>
       )}
-      <PrimaryButton
+      {/* <PrimaryButton
         variant="outlined"
         fullWidth
         onClick={handleFilters}
@@ -57,7 +57,7 @@ const FilterFooter = (props) => {
         }}
       >
         {t("filters.usefilters")}
-      </PrimaryButton>
+      </PrimaryButton> */}
     </FilterFooterContainer>
   );
 };

src/components/Cards/OfferCard/OfferCard.js

@@ -56,14 +56,17 @@ import { replaceInRoute } from "../../../util/helpers/routeHelpers";
 import {
   ADMIN_ITEM_DETAILS_PAGE,
   ITEM_DETAILS_PAGE,
+  LOGIN_PAGE,
 } from "../../../constants/pages";
 import exchangeStatus from "../../../constants/exchangeStatus";
+import useIsLoggedIn from "../../../hooks/useIsLoggedIn";
 
 const OfferCard = (props) => {
   const dispatch = useDispatch();
   const history = useHistory();
   const userId = useSelector(selectUserId);
   const { isMobile } = useIsMobile();
+  const { isLoggedIn } = useIsLoggedIn();
   const date = formatDateLocale(new Date(props.offer?._created));
   const { t } = useTranslation();
 
@@ -101,7 +104,13 @@ const OfferCard = (props) => {
   };
   const messageUser = (event) => {
     event.stopPropagation();
-    props.messageUser(props.offer);
+    if (!isLoggedIn) {
+      history.push({
+        pathname: LOGIN_PAGE,
+      });
+    } else {
+      props.messageUser(props.offer);
+    }
   };
   const makeReview = (event) => {
     event.stopPropagation();

src/components/Header/Header.js

@@ -3,8 +3,10 @@ import {
   AuthButtonsContainer,
   HeaderContainer,
   LogoContainer,
+  LogoImage,
   MarketplaceLinkRoute,
   MarketplaceLinkRouteContainer,
+  SmallScreenMessagesContainer,
   ToolsButtonsContainer,
   ToolsContainer,
 } from "./Header.styled";
@@ -47,6 +49,7 @@ import useIsTablet from "../../hooks/useIsTablet";
 import { clearFilters } from "../../store/actions/filters/filtersActions";
 import { selectLatestChats } from "../../store/selectors/chatSelectors";
 import useIsLoggedIn from "../../hooks/useIsLoggedIn";
+import useIsMobile from "../../hooks/useIsMobile";
 
 const Header = () => {
   const theme = useTheme();
@@ -61,10 +64,10 @@ const Header = () => {
   const [shouldShow, setShouldShow] = useState(true);
   const routeMatch = useRouteMatch();
   const { isTablet } = useIsTablet();
+  const { isMobile } = useIsMobile();
   const [logoClicked, setLogoClicked] = useState(false);
   const [badge, setBadge] = useState(0);
   const { isLoggedIn } = useIsLoggedIn();
-  console.log(isLoggedIn);
   const { t } = useTranslation();
   const allChats = useSelector(selectLatestChats);
   const seenLastChat = allChats[0]?.participants?.filter(
@@ -89,7 +92,6 @@ const Header = () => {
       dispatch(fetchMineProfile());
     }
   }, []);
-
   useEffect(() => {
     if (logoClicked) {
       console.log("clicked");
@@ -132,8 +134,16 @@ const Header = () => {
 
   // Handling search when user is on marketplace and when he is not
   const handleSearch = (value) => {
+    // search.searchOffersImmediately(value);
     if (!isLoggedIn) {
       search.searchOffersImmediately(value);
+      if (history.location.pathname.includes("/offer")) {
+        const newQueryString = new URLSearchParams({ search: value });
+        history.push({
+          pathname: MARKETPLACE_PAGE,
+          search: newQueryString.toString(),
+        });
+      }
     }
     if (isAdminRoute()) {
       search.setSearchStringManually(value);
@@ -185,7 +195,7 @@ const Header = () => {
         <Toolbar sx={{ p: "15px" }}>
           <ToolsContainer>
             <LogoContainer onClick={() => handleLogoClick()}>
-              <LogoHorizontal />
+              {isMobile ? <LogoImage /> : <LogoHorizontal />}
             </LogoContainer>
 
             {!history.location.pathname.includes("messages") &&
@@ -208,11 +218,19 @@ const Header = () => {
               <ToolsButtonsContainer
                 mobile={matches}
                 shrink={routeMatches(ABOUT_PAGE)}
+                isTablet={isTablet}
               >
                 {matches ? (
-                  <OpenDrawerButton
-                    onClick={drawerRef.current?.handleToggleDrawer}
-                  />
+                  <>
+                    <SmallScreenMessagesContainer>
+                      {isTablet && (
+                        <MyMessagesButton badge={badge} setBadge={setBadge} />
+                      )}
+                    </SmallScreenMessagesContainer>
+                    <OpenDrawerButton
+                      onClick={drawerRef.current?.handleToggleDrawer}
+                    />
+                  </>
                 ) : (
                   <React.Fragment>
                     {!routeMatches(ABOUT_PAGE) && (

src/components/Header/Header.styled.js

@@ -2,6 +2,7 @@ import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
 import Link from "../Link/Link";
+import { ReactComponent as LogoImageSvg } from "../../assets/images/svg/logo-image-round.svg";
 
 export const DrawerContainer = styled(Box)`
   display: flex;
@@ -32,7 +33,7 @@ export const ToolsButtonsContainer = styled(Box)`
   display: flex;
   flex: ${(props) => (props.shrink ? "none" : "4")};
   justify-content: flex-end;
-  gap: 2.5rem;
+  gap: ${(props) => (props.isTablet ? "15px" : "2.5rem")};
   min-width: ${(props) =>
     props.mobile ? "40px" : props.shrink ? "0" : "600px"};
   max-width: 600px;
@@ -124,3 +125,9 @@ export const MarketplaceLinkRoute = styled(Link)`
     display: none;
   }
 `;
+
+export const LogoImage = styled(LogoImageSvg)`
+  width: 40px;
+`;
+
+export const SmallScreenMessagesContainer = styled(Box)``;

src/components/Header/SearchInput/SearchInput.js

@@ -9,7 +9,12 @@ import { forwardRef } from "react";
 // import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { routeMatches } from "../../../util/helpers/routeHelpers";
-import { ABOUT_PAGE, BASE_PAGE, HOME_PAGE } from "../../../constants/pages";
+import {
+  ABOUT_PAGE,
+  BASE_PAGE,
+  HOME_PAGE,
+  MARKETPLACE_PAGE,
+} from "../../../constants/pages";
 import { debounceHelper } from "../../../util/helpers/debounceHelper";
 import useIsLoggedIn from "../../../hooks/useIsLoggedIn";
 
@@ -17,7 +22,11 @@ const SearchInput = forwardRef((props, ref) => {
   const { t } = useTranslation();
   const { isLoggedIn } = useIsLoggedIn();
   const handleSearch = () => {
-    if (routeMatches(HOME_PAGE) || routeMatches(BASE_PAGE)) {
+    if (
+      routeMatches(HOME_PAGE) ||
+      routeMatches(BASE_PAGE) ||
+      routeMatches(MARKETPLACE_PAGE)
+    ) {
       console.log("uslo unutra");
       debounceHelper(() => props.handleSearch(ref.current.value), 500);
     }

src/components/Header/SearchInput/SearchInput.styled.js

@@ -8,8 +8,9 @@ export const SearchInputContainer = styled(TextField)`
   background-color: ${selectedTheme.colors.primaryBackgroundColor};
   flex: 1;
   max-width: 520px;
+  margin-left: 25px;
   font-family: ${selectedTheme.fonts.textFont};
-  @media (max-width: 1700px) {
+  /* @media (max-width: 1700px) {
     margin-left: 15%;
   }
   @media (max-width: 1550px) {
@@ -20,12 +21,14 @@ export const SearchInputContainer = styled(TextField)`
   }
   @media (max-width: 1250px) {
     margin-left: 5%;
-  }
+  } */
   @media (max-width: 550px) {
     display: block;
     width: 80%;
+    max-width: 50%;
     height: 46px;
-    ${props => props.wider && `flex: 3;`}
+    margin-left: 1px;
+    ${(props) => props.wider && `flex: 3;`}
     font-family: ${selectedTheme.fonts.textFont};
     & div {
       height: 46px;
@@ -36,8 +39,7 @@ export const SearchInputContainer = styled(TextField)`
     }
   }
 `;
-export const EndIcon = styled(Icon)`
-`;
+export const EndIcon = styled(Icon)``;
 export const SearchIcon = styled(Search)`
   position: relative;
   top: 11px;

src/components/Popovers/HeaderPopover/HeaderPopover.styled.js

@@ -21,6 +21,10 @@ export const PopoverTitle = styled(Typography)`
   width: 100%;
   min-width: 270px;
   font-family: ${selectedTheme.fonts.textFont};
+  @media (max-width: 600px) {
+    min-width: 227px;
+    font-size: 14px;
+  }
 `;
 export const PopoverList = styled(List)`
   width: 100%;
@@ -59,6 +63,9 @@ export const PopoverListItemTextContainer = styled(ListItemText)`
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    @media (max-width: 600px) {
+      font-size: 14px;
+    }
   }
   & p {
     overflow: hidden;
@@ -68,6 +75,9 @@ export const PopoverListItemTextContainer = styled(ListItemText)`
       position: relative;
       top: 2px;
     }
+    @media (max-width: 600px) {
+      font-size: 10px;
+    }
   }
 `;
 export const SettingsIcon = styled(Settings)``;

src/components/UserReviews/NoReviews/NoReviews.js

@@ -1,27 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
+  Logo,
   NoReviewsAltText,
   NoReviewsContainer,
   NoReviewsText,
 } from "./NoReviews.styled";
-import UserReviewsSkeleton from "./UserReviewsSkeleton/UserReviewsSkeleton";
 import { useTranslation } from "react-i18next";
-import useIsMobile from "../../../hooks/useIsMobile";
-const NoReviews = () => {
-  const { isMobile } = useIsMobile();
+
+const NoReviews = (props) => {
   const { t } = useTranslation();
   return (
-    <NoReviewsContainer>
+    <NoReviewsContainer fullHeight={props.fullHeight}>
+      <Logo />
       <NoReviewsText>{t("reviews.title")}</NoReviewsText>
       <NoReviewsAltText>{t("reviews.altTitle")}</NoReviewsAltText>
-      <UserReviewsSkeleton noReviews numOfElements={isMobile ? 1 : 2} />
     </NoReviewsContainer>
   );
 };
 
 NoReviews.propTypes = {
   children: PropTypes.node,
+  fullHeight: PropTypes.bool,
 };
 
 export default NoReviews;

src/components/UserReviews/NoReviews/NoReviews.styled.js

@@ -1,11 +1,16 @@
-import { Box, Typography } from "@mui/material"
-import styled from "styled-components"
-import selectedTheme from "../../../themes"
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../themes";
+import { ReactComponent as LogoBroken } from "../../../assets/images/svg/logo-broken-purple.svg";
 
 export const NoReviewsContainer = styled(Box)`
-  text-align: center;
   margin-top: 36px;
-`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  ${(props) => props.fullHeight && `height: 70vh;`}
+`;
 export const NoReviewsText = styled(Typography)`
   color: ${selectedTheme.colors.primaryPurple};
   font-size: 24px;
@@ -13,8 +18,8 @@ export const NoReviewsText = styled(Typography)`
   text-align: center;
   font-weight: 700;
   width: 229px;
-  
-`
+  margin-top: 20px;
+`;
 export const NoReviewsAltText = styled(Typography)`
   font-size: 12px;
   color: ${selectedTheme.colors.primaryDarkText};
@@ -22,4 +27,6 @@ export const NoReviewsAltText = styled(Typography)`
   text-align: center;
   width: 100%;
   margin-bottom: 36px;
-`
+`;
+
+export const Logo = styled(LogoBroken)``;

src/components/UserReviews/UserReviews.js

@@ -30,9 +30,13 @@ import {
   PROFILE_PAGE,
 } from "../../constants/pages";
 import { selectUserId } from "../../store/selectors/loginSelectors";
+import { reviewEnum } from "../../enums/reviewEnum";
 
 const UserReviews = (props) => {
   const [isGiven, setIsGiven] = useState(true);
+  const [positiveReviews, setPositiveReviews] = useState(false);
+  const [negativeReviews, setNegativeReviews] = useState(false);
+  const [filteredReviews, setFilteredReviews] = useState();
   const { t } = useTranslation();
   const offer = useSelector(selectOffer);
   const reviews = useSelector(selectSelectedReviews);
@@ -41,13 +45,30 @@ const UserReviews = (props) => {
   const listRef = useRef(null);
   const sortRef = useRef(null);
   const mineUserId = useSelector(selectUserId);
-
   const isLoadingReview = useSelector(
     selectIsLoadingByActionType(
       props.givingReview ? ONE_OFFER_SCOPE : REVIEW_GET_SCOPE
     )
   );
 
+  useEffect(() => {
+    if (!positiveReviews && !negativeReviews) setFilteredReviews(reviews);
+    if (positiveReviews)
+      setFilteredReviews(
+        reviews.filter(
+          (review) =>
+            review.succeeded === reviewEnum.YES.backendText &&
+            review.communication === reviewEnum.YES.backendTextSecond
+        )
+      );
+    if (negativeReviews)
+      setFilteredReviews(
+        reviews.filter(
+          (review) => review.succeeded === reviewEnum.NO.backendText
+        )
+      );
+  }, [reviews, positiveReviews, negativeReviews]);
+
   const userId = useMemo(() => {
     if (
       dynamicRouteMatches(PROFILE_PAGE) ||
@@ -120,6 +141,15 @@ const UserReviews = (props) => {
       } else {
         setIsGiven(false);
       }
+    } else {
+      if (newSortOption.value === 1) {
+        setPositiveReviews(true);
+        setNegativeReviews(false);
+      }
+      if (newSortOption.value === 2) {
+        setNegativeReviews(true);
+        setPositiveReviews(false);
+      }
     }
   };
 
@@ -160,8 +190,8 @@ const UserReviews = (props) => {
             </ReviewsHeader>
           )}
           <ReviewList ref={listRef} isProfileReviews={props.isProfileReviews}>
-            {lastThreeReviews?.length > 0 ? (
-              lastThreeReviews?.map((review, index) => (
+            {filteredReviews?.length > 0 ? (
+              filteredReviews?.map((review, index) => (
                 <UserReviewsCard
                   showRemoveIcon={props.isAdmin}
                   review={review}
@@ -175,7 +205,7 @@ const UserReviews = (props) => {
                 />
               ))
             ) : (
-              <NoReviews></NoReviews>
+              <NoReviews fullHeight={props.fullHeight} />
             )}
           </ReviewList>
         </ReviewsBox>
@@ -194,6 +224,7 @@ UserReviews.propTypes = {
   offer: PropTypes.any,
   isAdmin: PropTypes.bool,
   rightReviews: PropTypes.bool,
+  fullHeight: PropTypes.bool,
 };
 UserReviews.defaultProps = {
   isProfileReviews: false,

src/enums/reviewEnum.js

@@ -23,17 +23,17 @@ export const reviewEnum = {
 };
 
 export const reviewSortEnum = {
-    INITIAL: {
-        value: 0,
-        mainText: "Sortiraj po",
-        queryString: ""
-    },
-    POSITIVE: {
-        value: 1,
-        mainText: "Pozitivne",
-    },
-    NEGATIVE: {
-        value: 2,
-        mainText: "Negativne",
-    },
-}
+  INITIAL: {
+    value: 0,
+    mainText: "Filtriraj",
+    queryString: "",
+  },
+  POSITIVE: {
+    value: 1,
+    mainText: "Pozitivne",
+  },
+  NEGATIVE: {
+    value: 2,
+    mainText: "Negativne",
+  },
+};

src/pages/ProfilePage/ProfilePage.js

@@ -9,7 +9,7 @@ const ProfilePage = () => {
     <ProfilePageContainer>
       <ProfileLayout
         content={<Profile />}
-        rightCard={<UserReviews isProfileReviews />}
+        rightCard={<UserReviews isProfileReviews fullHeight />}
         profile
       />
     </ProfilePageContainer>

src/request/index.js

@@ -7,8 +7,8 @@ const request = axios.create({
   // baseURL: "http://192.168.88.143:3001/", // DULE
   // baseURL: "https://trampa-api.dilig.net/",
   // baseURL: "https://trampa-api-test.dilig.net/",
-  // baseURL: "http://localhost:3001/",
-  baseURL: process.env.REACT_APP_BASE_API_URL,
+  baseURL: "http://localhost:3001/",
+  // baseURL: process.env.REACT_APP_BASE_API_URL,
   headers: {
     "Content-Type": "application/json",
   },

src/store/middleware/accessTokensMiddleware.js

@@ -18,8 +18,8 @@ import { logoutUser, refreshUserToken } from "../actions/login/loginActions";
 // const baseURL = "https://trampa-api.dilig.net/";
 // const baseURL = "https://trampa-api-test.dilig.net/";
 // const baseURL = "http://192.168.88.150:3001/"; // DJOLE
-// const baseURL = "http://localhost:3001/";
-const baseURL = process.env.REACT_APP_BASE_API_URL
+const baseURL = "http://localhost:3001/";
+// const baseURL = process.env.REACT_APP_BASE_API_URL
 
 //Interceptor unique name
 export const accessTokensMiddlewareInterceptorName = "ACCESS_TOKEN_INTERCEPTOR";
@@ -40,7 +40,7 @@ export default ({ dispatch }) =>
       // If refresh token is expired, log out user
       if (new Date() > new Date(refreshTokenDecoded?.exp * 1000)) {
         dispatch(logoutUser());
-        return Promise.resolve(response)
+        return Promise.resolve(response);
       }
       // If access token is expired, refresh access token
       if (new Date() > new Date(jwtTokenDecoded.exp * 1000)) {

src/store/middleware/loadingMiddleware.js

@@ -10,7 +10,6 @@ import { addLoader, removeLoader } from "../actions/app/appActions";
 
 const promiseTypes = [FETCH, UPDATE, DELETE, SUBMIT];
 
-
 export default ({ dispatch }) =>
   (next) =>
   (action) => {

src/util/helpers/messageHelper.js

@@ -5,8 +5,9 @@ import { replaceInRoute } from "./routeHelpers";
 
 export const messageUserHelper = (chats, userId, offer) => {
   const chatItem = chats.find(
-    (item) => item.chat.offerId === offer?.offer?._id
+    (item) => item?.chat?.offerId === offer?.offer?._id
   );
+  if (chatItem.chat === undefined) return;
   if (chatItem !== undefined) {
     history.push(
       replaceInRoute(DIRECT_CHAT_PAGE, { chatId: chatItem.chat._id })

src/util/helpers/reviewsHelper.js

@@ -1,6 +1,7 @@
 import { reviewEnum } from "../../enums/reviewEnum";
 
 export const sortReviews = (reviews = [], positive = false) => {
+  console.log(reviews);
   let newReviews;
   if (!Array.isArray(reviews)) return [];
   if (positive) {