properties

kakhi1 · Mar 15, 2023 · 9ed4201 · 9ed4201
1 parent 1cb171e
commit 9ed4201
Show file tree

Hide file tree

Showing 15 changed files with 400 additions and 145 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -4,13 +4,13 @@
   "private": true,
   "dependencies": {
     "@mui/icons-material": "^5.8.3",
-    "@pankod/refine-cli": "^1.2.0",
-    "@pankod/refine-core": "^3.101.2",
-    "@pankod/refine-inferencer": "^2.0.2",
-    "@pankod/refine-mui": "^3.30.0",
-    "@pankod/refine-react-hook-form": "^3.27.1",
-    "@pankod/refine-react-router-v6": "^3.18.0",
-    "@pankod/refine-simple-rest": "^3.18.0",
+    "@pankod/refine-cli": "^1.19.0",
+    "@pankod/refine-core": "^3.103.0",
+    "@pankod/refine-inferencer": "^2.10.0",
+    "@pankod/refine-mui": "^3.63.0",
+    "@pankod/refine-react-hook-form": "^3.39.0",
+    "@pankod/refine-react-router-v6": "^3.40.0",
+    "@pankod/refine-simple-rest": "^3.39.0",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -53,18 +53,40 @@ axiosInstance.interceptors.request.use((request: AxiosRequestConfig) => {
 
 function App() {
   const authProvider: AuthProvider = {
-    login: ({ credential }: CredentialResponse) => {
+    login: async ({ credential }: CredentialResponse) => {
       const profileObj = credential ? parseJwt(credential) : null;
+        // Save user to MongoDB
+      if(profileObj){
+        const response = await fetch(
+          "http://localhost:8080/api/v1/users",
+          {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                  name: profileObj.name,
+                  email: profileObj.email,
+                  avatar: profileObj.picture,
+              }),           
+        })
+        const data =await response.json();
+        if(response.status===200){
 
-      if (profileObj) {
-        localStorage.setItem(
+          localStorage.setItem(
           "user",
           JSON.stringify({
             ...profileObj,
             avatar: profileObj.picture,
+            userid: data._id,
           })
         );
-      }
+        }else { 
+          return Promise.reject()
+        }
+
+
+      } 
+
+
 
       localStorage.setItem("token", `${credential}`);
 
@@ -109,7 +131,7 @@ function App() {
       <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
       <RefineSnackbarProvider>
         <Refine
-          dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
+          dataProvider={dataProvider("http://localhost:8080/api/v1")}
           notificationProvider={notificationProvider}
           ReadyPage={ReadyPage}
           catchAll={<ErrorComponent />}

diff --git a/client/src/components/common/CustomButton.tsx b/client/src/components/common/CustomButton.tsx
@@ -1,40 +1,43 @@
-import React from "react";
-import { Button, minWidth } from "@pankod/refine-mui";
+import { Button } from "@mui/material";
+
 import { CustomButtonProps } from "interfaces/common";
 
 const CustomButton = ({
-  type,
-  title,
-  backgroundColor,
-  color,
-  fullWidth,
-  icon,
-  handleClick,
+    type,
+    title,
+    backgroundColor,
+    color,
+    fullWidth,
+    icon,
+    handleClick,
+    disabled,
 }: CustomButtonProps) => {
-  return (
-    <Button
-      sx={{
-        flex: fullWidth ? 1 : "uset",
-        padding: "10px 15px ",
-        width: fullWidth ? "100%" : "fit-content",
-        minWidth: 130,
-        backgroundColor,
-        color,
-        fontsize: 16,
-        fontWeight: 600,
-        gap: "10px",
-        textTransform: "capitalize",
-        "$:hover": {
-          opacity: 0.9,
-          backgroundColor,
-        },
-      }}
-      onClick={handleClick}
-    >
-      {icon}
-      {title}
-    </Button>
-  );
+    return (
+        <Button
+            disabled={disabled}
+            type={type === "submit" ? "submit" : "button"}
+            sx={{
+                flex: fullWidth ? 1 : "unset",
+                padding: "10px 15px",
+                width: fullWidth ? "100%" : "fit-content",
+                minWidth: 130,
+                backgroundColor,
+                color,
+                fontSize: 16,
+                fontWeight: 600,
+                gap: "10px",
+                textTransform: "capitalize",
+                "&:hover": {
+                    opacity: 0.9,
+                    backgroundColor,
+                },
+            }}
+            onClick={handleClick}
+        >
+            {icon}
+            {title}
+        </Button>
+    );
 };
 
-export default CustomButton;
+export default CustomButton;
diff --git a/client/src/components/common/Form.tsx b/client/src/components/common/Form.tsx
@@ -57,7 +57,7 @@ const Form = ({
                 color="info"
                 style={{width:'100%', background:'transparent', fontSize:'16px',
                   borderColor:'rgba(0,0,0,0.23)', borderRadius:6, padding:10, color:'#919191'}}
-                  {...register('title',{required:true})}
+                  {...register('description',{required:true})}
                 />
           </FormControl>
           <Stack direction='row' gap={4}>
@@ -77,7 +77,7 @@ const Form = ({
                 required
                 inputProps={{'area-label':'without label'}}
                 defaultValue='aparment'
-                {...register('title',{required:true})}
+                {...register('propertyType',{required:true})}
                  >
                   <MenuItem value='apartment'>Apartment
                   </MenuItem>

diff --git a/client/src/components/common/PropertyCard.tsx b/client/src/components/common/PropertyCard.tsx
@@ -1,8 +1,46 @@
-import React from 'react'
+import {Place} from '@mui/icons-material'
+import{Link } from '@pankod/refine-react-router-v6'
+import { Typography,Box,Card, CardMedia, CardContent,Stack, padding, fontWeight, color } from '@pankod/refine-mui'
+import { PropertyCardProps } from 'interfaces/property'
 
-const PropertyCard = () => {
+const PropertyCard = ({id,title,location, price, photo}:PropertyCardProps) => {
   return (
-    <div>PropertyCard</div>
+    <Card
+      component={Link} to={'/properties/${id}'}
+      sx={{
+        maxWidth:'330px',
+        padding:'10px',
+        '&:hover':{
+          boxShadow:'0 22px 45px 2px(176, 176, 176, 0.1)'
+        },
+        cursor:'pointer',
+        textDecoration:'none'
+      }}
+      elevation={0}
+    >
+      <CardMedia
+       component="img"
+       width="100%"
+       height={210}
+       image={photo}
+       alt='card image'
+       sx={{borderRadius:'10px'}}
+      />
+      <CardContent sx={{display:'flex', flexDirection:'row', justifyContent:'space-between', gap:1,paddingX:'5px'}}> 
+        <Stack direction="column" gap={1}> 
+        <Typography fontSize={16} fontWeight={500}>{title}</Typography>
+        <Stack  direction="row" gap={0.5} alignItems="flex-start">
+          <Place
+          sx={{fontSize:18,color:"#11142d", marginTop:0.5 }}/>
+          <Typography fontSize={14}  color="#808191">{location}</Typography>
+          </Stack>             
+        </Stack>
+        <Box px={1.5} py={0.5} borderRadius={1} bgcolor="#dadefa" height="fit-content">
+          <Typography fontSize={12} fontWeight={600} color="#475be8">{price}</Typography>
+        </Box>
+      </CardContent>
+
+    </Card>
   )
 }