implemented autoredirect

src/app/portfolio/[slug]/components/propertyTable.tsx

@@ -34,19 +34,7 @@ interface DataTableProps<TData, TValue> {
 function fetchData(offset: number) {
   // Because this is a client component, this will be handled with react query
   let properties: PropertyWithTarget[] = [];
-  for (let i = offset; i <= offset + 20; i++) {
-    properties.push({
-      id: i,
-      portfolioId: 1,
-      address: `${i}23 Fake Street`,
-      postcode: `AB${i} 2CD`,
-      creationStatus: Math.random() < 0.5 ? "complete" : "loading",
-      status: "assessment",
-      target: { epc: "C" },
-      cost: 1000,
-    });
-  }
-
+  // TODO: implement this
   return properties;
 }
 

src/app/portfolio/[slug]/components/propertyTablePagination.tsx

@@ -7,7 +7,6 @@ import {
 import { Table } from "@tanstack/react-table";
 
 import { Button } from "@/app/shadcn_components/ui/button";
-import { useEffect } from "react";
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;

src/app/portfolio/[slug]/page.tsx

@@ -204,7 +204,12 @@ export default async function Page({
     energyCostSavings,
   } = await getPortfolio(portfolioId);
 
-  const properties: PropertyWithTarget[] = await getProperties(portfolioId);
+  // Default limit to 1000 and offset to 0 for now - will handle pagination later
+  const properties: PropertyWithTarget[] = await getProperties(
+    portfolioId,
+    1000,
+    0
+  );
 
   return (
     <>

src/app/portfolio/[slug]/plan-loading/page.tsx

@@ -1,28 +1,52 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import { useState, useEffect } from "react";
 
 export default function LoadingPage({ params }: { params: { slug: string } }) {
   const portfolioId = params.slug;
   const router = useRouter();
+  const [countdown, setCountdown] = useState(10); // Initialize countdown state to 10 seconds
 
   const handleBackToPortfolio = () => {
     if (portfolioId) {
-      router.push(`/portfolio/${portfolioId}?status=loading`);
+      router.push(`/portfolio/${portfolioId}`);
     } else {
       router.push(`/home`);
     }
   };
 
+  useEffect(() => {
+    // If countdown reaches zero, redirect the user
+    if (countdown === 0) {
+      handleBackToPortfolio();
+      return;
+    }
+
+    // Set up interval to decrease countdown by 1 every second
+    const timer = setInterval(() => {
+      setCountdown((prevCountdown) => prevCountdown - 1);
+    }, 1000);
+
+    // Clean up the interval when the component unmounts
+    return () => clearInterval(timer);
+  }, [countdown, handleBackToPortfolio]);
+
   return (
     <div className="flex flex-col items-center justify-start min-h-screen text-center p-4 pt-32">
       <div className="bg-gray-100 p-6 rounded shadow flex flex-col items-center justify-cente">
         <h1 className="text-2xl font-semibold mb-2 text-slate-700 ">
           We&apos;re building your portfolio plan
         </h1>
-        <div className="text-lg mb-4 text-slate-600">
+        <div className="text-md mb-4 text-slate-600">
           This could take a few minutes. Thank you for your patience.
         </div>
+        <div className="text-md mb-4 text-slate-600">
+          Click on &apos;Go back to portfolio&apos;.
+        </div>
+        <div className="text-sm mb-4 text-slate-600">
+          We&apos;ll redirect you automatically in {countdown} seconds...
+        </div>
         <svg
           aria-hidden="true"
           className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"

src/app/portfolio/[slug]/utils.ts

@@ -23,9 +23,13 @@ export async function getPortfolio(portfolioId: number): Promise<Portfolio> {
 }
 
 export async function getProperties(
-  portfolioId: number
+  portfolioId: number,
+  limit: number = 1000,
+  offset: number = 0
 ): Promise<PropertyWithTarget[]> {
   const data: PropertyWithTarget[] = await db.query.property.findMany({
+    limit: limit,
+    offset: offset,
     columns: {
       id: true,
       portfolioId: true,