feat(web): Implement download ec2 template terraform functionality

Author: MiladSadeghi

web/src/pages/terraform-template/EC2/ec2.tsx

@@ -1,7 +1,22 @@
+import { usePost } from '@/core/react-query';
+import { useDownload } from '@/hooks';
 import { cn } from '@/lib/utils';
-import { useState } from 'react';
+import { FormEvent, useState } from 'react';
+import { EC2Body, EC2Response } from './ec2.types';
+import { TerraformTemplateAPI } from '@/enums/api.enums';
+import { toast } from 'sonner';
 
 const EC2 = () => {
+  const { mutateAsync: ec2Mutate, isPending: ec2Pending } = usePost<
+    EC2Response,
+    EC2Body
+  >(TerraformTemplateAPI.EC2, 'ec2');
+  const { download, isPending: downloadPending } = useDownload({
+    folderName: 'MyTerraform',
+    source: 'iam',
+    downloadFileName: 'Iam',
+  });
+
   const [services, setServices] = useState({
     key_pair: false,
     security_group: false,
@@ -16,11 +31,27 @@ const EC2 = () => {
     }));
   };
 
+  const handleForm = async (e: FormEvent) => {
+    e.preventDefault();
+
+    try {
+      const ec2Body: EC2Body = {
+        ...services,
+      };
+
+      await ec2Mutate(ec2Body);
+      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>Key Pair</p>
             <input
               type="checkbox"
@@ -30,7 +61,7 @@ const EC2 = () => {
               onChange={() => handleServices('key_pair')}
             />
           </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>Security Group</p>
             <input
               type="checkbox"
@@ -41,7 +72,7 @@ const EC2 = () => {
               onChange={() => handleServices('security_group')}
             />
           </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>AWS Instance</p>
             <input
               type="checkbox"
@@ -51,7 +82,7 @@ const EC2 = () => {
               onChange={() => handleServices('aws_instance')}
             />
           </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>AMI From Instance</p>
             <input
               type="checkbox"
@@ -64,10 +95,18 @@ const EC2 = () => {
           </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={ec2Pending || 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"
+      >
+        {ec2Pending
+          ? 'Generate Terraform...'
+          : downloadPending
+            ? 'Downloading Template...'
+            : 'Generate Terraform'}
       </button>
-    </div>
+    </form>
   );
 };
 

web/src/pages/terraform-template/EC2/ec2.types.ts

@@ -0,0 +1,10 @@
+export interface EC2Body {
+  key_pair: boolean;
+  security_group: boolean;
+  aws_instance: boolean;
+  ami_from_instance: boolean;
+}
+
+export interface EC2Response {
+  output: string;
+}