From 92ef114e8eeee42ee5ee2efb0c311337d632c8d2 Mon Sep 17 00:00:00 2001 From: Khalim Conn-Kowlessar Date: Thu, 10 Oct 2024 10:46:39 +0100 Subject: [PATCH 1/3] set up tempalte page of settings --- src/app/components/portfolio/Toolbar.tsx | 15 +-------------- .../[slug]/(portfolio)/settings/page.tsx | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 14 deletions(-) create mode 100644 src/app/portfolio/[slug]/(portfolio)/settings/page.tsx diff --git a/src/app/components/portfolio/Toolbar.tsx b/src/app/components/portfolio/Toolbar.tsx index 9dd8a3c..d09da5c 100644 --- a/src/app/components/portfolio/Toolbar.tsx +++ b/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 - {/* - - Portfolio Plan - */} - +
Hello World This is my settings page!!
+ + ); +} From 9562e165f8072113af302188adacddbfdbcd3476 Mon Sep 17 00:00:00 2001 From: Khalim Conn-Kowlessar Date: Thu, 10 Oct 2024 11:29:09 +0100 Subject: [PATCH 2/3] Pulling settings data from database --- .../[slug]/(portfolio)/settings/page.tsx | 21 ++++++++--- src/app/portfolio/[slug]/utils.ts | 36 +++++++++++++++++++ 2 files changed, 53 insertions(+), 4 deletions(-) diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx index 952ff3b..9d7e6bc 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx @@ -1,14 +1,27 @@ -export default async function PortfolioSettings({ +import { getPortfolioSettings } from "../../utils"; +import PortfolioSettings from "./PortfolioSettings"; + +export default async function PortfolioSettingsPage({ params, }: { params: { slug: string }; }) { - console.log("in the server!"); - console.log(params); 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); + return ( <> -
Hello World This is my settings page!!
+
+ +
); } diff --git a/src/app/portfolio/[slug]/utils.ts b/src/app/portfolio/[slug]/utils.ts index c50bcd2..3cc8dd5 100644 --- a/src/app/portfolio/[slug]/utils.ts +++ b/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 { + //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 { const data = await db .select() From 23a6c3c8adabebdbe87283769331cd9ae990e4c7 Mon Sep 17 00:00:00 2001 From: Khalim Conn-Kowlessar Date: Thu, 10 Oct 2024 11:54:45 +0100 Subject: [PATCH 3/3] 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) { + setPortfolioName(e.target.value); + } + + // Last thing we'd need to do is make that update in the db + + return ( + <> +
+
    +
  • + Name:{" "} + {" "} + +
    • +
  • Budget: {portfolioSettingsData.budget}
    • +
  • Goal: {portfolioSettingsData.goal}
    • +
  • Status: {portfolioSettingsData.status}
    • +
+
+ + ); +} 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 ( <>
- +
);