added api request to building passport property meta

src/app/api/building-passport/property-meta/[propertyId]/route.ts

@@ -0,0 +1,34 @@
+import { db } from "@/app/db/db";
+import { PropertyMeta, property } from "@/app/db/schema/property";
+import { serializeBigInt } from "@/app/utils";
+import { eq } from "drizzle-orm";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { propertyId: string } }
+) {
+  const propertyId = params.propertyId;
+
+  const propertyMeta = await db.query.property.findFirst({
+    columns: {
+      id: true,
+      address: true,
+      postcode: true,
+      hasPreConditionReport: true,
+      hasRecommendations: true,
+      createdAt: true,
+      propertyType: true,
+      builtForm: true,
+      localAuthority: true,
+      constituency: true,
+      numberOfRooms: true,
+      yearBuilt: true,
+      tenure: true,
+      currentEpcRating: true,
+      currentSapPoints: true,
+    },
+    where: eq(property.id, BigInt(propertyId)),
+  });
+
+  return new Response(JSON.stringify(propertyMeta, serializeBigInt));
+}

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

@@ -17,15 +17,15 @@ import { cva } from "class-variance-authority";
 import type { PropertyMeta } from "@/app/db/schema/property";
 
 interface ToolbarProps {
-  propertyMeta: PropertyMeta;
-  portfolioId: number;
+  propertyId: string;
+  portfolioId: string;
 }
 
 const navigationMenuTriggerStyle = cva(
   "bg-gray-50 cursor-pointer group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-200 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-gray-200"
 );
 
-export function Toolbar({ propertyMeta, portfolioId }: ToolbarProps) {
+export function Toolbar({ propertyId, portfolioId }: ToolbarProps) {
   function handleClickSettings() {
     console.log("Settings were clicked, implement me");
   }
@@ -34,9 +34,7 @@ export function Toolbar({ propertyMeta, portfolioId }: ToolbarProps) {
     console.log("Opt Plan was clicked, implement me");
   }
 
-  const propertyId = propertyMeta.id;
-
-  const preAssessmentReportButton = propertyMeta.hasPreConditionReport && (
+  const preAssessmentReportButton = (
     <NavigationMenuLink
       className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
       href={`/portfolio/${portfolioId}/building-passport/${propertyId}/pre-assessment-report`}
@@ -46,7 +44,7 @@ export function Toolbar({ propertyMeta, portfolioId }: ToolbarProps) {
     </NavigationMenuLink>
   );
 
-  const recommendationsButton = propertyMeta.hasPreConditionReport && (
+  const recommendationsButton = (
     <NavigationMenuLink
       className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
       href={`/portfolio/${portfolioId}/building-passport/${propertyId}/recommendations`}

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

@@ -1,39 +1,39 @@
 import { Toolbar } from "@/app/components/building-passport/Toolbar";
+import { PropertyMeta } from "@/app/db/schema/property";
 
-export default function DashboardLayout({
+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();
+}
+
+export default async function DashboardLayout({
   children, // will be a page or nested layout
   params,
 }: {
   children: React.ReactNode;
   params: { slug: string; propertyId: string };
 }) {
-  const propertyId = Number(params.propertyId) ?? null;
-  const portfolioId = Number(params.slug) ?? null;
+  const propertyId = params.propertyId ?? "";
+  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 = {
-    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,
-  };
-  if (!propertyId && propertyId !== 0) {
+  const propertyMeta = await getPropertyMeta(params.propertyId);
+
+  if (!propertyId && propertyId !== "0") {
     throw Error("Invalid propertyId");
   }
 
-  if (!portfolioId && portfolioId !== 0) {
+  if (!portfolioId && portfolioId !== "0") {
     throw Error("Invalid portfolioId");
   }
 
@@ -47,7 +47,7 @@ export default function DashboardLayout({
           <p className="text-xl text-gray-700">{propertyMeta.postcode}</p>
         </div>
         <div className="col-span-12 justify-center bg-gray-50 py-2 rounded-md">
-          <Toolbar propertyMeta={propertyMeta} portfolioId={portfolioId} />
+          <Toolbar propertyId={propertyId} portfolioId={portfolioId} />
         </div>
         {children}
       </div>

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
-    // "target": "es5",
-    "target": "ESNext",
+    "target": "es5",
+    // "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,