generating presigned url

src/app/portfolio/[slug]/components/RemoteAssesmentModal.tsx

@@ -6,6 +6,8 @@ import { Input } from "@/app/shadcn_components/ui/input";
 import { Button } from "@/app/shadcn_components/ui/button";
 import { Float } from "@headlessui-float/react";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { useMutation } from "@tanstack/react-query";
+import { useSession } from "next-auth/react";
 
 type Option = {
   label: string;
@@ -41,7 +43,7 @@ const selectGoalOptions = [
   {
     label: "Reduce energy consumption",
     value: "Reduce energy consumption",
-    disabled: false,
+    disabled: false, // TODO: Disable
   },
 ];
 
@@ -63,8 +65,6 @@ const goalValueOptions = [
   },
 ];
 
-
-
 export function SelectDropdown({
   options,
   selectedOption,
@@ -113,6 +113,68 @@ export function SelectDropdown({
   );
 }
 
+async function generatePresignedUrl({
+  userId,
+  portfolioId,
+  fileKey,
+}: {
+  userId: string;
+  portfolioId: string;
+  fileKey: string;
+}) {
+  // fileKey is a location in S3 where we want to upload the file
+  const response = await fetch("/api/upload/csv", {
+    method: "POST",
+    body: JSON.stringify({
+      userId,
+      portfolioId,
+      fileKey,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to generate presigned url");
+  }
+
+  return response.json();
+}
+
+function useCreateRemoteAssessment({ portfolioId }: { portfolioId: string }) {
+  // 1) We want to upload the asset data. To do this, we format the asset data, generate a presigned URL, and upload the data to S3.
+  // 2) We then want to upload valuation data. To do this, we format the valuation data, generate a presigned URL, and upload the data to S3.
+  // 3) Trigger the engine!!!! This is an api at /api/plan/trigger with our body that we looked at in Miro
+
+  // Set up the mutation with react-query, to generate a presigned URL
+
+  const session = useSession();
+  const userId = String(session.data?.user.dbId);
+  const fileKey = "8/-1/asset_list.csv";
+
+  const {
+    mutate: mutatePresignedUrl,
+    isLoading: presignedUrlIsLoading,
+    isError: presignedUrlIsError,
+  } = useMutation(generatePresignedUrl, {
+    onSuccess: (data) => {
+      console.log(data.url);
+      // On success, upload to that URL!!!!
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  function handleSubmit() {
+    mutatePresignedUrl({ userId, portfolioId, fileKey });
+    console.log("SUCCESS"); // This is where we would want to trigger some kind of use feedback
+  }
+
+  return {
+    handleSubmit,
+    presignedUrlIsLoading,
+    presignedUrlIsError,
+  };
+}
 
 export default function RemoteAssesmentModal({
   portfolioId,
@@ -137,7 +199,9 @@ export default function RemoteAssesmentModal({
     setScenario(event.target.value);
   }
 
-  function handleAddressLineOneChange(event: React.ChangeEvent<HTMLInputElement>) {
+  function handleAddressLineOneChange(
+    event: React.ChangeEvent<HTMLInputElement>
+  ) {
     setAddressLineOne(event.target.value);
   }
 
@@ -153,6 +217,11 @@ export default function RemoteAssesmentModal({
     setValuation(event.target.value);
   }
 
+  const { handleSubmit, presignedUrlIsLoading, presignedUrlIsError } =
+    useCreateRemoteAssessment({
+      portfolioId,
+    });
+
   useEffect(() => {
     function handleButtonDisabled(): boolean {
       return !(
@@ -163,11 +232,19 @@ export default function RemoteAssesmentModal({
         postcode &&
         uprn &&
         valuation
-      ); 
+      );
     }
 
     setButtonDisabled(handleButtonDisabled());
-  }, [scenario, selectedGoal, housingType, addressLineOne, postcode, uprn, valuation]);
+  }, [
+    scenario,
+    selectedGoal,
+    housingType,
+    addressLineOne,
+    postcode,
+    uprn,
+    valuation,
+  ]);
 
   return (
     <>
@@ -203,12 +280,17 @@ export default function RemoteAssesmentModal({
                 <Dialog.Panel className="w-1/2 max-w-screen-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                   <Dialog.Title
                     as="h3"
-                    className="text-lg font-medium leading-6 text-brandblue mb-3">
-                    {scenario} 
+                    className="text-lg font-medium leading-6 text-brandblue mb-3"
+                  >
+                    {scenario}
                   </Dialog.Title>
                   <div className="flex justify-center">
                     Scenario Name
-                    <Input type="text" defaultValue={"Remote Assesment"} onChange={handleScenarioChange}/>
+                    <Input
+                      type="text"
+                      defaultValue={"Remote Assesment"}
+                      onChange={handleScenarioChange}
+                    />
                   </div>
                   <div className="flex flex-col mt-6">
                     <label
@@ -258,26 +340,25 @@ export default function RemoteAssesmentModal({
                   </div>
                   <div className="flex justify-center mt-6">
                     Address Line 1
-                    <Input type="text" onChange={handleAddressLineOneChange}/>
+                    <Input type="text" onChange={handleAddressLineOneChange} />
                   </div>
                   <div className="flex justify-center mt-6">
-                    Postcode 
-                    <Input type="text" onChange={handlePostcodeChange}/>
+                    Postcode
+                    <Input type="text" onChange={handlePostcodeChange} />
                   </div>
                   <div className="flex justify-center mt-6">
-                    UPRN 
-                    <Input type="text" onChange={handleUprnChange}/>
+                    UPRN
+                    <Input type="text" onChange={handleUprnChange} />
                   </div>
                   <div className="flex justify-center mt-6">
-                    Valuation 
-                    <Input type="text" onChange={handleValuationChange}/>
+                    Valuation
+                    <Input type="text" onChange={handleValuationChange} />
                   </div>
                   <div className="flex justify-center mt-6">
                     <Button
                       disabled={buttonDisabled}
-                      
                       onClick={() => {
-                        console.log("making a submission")
+                        handleSubmit();
                         setIsOpen(false);
                       }}
                     >
@@ -285,12 +366,11 @@ export default function RemoteAssesmentModal({
                     </Button>
                   </div>
                   <button
-                        type="button"
-                        className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                        onClick={() => setIsOpen(false)}
-                  
-                      >
-                        Cancel
+                    type="button"
+                    className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Cancel
                   </button>
                 </Dialog.Panel>
               </Transition.Child>
@@ -301,4 +381,3 @@ export default function RemoteAssesmentModal({
     </>
   );
 }
-