From dba36b850ccc442af3fbc234f5e5f13f9bdd5e8e Mon Sep 17 00:00:00 2001
From: StefanWout <stefanwoutersen@gmail.com>
Date: Thu, 17 Oct 2024 17:18:54 +0100
Subject: [PATCH] added notes to better understand state management and marked
 where the functions for updating the DB need to be created

---
 .../settings/PortfolioSettings.tsx            | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
index c8be486..d351544 100644
--- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
@@ -64,43 +64,45 @@ export default function PortfolioSettings({
   const [portfolioName, setPortfolioName] = useState(
     portfolioSettingsData.name
   );
+
+  const [portfolioBudget, setPortfolioBudget] = useState<
+    number | string | null
+  >(portfolioSettingsData.budget);
+
   const [portfolioGoal, setPortfolioGoal] = useState(
     portfolioSettingsData.goal
   );
+
   const [portfolioStatus, setPortfolioStatus] = useState(
     portfolioSettingsData.status
   );
 
-  function handleRename() {
-    // API call to rename the portfolio
-    // apiFunction(portfolioName)
-    // Update portfolio function with name is equal to portfolioName
-    router.refresh();
-  }
+  // Renaming functionality
 
   function handlePortfolioNameChange(e: React.ChangeEvent<HTMLInputElement>) {
     setPortfolioName(e.target.value);
   }
 
-  // Last thing we'd need to do is make that update in the db
+  function handleRename() {
+    // API call to rename the portfolio
+    // apiFunction(portfolioName)
+    // Update portfolioName 
+    router.refresh();
+  }
 
   //Change budget functionality
-  const [portfolioBudget, setPortfolioBudget] = useState<
-    number | string | null
-  >(portfolioSettingsData.budget);
+
+  function handlePortfolioBudgetUpdate(e: React.ChangeEvent<HTMLInputElement>) {
+    setPortfolioBudget(Number(e.target.value));
+  }
 
   function handleBudgetUpdate() {
     // API call to change the budget
     // apiFunction(portfolioBudget)
-    // Update portfolio function with budget is equal to portfolioBudget
-    console.log(portfolioBudget);
+    // Update portfolioBudget
     router.refresh();
   }
 
-  function handlePortfolioBudgetUpdate(e: React.ChangeEvent<HTMLInputElement>) {
-    setPortfolioBudget(Number(e.target.value));
-  }
-
   return (
     <>
       <div className="p-4 mt-5 flex justify-center max-w-8xl w-8xl pt-5 bg-gray-50 rounded-lg text-brandblue">