feat(web): Implement download iam template functionality

Author: MiladSadeghi

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

@@ -1,7 +1,22 @@
+import { usePost } from '@/core/react-query';
 import { cn } from '@/lib/utils';
-import { FC, useState } from 'react';
+import { FC, FormEvent, useState } from 'react';
+import { IAMBody, IAMResponse } from './iam.types';
+import { TerraformTemplateAPI } from '@/enums/api.enums';
+import { useDownload } from '@/hooks';
+import { toast } from 'sonner';
 
 const IAM: FC = () => {
+  const { mutateAsync: iamMutate, isPending: iamPending } = usePost<
+    IAMResponse,
+    IAMBody
+  >(TerraformTemplateAPI.Iam, 'iam');
+  const { download, isPending: downloadPending } = useDownload({
+    folderName: 'MyTerraform',
+    source: 'iam',
+    downloadFileName: 'Iam',
+  });
+
   const [services, setServices] = useState({
     iam_user: false,
     iam_group: false,
@@ -14,11 +29,27 @@ const IAM: FC = () => {
     }));
   };
 
+  const handleForm = async (e: FormEvent) => {
+    e.preventDefault();
+
+    try {
+      const iamBody: IAMBody = {
+        ...services,
+      };
+
+      await iamMutate(iamBody);
+      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>IAM User</p>
             <input
               type="checkbox"
@@ -28,7 +59,7 @@ const IAM: FC = () => {
               onChange={() => handleServices('iam_user')}
             />
           </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>IAM Group</p>
             <input
               type="checkbox"
@@ -40,10 +71,18 @@ const IAM: 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={iamPending || 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"
+      >
+        {iamPending
+          ? 'GPT Answer...'
+          : downloadPending
+            ? 'Generate Terraform...'
+            : 'Generate Terraform'}
       </button>
-    </div>
+    </form>
   );
 };
 

web/src/pages/terraform-template/IAM/iam.types.ts

@@ -0,0 +1,8 @@
+export interface IAMBody {
+  iam_user: boolean;
+  iam_group: boolean;
+}
+
+export interface IAMResponse {
+  output: string;
+}