From 793762fec9a20a76ca40de91929c8cdf503aa0d9 Mon Sep 17 00:00:00 2001
From: mohammedsalah7 <mhamad_m@windowslive.com>
Date: Wed, 3 Nov 2021 14:33:24 +0200
Subject: [PATCH]  get all data from api and display it in  profile #55

---
 client/package.json                           |   2 +
 .../components/Agent/EstateAgent/index.jsx    | 179 ++++++++++--------
 client/src/components/Agent/Favroit/index.jsx |   2 +-
 client/src/components/Agent/Info/index.jsx    |  23 ++-
 .../components/Agent/PenddingEstate/index.jsx |   2 +-
 client/src/components/tab/index.jsx           |   8 +-
 client/src/pages/Profile/index.jsx            |  63 ++++--
 7 files changed, 170 insertions(+), 109 deletions(-)

diff --git a/client/package.json b/client/package.json
index b900884..f8568bf 100644
--- a/client/package.json
+++ b/client/package.json
@@ -6,12 +6,14 @@
   "dependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.5",
     "@mui/material": "^5.0.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.23.0",
     "eslint-config-react-app": "^6.0.0",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
diff --git a/client/src/components/Agent/EstateAgent/index.jsx b/client/src/components/Agent/EstateAgent/index.jsx
index 08ad579..a40d9cd 100644
--- a/client/src/components/Agent/EstateAgent/index.jsx
+++ b/client/src/components/Agent/EstateAgent/index.jsx
@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+/* eslint-disable react/prop-types */
 /* eslint-disable import/no-extraneous-dependencies */
 import {
   Container,
@@ -8,101 +10,112 @@ import CardContent from '@mui/material/CardContent';
 import DeleteIcon from '@mui/icons-material/Delete';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
-import House from '../../../asstes/house.jpeg';
+import House from '../../../assetes/house.jpeg';
 import './style.css';
 
-const AgenteEstate = () => (
-  <Container
-    maxWidth="xl"
-    sx={{
-      width: '100%',
-      height: 300,
-      mb: 15,
-
-    }}
-  >
-
-    <Card sx={{
-      width: 500,
-      height: 200,
-      border: 'none',
-      marginTop: 2,
-      display: 'flex',
-      color: '#000',
-
-    }}
-    >
-      <CardContent sx={{
-        display: 'flex', width: '100%',
+const AgenteEstate = ({ data }) => {
+  console.log('AgenteEstate', data);
+  return (
+    <Container
+      maxWidth="xl"
+      sx={{
+        width: '100%',
+        height: 300,
+        mb: 15,
 
       }}
-      >
-        <img src={House} alt="publish house" className="img-house" />
+    >
+
+      {data.length ? data.map((datas) => (
+
+        <Card sx={{
+          width: 500,
+          height: 200,
+          border: 'none',
+          marginTop: 2,
+          display: 'flex',
+          color: '#000',
 
-        <CardContent sx={{
-          display: 'flex', flexDirection: 'column', width: '100%',
         }}
         >
+          <CardContent sx={{
+            display: 'flex', width: '100%',
 
-          <Typography sx={{ mt: -2, fontSize: 18 }}>
-            Rhoncus sed vestibulum
-            {' '}
-
-          </Typography>
-          <Typography
-            component="div"
-            sx={{
-              mb: 1,
-              display: 'flex',
-              flexDirection: 'row',
-              fontSize: 15,
-              color: '#5e5e5e',
-            }}
+          }}
           >
-            massa volutpat convallis morbi odio odio elementum eu interdum eu tincidunt in
-          </Typography>
-          <Typography sx={{ mb: 1, display: 'flex', flexDirection: 'row' }}>
-
-            House
-            {' '}
-
-          </Typography>
+            <img
+              // src={datas.image}
+              src={datas.image === null ? House : datas.image}
+              alt={datas.title}
+              className="img-house"
+            />
+
+            <CardContent sx={{
+              display: 'flex', flexDirection: 'column', width: '100%',
+            }}
+            >
+
+              <Typography sx={{ mt: -2, fontSize: 18 }}>
+                {datas.title}
+                {' '}
+
+              </Typography>
+              <Typography
+                component="div"
+                sx={{
+                  mb: 1,
+                  display: 'flex',
+                  flexDirection: 'row',
+                  fontSize: 15,
+                  color: '#5e5e5e',
+                }}
+              >
+                {datas.description}
+              </Typography>
+              <Typography sx={{ mb: 1, display: 'flex', flexDirection: 'row' }}>
+
+                {datas.category}
+                {' '}
+
+              </Typography>
+              <Typography sx={{ mb: 1, display: 'flex', flexDirection: 'row' }}>
+
+                {datas.type}
+                {' '}
+
+              </Typography>
+
+            </CardContent>
+          </CardContent>
           <Typography sx={{ mb: 1, display: 'flex', flexDirection: 'row' }}>
-
-            Buy
-            {' '}
-
+            <Button
+              variant="outlined"
+              sx={{
+                mt: 20,
+                mr: 1,
+                minWidth: 0,
+                padding: 0,
+                border: 'none',
+                '&:hover': { border: 'none' },
+
+              }}
+            >
+              <DeleteIcon sx={{
+                color: 'red',
+                '&:hover': {
+                  border: '1px solid red',
+                  borderRadius: 1,
+                },
+              }}
+              />
+            </Button>
           </Typography>
 
-        </CardContent>
-      </CardContent>
-      <Typography sx={{ mb: 1, display: 'flex', flexDirection: 'row' }}>
-        <Button
-          variant="outlined"
-          sx={{
-            mt: 20,
-            mr: 1,
-            minWidth: 0,
-            padding: 0,
-            border: 'none',
-            '&:hover': { border: 'none' },
-
-          }}
-        >
-          <DeleteIcon sx={{
-            color: 'red',
-            '&:hover': {
-              border: '1px solid red',
-              borderRadius: 1,
-            },
-          }}
-          />
-        </Button>
-      </Typography>
-
-    </Card>
+        </Card>
+      )) : ' You are still not published any estate' }
 
-  </Container>
-);
+    </Container>
+  );
+};
 
 export default AgenteEstate;
diff --git a/client/src/components/Agent/Favroit/index.jsx b/client/src/components/Agent/Favroit/index.jsx
index bccd4d9..11d58e3 100644
--- a/client/src/components/Agent/Favroit/index.jsx
+++ b/client/src/components/Agent/Favroit/index.jsx
@@ -13,7 +13,7 @@ import Divider from '@mui/material/Divider';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
-import House from '../../../asstes/house.jpeg';
+import House from '../../../assetes/house.jpeg';
 
 const AgenteFavariot = () => (
   <Container
diff --git a/client/src/components/Agent/Info/index.jsx b/client/src/components/Agent/Info/index.jsx
index 53386db..44a630b 100644
--- a/client/src/components/Agent/Info/index.jsx
+++ b/client/src/components/Agent/Info/index.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /* eslint-disable import/no-extraneous-dependencies */
 import {
   Container, Avatar,
@@ -10,10 +11,13 @@ import EditIcon from '@mui/icons-material/Edit';
 import EmailIcon from '@mui/icons-material/Email';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
+import PropTypes from 'prop-types';
 
-import PresonImg from '../../../asstes/avatar.png';
+import PresonImg from '../../../assetes/avatar.png';
 
-const AgentInfo = () => (
+const AgentInfo = ({
+  name, email, phone, avater,
+}) => (
   <Container
     maxWidth="xl"
     sx={{
@@ -43,13 +47,12 @@ const AgentInfo = () => (
       }}
       >
         <Avatar
-          src={PresonImg}
+          src={avater === null ? PresonImg : avater}
           sx={{
             width: 100,
             height: 100,
             margin: 1,
           }}
-
         />
         <CardContent sx={{
           display: 'flex', flexDirection: 'column', width: '100%',
@@ -57,12 +60,12 @@ const AgentInfo = () => (
         >
 
           <Typography sx={{ mb: 1.5, fontSize: 18 }}>
-            Mohammed M. Salah
+            {name}
           </Typography>
           <Typography component="div" sx={{ mb: 1.5, display: 'flex', flexDirection: 'row' }}>
             <PhoneAndroidIcon />
             {' '}
-            0597777777
+            {phone}
           </Typography>
           <Typography sx={{ mb: 1.5, display: 'flex', flexDirection: 'row' }}>
 
@@ -72,7 +75,7 @@ const AgentInfo = () => (
           <Typography sx={{ mb: 1.5, display: 'flex', flexDirection: 'row' }}>
 
             <EmailIcon />
-            moh2020@gmail.com
+            {email}
           </Typography>
 
         </CardContent>
@@ -97,5 +100,11 @@ const AgentInfo = () => (
 
   </Container>
 );
+AgentInfo.propTypes = {
+  name: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  phone: PropTypes.string.isRequired,
+  avater: PropTypes.string.isRequired,
+};
 
 export default AgentInfo;
diff --git a/client/src/components/Agent/PenddingEstate/index.jsx b/client/src/components/Agent/PenddingEstate/index.jsx
index e38d32e..73184d5 100644
--- a/client/src/components/Agent/PenddingEstate/index.jsx
+++ b/client/src/components/Agent/PenddingEstate/index.jsx
@@ -5,7 +5,7 @@ import {
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import House from '../../../asstes/house.jpeg';
+import House from '../../../assetes/house.jpeg';
 
 const PenddingEstate = () => (
   <Container
diff --git a/client/src/components/tab/index.jsx b/client/src/components/tab/index.jsx
index 45437f1..2b94c9e 100644
--- a/client/src/components/tab/index.jsx
+++ b/client/src/components/tab/index.jsx
@@ -1,7 +1,7 @@
-/* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/require-default-props */
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-props-no-spreading */
 import * as React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from 'prop-types';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
@@ -46,7 +46,7 @@ function a11yProps(index) {
   };
 }
 
-export default function ProfileTabs() {
+export default function ProfileTabs({ data }) {
   const [value, setValue] = React.useState(0);
 
   const handleChange = (event, newValue) => {
@@ -69,7 +69,7 @@ export default function ProfileTabs() {
         <StaticEstate />
       </TabPanel>
       <TabPanel value={value} index={1}>
-        <AgenteEstate />
+        <AgenteEstate data={data} />
       </TabPanel>
       <TabPanel value={value} index={2}>
         <PenddingEstate />
diff --git a/client/src/pages/Profile/index.jsx b/client/src/pages/Profile/index.jsx
index 676d427..4e26929 100644
--- a/client/src/pages/Profile/index.jsx
+++ b/client/src/pages/Profile/index.jsx
@@ -1,3 +1,8 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-console */
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
 import {
   Container, Box,
 } from '@mui/material';
@@ -6,22 +11,54 @@ import AgenteFavariot from '../../components/Agent/Favroit';
 
 import ProfileTabs from '../../components/tab';
 
-const AgentProfile = () => (
+const AgentProfile = () => {
+  const [error, setError] = useState('');
+  const [data, setData] = useState([]);
+  const [userId, setUserId] = useState(1);
+
+  useEffect(() => {
+    const getData = async () => {
+      await axios.get(`/api/v1/users/${userId}/estates`)
+        .then((res) => {
+          setData(res.data.data);
+        })
+        .catch((err) => {
+          setError(err);
+        });
+    };
+    getData();
+  }, [userId]);
+
+  console.log('ssss', data);
+  console.log(error);
+  return (
 
-  <Container maxWidth="xl">
-    <AgentInfo />
-    <Box sx={{
-      display: 'flex', flexDirection: 'row', justifyContent: 'space-between',
-    }}
-    >
-      <ProfileTabs />
-      <AgenteFavariot />
-    </Box>
+    <Container maxWidth="xl">
+      {
+        data.length
+          ? (
+            <AgentInfo
+              name={data[0].name}
+              email={data[0].email}
+              phone={data[0].phone}
+              avater={data[0].avater}
+            />
+          )
+          : 'loading'
+      }
+      <Box sx={{
+        display: 'flex', flexDirection: 'row', justifyContent: 'space-between',
+      }}
+      >
+        <ProfileTabs data={data} />
+        <AgenteFavariot />
+      </Box>
 
-    {' '}
+      {' '}
 
-  </Container>
+    </Container>
 
-);
+  );
+};
 
 export default AgentProfile;