fixing hydration & session bug

src/app/api/plan/trigger/route.ts

@@ -35,7 +35,6 @@ const PresignedUrlBodySchema = z
 
 export async function POST(request: NextRequest) {
   // For the moment, this api specifically handles uploads of csvs
-  console.log("Triggering plan build");
 
   const body = await request.json();
   let validatedBody;
@@ -78,7 +77,7 @@ export async function POST(request: NextRequest) {
         JSON.stringify({ msg: "Error triggering plan" }),
         {
           status: 500,
-        }
+        },
       );
     }
 

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

@@ -29,6 +29,7 @@ const TitleMap = {
   loft_insulation: "Loft Insulation",
   room_roof_insulation: "Room Roof Insulation",
   flat_roof_insulation: "Flat Roof Insulation",
+  sloping_ceiling_insulation: "Sloping Ceiling Insulation",
   // Floor
   solid_floor_insulation: "Solid Floor Insulation",
   suspended_floor_insulation: "Suspended Floor Insulation",
@@ -104,12 +105,12 @@ export default function RecommendationCard({
   setTotalKwhSavings,
 }: RecommendationCardProps) {
   const defaultComponent = recommendationData.find(
-    (rec: Recommendation) => rec.default
+    (rec: Recommendation) => rec.default,
   ) as Recommendation;
 
   // A recommendation type could have no default recommendation, so we need to check if it exists
   const alreadyInstalled = recommendationData.some(
-    (rec) => rec.alreadyInstalled
+    (rec) => rec.alreadyInstalled,
   );
 
   const [cardComponent, setCardComponent] =

src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx

@@ -106,7 +106,7 @@ const updateSettings = async ({
         userId: userId.toString(),
         action: "update",
       }),
-    }
+    },
   );
 
   const permissionsData = await permissionsReponse.json();
@@ -181,7 +181,7 @@ async function deletePortfolio({
           userId: userId.toString(),
           action: "delete",
         }),
-      }
+      },
     );
 
     const permissionsData = await permissionsReponse.json();
@@ -201,7 +201,7 @@ async function deletePortfolio({
 
     if (!response.ok) {
       throw new Error(
-        "deletePortfolio has been called into action but utterly failed to do the API handoff"
+        "deletePortfolio has been called into action but utterly failed to do the API handoff",
       );
     }
 
@@ -241,13 +241,13 @@ export default function PortfolioSettings({
     onError: (error) => {
       console.error(
         "Because the API hand off failed, we're right back here at the mutation station",
-        error
+        error,
       );
     },
   });
 
   const [portfolioName, setPortfolioName] = useState(
-    portfolioSettingsData.name
+    portfolioSettingsData.name,
   );
 
   const [portfolioBudget, setPortfolioBudget] = useState<
@@ -255,11 +255,11 @@ export default function PortfolioSettings({
   >(portfolioSettingsData.budget);
 
   const [portfolioGoal, setPortfolioGoal] = useState(
-    portfolioSettingsData.goal
+    portfolioSettingsData.goal,
   );
 
   const [portfolioStatus, setPortfolioStatus] = useState(
-    portfolioSettingsData.status
+    portfolioSettingsData.status,
   );
 
   // Set up state for deleteModal and deleteConfirmation
@@ -268,6 +268,11 @@ export default function PortfolioSettings({
 
   const [deleteConfirmationByName, setDeleteConfirmationByName] = useState("");
 
+  if (session.status === "loading") {
+    // You can return a loading spinner or placeholder here
+    return <div>Loading...</div>;
+  }
+
   if (!session.data) {
     // The user is not logged in, redirect them to sign in
     router.push("/");
@@ -473,7 +478,14 @@ export default function PortfolioSettings({
       <UsersPermissionsCard portfolioId={portfolioId} />
       <div className="rounded-md border border-red-500 mt-2">
         <Table>
-          <TableHead className="text-lg text-brandblue">Danger Zone:</TableHead>
+          <TableHeader>
+            <TableRow>
+              <TableHead colSpan={2} className="text-lg text-brandblue">
+                Danger Zone:
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+
           <TableBody>
             <TableRow>
               <TableHead className="text-brandblue">
@@ -483,6 +495,7 @@ export default function PortfolioSettings({
                   assigned to this portfolio
                 </p>
               </TableHead>
+
               <TableCell className="flex justify-end">
                 <Button
                   className="bg-red-700 w-42"