Finished feature

src/components/Admin/Sidebar/LogoutButton/LogoutButton.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { LogoutButtonContainer, LogoutIcon } from "./LogoutButton.styled";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { logoutAdmin } from "../../../../store/actions/login/loginActions";
+
+const LogoutButton = () => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const logoutHandler = () => {
+    dispatch(logoutAdmin());
+  };
+
+  return (
+    <LogoutButtonContainer onClick={logoutHandler}>
+      <LogoutIcon /> {t("admin.navigation.logout")}
+    </LogoutButtonContainer>
+  );
+};
+
+LogoutButton.propTypes = {
+  children: PropTypes.node,
+};
+
+export default LogoutButton;

src/components/Admin/Sidebar/LogoutButton/LogoutButton.styled.js

@@ -0,0 +1,28 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import { ReactComponent as Logout } from "../../../../assets/images/svg/log-out.svg";
+import selectedTheme from "../../../../themes";
+
+export const LogoutButtonContainer = styled(Box)`
+  font-family: "DM Sans";
+  font-size: 16px;
+  padding-top: 1.7vh;
+  padding-bottom: 1.7vh;
+  padding-left: 18px;
+  margin-bottom: 18px;
+  margin-left: 18px;
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  color: ${selectedTheme.colors.primaryPurple};
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f5edff;
+    font-weight: 700;
+  }
+`;
+export const LogoutIcon = styled(Logout)`
+  position: relative;
+  top: 3px;
+`;

src/components/Admin/Sidebar/MarketplaceButton/MarketplaceButton.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { HOME_PAGE } from "../../../../constants/pages";
+import {
+  ArrowUpRightIcon,
+  MarketplaceButtonContainer,
+  MarketplaceIcon,
+} from "./MarketplaceButton.styled";
+import { useTranslation } from "react-i18next";
+
+const MarketplaceButton = () => {
+  const { t } = useTranslation();
+  const handleButtonClick = () => {
+    history.push({
+      pathname: HOME_PAGE,
+    });
+  };
+  return (
+    <MarketplaceButtonContainer onClick={handleButtonClick}>
+      <MarketplaceIcon /> {t("admin.navigation.marketplace")}
+      <ArrowUpRightIcon />
+    </MarketplaceButtonContainer>
+  );
+};
+
+MarketplaceButton.propTypes = {
+  children: PropTypes.node,
+};
+
+export default MarketplaceButton;

src/components/Admin/Sidebar/MarketplaceButton/MarketplaceButton.styled.js

@@ -0,0 +1,36 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import { ReactComponent as ArrowUpRight } from "../../../../assets/images/svg/arrow-up-right-from-square.svg";
+import { ReactComponent as Marketplace } from "../../../../assets/images/svg/package.svg";
+import selectedTheme from "../../../../themes";
+
+export const MarketplaceButtonContainer = styled(Box)`
+  font-family: "DM Sans";
+  font-size: 16px;
+  padding-top: 1.7vh;
+  padding-bottom: 1.7vh;
+  padding-left: 18px;
+  margin-top: 8vh;
+  margin-left: 18px;
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  color: ${selectedTheme.colors.primaryPurple};
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f5edff;
+    font-weight: 700;
+  }
+`;
+
+export const MarketplaceIcon = styled(Marketplace)`
+  position: relative;
+  top: 3px;
+  width: 18px;
+  height: 18px;
+`;
+export const ArrowUpRightIcon = styled(ArrowUpRight)`
+  position: relative;
+  left: 4px;
+`;

src/components/Admin/Sidebar/Sidebar.js

@@ -2,106 +2,24 @@ import React from "react";
 import {
   SidebarContainer,
   SidebarContent,
-  SidebarHeader,
-  SidebarProfileImageContainer,
-  SidebarProfileImage,
-  SidebarProfileName,
-  SidebarNavigation,
-  SidebarNavigationMeni,
-  SidebarNavigationMeniItemUl,
-  SidebarNavigationMeniItem,
-  SidebarNavigationMeniItemIcon,
-  SidebarProfileRole,
-  SidebarNavigationMeniLogout,
-  LogoutIcon,
-  SidebarNavigationMeniMarketplace,
-  MarketplaceIcon,
   ButtonsContainer,
-  ArrowUpRightIcon,
 } from "./Sidebar.styled";
-import { ReactComponent as LogoHorizontal } from "../../../assets/images/svg/logo-horizontal.svg";
-import { useHistory } from "react-router-dom";
-import { useSelector } from "react-redux";
-import { selectMineProfile } from "../../../store/selectors/profileSelectors";
-import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
-import useIsMobile from "../../../hooks/useIsMobile";
-import { ADMIN_NAVIGATION } from "../../../constants/adminNavigation";
-import { useTranslation } from "react-i18next";
-import { useDispatch } from "react-redux";
-import { logoutAdmin } from "../../../store/actions/login/loginActions";
-import { isInRoute, routeMatches } from "../../../util/helpers/routeHelpers";
-import {
-  ADMIN_HOME_PAGE,
-  ADMIN_USERS_PAGE,
-  HOME_PAGE,
-} from "../../../constants/pages";
+import SidebarHeader from "./SidebarHeader/SidebarHeader";
+import SidebarProfile from "./SidebarProfile/SidebarProfile";
+import SidebarNavigation from "./SidebarNavigation/SidebarNavigation";
+import MarketplaceButton from "./MarketplaceButton/MarketplaceButton";
+import LogoutButton from "./LogoutButton/LogoutButton";
 
 const Sidebar = () => {
-  const history = useHistory();
-  const profile = useSelector(selectMineProfile);
-  const dispatch = useDispatch();
-  const { isMobile } = useIsMobile();
-  const { t } = useTranslation();
-  const routeToItem = (route) => {
-    history.push(route);
-  };
-  const marketplaceHandler = () => {
-    history.push({
-      pathname: HOME_PAGE,
-    });
-  };
-  const logoutHandler = () => {
-    dispatch(logoutAdmin());
-  };
-
   return (
     <SidebarContainer>
-      <SidebarHeader>
-        <LogoHorizontal />
-      </SidebarHeader>
+      <SidebarHeader />
       <SidebarContent>
-        <SidebarProfileImageContainer>
-          <SidebarProfileImage
-            src={getImageUrl(profile.image, variants.profileImage, isMobile)}
-          />
-          <SidebarProfileName>{profile.company.name}</SidebarProfileName>
-          <SidebarProfileRole>{t("admin.navigation.role")}</SidebarProfileRole>
-        </SidebarProfileImageContainer>
-        <SidebarNavigation>
-          <SidebarNavigationMeni>
-            {t("admin.navigation.menu")}
-          </SidebarNavigationMeni>
-          <SidebarNavigationMeniItemUl>
-            {ADMIN_NAVIGATION.map((value) => {
-              let isRouteActive = isInRoute(value.route);
-              if (
-                routeMatches(ADMIN_HOME_PAGE) &&
-                routeMatches(ADMIN_USERS_PAGE, value.route)
-              )
-                isRouteActive = true;
-              return (
-                <SidebarNavigationMeniItem
-                  active={isRouteActive}
-                  key={value.text}
-                  onClick={() => routeToItem(value.route)}
-                >
-                  <SidebarNavigationMeniItemIcon active={isRouteActive}>
-                    {value.icon}
-                  </SidebarNavigationMeniItemIcon>
-                  {value.text}
-                </SidebarNavigationMeniItem>
-              );
-            })}
-          </SidebarNavigationMeniItemUl>
-        </SidebarNavigation>
+        <SidebarProfile />
+        <SidebarNavigation />
         <ButtonsContainer>
-          <SidebarNavigationMeniMarketplace onClick={marketplaceHandler}>
-            <MarketplaceIcon /> {t("admin.navigation.marketplace")}
-            <ArrowUpRightIcon />
-          </SidebarNavigationMeniMarketplace>
-          <SidebarNavigationMeniLogout onClick={logoutHandler}>
-            <LogoutIcon /> {t("admin.navigation.logout")}
-          </SidebarNavigationMeniLogout>
+          <MarketplaceButton />
+          <LogoutButton />
         </ButtonsContainer>
       </SidebarContent>
     </SidebarContainer>

src/components/Admin/Sidebar/Sidebar.styled.js

@@ -1,9 +1,5 @@
 import styled from "styled-components";
-import { Box, Typography } from "@mui/material";
-import { ReactComponent as Marketplace } from "../../../assets/images/svg/package.svg";
-import { ReactComponent as Logout } from "../../../assets/images/svg/log-out.svg";
-import { ReactComponent as ArrowUpRight } from "../../../assets/images/svg/arrow-up-right-from-square.svg";
-import selectedTheme from "../../../themes";
+import { Box } from "@mui/material";
 
 export const SidebarContainer = styled(Box)`
   margin-top: -30px;
@@ -29,13 +25,6 @@ export const SidebarContainer = styled(Box)`
   }
 `;
 
-export const SidebarHeader = styled(Box)`
-  background-color: #f5edff;
-  padding-top: 3.3vh;
-  padding-left: 36px;
-  padding-bottom: 3.3vh;
-`;
-
 export const SidebarContent = styled(Box)`
   display: flex;
   flex-direction: column;
@@ -43,148 +32,4 @@ export const SidebarContent = styled(Box)`
   justify-content: space-between;
 `;
 
-export const SidebarProfileImageContainer = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0;
-`;
-
-export const SidebarProfileImage = styled.img`
-  width: 108px;
-  height: 108px;
-  border-radius: 100%;
-`;
-
-export const SidebarProfileName = styled(Typography)`
-  font-family: "DM Sans";
-  font-size: 16px;
-  font-weight: 700;
-  margin-top: 19px;
-  color: ${selectedTheme.colors.primaryPurple};
-`;
-
-export const SidebarProfileRole = styled(Typography)`
-  font-family: "DM Sans";
-  font-size: 12px;
-  color: ${selectedTheme.colors.primaryPurple};
-`;
-
-export const SidebarNavigation = styled(Box)`
-  margin-left: 18px;
-  display: flex;
-  flex-direction: column;
-  /* flex: 1; */
-`;
-
-export const SidebarNavigationMeni = styled(Typography)`
-  font-family: "DM Sans";
-  font-size: 24px;
-  font-weight: 700;
-  margin-bottom: 4vh;
-  margin-left: 18px;
-`;
-
-export const SidebarNavigationMeniItemUl = styled.ul``;
-export const SidebarNavigationMeniItem = styled.li`
-  padding-top: 1.7vh;
-  padding-bottom: 1.7vh;
-  padding-left: 18px;
-  font-family: "DM Sans";
-  font-size: 16px;
-  font-weight: 400;
-  display: flex;
-  border-radius: 4px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  align-items: center;
-  color: ${selectedTheme.colors.primaryPurple};
-  cursor: pointer;
-  ${(props) =>
-    props.active &&
-    `
-    background-color: #f5edff;
-    font-weight: 700;
-  `}
-  path {
-    stroke: #c4c4c4;
-  }
-
-  &:hover {
-    background-color: #f5edff;
-    font-weight: 700;
-
-    path {
-      stroke: #feb005;
-    }
-  }
-`;
-
-export const SidebarNavigationMeniItemIcon = styled(Box)`
-  margin-right: 9px;
-  position: relative;
-  top: 2px;
-
-  ${(props) =>
-    props.active &&
-    `
-    path {
-      stroke: #feb005;
-    }
-  `}
-`;
-
 export const ButtonsContainer = styled(Box)``;
-
-export const SidebarNavigationMeniMarketplace = styled(Box)`
-  font-family: "DM Sans";
-  font-size: 16px;
-  padding-top: 1.7vh;
-  padding-bottom: 1.7vh;
-  padding-left: 18px;
-  margin-top: 8vh;
-  margin-left: 18px;
-  border-radius: 4px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  color: ${selectedTheme.colors.primaryPurple};
-  cursor: pointer;
-
-  &:hover {
-    background-color: #f5edff;
-    font-weight: 700;
-  }
-`;
-
-export const MarketplaceIcon = styled(Marketplace)`
-  position: relative;
-  top: 5px;
-`;
-
-export const SidebarNavigationMeniLogout = styled(Box)`
-  font-family: "DM Sans";
-  font-size: 16px;
-  padding-top: 1.7vh;
-  padding-bottom: 1.7vh;
-  padding-left: 18px;
-  margin-bottom: 18px;
-  margin-left: 18px;
-  border-radius: 4px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  color: ${selectedTheme.colors.primaryPurple};
-  cursor: pointer;
-
-  &:hover {
-    background-color: #f5edff;
-    font-weight: 700;
-  }
-`;
-export const LogoutIcon = styled(Logout)`
-  position: relative;
-  top: 3px;
-`;
-
-export const ArrowUpRightIcon = styled(ArrowUpRight)`
-  margin-left: 4px;
-`;

src/components/Admin/Sidebar/SidebarHeader/SidebarHeader.js

@@ -0,0 +1,25 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  LogoHorizontalIcon,
+  SidebarHeaderContainer,
+} from "./SidebarHeader.styled";
+import history from "../../../../store/utils/history";
+import { ADMIN_HOME_PAGE } from "../../../../constants/pages";
+
+const SidebarHeader = () => {
+  const handleLogoClick = () => {
+    history.push(ADMIN_HOME_PAGE);
+  };
+  return (
+    <SidebarHeaderContainer>
+      <LogoHorizontalIcon onClick={handleLogoClick} />
+    </SidebarHeaderContainer>
+  );
+};
+
+SidebarHeader.propTypes = {
+  children: PropTypes.node,
+};
+
+export default SidebarHeader;

src/components/Admin/Sidebar/SidebarHeader/SidebarHeader.styled.js

@@ -0,0 +1,13 @@
+import { Box } from "@mui/material";
+import { ReactComponent as LogoHorizontal } from "../../../../assets/images/svg/logo-horizontal.svg";
+import styled from "styled-components";
+
+export const SidebarHeaderContainer = styled(Box)`
+  background-color: #f5edff;
+  padding-top: 3.3vh;
+  padding-left: 36px;
+  padding-bottom: 3.3vh;
+`;
+export const LogoHorizontalIcon = styled(LogoHorizontal)`
+  cursor: pointer;
+`;

src/components/Admin/Sidebar/SidebarNavigation/SidebarNavigation.js

@@ -0,0 +1,55 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  SidebarNavigationContainer,
+  SidebarNavigationItem,
+  SidebarNavigationItemIcon,
+  SidebarNavigationListContainer,
+  SidebarNavigationTitle,
+} from "./SidebarNavigation.styled";
+import { useTranslation } from "react-i18next";
+import { isInRoute, routeMatches } from "../../../../util/helpers/routeHelpers";
+import { ADMIN_HOME_PAGE, ADMIN_USERS_PAGE } from "../../../../constants/pages";
+import { ADMIN_NAVIGATION } from "../../../../constants/adminNavigation";
+
+const SidebarNavigation = () => {
+  const { t } = useTranslation();
+  const goToRoute = (route) => {
+    history.push(route);
+  };
+  return (
+    <SidebarNavigationContainer>
+      <SidebarNavigationTitle>
+        {t("admin.navigation.menu")}
+      </SidebarNavigationTitle>
+      <SidebarNavigationListContainer>
+        {ADMIN_NAVIGATION.map((value) => {
+          let isRouteActive = isInRoute(value.route);
+          if (
+            routeMatches(ADMIN_HOME_PAGE) &&
+            routeMatches(ADMIN_USERS_PAGE, value.route)
+          )
+            isRouteActive = true;
+          return (
+            <SidebarNavigationItem
+              active={isRouteActive}
+              key={value.text}
+              onClick={() => goToRoute(value.route)}
+            >
+              <SidebarNavigationItemIcon active={isRouteActive}>
+                {value.icon}
+              </SidebarNavigationItemIcon>
+              {value.text}
+            </SidebarNavigationItem>
+          );
+        })}
+      </SidebarNavigationListContainer>
+    </SidebarNavigationContainer>
+  );
+};
+
+SidebarNavigation.propTypes = {
+  children: PropTypes.node,
+};
+
+export default SidebarNavigation;

src/components/Admin/Sidebar/SidebarNavigation/SidebarNavigation.styled.js

@@ -0,0 +1,67 @@
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../../themes";
+
+export const SidebarNavigationContainer = styled(Box)`
+  margin-left: 18px;
+  display: flex;
+  flex-direction: column;
+  /* flex: 1; */
+`;
+
+export const SidebarNavigationTitle = styled(Typography)`
+  font-family: "DM Sans";
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 4vh;
+  margin-left: 18px;
+`;
+
+export const SidebarNavigationListContainer = styled.ul``;
+export const SidebarNavigationItem = styled.li`
+  padding-top: 1.7vh;
+  padding-bottom: 1.7vh;
+  padding-left: 18px;
+  font-family: "DM Sans";
+  font-size: 16px;
+  font-weight: 400;
+  display: flex;
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  align-items: center;
+  color: ${selectedTheme.colors.primaryPurple};
+  cursor: pointer;
+  ${(props) =>
+    props.active &&
+    `
+  background-color: #f5edff;
+  font-weight: 700;
+`}
+  path {
+    stroke: #c4c4c4;
+  }
+
+  &:hover {
+    background-color: #f5edff;
+    font-weight: 700;
+
+    path {
+      stroke: #feb005;
+    }
+  }
+`;
+
+export const SidebarNavigationItemIcon = styled(Box)`
+  margin-right: 9px;
+  position: relative;
+  top: 2px;
+
+  ${(props) =>
+    props.active &&
+    `
+  path {
+    stroke: #feb005;
+  }
+`}
+`;

src/components/Admin/Sidebar/SidebarProfile/SidebarProfile.js

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  SidebarProfileContainer,
+  SidebarProfileImage,
+  SidebarProfileName,
+  SidebarProfileRole,
+} from "./SidebarProfile.styled";
+import { getImageUrl, variants } from "../../../../util/helpers/imageUrlGetter";
+import useIsMobile from "../../../../hooks/useIsMobile";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { selectMineProfile } from "../../../../store/selectors/profileSelectors";
+
+const SidebarProfile = () => {
+  const { isMobile } = useIsMobile();
+  const profile = useSelector(selectMineProfile);
+  const { t } = useTranslation();
+
+  return (
+    <SidebarProfileContainer>
+      <SidebarProfileImage
+        src={getImageUrl(profile.image, variants.profileImage, isMobile)}
+      />
+      <SidebarProfileName>{profile.company.name}</SidebarProfileName>
+      <SidebarProfileRole>{t("admin.navigation.role")}</SidebarProfileRole>
+    </SidebarProfileContainer>
+  );
+};
+
+SidebarProfile.propTypes = {
+  profile: PropTypes.shape({
+    image: PropTypes.string,
+    company: PropTypes.shape({
+      name: PropTypes.string,
+    }),
+  }),
+};
+
+export default SidebarProfile;

src/components/Admin/Sidebar/SidebarProfile/SidebarProfile.styled.js

@@ -0,0 +1,30 @@
+import { Box, Typography } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../../../themes";
+
+export const SidebarProfileContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+`;
+
+export const SidebarProfileImage = styled.img`
+  width: 108px;
+  height: 108px;
+  border-radius: 100%;
+`;
+
+export const SidebarProfileName = styled(Typography)`
+  font-family: "DM Sans";
+  font-size: 16px;
+  font-weight: 700;
+  margin-top: 19px;
+  color: ${selectedTheme.colors.primaryPurple};
+`;
+
+export const SidebarProfileRole = styled(Typography)`
+  font-family: "DM Sans";
+  font-size: 12px;
+  color: ${selectedTheme.colors.primaryPurple};
+`;

src/components/Cards/CreateOfferCard/CreateOffer.js

@@ -76,7 +76,7 @@ const CreateOffer = ({ editOffer, offer, isAdmin, customUserId }) => {
     } else
       history.push(
         replaceInRoute(PROFILE_PAGE, {
-          idProfile: userId,
+          profileId: userId,
         })
       );
     closeCreateOfferModal();

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

@@ -30,7 +30,7 @@ import _ from "lodash";
 import { selectUserId } from "../../../store/selectors/loginSelectors";
 import { formatDateLocale } from "../../../util/helpers/dateHelpers";
 import { startChat } from "../../../util/helpers/chatHelper";
-import Information from "./Information/Information";
+import Information from "./OfferInformations/SingleInformation/SingleInformation";
 import { useTranslation } from "react-i18next";
 import OfferDetails from "./OfferDetails/OfferDetails";
 import { useRouteMatch } from "react-router-dom";
@@ -50,7 +50,7 @@ const ItemDetailsCard = (props) => {
   const offer = useMemo(() => {
     if (props.offer) {
       if (
-        props.offer.offer._id === routeMatch.params.idProizvod ||
+        props.offer.offer._id === routeMatch.params?.offerId ||
         props.createOffer
       ) {
         return props.offer;
@@ -92,7 +92,7 @@ const ItemDetailsCard = (props) => {
         editOffer: true,
         offer: offer?.offer,
         isAdmin: props.isAdmin,
-        customUserId: offer?.offer?.userId
+        customUserId: offer?.offer?.userId,
       })
     );
   };

src/components/Cards/ItemDetailsCard/Information/Information.js → src/components/Cards/ItemDetailsCard/OfferInformations/SingleInformation/SingleInformation.js

@@ -1,29 +1,26 @@
 import React from "react";
 import PropTypes from "prop-types";
-import selectedTheme from "../../../../themes";
-import { InfoGroup, InfoIcon, InfoText } from "./Information.styled";
+import selectedTheme from "../../../../../themes";
+import { InfoGroup, InfoIcon, InfoText } from "./SingleInformation.styled";
 
-const Information = (props) => {
+const SingleInformation = (props) => {
   return (
     <InfoGroup hide={props.hide}>
       <InfoIcon
         color={selectedTheme.colors.iconStrokeColor}
         component="span"
-        size="16px"
       >
-        {/* <CategoryIcon width={"14px"} /> */}
         {props.icon}
       </InfoIcon>
-      {/* <InfoText>{offer?.offer?.category?.name}</InfoText> */}
       <InfoText>{props.value}</InfoText>
     </InfoGroup>
   );
 };
 
-Information.propTypes = {
+SingleInformation.propTypes = {
   icon: PropTypes.node,
   value: PropTypes.string,
   hide: PropTypes.bool,
 };
 
-export default Information;
+export default SingleInformation;

src/components/Cards/ItemDetailsCard/Information/Information.styled.js → src/components/Cards/ItemDetailsCard/OfferInformations/SingleInformation/SingleInformation.styled.js

@@ -1,6 +1,6 @@
 import { Box, Typography } from "@mui/material";
 import styled from "styled-components";
-import selectedTheme from "../../../../themes";
+import selectedTheme from "../../../../../themes";
 
 export const InfoGroup = styled(Box)`
   display: ${props => props.hide ? 'none' : 'flex'};
@@ -11,6 +11,8 @@ export const InfoGroup = styled(Box)`
 export const InfoIcon = styled(Box)`
   display: flex;
   align-items: center;
+  width: 16px;
+  height: 16px;
 `;
 export const InfoText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};

src/components/Cards/MiniChatCard/MiniChatCard.js

@@ -23,7 +23,7 @@ const MiniChatCard = (props) => {
   const changeChat = () => {
     history.push(
       replaceInRoute(DIRECT_CHAT_PAGE, {
-        idChat: props?.chat?.chat?._id,
+        chatId: props?.chat?.chat?._id,
       })
     );
   };

src/components/Cards/OfferCard/CheckButton/CheckButton.js

@@ -12,7 +12,7 @@ const CheckButton = (props) => {
   const routeToItem = (itemId) => {
     history.push(
       replaceInRoute(ITEM_DETAILS_PAGE, {
-        idProizvod: itemId,
+        offerId: itemId,
       })
     );
   };

src/components/Cards/OfferCard/OfferCard.js

@@ -83,13 +83,13 @@ const OfferCard = (props) => {
       if (props.isAdmin) {
         history.push(
           replaceInRoute(ADMIN_ITEM_DETAILS_PAGE, {
-            idProizvod: itemId,
+            offerId: itemId,
           })
         );
       } else {
         history.push(
           replaceInRoute(ITEM_DETAILS_PAGE, {
-            idProizvod: itemId,
+            offerId: itemId,
           })
         );
       }

src/components/Cards/ProfileCard/BigProfileCard/BigProfileCard.js

@@ -20,7 +20,7 @@ const BigProfileCard = (props) => {
   const goToUser = () => {
     history.push(
       replaceInRoute(ADMIN_SINGLE_USER_PAGE, {
-        idProfile: props.profile?._id,
+        profileId: props.profile?._id,
       })
     );
   };

src/components/Cards/ProfileCard/ProfileCard.js

@@ -39,14 +39,14 @@ const ProfileCard = (props) => {
   const { isMobile } = useIsMobile();
   const profileFromRedux = useSelector(selectProfile);
   const userId = useSelector(selectUserId);
-  const idProfile = useMemo(() => {
-    return routeMatch.params.idProfile;
-  }, [routeMatch.params.idProfile]);
+  const profileId = useMemo(() => {
+    return routeMatch.params.profileId;
+  }, [routeMatch.params.profileId]);
   const { t } = useTranslation();
 
   const profile = useMemo(() => {
     if (profileFromRedux) {
-      if (profileFromRedux._id === routeMatch.params.idProfile) {
+      if (profileFromRedux._id === routeMatch.params.profileId) {
         return profileFromRedux;
       }
     }
@@ -54,15 +54,15 @@ const ProfileCard = (props) => {
   }, [profileFromRedux]);
 
   const isMyProfile = useMemo(
-    () => userId === idProfile && !props.isAdmin,
-    [userId, idProfile]
+    () => userId === profileId && !props.isAdmin,
+    [userId, profileId]
   );
 
   useEffect(() => {
-    if (idProfile?.length > 0) {
+    if (profileId?.length > 0) {
       reFetchProfile();
     }
-  }, [idProfile]);
+  }, [profileId]);
   useEffect(() => {
     if (profile && isMyProfile !== undefined) {
       if (!isMyProfile && profile._blocked && !props.isAdmin)
@@ -71,8 +71,8 @@ const ProfileCard = (props) => {
   }, [profile, isMyProfile, props.isAdmin]);
 
   const reFetchProfile = () => {
-    dispatch(fetchProfile(idProfile));
-    dispatch(fetchProfileOffers(idProfile));
+    dispatch(fetchProfile(profileId));
+    dispatch(fetchProfileOffers(profileId));
   };
 
   let percentOfSucceededExchanges;

src/components/Cards/ProfileCard/ProfileMainInfo/ProfileMainInfo.js

@@ -29,7 +29,7 @@ const ProfileMainInfo = (props) => {
     if (isAdminRoute()) {
       history.push(
         replaceInRoute(ADMIN_SINGLE_USER_PAGE, {
-          idProfile: props.profile?._id,
+          profileId: props.profile?._id,
         })
       );
     }

src/components/Cards/RequestExchangeCard/RequestExchangeMessage/RequestExchangeMessage.js

@@ -21,7 +21,6 @@ const RequestExchangeMessage = (props) => {
   const exchange = useSelector(selectExchange);
   const requester = useSelector(selectRequester);
 
-  console.log(props);
   const handleAcceptExchange = () => {
     acceptExchangeSocket(
       props.chatId,

src/components/Cards/UserReviewsCard/UserReviewsSingleCard/ReviewerProfile/ReviewerProfile.js

@@ -16,7 +16,7 @@ const ReviewerProfile = (props) => {
   const { isMobile } = useIsMobile();
   const routeToUser = () => {
     history.push(replaceInRoute(PROFILE_PAGE, {
-      idProfile: props.userId
+      profileId: props.userId
     }))
   }
   return (

src/components/Cards/UserReviewsCard/UserReviewsSingleCard/UserReviewsSingleCard.js

@@ -12,7 +12,6 @@ const UserReviewsSingleCard = (props) => {
   const handleRemove = () => {
     props.handleRemove();
   };
-  console.log(props.review);
   return (
     <ReviewContainer
       lastReview={props.lastReview}

src/components/DirectChat/DirectChat.js

@@ -130,10 +130,10 @@ const DirectChat = () => {
   // Fetch chat after it is created
   // (renders after state of location changes)
   useEffect(() => {
-    if (routeMatch.params.idChat) {
+    if (routeMatch.params?.chatId) {
       refreshChat();
     }
-  }, [routeMatch.params.idChat, location.state?.offerId]);
+  }, [routeMatch.params?.chatId, location.state?.offerId]);
 
   // Listener to socket.IO chat
   useEffect(() => {
@@ -161,19 +161,20 @@ const DirectChat = () => {
         }
       } else {
         dispatch(fetchChats());
-        dispatch(fetchOneChat(routeMatch.params.idChat));
+        dispatch(fetchOneChat(routeMatch.params?.chatId));
         makeErrorToastMessage(t("apiErrors.somethingWentWrong"));
       }
     });
     return () => removeMessageListener();
   }, [allChats, routeMatch]);
 
+
   const refreshChat = () => {
-    if (routeMatch.params.idChat === "newMessage") {
+    if (routeMatch.params?.chatId === "newMessage") {
       dispatch(fetchOneOffer(location.state.offerId));
       dispatch(setOneChat({}));
     } else {
-      dispatch(fetchOneChat(routeMatch.params.idChat));
+      dispatch(fetchOneChat(routeMatch.params?.chatId));
     }
   };
   const handleAcceptExchange = () => {

src/components/DirectChat/DirectChatContent/DirectChatContentHeader/DirectChatContentHeader.js

@@ -46,7 +46,7 @@ const DirectChatContentHeader = (props) => {
     if (!props?.interlucator?._blocked)
       history.push(
         replaceInRoute(PROFILE_PAGE, {
-          idProfile: props?.interlucator?.userId,
+          profileId: props?.interlucator?.userId,
         })
       );
   };

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.js

@@ -33,7 +33,7 @@ const ItemDetailsHeaderCard = (props) => {
   const { t } = useTranslation();
   const offer = useMemo(() => {
     if (props.offer) {
-      if (props.offer.offer._id === routeMatch.params.idProizvod) {
+      if (props.offer.offer._id === routeMatch.params.offerId) {
         return props.offer;
       }
     }

src/components/Modals/EditCategory/EditCategory.js

@@ -62,7 +62,6 @@ const EditCategory = (props) => {
     } else closeModalHandler();
   };
   const handleSubmit = (values) => {
-    console.log(props);
     dispatch(
       fetchAdminMethod({
         type: props.type,

src/components/Profile/Profile.js

@@ -13,14 +13,14 @@ const Profile = (props) => {
   const userId = useSelector(selectUserId);
   const dispatch = useDispatch();
   const routeMatch = useRouteMatch();
-  const idProfile = useMemo(() => routeMatch.params?.idProfile, [routeMatch]);
+  const profileId = useMemo(() => routeMatch.params?.profileId, [routeMatch]);
   useEffect(() => {
-    if (idProfile?.length > 0) {
-      dispatch(fetchProfile(idProfile));
+    if (profileId?.length > 0) {
+      dispatch(fetchProfile(profileId));
     }
-  }, [idProfile]);
+  }, [profileId]);
   const isMyProfile = useMemo(() => {
-    return userId === routeMatch.params.idProfile;
+    return userId === routeMatch.params?.profileId;
   }, [userId, routeMatch]);
   return (
     <ProfileContainer className={props.className}>
@@ -29,7 +29,7 @@ const Profile = (props) => {
       <ProfileOffers
         isAdmin={props.isAdmin}
         isMyProfile={isMyProfile}
-        idProfile={idProfile}
+        idProfile={profileId}
       />
     </ProfileContainer>
   );

src/components/TextFields/AutoSuggestTextField/AutoSuggestTextField.js

@@ -56,8 +56,6 @@ const AutoSuggestTextField = (props) => {
     onChange: props.onChange,
   };
 
-  console.log(suggestions);
-
   return (
     <AutoSuggestTextFieldContainer
       editLocation={props.editLocation}

src/components/UserReviews/UserReviews.js

@@ -54,10 +54,9 @@ const UserReviews = (props) => {
     )
   );
 
-  console.log("userr", props)
 
   useEffect(() => {
-    let idProfile = routeMatch.params.idProfile;
+    let idProfile = routeMatch.params?.profileId;
     if (idProfile) {
       if (props.isAdmin) {
         dispatch(fetchReviewsAsAdmin(idProfile));
@@ -66,8 +65,8 @@ const UserReviews = (props) => {
       }
     }
 
-    // if (props.profileReviews && routeMatch.params?.idProfile) {
-    //   let idProfile = routeMatch.params.idProfile;
+    // if (props.profileReviews && routeMatch.params?.profileId) {
+    //   let idProfile = routeMatch.params?.profileId;
     //   dispatch(fetchReviews(idProfile));
     // }
   }, [props.profileReviews, routeMatch]);

src/pages/AdminHomePage/AdminItemDetailsPage/AdminItemDetailsPage.js

@@ -15,7 +15,7 @@ const AdminItemDetailsPage = (props) => {
     const dispatch = useDispatch();
     const selectedOffer = useSelector(selectOffer);
     const [isInitiallyLoaded, setIsInitiallyLoaded] = useState(false);
-    const offerId = props.match.params.idProizvod;
+    const offerId = props.match.params?.offerId;
   
     useEffect(() => {
       dispatch(fetchOneOffer(offerId));
@@ -53,7 +53,7 @@ const AdminItemDetailsPage = (props) => {
   AdminItemDetailsPage.propTypes = {
     match: PropTypes.shape({
       params: PropTypes.shape({
-        idProizvod: PropTypes.string,
+        offerId: PropTypes.string,
       }),
     }),
   };

src/pages/ItemDetailsPage/ItemDetailsPageMUI.js

@@ -16,7 +16,7 @@ const ItemDetailsPage = (props) => {
   const dispatch = useDispatch();
   const selectedOffer = useSelector(selectOffer);
   const [isInitiallyLoaded, setIsInitiallyLoaded] = useState(false);
-  const offerId = props.match.params.idProizvod;
+  const offerId = props.match.params.offerId;
 
   useEffect(() => {
     dispatch(fetchOneOffer(offerId));
@@ -54,7 +54,7 @@ const ItemDetailsPage = (props) => {
 ItemDetailsPage.propTypes = {
   match: PropTypes.shape({
     params: PropTypes.shape({
-      idProizvod: PropTypes.string,
+      offerId: PropTypes.string,
     }),
   }),
 };

src/pages/MessagesListPage/MessagesListPage.js

@@ -12,7 +12,7 @@ export const MessagesListPage = () => {
     setTimeout(() => {
       history.push(
         replaceInRoute(DIRECT_CHAT_PAGE, {
-          idChat: chatId,
+          chatId: chatId,
         })
       );
     }, 120);

src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.js

@@ -105,10 +105,6 @@ const FirstPartOfRegistration = (props) => {
         }}
       />
 
-
-
-      {console.log(formik)}
-
       {formik.errors.mail && formik.touched.mail ? (
         <ErrorMessage>{formik.errors.mail}</ErrorMessage>
       ) : formik.errors.registerPassword && formik.touched.registerPassword ? (

src/store/saga/adminSaga.js

@@ -169,7 +169,6 @@ function* unblockUser(payload) {
 
 function* fetchAdminMethod({ payload }) {
   try {
-    yield call(console.log, "admin", payload);
     if (payload.type === CATEGORIES_TYPE) {
       if (payload.method === ADD_TYPE)
         yield call(addCategory, { values: payload.values, id: payload.id });

src/store/saga/chatSaga.js

@@ -144,7 +144,6 @@ function* startNewChat(payload) {
     const data = yield call(attemptFetchChats, { userId, queryString });
     yield put(setChats([...data.data.chatsWithData]));
     yield put(setChatsTotal(data.data.total))
-    console.log(data);
     const newChatId = newChatData.data.chatId;
     yield put(startNewChatSuccess());
     yield call(

src/store/saga/locationsSaga.js

@@ -11,7 +11,7 @@ function* fetchLocations() {
   try {
     const data = yield call(attemptFetchLocations);
     if (!data?.data) throw new Error();
-    yield put(setLocations(data.data.value));
+    yield put(setLocations(data.data));
     yield put(fetchLocationsSuccess());
   } catch (e) {
     yield put(fetchLocationsError());

src/util/helpers/messageHelper.js

@@ -3,21 +3,18 @@ import history from "../../store/utils/history";
 import { replaceInRoute } from "./routeHelpers";
 
 export const messageUserHelper = (chats, userId, offer) => {
-    const chatItem = chats.find(
-        (item) => item.chat.offerId === offer?.offer?._id
-      );
-      if (chatItem !== undefined) {
-        history.push(
-          replaceInRoute(DIRECT_CHAT_PAGE, { idChat: chatItem.chat._id })
-        );
-      } else {
-        if (offer?.offer?.userId !== userId) {
-          history.push(
-            replaceInRoute(DIRECT_CHAT_PAGE, { idChat: "newMessage" }),
-            {
-              offerId: offer?.offer?._id,
-            }
-          );
-        }
-      }
-}
+  const chatItem = chats.find(
+    (item) => item.chat.offerId === offer?.offer?._id
+  );
+  if (chatItem !== undefined) {
+    history.push(
+      replaceInRoute(DIRECT_CHAT_PAGE, { chatId: chatItem.chat._id })
+    );
+  } else {
+    if (offer?.offer?.userId !== userId) {
+      history.push(replaceInRoute(DIRECT_CHAT_PAGE, { chatId: "newMessage" }), {
+        offerId: offer?.offer?._id,
+      });
+    }
+  }
+};