Merge pull request #23 from Hestia-Homes/settings-page-khalim

Settings page khalim

src/app/components/portfolio/Toolbar.tsx

@@ -2,7 +2,6 @@
 
 import {
   Cog6ToothIcon,
-  CalculatorIcon,
   BuildingOfficeIcon,
   ChartBarIcon,
 } from "@heroicons/react/24/outline";
@@ -29,11 +28,7 @@ export function Toolbar({ portfolioId }: ToolbarProps) {
   const router = useRouter();
 
   function handleClickSettings() {
-    console.log("Settings were clicked, implement me");
-  }
-
-  function handleClickPortfolioPlan() {
-    router.push(`/portfolio/${portfolioId}/plan`);
+    router.push(`/portfolio/${portfolioId}/settings`);
   }
 
   function handleClickPortfolio() {
@@ -65,14 +60,6 @@ export function Toolbar({ portfolioId }: ToolbarProps) {
           Summary
         </NavigationMenuItem>
 
-        {/* <NavigationMenuItem
-          className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
-          onClick={handleClickPortfolioPlan}
-        >
-          <CalculatorIcon className="h-4 w-4 mr-2" />
-          Portfolio Plan
-        </NavigationMenuItem> */}
-
         <NavigationMenuItem
           className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
           onClick={handleClickSettings}

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

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { PortfolioSettingsType } from "../../utils";
+import { Button } from "@/app/shadcn_components/ui/button";
+import { Input } from "@/app/shadcn_components/ui/input";
+import { useRouter } from "next/navigation";
+
+export default function PortfolioSettings({
+  portfolioId,
+  portfolioSettingsData,
+}: {
+  portfolioId: string;
+  portfolioSettingsData: PortfolioSettingsType;
+}) {
+  // Running in the client
+  const router = useRouter();
+
+  const [portfolioName, setPortfolioName] = useState(
+    portfolioSettingsData.name
+  );
+
+  function handleRename() {
+    // API call to rename the portfolio
+    // apiFunction(portfolioName)
+    // Update portfolio function with name is equal to portfolioName
+    router.refresh();
+  }
+
+  function handlePortfolioNameChange(e: React.ChangeEvent<HTMLInputElement>) {
+    setPortfolioName(e.target.value);
+  }
+
+  // Last thing we'd need to do is make that update in the db
+
+  return (
+    <>
+      <div className="flex justify-center max-w-8xl w-8xl">
+        <ul>
+          <li>
+            Name:{" "}
+            <Input value={portfolioName} onChange={handlePortfolioNameChange} />{" "}
+            <Button onClick={handleRename}>Rename</Button>
+          </li>
+          <li>Budget: {portfolioSettingsData.budget}</li>
+          <li>Goal: {portfolioSettingsData.goal}</li>
+          <li>Status: {portfolioSettingsData.status}</li>
+        </ul>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { getPortfolioSettings } from "../../utils";
+import PortfolioSettings from "./PortfolioSettings";
+
+export default async function PortfolioSettingsPage({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  const portfolioId = params.slug;
+  // fetch data securely on the server
+  // Stef's page!!!!
+  // 1) Rename
+  // 2) Delete - much harder
+
+  // fetch data in the server - name, budget, goal,
+  // pass it to a client component to render and take user input
+
+  const portfolioSettingsData = await getPortfolioSettings(portfolioId);
+
+  // Get goal options and status options by importing something like this:
+  // import {
+  //   PortfolioStatus,
+  //   PortfolioGoal,
+  // } from "./../../db/schema/portfolio";
+  // and then pass them to the portfoliosettings component
+
+  return (
+    <>
+      <div className="flex justify-center max-w-8xl w-8xl">
+        <PortfolioSettings
+          portfolioId={portfolioId}
+          portfolioSettingsData={portfolioSettingsData}
+        />
+      </div>
+    </>
+  );
+}

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

@@ -1,3 +1,7 @@
+import type {
+  PortfolioStatus,
+  PortfolioGoal,
+} from "./../../db/schema/portfolio";
 import { formatNumber } from "@/app/utils";
 import { and, eq, inArray } from "drizzle-orm";
 import { db } from "@/app/db/db";
@@ -15,6 +19,38 @@ import {
   ScenarioSelect,
 } from "@/app/db/schema/recommendations";
 
+export interface PortfolioSettingsType {
+  name: string;
+  budget: number | null;
+  goal: (typeof PortfolioGoal)[number];
+  status: (typeof PortfolioStatus)[number];
+}
+
+export async function getPortfolioSettings(
+  portfolioId: string
+): Promise<PortfolioSettingsType> {
+  //name, budget, goal, status
+  const data = await db
+    .select({
+      name: portfolio.name,
+      budget: portfolio.budget,
+      goal: portfolio.goal,
+      status: portfolio.status,
+    })
+    .from(portfolio)
+    .where(eq(portfolio.id, BigInt(portfolioId)));
+
+  if (data.length === 0) {
+    throw new Error("Portfolio not found");
+  }
+
+  if (data.length > 1) {
+    throw new Error("More than one portfolio found");
+  }
+
+  return data[0];
+}
+
 export async function getPortfolio(portfolioId: string): Promise<Portfolio> {
   const data = await db
     .select()