feat(web): Implement download s3 terraform template functionality

Author: MiladSadeghi

web/src/pages/terraform-template/ARGOCD/argocd.tsx

@@ -164,9 +164,9 @@ const Argocd: FC = () => {
         className="btn mt-3 w-full bg-orange-base text-white hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
       >
         {argocdPending
-          ? 'GPT Answer...'
+          ? 'Generate Terraform...'
           : downloadPending
-            ? 'Generate Terraform...'
+            ? 'Downloading Template...'
             : 'Generate Terraform'}
       </button>
     </form>

web/src/pages/terraform-template/IAM/iam.tsx

@@ -77,9 +77,9 @@ const IAM: FC = () => {
         className="btn mt-3 w-full bg-orange-base text-white hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
       >
         {iamPending
-          ? 'GPT Answer...'
+          ? 'Generate Terraform...'
           : downloadPending
-            ? 'Generate Terraform...'
+            ? 'Downloading Template...'
             : 'Generate Terraform'}
       </button>
     </form>

web/src/pages/terraform-template/S3/s3.tsx

@@ -1,7 +1,22 @@
+import { TerraformTemplateAPI } from '@/enums/api.enums';
+import { useDownload } from '@/hooks';
 import { cn } from '@/lib/utils';
-import { FC, useState } from 'react';
+import { FC, FormEvent, useState } from 'react';
+import { S3Body, S3Response } from './s3.types';
+import { toast } from 'sonner';
+import { usePost } from '@/core/react-query';
 
 const S3: FC = () => {
+  const { mutateAsync: s3Mutate, isPending: s3Pending } = usePost<
+    S3Response,
+    S3Body
+  >(TerraformTemplateAPI.S3, 's3');
+  const { download, isPending: downloadPending } = useDownload({
+    folderName: 'MyTerraform',
+    source: 'iam',
+    downloadFileName: 'Iam',
+  });
+
   const [services, setServices] = useState({
     s3_bucket: false,
     bucket_versioning: false,
@@ -14,11 +29,27 @@ const S3: FC = () => {
     }));
   };
 
+  const handleForm = async (e: FormEvent) => {
+    e.preventDefault();
+
+    try {
+      const s3Body: S3Body = {
+        ...services,
+      };
+
+      await s3Mutate(s3Body);
+      await download();
+    } catch (error) {
+      console.log(error);
+      toast.error('Something went wrong');
+    }
+  };
+
   return (
-    <div className="w-full max-w-96">
-      <div className="border border-gray-500 rounded-md">
+    <form onSubmit={handleForm} className="w-full max-w-96">
+      <div className="rounded-md border border-gray-500">
         <div className="divide-y divide-gray-500">
-          <div className="flex items-center justify-between w-full px-3 py-3">
+          <div className="flex w-full items-center justify-between px-3 py-3">
             <p>S3 Bucket</p>
             <input
               type="checkbox"
@@ -28,7 +59,7 @@ const S3: FC = () => {
               onChange={() => handleServices('s3_bucket')}
             />
           </div>
-          <div className="flex items-center justify-between w-full px-3 py-3">
+          <div className="flex w-full items-center justify-between px-3 py-3">
             <p>Bucket Versioning</p>
             <input
               type="checkbox"
@@ -41,10 +72,18 @@ const S3: FC = () => {
           </div>
         </div>
       </div>
-      <button className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70">
-        Submit
+      <button
+        type="submit"
+        disabled={s3Pending || downloadPending}
+        className="btn mt-3 w-full bg-orange-base text-white hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
+      >
+        {s3Pending
+          ? 'Generate Terraform...'
+          : downloadPending
+            ? 'Downloading Template...'
+            : 'Generate Terraform'}
       </button>
-    </div>
+    </form>
   );
 };
 

web/src/pages/terraform-template/S3/s3.types.ts

@@ -0,0 +1,8 @@
+export interface S3Body {
+  s3_bucket: boolean;
+  bucket_versioning: boolean;
+}
+
+export interface S3Response {
+  output: string;
+}