Skip to content

Commit

Permalink
final
Browse files Browse the repository at this point in the history
  • Loading branch information
kakhi1 committed Mar 17, 2023
1 parent c17fc5c commit f828e72
Show file tree
Hide file tree
Showing 9 changed files with 406 additions and 31 deletions.
2 changes: 1 addition & 1 deletion client/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>
refine - Build your React-based CRUD applications, without constraints.
Dashboard
</title>
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
Expand Down
73 changes: 70 additions & 3 deletions client/src/components/agent/AgentCard.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,75 @@
import React from 'react'
import { EmailOutlined,LocationCity,Phone,Place } from '@mui/icons-material'
import { useGetIdentity } from '@pankod/refine-core'
import {Box,Stack, Typography} from '@pankod/refine-mui'
import { AgentCardProp,InfoBarProps } from 'interfaces/agent'
import { Link } from "react-router-dom";
const InfoBar=({icon,name}:InfoBarProps) =>(
<Stack flex={1} minWidth={{xs:'100%', sm:300}} gap={1.5} direction="row">
{icon}
<Typography fontSize={14} color="#808191">{name}</Typography>
</Stack>
);

const AgentCard = ({id,name,email,avatar,noOfProperties}:AgentCardProp) => {
const {data:currentUser}=useGetIdentity();
const generateLink=()=>{
if(currentUser.email===email) return '/my-profile'
return `/agent/show/${id}`;
}


const AgentCard = () => {
return (
<div>AgentCard</div>
<Box
component={Link}
to={generateLink()}
width="100%"
sx={{
display:"flex",
flexDirection:{xs:"column", sm:"row"},
gap:"20px",
padding:"20px",
'&:hover':{
boxShadow: '0 22px 45px rgba(176,176,176,0.1 )'
}
}}
>
<img
src={avatar}
alt='user'
width={90}
height={90}
style={{borderRadius:8, objectFit:'cover'}}
/>
<Stack direction="column" justifyContent="space-around"
flex={1} gap={{
xs:4, sm:2
}}
>
<Stack gap={2} direction="row" flexWrap="wrap">
<Typography fontSize={22} fontWeight={600} color="#11142d">{name}</Typography>
<Typography fontSize={14} color="#808191">Real-Estate Agent</Typography>
</Stack>
<Stack direction="row" flexWrap="wrap"
justifyContent="space-between" alignItems="center" gap={2}>
<InfoBar
icon={<EmailOutlined sx={{color:'#808191'}}/>}
name={email}
/>
<InfoBar
icon={<Place sx={{color:'#808191'}}/>}
name="London"
/>
<InfoBar
icon={<Phone sx={{color:'#808191'}}/>}
name="+744-2234-4455"
/>
<InfoBar
icon={<LocationCity sx={{color:'#808191'}}/>}
name={`${noOfProperties} Properties`}
/>
</Stack>
</Stack>
</Box>
)
}

Expand Down
200 changes: 194 additions & 6 deletions client/src/components/common/Profile.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,197 @@
import React from 'react'
import { Email, Phone, Place } from "@mui/icons-material";
import { Box, Stack, Typography } from "@mui/material";

const Profile = () => {
return (
<div>Profile</div>
)
import { ProfileProps, PropertyProps } from "interfaces/common";
import PropertyCard from "./PropertyCard";

function checkImage(url: any) {
const img = new Image();
img.src = url;
return img.width !== 0 && img.height !== 0;
}

export default Profile
const Profile = ({ type, name, avatar, email, properties }: ProfileProps) => (
<Box>
<Typography fontSize={25} fontWeight={700} color="#11142D">
{type} Profile
</Typography>

<Box mt="20px" borderRadius="15px" padding="20px" bgcolor="#FCFCFC">
<Box
sx={{
display: "flex",
flexDirection: { xs: "column", md: "row" },
gap: 2.5,
}}
>
<img
src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80"
width={340}
height={320}
alt="abstract"
className="my_profile-bg"
/>
<Box
flex={1}
sx={{
marginTop: { md: "58px" },
marginLeft: { xs: "20px", md: "0px" },
}}
>
<Box
flex={1}
display="flex"
flexDirection={{ xs: "column", md: "row" }}
gap="20px"
>
<img
src={
checkImage(avatar)
? avatar
: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/User-avatar.svg/2048px-User-avatar.svg.png"
}
width={78}
height={78}
alt="user_profile"
className="my_profile_user-img"
/>

<Box
flex={1}
display="flex"
flexDirection="column"
justifyContent="space-between"
gap="30px"
>
<Stack direction="column">
<Typography
fontSize={22}
fontWeight={600}
color="#11142D"
>
{name}
</Typography>
<Typography fontSize={16} color="#808191">
Realestate Agent
</Typography>
</Stack>

<Stack direction="column" gap="30px">
<Stack gap="15px">
<Typography
fontSize={14}
fontWeight={500}
color="#808191"
>
Address
</Typography>
<Box
display="flex"
flexDirection="row"
alignItems="center"
gap="10px"
>
<Place sx={{ color: "#11142D" }} />
<Typography
fontSize={14}
color="#11142D"
>
4517 Washington Ave. Manchaster,
Kentucky 39495
</Typography>
</Box>
</Stack>

<Stack
direction="row"
flexWrap="wrap"
gap="20px"
pb={4}
>
<Stack flex={1} gap="15px">
<Typography
fontSize={14}
fontWeight={500}
color="#808191"
>
Phone Number
</Typography>
<Box
display="flex"
flexDirection="row"
alignItems="center"
gap="10px"
>
<Phone sx={{ color: "#11142D" }} />
<Typography
fontSize={14}
color="#11142D"
noWrap
>
+0123 456 7890
</Typography>
</Box>
</Stack>

<Stack flex={1} gap="15px">
<Typography
fontSize={14}
fontWeight={500}
color="#808191"
>
Email
</Typography>
<Box
display="flex"
flexDirection="row"
alignItems="center"
gap="10px"
>
<Email sx={{ color: "#11142D" }} />
<Typography
fontSize={14}
color="#11142D"
>
{email}
</Typography>
</Box>
</Stack>
</Stack>
</Stack>
</Box>
</Box>
</Box>
</Box>
</Box>

{properties.length > 0 && (
<Box mt={2.5} borderRadius="15px" padding="20px" bgcolor="#FCFCFC">
<Typography fontSize={18} fontWeight={600} color="#11142D">
{type} Properties
</Typography>

<Box
mt={2.5}
sx={{
display: "flex",
flexWrap: "wrap",
gap: 2.5,
}}
>
{properties?.map((property: PropertyProps) => (
<PropertyCard
key={property._id}
id={property._id}
title={property.title}
location={property.location}
price={property.price}
photo={property.photo}
/>
))}
</Box>
</Box>
)}
</Box>
);

export default Profile;
37 changes: 30 additions & 7 deletions client/src/pages/agent-profile.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,32 @@
import React from 'react'
import { useOne } from "@pankod/refine-core";
import { useParams } from "react-router-dom";

const agentProfile = () => {
return (
<div>agent-profile</div>
)
}
import { Profile } from "components";

export default agentProfile
const AgentProfile = () => {
const { id } = useParams();

const { data, isLoading, isError } = useOne({
resource: "users",
id: id as string,
});

console.log(data);

const myProfile = data?.data ?? [];

if (isLoading) return <div>loading...</div>;
if (isError) return <div>error...</div>;

return (
<Profile
type="Agent"
name={myProfile.name}
email={myProfile.email}
avatar={myProfile.avatar}
properties={myProfile.allProperties}
/>
);
};

export default AgentProfile;
41 changes: 36 additions & 5 deletions client/src/pages/agent.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,40 @@
import React from 'react'

const agent = () => {
import {useList} from '@pankod/refine-core'
import {Box,Typography} from '@pankod/refine-mui'
import { AgentCard } from 'components'
const Agents = () => {
const{data, isLoading,isError} =useList({
resource:'users' ,
});
const allAgents= data?.data??[];
if(isLoading) return <div>Loading...</div>
if(isError) return <div>Error</div>
return (
<div>agent</div>
<Box>
<Typography fontSize={25} fontWeight={700} color='#11142d' >
Agents List
</Typography>
<Box
mt="20px"
sx={{
display:'flex',
flexWrap:'wrap',
gap:'20px',
backgroundColor:'#fcfcfc'
}}
>
{allAgents.map((agent)=>(
<AgentCard
key={agent._id}
id={agent.id}
name={agent.name}
email={agent.email}
avatar={agent.avatar}
noOfProperties={agent.allProperties.length}
/>
))}
</Box>
</Box>
)
}

export default agent
export default Agents
Loading

0 comments on commit f828e72

Please sign in to comment.