Adding data to building passport

src/app/components/building-passport/Toolbar.tsx

@@ -14,7 +14,6 @@ import {
   NavigationMenuLink,
 } from "@/app/shadcn_components/ui/navigation-menu";
 import { cva } from "class-variance-authority";
-import type { PropertyMeta } from "@/app/db/schema/property";
 
 interface ToolbarProps {
   propertyId: string;

src/app/portfolio/[slug]/building-passport/[propertyId]/layout.tsx

@@ -1,19 +1,5 @@
 import { Toolbar } from "@/app/components/building-passport/Toolbar";
-import { PropertyMeta } from "@/app/db/schema/property";
-
-async function getPropertyMeta(propertyId: string): Promise<PropertyMeta> {
-  const url =
-    process.env.URL + `/api/building-passport/property-meta/${propertyId}`;
-
-  const response = await fetch(url, {
-    method: "GET",
-    headers: { "Content-Type": "application/json" },
-  });
-  if (!response.ok) {
-    throw new Error("Network response was not ok");
-  }
-  return response.json();
-}
+import { getPropertyMeta } from "./utils";
 
 export default async function DashboardLayout({
   children, // will be a page or nested layout
@@ -26,7 +12,6 @@ export default async function DashboardLayout({
   const portfolioId = params.slug ?? "";
 
   // The layout is a server component by default so we can fetch meta data here
-  // TODO: Implement get api
   const propertyMeta = await getPropertyMeta(params.propertyId);
 
   if (!propertyId && propertyId !== "0") {

src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx

@@ -9,25 +9,16 @@ import {
   ClockIcon,
   UserGroupIcon,
 } from "@heroicons/react/24/solid";
+import { getPropertyMeta } from "./utils";
 
-export default async function BuildingPassportHome() {
-  const propertyMeta: PropertyMeta = {
-    id: 1,
-    address: "123 Fake Street",
-    postcode: "AB1 2CD",
-    hasPreConditionReport: true,
-    hasRecommendations: true,
-    createdAt: "2023-07-12 11:51:31.000 +0100",
-    propertyType: "House",
-    builtForm: "Detached",
-    localAuthority: "Birmingham",
-    constituency: "Birmingham",
-    numberOfRooms: 5,
-    yearBuilt: 1990,
-    tenure: "Rented (social)",
-    currentEpcRating: "C",
-    currentSapPoints: 78,
-  };
+export default async function BuildingPassportHome({
+  params,
+}: {
+  params: { slug: string; propertyId: string };
+}) {
+  // This is a server component and because we make the exact same request in the layout,
+  // the response is cached so we just gain access to the data
+  const propertyMeta = await getPropertyMeta(params.propertyId);
 
   return (
     <div className="flex flex-col items-center mt-4">

src/app/portfolio/[slug]/building-passport/[propertyId]/pre-assessment-report/page.tsx

@@ -6,6 +6,7 @@ import {
   generalColumns,
   retrofitColumns,
 } from "@/app/components/building-passport/FeatureTableColumns";
+import { getPropertyMeta } from "../utils";
 
 function AddressCard({ address }: { address: string }) {
   // In the future, we might want to use react-wrap-balancer for some of this text
@@ -43,7 +44,10 @@ function PropertyDetailsCard({
               </tr>
               <tr>
                 <td className="text-gray-100 ">Total floor area:</td>
-                <td className="text-gray-100 text-end pr-8 py-1">{`${conditionReportData.totalFloorArea} square meters`}</td>
+                <td className="text-gray-100 text-end pr-8 py-1">
+                  {`${conditionReportData.totalFloorArea} m`}
+                  <sup>2</sup>
+                </td>
               </tr>
               <tr>
                 <td className="text-gray-100 ">In conservation area:</td>
@@ -90,25 +94,13 @@ function PropertyDetailsCard({
 // This type is used to define the shape of our data.
 // You can use a Zod schema here if you want.
 
-export default async function PreAssessmentReport() {
+export default async function PreAssessmentReport({
+  params,
+}: {
+  params: { slug: string; propertyId: string };
+}) {
   // TODO: Add main fuel!
-  const propertyMeta: PropertyMeta = {
-    id: 1,
-    address: "123 Fake Street",
-    postcode: "AB1 2CD",
-    hasPreConditionReport: true,
-    hasRecommendations: true,
-    createdAt: "2023-07-12 11:51:31.000 +0100",
-    propertyType: "House",
-    builtForm: "Detached",
-    localAuthority: "Birmingham",
-    constituency: "Birmingham",
-    numberOfRooms: 5,
-    yearBuilt: 1990,
-    tenure: "Rented (social)",
-    currentEpcRating: "C",
-    currentSapPoints: 78,
-  };
+  const propertyMeta = await getPropertyMeta(params.propertyId);
 
   const conditionReportData: ConditionReportData = {
     id: 1,

src/app/portfolio/[slug]/building-passport/[propertyId]/utils.ts

@@ -0,0 +1,17 @@
+import { PropertyMeta } from "@/app/db/schema/property";
+
+export async function getPropertyMeta(
+  propertyId: string
+): Promise<PropertyMeta> {
+  const url =
+    process.env.URL + `/api/building-passport/property-meta/${propertyId}`;
+
+  const response = await fetch(url, {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+}