Finished 2013

.env.example

@@ -1,2 +1,2 @@
 
-REACT_APP_BASE_API_URL=https://trampa-api-test.dilig.net/
+REACT_APP_BASE_API_URL=https://trampa-api.dilig.net/ 

src/components/Cards/FilterCard/FilterCard.js

@@ -23,7 +23,7 @@ const FilterCard = (props) => {
     locationRef?.current?.closeSection();
     companyRef?.current?.closeSection();
   };
-  console.log(props);
+
   return (
     <FilterCardContainer
       filtersOpened={props.filtersOpened}

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

@@ -13,6 +13,7 @@ export const OfferDescriptionText = styled(Box)`
   display: -webkit-box;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
+  pointer-events: none;
   @media (max-width: 1500px) {
     display: none;
   }

src/components/Header/Header.js

@@ -45,6 +45,7 @@ import { ReactComponent as Marketplace } from "../../assets/images/svg/package.s
 import { useTranslation } from "react-i18next";
 import useIsTablet from "../../hooks/useIsTablet";
 import { clearFilters } from "../../store/actions/filters/filtersActions";
+import { selectLatestChats } from "../../store/selectors/chatSelectors";
 
 const Header = () => {
   const theme = useTheme();
@@ -60,8 +61,18 @@ const Header = () => {
   const routeMatch = useRouteMatch();
   const { isTablet } = useIsTablet();
   const [logoClicked, setLogoClicked] = useState(false);
+  const [badge, setBadge] = useState(0);
   const { t } = useTranslation();
-  console.log(history.location.pathname.includes("messages"));
+  const allChats = useSelector(selectLatestChats);
+  const seenLastChat = allChats[0]?.participants?.filter(
+    (item) => item._id === user
+  )[0]?.hasSeenLatestMessages;
+
+  useEffect(() => {
+    if (seenLastChat === false) {
+      setBadge((prevState) => prevState + 1);
+    }
+  }, [seenLastChat]);
 
   // Dont show header on auth routes(login, register, etc.) and admin routes
   useEffect(() => {
@@ -198,7 +209,7 @@ const Header = () => {
                         <MySwapsButton
                           handleAddOfferClick={handleAddOfferClick}
                         />
-                        <MyMessagesButton />
+                        <MyMessagesButton badge={badge} setBadge={setBadge} />
                       </>
                     )}
                     <UserButton name={name} />

src/components/Header/MyMessagesButton/MyMessagesButton.js

@@ -10,24 +10,47 @@ import { MyMessages } from "../../Popovers/MyMessages/MyMessages";
 import { useLocation } from "react-router-dom";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
+// import { selectLatestChats } from "../../../store/selectors/chatSelectors";
+// import { selectUserId } from "../../../store/selectors/loginSelectors";
+// import { useSelector } from "react-redux";
 
-const MyMessagesButton = () => {
+const MyMessagesButton = (props) => {
+  // const [badge, setBadge] = useState(0);
   const location = useLocation();
   const { t } = useTranslation();
   const [msgPopoverOpen, setMsgPopoverOpen] = useState(false);
   const [msgAnchorEl, setMsgAnchorEl] = useState(null);
+  // const allChats = useSelector(selectLatestChats);
+  // const userId = useSelector(selectUserId);
+  // let lastChatLength = allChats[0]?.messages?.map(
+  //   (mesage) => mesage.user._id !== userId
+  // ).length;
+  // console.log(lastChatLength);
+
+  // useEffect(() => {
+  //   setBadge(badge + 1);
+  // }, [lastChatLength]);
+
   useEffect(() => {
     setMsgPopoverOpen(false);
   }, [location.pathname]);
   const openMsgPopover = (event) => {
     setMsgPopoverOpen(true);
     setMsgAnchorEl(event.currentTarget);
+    props.setBadge(0);
   };
 
   const closeMsgPopover = () => {
     setMsgPopoverOpen(false);
     setMsgAnchorEl(null);
   };
+  const badgeStyle = {
+    "& .MuiBadge-badge": {
+      color: selectedTheme.colors.primaryPurple,
+      backgroundColor: selectedTheme.colors.iconYellowColor,
+      fontWeight: 700,
+    },
+  };
   return (
     <>
       <IconButton
@@ -38,7 +61,7 @@ const MyMessagesButton = () => {
           color: selectedTheme.colors.primaryPurple,
         }}
       >
-        <Badge color="primary">
+        <Badge sx={badgeStyle} badgeContent={props.badge}>
           <MailIcon />
         </Badge>
       </IconButton>
@@ -57,6 +80,8 @@ const MyMessagesButton = () => {
 
 MyMessagesButton.propTypes = {
   onClick: PropTypes.func,
+  badge: PropTypes.any,
+  setBadge: PropTypes.func,
 };
 
 export default MyMessagesButton;

src/components/ItemDetails/ItemDetails.js

@@ -1,7 +1,7 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useEffect } from "react";
 import { PropTypes } from "prop-types";
 import Header from "./Header/Header";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import {
   ItemDetailsContainer,
   OfferIconContainer,
@@ -16,11 +16,23 @@ import { useTranslation } from "react-i18next";
 import { ONE_OFFER_SCOPE } from "../../store/actions/offers/offersActionConstants";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import SkeletonItemDetails from "./SkeletonItemDetails/SkeletonItemDetails";
+import { fetchChats } from "../../store/actions/chat/chatActions";
 
 const ItemDetails = (props) => {
   const offer = useSelector(selectOffer);
   const userId = useSelector(selectUserId);
   const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (userId)
+      dispatch(
+        fetchChats({
+          currentPage: 1,
+        })
+      );
+  }, [userId]);
+
   const isLoadingOffer = useSelector(
     selectIsLoadingByActionType(ONE_OFFER_SCOPE)
   );

src/components/MarketPlace/Header/TooltipHeader/TooltipHeader.js

@@ -43,7 +43,7 @@ const TooltipHeader = (props) => {
   const goBack = () => {
     history.goBack();
   };
-  console.log(props);
+
   return (
     <Tooltip
       title={

src/components/Profile/Profile.js

@@ -8,6 +8,7 @@ import { selectUserId } from "../../store/selectors/loginSelectors";
 import { useRouteMatch } from "react-router-dom";
 import { fetchProfile } from "../../store/actions/profile/profileActions";
 import Header from "./Header/Header";
+import { fetchChats } from "../../store/actions/chat/chatActions";
 
 const Profile = (props) => {
   const userId = useSelector(selectUserId);
@@ -19,6 +20,15 @@ const Profile = (props) => {
       dispatch(fetchProfile(profileId));
     }
   }, [profileId]);
+
+  useEffect(() => {
+    if (userId)
+      dispatch(
+        fetchChats({
+          currentPage: 1,
+        })
+      );
+  }, [userId]);
   const isMyProfile = useMemo(() => {
     return userId === routeMatch.params?.profileId;
   }, [userId, routeMatch]);

src/components/RichTextComponent/RichTextComponent.js

@@ -61,23 +61,14 @@ const RichTextComponent = (props) => {
         editor={editor}
         value={isJsonString(props?.value) ? JSON.parse(props?.value) : value}
         onChange={(newValue) => {
-          console.log(
-            editor.selection
-              ? Editor.string(editor, editor.selection)
-              : "<no selection>"
-          );
           const marks = Editor.marks(editor);
-          console.log("marks", marks);
           if (marks) {
-            console.log("ovde je true");
-            console.log("marks a", marks?.a);
             if (
               ((editor?.selection &&
                 Editor.string(editor, editor.selection).length === 0) ||
                 !editor?.selection) &&
               marks?.a
             ) {
-              console.log("marks", marks);
               Editor.removeMark(editor, "a");
             }
           }

src/pages/HomePage/HomePage.js

@@ -23,7 +23,7 @@ const HomePage = (props) => {
   const toggleFilters = () => {
     setFiltersOpened((prevFiltersOpened) => !prevFiltersOpened);
   };
-  console.log("ABBGAG");
+
   if (userId || props?.isMarketplacePage) {
     return (
       <HomePageContainer>