feat(web): Implement download docker terraform template functionality

Author: MiladSadeghi

web/src/pages/terraform-template/Docker/docker.tsx

@@ -1,7 +1,22 @@
 import { cn } from '@/lib/utils';
-import { FC, useState } from 'react';
+import { FC, FormEvent, useState } from 'react';
+import { DockerBody, DockerResponse } from './docker.types';
+import { usePost } from '@/core/react-query';
+import { useDownload } from '@/hooks';
+import { TerraformTemplateAPI } from '@/enums/api.enums';
+import { toast } from 'sonner';
 
 const Docker: FC = () => {
+  const { mutateAsync: dockerMutate, isPending: dockerPending } = usePost<
+    DockerResponse,
+    DockerBody
+  >(TerraformTemplateAPI.Docker, 'docker');
+  const { download, isPending: downloadPending } = useDownload({
+    folderName: 'MyTerraform',
+    source: 'iam',
+    downloadFileName: 'Iam',
+  });
+
   const [services, setServices] = useState({
     docker_image: false,
     docker_container: false,
@@ -14,11 +29,27 @@ const Docker: FC = () => {
     }));
   };
 
+  const handleForm = async (e: FormEvent) => {
+    e.preventDefault();
+
+    try {
+      const dockerBody: DockerBody = {
+        ...services,
+      };
+
+      await dockerMutate(dockerBody);
+      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"
@@ -28,7 +59,7 @@ const Docker: FC = () => {
               onChange={() => handleServices('docker_image')}
             />
           </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,10 +72,18 @@ const Docker: 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={dockerPending || 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"
+      >
+        {dockerPending
+          ? 'Generate Terraform...'
+          : downloadPending
+            ? 'Downloading Template...'
+            : 'Generate Terraform'}
       </button>
-    </div>
+    </form>
   );
 };
 

web/src/pages/terraform-template/Docker/docker.types.ts

@@ -0,0 +1,8 @@
+export interface DockerBody {
+  docker_image: boolean;
+  docker_container: boolean;
+}
+
+export interface DockerResponse {
+  output: string;
+}