From 23a6c3c8adabebdbe87283769331cd9ae990e4c7 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Thu, 10 Oct 2024 11:54:45 +0100
Subject: [PATCH] set up outline of the settings page

---
 .../settings/PortfolioSettings.tsx            | 52 +++++++++++++++++++
 .../[slug]/(portfolio)/settings/page.tsx      | 12 ++++-
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx

diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
new file mode 100644
index 0000000..3f1530a
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx
index 9d7e6bc..a8a61f3 100644
--- a/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx
@@ -17,10 +17,20 @@ export default async function PortfolioSettingsPage({
 
   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 portfolioSettingsData={portfolioSettingsData} />
+        <PortfolioSettings
+          portfolioId={portfolioId}
+          portfolioSettingsData={portfolioSettingsData}
+        />
       </div>
     </>
   );