From dca71dc2c5e0de1e3bf12a95947cfc2cfc0f4fdf Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Fri, 18 Oct 2024 16:27:07 +0100
Subject: [PATCH] peer proframming

---
 .../settings/PortfolioSettings.tsx            | 67 +++++++++++++------
 1 file changed, 47 insertions(+), 20 deletions(-)

diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
index 9118339..d726382 100644
--- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
@@ -16,9 +16,9 @@ import {
   SelectValue,
 } from "@/app/shadcn_components/ui/select";
 import {
-  Dialog, 
-  DialogContent, 
-  DialogTitle, 
+  Dialog,
+  DialogContent,
+  DialogTitle,
   DialogFooter,
 } from "@/app/shadcn_components/ui/dialog";
 import { PortfolioStatus as PortfolioStatusOptions } from "@/app/db/schema/portfolio";
@@ -88,12 +88,17 @@ export default function PortfolioSettings({
 
   // Set up state for deleteModal and deleteConfirmation
 
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
-  const [deleteConfirmationByName, setDeleteConfirmationByName] = useState("")
+  const [deleteConfirmationByName, setDeleteConfirmationByName] = useState("");
+
+  function handleOpenDeleteModal() {
+    setDeleteConfirmationByName("");
+    setIsDeleteModalOpen(true);
+  }
 
   function handleDeleteConfirmation() {
-    console.log("we be deletin stuff")
+    console.log("we be deletin stuff");
     // if (deleteConfirmationByName === portfolioName) {
     //   //apiDeletePortfolio(portfolioId)
     // router.refresh();
@@ -102,10 +107,10 @@ export default function PortfolioSettings({
     //   // Error if the names don't match
     //   console.log("Portfolio name does not match");
     // }
-    router.refresh();
+    router.push("/home");
   }
 
-  // RENAMING FUNCTIONS 
+  // RENAMING FUNCTIONS
 
   // Change NAME functionality - changing state
 
@@ -117,7 +122,7 @@ export default function PortfolioSettings({
 
   function handleRenameDb() {
     // apiRanameFunction(portfolioSettingsData.name)
-    // Update portfolioName 
+    // Update portfolioName
     router.refresh();
   }
 
@@ -148,7 +153,7 @@ export default function PortfolioSettings({
   }
 
   // The onClick function called to update the BUDGET in the DB
-  
+
   function handleStatusUpdateDb() {
     // apiStatusChangeFunction(portfolioSettingsData.status)
     // Update portfolioStatus
@@ -204,7 +209,9 @@ export default function PortfolioSettings({
               setOption={setPortfolioGoal}
             />
           </div>
-          <Button className="w-full" onClick={handleGoalUpdateDb}>Update</Button>
+          <Button className="w-full" onClick={handleGoalUpdateDb}>
+            Update
+          </Button>
 
           {/* Row 4: Status */}
           <div className="flex items-center">
@@ -217,7 +224,9 @@ export default function PortfolioSettings({
               setOption={setPortfolioStatus}
             />
           </div>
-          <Button className="w-full" onClick={handleStatusUpdateDb}>Update</Button>
+          <Button className="w-full" onClick={handleStatusUpdateDb}>
+            Update
+          </Button>
 
           <div className="col-span-3"> Portfolio Name: {portfolioName}</div>
           <div className="col-span-3"> Portfolio Budget: {portfolioBudget}</div>
@@ -227,23 +236,43 @@ export default function PortfolioSettings({
           {/* Row 5: Delete */}
           <div className="col-span-2"></div>
           <div className="flex items-center">
-            <Button className="max-width: 100% bg-red-700" onClick={() => setIsDeleteModalOpen(true)}>Delete Portfolio</Button>
+            <Button
+              className="max-width: 100% bg-red-700"
+              onClick={handleOpenDeleteModal}
+            >
+              Delete Portfolio
+            </Button>
           </div>
           {/* Delete portfolio modal */}
           <Dialog open={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen}>
             <DialogContent>
               <DialogTitle>Are you sure?</DialogTitle>
               <p>
-                To confirm, please type the name of the portfolio (<strong>{portfolioName}</strong>)
+                To confirm, please type the name of the portfolio (
+                <strong>{portfolioSettingsData.name}</strong>)
               </p>
-              <input 
+              <input
                 type="text"
                 value={deleteConfirmationByName}
                 onChange={(e) => setDeleteConfirmationByName(e.target.value)}
-                placeholder="Type portfolio name" />
+                placeholder="Type portfolio name"
+              />
               <DialogFooter>
-                <Button className="bg-green-600" onClick={() => setIsDeleteModalOpen(false)}>Cancel</Button>
-                <Button className="bg-red-700" onClick={handleDeleteConfirmation}>Delete</Button>
+                <Button
+                  className="bg-green-600"
+                  onClick={() => setIsDeleteModalOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  className="bg-red-700"
+                  onClick={handleDeleteConfirmation}
+                  disabled={
+                    deleteConfirmationByName !== portfolioSettingsData.name
+                  }
+                >
+                  Delete
+                </Button>
               </DialogFooter>
             </DialogContent>
           </Dialog>
@@ -252,5 +281,3 @@ export default function PortfolioSettings({
     </>
   );
 }
-
-