Redirect to page

src/app/components/home/ModelSubmit.tsx

@@ -0,0 +1,35 @@
+import { useRouter } from "next/navigation";
+
+const ModalSubmit = ({
+  buttonDisabled,
+  budget,
+  objective,
+}: {
+  buttonDisabled: boolean;
+  budget: string;
+  objective: string;
+}) => {
+  const router = useRouter();
+  function createPortfolio() {
+    // TODO: This will be a server action that will create a new portfolio in the database
+    // That endpoint will return a uuid which will be the new portfolio's id
+    const id = "f290f1ee-6c54-4b01-90e6-d701748f0851";
+
+    router.push(
+      `/portfolio/${id}?name=${name}&budget=${budget}&objective=${objective}`
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className="inline-flex justify-center rounded-md border border-transparent bg-brandtan px-4 py-2 text-sm font-medium text-grey-900 hover:bg-hovertan focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:bg-gray-300 disabled:opacity-50"
+      onClick={createPortfolio}
+      disabled={buttonDisabled}
+    >
+      Create
+    </button>
+  );
+};
+
+export default ModalSubmit;

src/app/components/home/NewPortfolioModal.tsx

@@ -5,6 +5,7 @@ import LightBulbSvg from "./LightBulbSvg";
 import CarbonIcon from "./CarbonIcon";
 import QuestionMarkIcon from "./QuestionMarkIcon";
 import EnvironmentIcon from "./EnvironmentIconSvg";
+import ModalSubmit from "./ModelSubmit";
 
 const outcomes = [
   "Valuation Improvement",
@@ -66,20 +67,14 @@ export default function NewPortfolioModal({
 }) {
   const [portfolioName, setPortfolioName] = useState("");
   const [budget, setBudget] = useState("");
-  const [selectedOutcome, setSelectedOutcome] = useState<string | null>(
-    "Nothing Specific"
-  );
+  const [selectedOutcome, setSelectedOutcome] =
+    useState<string>("Nothing Specific");
   const [buttonDisabled, setButtonDisabled] = useState(true);
 
   function closeModal() {
     setIsOpen(false);
   }
 
-  function createPortfolio() {
-    // TODO: This will be a server action that will create a new portfolio in the database
-    console.log("redirect");
-  }
-
   function handlePortfolioNameChange(e: React.ChangeEvent<HTMLInputElement>) {
     if (e.target.value.length > 0) {
       setButtonDisabled(false);
@@ -123,7 +118,7 @@ export default function NewPortfolioModal({
                   >
                     Create a new portfolio
                   </Dialog.Title>
-                  <form onSubmit={createPortfolio} className="space-y-4">
+                  <form className="space-y-4">
                     <div className="flex flex-col">
                       <label
                         htmlFor="portfolio-name"
@@ -195,14 +190,11 @@ export default function NewPortfolioModal({
                     >
                       Cancel
                     </button>
-                    <button
-                      type="button"
-                      className="inline-flex justify-center rounded-md border border-transparent bg-brandtan px-4 py-2 text-sm font-medium text-grey-900 hover:bg-hovertan focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:bg-gray-300 disabled:opacity-50"
-                      onClick={createPortfolio}
-                      disabled={buttonDisabled}
-                    >
-                      Create
-                    </button>
+                    <ModalSubmit
+                      buttonDisabled={buttonDisabled}
+                      budget={budget}
+                      objective={selectedOutcome}
+                    />
                   </div>
                 </Dialog.Panel>
               </Transition.Child>