feat: new api with real estate properties

src/js/api/api.ts

@@ -62,7 +62,7 @@ const __sendJsonRequest = async <T>(
   if (development) {
     console.log('MOCK', method, path);
     // simulate a delay
-    await new Promise((resolve) => setTimeout(resolve, 1000));
+    await new Promise((resolve) => setTimeout(resolve, 200));
     return mock;
   }
 

src/js/api/getAgent.ts

@@ -1,4 +1,4 @@
-import { Agency } from '../data/contract';
+import { Agency } from '../data/agency';
 import { deferredMinterRequest } from './api';
 import { mockAgents } from './mock';
 

src/js/api/getAgents.ts

@@ -1,4 +1,4 @@
-import { Agency } from '../data/contract';
+import { Agency } from '../data/agency';
 import { deferredMinterRequest, makeQueryArgs } from './api';
 import { mockAgents } from './mock';
 

src/js/api/getContractById.ts

@@ -1,6 +1,8 @@
-import { Agency, Contract } from '../data/contract';
+import { Contract } from '../data/contract';
 import { convertCanisterContractToContract } from '../utils/contract';
 import deferredDataRequest, { makeQueryArgs, Signature } from './api';
+import { getAgentByPrincipal } from './getAgent';
+import getRealEstate from './getRealEstate';
 import { mockContract } from './mock';
 
 /**
@@ -18,7 +20,8 @@ export interface ContractData {
   properties: ContractProperty[];
   restricted_properties: RestrictedContractProperty[];
   documents: ContractDocument[];
-  agency?: Agency;
+  agency: string;
+  real_estate: bigint;
   expiration: string;
 }
 
@@ -71,7 +74,12 @@ const getContractById = async (
 
   const contractData = await deferredDataRequest('GET', url, mockContract(id));
 
-  return convertCanisterContractToContract(contractData);
+  // get agency
+  const agency = await getAgentByPrincipal(contractData.agency);
+  // get real estate
+  const realEstate = await getRealEstate(contractData.real_estate);
+
+  return convertCanisterContractToContract(contractData, agency, realEstate);
 };
 
 export default getContractById;

src/js/api/getRealEstate.ts

@@ -0,0 +1,16 @@
+import { RealEstate } from '../data/real_estate';
+import deferredDataRequest from './api';
+import { mockRealEstate } from './mock';
+
+/**
+ * @description Get real estte by ID.
+ * @param id property ID
+ * @returns Real estate data
+ */
+const getRealEstate = async (id: bigint): Promise<RealEstate> => {
+  const url = `/real-estate/${id}`;
+
+  return await deferredDataRequest('GET', url, mockRealEstate(id));
+};
+
+export default getRealEstate;

src/js/api/getRealEstates.ts

@@ -0,0 +1,28 @@
+import deferredDataRequest, { makeQueryArgs } from './api';
+import { mockContractIds } from './mock';
+
+interface Filters {
+  agent?: string;
+  name?: string;
+  description?: string;
+  address?: string;
+  country?: string;
+  continent?: string;
+  region?: string;
+  zipCode?: string;
+  latitude?: string;
+  longitude?: string;
+  radius?: string;
+  zone?: string;
+  city?: string;
+  squareMeters?: number;
+  rooms?: number;
+}
+
+const getRealEstates = async (filters?: Filters): Promise<bigint[]> => {
+  const url = `/real-estate?${makeQueryArgs(filters ?? {})}`;
+
+  return await deferredDataRequest('GET', url, mockContractIds());
+};
+
+export default getRealEstates;

src/js/api/mock.ts

@@ -1,6 +1,7 @@
 import { ContractData } from './getContractById';
 import villaLondon from '../../assets/images/case/villa_london.webp';
-import { Agency } from '../data/contract';
+import { Agency } from '../data/agency';
+import { RealEstate } from '../data/real_estate';
 
 const FIRST_CONTRACT_ID = 1;
 
@@ -14,6 +15,55 @@ export const mockContractIds = (): bigint[] => {
   return ids;
 };
 
+export const mockAgency = (owner: string): Agency => {
+  return {
+    address: 'Via Roma 1',
+    name: 'Agency',
+    agent: 'Miriam',
+    city: 'Milano',
+    continent: 'Europe',
+    country: 'Italy',
+    email: '[email protected]',
+    logo: villaLondon,
+    mobile: '+39 333 1234567',
+    owner,
+    region: 'Lombardia',
+    vat: 'IT12345678901',
+    website: 'https://www.agency.com',
+    zip_code: '20121',
+  };
+};
+
+export const mockRealEstate = (id: bigint): RealEstate => {
+  return {
+    id,
+    name: 'Villa in the heart of London',
+    description: 'A beautiful villa in the heart of London',
+    image: villaLondon,
+    address: 'Via Roma 1',
+    country: 'Italy',
+    continent: 'Europe',
+    region: 'Lombardia',
+    zipCode: '20121',
+    latitude: 45.464664,
+    longitude: 9.18854,
+    zone: 'City Center',
+    squareMeters: 200,
+    rooms: 4,
+    bathrooms: 2,
+    bedrooms: 2,
+    floors: 2,
+    balconies: 1,
+    garden: true,
+    garage: true,
+    pool: false,
+    parking: false,
+    yearOfConstruction: 2017,
+    energyClass: 'A',
+    youtubeUrl: 'https://www.youtube.com/watch?v=DHaeadPJoJY',
+  };
+};
+
 export const mockContract = (id: bigint): ContractData => {
   return {
     id,
@@ -29,24 +79,10 @@ export const mockContract = (id: bigint): ContractData => {
     value: 400_000,
     deposit: 50_000,
     currency: 'USD',
-    agency: {
-      address: 'Via Roma 1',
-      name: 'Agency',
-      agent: 'Miriam',
-      city: 'Milano',
-      continent: 'Europe',
-      country: 'Italy',
-      email: '[email protected]',
-      logo: villaLondon,
-      mobile: '+39 333 1234567',
-      owner: 'v5vof-zqaaa-aaaal-ai5cq',
-      region: 'Lombardia',
-      vat: 'IT12345678901',
-      website: 'https://www.agency.com',
-      zip_code: '20121',
-    },
+    agency: 'v5vof-zqaaa-aaaal-ai5cq',
     expiration: '2050-01-01',
     restricted_properties: [],
+    real_estate: BigInt(1),
     documents: [
       [
         1,

src/js/components/App/pages/Agencies/AgentsTable.tsx

@@ -6,7 +6,7 @@ import { useAppContext } from '../../AppContext';
 import { IFilters } from '../Agencies';
 import Paragraph from '../../../reusable/Paragraph';
 import { getAgents } from '../../../../api/getAgents';
-import { Agency } from '../../../../data/contract';
+import { Agency } from '../../../../data/agency';
 import AgencyView from './AgentsTable/Agency';
 import Heading from '../../../reusable/Heading';
 

src/js/components/App/pages/Agencies/AgentsTable/Agency.tsx

@@ -1,6 +1,6 @@
 import * as Icon from 'react-icons/fi';
 
-import { Agency } from '../../../../../data/contract';
+import { Agency } from '../../../../../data/agency';
 import Container from '../../../../reusable/Container';
 import { Route } from '../../../../../utils/routes';
 

src/js/components/App/pages/Agencies/Filters/Map.tsx

@@ -7,7 +7,7 @@ import Link from '../../../../reusable/Link';
 import { getAgents } from '../../../../../api/getAgents';
 import { useAppContext } from '../../../AppContext';
 import { PopupMap } from '../../../../reusable/Map';
-import { Agency } from '../../../../../data/contract';
+import { Agency } from '../../../../../data/agency';
 import { Route } from '../../../../../utils/routes';
 
 const Map = () => {

src/js/components/App/pages/Agencies/pages/Agency.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
-import { Agency } from '../../../../../data/contract';
+import { Agency } from '../../../../../data/agency';
 import Container from '../../../../reusable/Container';
 import { useAppContext } from '../../../AppContext';
 import { getAgentByPrincipal } from '../../../../../api/getAgent';

src/js/components/App/pages/Agencies/pages/Agency/AgencyCard.tsx

@@ -1,7 +1,7 @@
 import * as Icon from 'react-icons/fi';
 import * as FaIcon from 'react-icons/fa6';
 
-import { Agency } from '../../../../../../data/contract';
+import { Agency } from '../../../../../../data/agency';
 import Container from '../../../../../reusable/Container';
 import Heading from '../../../../../reusable/Heading';
 import Link from '../../../../../reusable/Link';

src/js/components/App/pages/Agencies/pages/Agency/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { Agency } from '../../../../../../data/contract';
+import { Agency } from '../../../../../../data/agency';
 import Container from '../../../../../reusable/Container';
 import { SeeOnMap } from '../../../../../reusable/Map';
 

src/js/components/App/pages/Marketplace/Filters/Map.tsx

@@ -88,8 +88,8 @@ const MapRender = ({ open, onClose }: RenderProps) => {
   const markers = contracts.map((contract) => ({
     link: Route.marketplaceContractUrl(contract.id),
     position: {
-      lat: Number(contract.realEstate.latitude),
-      lng: Number(contract.realEstate.longitude),
+      lat: contract.realEstate.latitude ?? 0,
+      lng: contract.realEstate.longitude ?? 0,
     },
     markerChild: (
       <Container.FlexCols className="items-center gap-2">

src/js/components/App/pages/Marketplace/pages/Contract/RealEstateCard.tsx

@@ -91,6 +91,24 @@ const RealEstateCard = ({ contract }: Props) => (
                 {contract.realEstate.bathrooms} Bathrooms
               </Container.Container>
             )}
+            {contract.realEstate.bedrooms !== undefined && (
+              <Container.Container className="text-sm text-gray-500">
+                <MdIcon.MdBedroomParent
+                  size={16}
+                  className="text-gray-500 mr-2 inline"
+                />
+                {contract.realEstate.bedrooms} Bedrooms
+              </Container.Container>
+            )}
+            {contract.realEstate.yearOfConstruction !== undefined && (
+              <Container.Container className="text-sm text-gray-500">
+                <MdIcon.MdCalendarToday
+                  size={16}
+                  className="text-gray-500 mr-2 inline"
+                />
+                {contract.realEstate.yearOfConstruction}
+              </Container.Container>
+            )}
             {contract.realEstate.balconies !== undefined && (
               <Container.Container className="text-sm text-gray-500">
                 <MdIcon.MdBalcony

src/js/components/App/pages/Marketplace/pages/Contract/Sidebar.tsx

@@ -12,14 +12,14 @@ const Sidebar = ({ contract }: Props) => (
     {contract.realEstate.latitude && contract.realEstate.longitude && (
       <SeeOnMap
         center={{
-          lat: Number(contract.realEstate.latitude),
-          lng: Number(contract.realEstate.longitude),
+          lat: contract.realEstate.latitude,
+          lng: contract.realEstate.longitude,
         }}
         markers={[
           {
             position: {
-              lat: Number(contract.realEstate.latitude),
-              lng: Number(contract.realEstate.longitude),
+              lat: contract.realEstate.latitude,
+              lng: contract.realEstate.longitude,
             },
           },
         ]}

src/js/data/agency.ts

@@ -0,0 +1,20 @@
+import { Continent } from './contract';
+
+export interface Agency {
+  address: string;
+  agent: string;
+  city: string;
+  continent: Continent;
+  country: string;
+  email: string;
+  lat?: string;
+  lng?: string;
+  logo?: string;
+  mobile: string;
+  name: string;
+  owner: string;
+  region: string;
+  vat: string;
+  website: string;
+  zip_code: string;
+}

src/js/data/contract.ts

@@ -1,3 +1,4 @@
+import { Agency } from './agency';
 import { RealEstate } from './real_estate';
 
 export interface Contract {
@@ -9,7 +10,7 @@ export interface Contract {
   price: number;
   deposit: number;
   currency: string;
-  agency?: Agency;
+  agency: Agency;
   expiration: Date;
   documents: ContractDocument[];
   realEstate: RealEstate;
@@ -22,25 +23,6 @@ export interface ContractDocument {
   size: number;
 }
 
-export interface Agency {
-  address: string;
-  agent: string;
-  city: string;
-  continent: Continent;
-  country: string;
-  email: string;
-  lat?: string;
-  lng?: string;
-  logo?: string;
-  mobile: string;
-  name: string;
-  owner: string;
-  region: string;
-  vat: string;
-  website: string;
-  zip_code: string;
-}
-
 export type Continent =
   | 'Africa'
   | 'Antarctica'

src/js/data/real_estate.ts

@@ -1,4 +1,5 @@
 export interface RealEstate {
+  id: bigint;
   name: string;
   description: string;
   image?: string;
@@ -7,19 +8,21 @@ export interface RealEstate {
   continent?: string;
   region?: string;
   zipCode?: string;
-  latitude?: string;
-  longitude?: string;
+  latitude?: number;
+  longitude?: number;
   zone?: string;
   city?: string;
   squareMeters?: number;
   rooms?: number;
   bathrooms?: number;
+  bedrooms?: number;
   floors?: number;
   balconies?: number;
   garden: boolean;
   pool: boolean;
   garage: boolean;
   parking: boolean;
+  yearOfConstruction?: number;
   energyClass?: string;
   youtubeUrl?: string;
 }