column page

src/components/Cards/ChatCard/ChatCard.js

@@ -3,21 +3,25 @@ import PropTypes from "prop-types";
 import {
   CheckButton,
   MessageIcon,
-  OfferAuthor,
-  OfferAuthorName,
   OfferImage,
-  OfferInfo,
-  OfferLocation,
   OfferTitle,
   OfferCard,
   ChatOffer,
   Commands,
   ChatInfo,
   OfferText,
-  ChatCardContainer
+  ChatCardContainer,
+  Col,
+  UserImage,
+  UserName,
+  LastMessage,
+  Line,
+  LocationContainer,
+  XSText,LocationIcon
 
 } from "./ChatCard.styled";
 import { ReactComponent as Message } from "../../../assets/images/svg/mail.svg";
+import { ReactComponent as Location } from "../../../assets/images/svg/location.svg";
 import selectedTheme from "../../../themes";
 import { OfferCardContainer } from "../OfferCard/OfferCard.styled";
 //import { useHistory } from "react-router-dom";
@@ -30,23 +34,29 @@ const ChatCard = (props) => {
 //   };
   return (
       <ChatCardContainer>
-          <ChatInfo>
-            <OfferTitle>Name</OfferTitle>
-            <OfferAuthor>
-              <OfferAuthorName >Last chat details</OfferAuthorName>
-              <OfferLocation>Location</OfferLocation>
-            </OfferAuthor>
+        <Col>
+            <UserImage />
+        <ChatInfo>
+            <UserName>Name</UserName>
+            <LastMessage>Last chat details</LastMessage>
+            <LocationContainer>
+                <LocationIcon>
+                    <Location  height="12px" width="12px" />
+                </LocationIcon>
+                <XSText>Beograd, Srbija</XSText>
+            </LocationContainer>
           </ChatInfo>
-          <OfferInfo>
-          <ChatOffer>
+        </Col>
+        <Line />
+        <Col>
+        <ChatOffer>
                     <OfferImage/>
                     <OfferCardContainer>
                         <OfferText>Proizvod:</OfferText>
                         <OfferTitle>Prazne Flase</OfferTitle>
                     </OfferCardContainer>
-                </ChatOffer>
-          </OfferInfo>
-          <Commands>
+            </ChatOffer>
+            <Commands>
             <MessageIcon vertical={props.vertical}>
                 <Message />
             </MessageIcon>
@@ -58,6 +68,8 @@ const ChatCard = (props) => {
                     Pogledaj caskanje
                 </CheckButton>
           </Commands>
+        </Col>
+         
       </ChatCardContainer>
 
   );

src/components/Cards/ChatCard/ChatCard.styled.js

@@ -8,7 +8,8 @@ import { ReactComponent as Eye } from "../../../assets/images/svg/eye-striked.sv
 
 export const ChatCardContainer = styled(Container)`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  height: 180px;
   width: ${(props) => (!props.halfwidth ? "100%" : "49%")};
   box-sizing: border-box;
   margin: 10px 0;
@@ -37,6 +38,16 @@ export const ChatCardContainer = styled(Container)`
     `}
   }
 `;
+export const UserImage = styled.img`
+  border-radius: 50%;
+  width: 144px;
+  height: 144px;
+  @media (max-width: 600px) {
+    width: 90px;
+    height: 90px;
+  }
+`;
+
 export const OfferFlexContainer = styled(Container)`
   display: flex;
   flex-direction: row;
@@ -51,22 +62,7 @@ export const OfferFlexContainer = styled(Container)`
     `}
   }
 `;
-export const OfferImage = styled.img`
-  max-width: 144px;
-  max-height: 144px;
-  width: 144px;
-  height: 144px;
-  @media (max-width: 600px) {
-    ${(props) =>
-      !props.vertical &&
-      `
-      max-width: 108px;
-    max-height: 108px;
-    width: 108px;
-    height: 108px;
-    `}
-  }
-`;
+
 export const OfferInfo = styled(Box)`
   display: flex;
   flex: 2;
@@ -285,13 +281,14 @@ export const OfferImageContainer = styled(Box)`
   height: 144px;
   @media (max-width: 600px) {
     ${(props) =>
-      !props.vertical ?
-      `
+      !props.vertical
+        ? `
       min-width: 108px;
       min-height: 108px;
       width: 108px;
       height: 108px;
-    ` : `margin-top: 4px;`}
+    `
+        : `margin-top: 4px;`}
     border-radius: 4px;
     overflow: hidden;
     box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.12);
@@ -316,7 +313,10 @@ export const EyeIcon = styled(Eye)`
   }
 `;
 
-export const ChatOffer = styled(Box)``;
+export const ChatOffer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+`;
 
 export const OfferText = styled(Box)``;
 
@@ -324,4 +324,78 @@ export const Commands = styled(Box)``;
 
 export const OfferCard = styled(Box)``;
 
-export const ChatInfo = styled(Box)``;
+export const ChatInfo = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+export const Col = styled(Box)`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const UserName = styled(Typography)`
+  margin-bottom: 12px;
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryPurple};
+  font-weight: 700;
+  font-size: 24px;
+  cursor: pointer;
+  @media (max-width: 600px) {
+    font-size: 18px;
+  }
+`;
+
+export const LastMessage = styled(Typography)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 16px;
+  position: relative;
+  @media (max-width: 600px) {
+    font-size: 14px;
+  }
+`;
+
+export const LocationContainer = styled(Box)`
+    display: flex;
+    flex-direction: row;
+    gap:2px;
+`;
+
+export const LocationIcon = styled(Box)`
+    height: 12px;
+    width: auto;
+    position: relative;
+`;
+
+export const XSText = styled(Typography)`
+  font-family: "Open Sans";
+  color: ${selectedTheme.primaryText};
+  line-height: 16px;
+  font-size: 14px;
+  position: relative;
+`;
+
+export const OfferCardContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const OfferImage = styled.img`
+  max-width: 144px;
+  max-height: 144px;
+  width: 144px;
+  height: 144px;
+  @media (max-width: 600px) {
+    ${(props) =>
+      !props.vertical &&
+      `
+      max-width: 108px;
+    max-height: 108px;
+    width: 108px;
+    height: 108px;
+    `}
+  }
+`;

src/components/ChatColumn/ChatColumn.js

@@ -1,19 +1,89 @@
-import React from "react";
+import React, {useState, useEffect} from "react";
 import ChatCard from "../Cards/ChatCard/ChatCard";
 import Header from "../ItemDetails/Header/Header";
-import { ChatColumnContainer, ListContainer, ListHeader } from "./ChatColumn.styled";
+import { HeaderSelect, SelectOption } from "../MarketPlace/Header/Header.styled";
+import {
+  ChatColumnContainer,
+  ListContainer,
+  ListHeader,
+  TitleSortContainer,
+} from "./ChatColumn.styled";
+import { sortEnum } from "../../enums/sortEnum";
+import useSorting from "../../hooks/useSorting";
+import { ReactComponent as Down } from "../../assets/images/svg/down-arrow.svg";
+import { IconStyled } from "../Icon/Icon.styled";
+import { Grid } from "@mui/material";
+import MailOutlineIcon from "@mui/icons-material/MailOutline";
+import { HeaderTitle } from "../ProfileCard/ProfileCard.styled";
+//import { useTranslation } from "react-i18next";
 
-export const ChatColumn = () => {
-    return (
-        <ChatColumnContainer>
-            <Header />
-            <ListHeader enableSort={true}></ListHeader>
-            <ListContainer>
-                <ChatCard></ChatCard>
-            </ListContainer>
-        </ChatColumnContainer>
-    )
+export const DownArrow = (props) => {
+    <IconStyled {...props}>
+        <Down/>
+    </IconStyled>
 }
 
+export const ChatColumn = () => {
+
+    const sorting = useSorting();
+    //const { t } = useTranslation();
+    const [sortOption, setSortOption] = useState(sortEnum.INITIAL);
+
+    useEffect(() => {
+        setSortOption(sorting.selectedSortOption);
+      }, [sorting.selectedSortOption]);
+    
+
+
+    const handleChangeSelect = (event) => {
+        let chosenOption;
+        for (const sortOption in sortEnum) {
+          if (sortEnum[sortOption].value === event.target.value) {
+            chosenOption = sortEnum[sortOption];
+            sorting.changeSorting(chosenOption)
+          }
+        }
+      };
+
+  return (
+    <ChatColumnContainer>
+      <Header />
+      <TitleSortContainer>
+      <Grid
+          container
+          direction="row"
+          justifyContent="start"
+          alignItems="center"
+        >
+          <MailOutlineIcon color="action" sx={{ mr: 0.9 }} />
+          <HeaderTitle>Moj Profil</HeaderTitle>
+        </Grid>
+        <HeaderSelect
+          value={sortOption?.value ? sortOption.value : sortEnum.INITIAL.value}
+          IconComponent={DownArrow}
+          onChange={handleChangeSelect}
+        >
+          {Object.keys(sortEnum).map((property) => {
+            return (
+              <SelectOption
+                value={sortEnum[property].value}
+                key={sortEnum[property].value}
+              >
+                {sortEnum[property].mainText}
+              </SelectOption>
+            );
+          })}
+        </HeaderSelect>
+      </TitleSortContainer>
+      <ListHeader enableSort={true}></ListHeader>
+      <ListContainer>
+        <ChatCard></ChatCard>
+        <ChatCard></ChatCard>
+        <ChatCard></ChatCard>
+        <ChatCard></ChatCard>
+      </ListContainer>
+    </ChatColumnContainer>
+  );
+};
 
 export default ChatColumn;

src/components/ChatColumn/ChatColumn.styled.js

@@ -20,3 +20,10 @@ export const ListHeader = styled(Box)`
     bottom: 15px;
   `}
 `;
+
+export const TitleSortContainer = styled(Box)`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+`;

src/layouts/ChatLayout/ChatLayout.js

@@ -1,19 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ChatContent, ChatLayoutContainer } from './ChatLayout.styled';
-import { Grid } from '@mui/material';
 
 
 export const ChatLayout = (props) => {
     return (
         <ChatLayoutContainer>
             {props.children}
-      <Grid container maxHeight="xl" spacing={2}>
-  
-      <ChatContent item xs={12} lg={9} xl={9.6} md={8} >
-          {props.content}
+
+      <ChatContent maxHeight="xl" spacing={2} justifyContent={"center"} item xs={12} md={10}>
+            {props.content}
         </ChatContent>       
-      </Grid>
         </ChatLayoutContainer>
     )
 }

src/layouts/ChatLayout/ChatLayout.styled.js

@@ -6,4 +6,5 @@ import styled from "styled-components";
 export const ChatLayoutContainer = styled(Container)`
 `;
 
-export const ChatContent = styled(Grid)``;
+export const ChatContent = styled(Grid)`
+justify-content:center`;