Skip to content

Commit 5928a31

Browse files
mehdi-parvizimehdi-parvizi
committed
refactor(template generator): update layout structure
1 parent de38fd4 commit 5928a31

9 files changed

Lines changed: 230 additions & 92 deletions

File tree

‎web/src/components/ui/menu.tsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
"use client"
2+
3+
import { AbsoluteCenter, Menu as ChakraMenu, Portal } from "@chakra-ui/react"
4+
import * as React from "react"
5+
import { LuCheck, LuChevronRight } from "react-icons/lu"
6+
7+
interface MenuContentProps extends ChakraMenu.ContentProps {
8+
portalled?: boolean
9+
portalRef?: React.RefObject<HTMLElement>
10+
}
11+
12+
export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(
13+
function MenuContent(props, ref) {
14+
const { portalled = true, portalRef, ...rest } = props
15+
return (
16+
<Portal disabled={!portalled} container={portalRef}>
17+
<ChakraMenu.Positioner>
18+
<ChakraMenu.Content ref={ref} {...rest} />
19+
</ChakraMenu.Positioner>
20+
</Portal>
21+
)
22+
},
23+
)
24+
25+
export const MenuArrow = React.forwardRef<
26+
HTMLDivElement,
27+
ChakraMenu.ArrowProps
28+
>(function MenuArrow(props, ref) {
29+
return (
30+
<ChakraMenu.Arrow ref={ref} {...props}>
31+
<ChakraMenu.ArrowTip />
32+
</ChakraMenu.Arrow>
33+
)
34+
})
35+
36+
export const MenuCheckboxItem = React.forwardRef<
37+
HTMLDivElement,
38+
ChakraMenu.CheckboxItemProps
39+
>(function MenuCheckboxItem(props, ref) {
40+
return (
41+
<ChakraMenu.CheckboxItem ref={ref} {...props}>
42+
<ChakraMenu.ItemIndicator hidden={false}>
43+
<LuCheck />
44+
</ChakraMenu.ItemIndicator>
45+
{props.children}
46+
</ChakraMenu.CheckboxItem>
47+
)
48+
})
49+
50+
export const MenuRadioItem = React.forwardRef<
51+
HTMLDivElement,
52+
ChakraMenu.RadioItemProps
53+
>(function MenuRadioItem(props, ref) {
54+
const { children, ...rest } = props
55+
return (
56+
<ChakraMenu.RadioItem ps="8" ref={ref} {...rest}>
57+
<AbsoluteCenter axis="horizontal" left="4" asChild>
58+
<ChakraMenu.ItemIndicator>
59+
<LuCheck />
60+
</ChakraMenu.ItemIndicator>
61+
</AbsoluteCenter>
62+
<ChakraMenu.ItemText>{children}</ChakraMenu.ItemText>
63+
</ChakraMenu.RadioItem>
64+
)
65+
})
66+
67+
export const MenuItemGroup = React.forwardRef<
68+
HTMLDivElement,
69+
ChakraMenu.ItemGroupProps
70+
>(function MenuItemGroup(props, ref) {
71+
const { title, children, ...rest } = props
72+
return (
73+
<ChakraMenu.ItemGroup ref={ref} {...rest}>
74+
{title && (
75+
<ChakraMenu.ItemGroupLabel userSelect="none">
76+
{title}
77+
</ChakraMenu.ItemGroupLabel>
78+
)}
79+
{children}
80+
</ChakraMenu.ItemGroup>
81+
)
82+
})
83+
84+
export interface MenuTriggerItemProps extends ChakraMenu.ItemProps {
85+
startIcon?: React.ReactNode
86+
}
87+
88+
export const MenuTriggerItem = React.forwardRef<
89+
HTMLDivElement,
90+
MenuTriggerItemProps
91+
>(function MenuTriggerItem(props, ref) {
92+
const { startIcon, children, ...rest } = props
93+
return (
94+
<ChakraMenu.TriggerItem ref={ref} {...rest}>
95+
{startIcon}
96+
{children}
97+
<LuChevronRight />
98+
</ChakraMenu.TriggerItem>
99+
)
100+
})
101+
102+
export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup
103+
export const MenuContextTrigger = ChakraMenu.ContextTrigger
104+
export const MenuRoot = ChakraMenu.Root
105+
export const MenuSeparator = ChakraMenu.Separator
106+
107+
export const MenuItem = ChakraMenu.Item
108+
export const MenuItemText = ChakraMenu.ItemText
109+
export const MenuItemCommand = ChakraMenu.ItemCommand
110+
export const MenuTrigger = ChakraMenu.Trigger

‎web/src/features/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export enum Endpoints {
1919
GET_DOWNLOAD_TERRAFORM = "/download-folder",
2020
GET_DOWNLOAD_HELM = "/download-helm",
2121
GET_DIRECTORY = "/list-directory",
22+
DOWNLOAD_LINK = "http://localhost/download-folderMyTerraform",
2223
}
2324

2425
export enum BasicGenFields {

‎web/src/features/listDirectory/Download.tsx‎

Lines changed: 0 additions & 69 deletions
This file was deleted.

‎web/src/features/listDirectory/hooks.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const useDirectoryDownloader = <
1717

1818
const { handleSubmit } = formMethods;
1919

20-
const useGenericMutation = (options?: UseMutationOptions) =>
20+
const useDownloaderMutation = (options?: UseMutationOptions) =>
2121
useMutation({
2222
mutationFn: () =>
2323
apiClient
@@ -26,7 +26,7 @@ export const useDirectoryDownloader = <
2626
...options,
2727
});
2828

29-
const { mutate, isSuccess, error } = useGenericMutation();
29+
const { mutate, isSuccess, error } = useDownloaderMutation();
3030

3131
const onSubmit = (formData: TFormData) => {
3232
const resolvedEndpoint = endpointResolver(formData);

‎web/src/features/terraform/Terraform.tsx‎

Lines changed: 57 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,59 @@
1-
import Docker from "./components/Docker";
2-
import EC2 from "./components/EC2";
3-
import IAM from "./components/IAM";
4-
import S3 from "./components/S3";
5-
6-
const Terraform = () => (
7-
<div className="py-10 flex flex-col gap-y-5">
8-
<Docker />
9-
<EC2 />
10-
<S3 />
11-
<IAM />
12-
</div>
13-
);
1+
import { useCallback, useEffect, useRef, useState } from "react";
2+
import useGptStore from "../../utils/store";
3+
import { Endpoints } from "../constants";
4+
import { routes, terraformBtnMapping } from "../../utils/routing";
5+
import { Button } from "@chakra-ui/react";
6+
import { Link, Outlet } from "react-router-dom";
7+
8+
const Terraform = () => {
9+
const { endpoint, isSuccess } = useGptStore((s) => s.generatorQuery);
10+
11+
const downloadRef = useRef<HTMLAnchorElement>(null);
12+
13+
const [selected, setSelected] = useState<number>();
14+
15+
const downloadFile = useCallback(() => {
16+
if (!isSuccess) return;
17+
if (downloadRef.current) {
18+
downloadRef.current.href = Endpoints.DOWNLOAD_LINK;
19+
downloadRef.current.download = "media";
20+
downloadRef.current.click();
21+
}
22+
}, [isSuccess, endpoint]);
23+
24+
useEffect(() => {
25+
if (isSuccess) {
26+
downloadFile();
27+
}
28+
}, [isSuccess, endpoint]);
29+
30+
return (
31+
<div>
32+
<div>
33+
{terraformBtnMapping.map((route, index) => (
34+
<Link to={routes.terraformTemplate + route.route}>
35+
<Button
36+
w="23.7rem"
37+
rounded={0}
38+
bg={selected === index ? "orange.800" : ""}
39+
_hover={{ bg: "orange.500" }}
40+
borderRight={
41+
index !== terraformBtnMapping.length - 1 ? "solid" : "none"
42+
}
43+
borderRightWidth={"0.5px"}
44+
onClick={() => setSelected(index)}
45+
>
46+
{route.label}
47+
</Button>
48+
</Link>
49+
))}
50+
</div>
51+
<div className="py-9">
52+
<Outlet />
53+
</div>
54+
<a ref={downloadRef} style={{ display: "none" }} />
55+
</div>
56+
);
57+
};
1458

1559
export default Terraform;

‎web/src/features/terraform/hooks.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,21 @@ import { FieldValues, useForm, UseFormProps } from "react-hook-form";
33
import { Endpoints } from "../constants";
44
import { useMutation, UseMutationOptions } from "@tanstack/react-query";
55
import apiClient from "../../utils/apiClient";
6+
import useGptStore from "../../utils/store";
67

78
const useTerraFormHandler = <T extends FieldValues, K>(
89
initialValues: UseFormProps<T>["defaultValues"],
910
endpoint: Endpoints
1011
) => {
1112
const [request, setRequest] = useState<K>();
13+
const setGeneratorQuery = useGptStore((s) => s.setGeneratorQuery);
1214
const formMethods = useForm<T>({ defaultValues: initialValues });
1315
const { handleSubmit } = formMethods;
1416

1517
const useTerraMutation = (options?: UseMutationOptions) =>
1618
useMutation({
1719
mutationFn: () => apiClient.post(endpoint, request),
20+
onSuccess: () => setGeneratorQuery(true, endpoint),
1821
...options,
1922
});
2023

‎web/src/router.tsx‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@ import Layout from "./layouts/Layout";
33
import BasicGen from "./features/basicGen/BasicGen";
44
import BugFix from "./features/bugFix/BugFix";
55
import ErrorPage from "./components/internal-ui/ErrorPage";
6-
import { routes } from "./utils/routing";
6+
import { routes, terraformRoutes } from "./utils/routing";
77
import Terraform from "./features/terraform/Terraform";
8-
import Download from "./features/listDirectory/Download";
8+
import Docker from "./features/terraform/components/Docker";
9+
import EC2 from "./features/terraform/components/EC2";
10+
import S3 from "./features/terraform/components/S3";
11+
import IAM from "./features/terraform/components/IAM";
912
export const router = createBrowserRouter([
1013
{
1114
path: "/",
@@ -14,8 +17,28 @@ export const router = createBrowserRouter([
1417
children: [
1518
{ index: true, element: <BasicGen /> },
1619
{ path: routes.bugFix, element: <BugFix /> },
17-
{ path: routes.terraformTemplate, element: <Terraform /> },
18-
{ path: routes.listDirectory, element: <Download /> },
20+
{
21+
path: routes.terraformTemplate,
22+
element: <Terraform />,
23+
children: [
24+
{
25+
path: routes.terraformTemplate + terraformRoutes.dockerService,
26+
element: <Docker />,
27+
},
28+
{
29+
path: routes.terraformTemplate + terraformRoutes.ec2Service,
30+
element: <EC2 />,
31+
},
32+
{
33+
path: routes.terraformTemplate + terraformRoutes.s3Service,
34+
element: <S3 />,
35+
},
36+
{
37+
path: routes.terraformTemplate + terraformRoutes.iamService,
38+
element: <IAM />,
39+
},
40+
],
41+
},
1942
],
2043
},
2144
]);

‎web/src/utils/routing.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,27 @@ import { Endpoints } from "../features/constants";
33
export const routes = {
44
basicGen: "/",
55
bugFix: "/IaC-bugfix",
6-
terraformTemplate: "/terraformT",
7-
listDirectory: "/download",
6+
terraformTemplate: "/terraform-template",
87
};
98

109
export const btnMappings = [
1110
{ label: "Basic", route: routes.basicGen },
1211
{ label: "Bug fix", route: routes.bugFix },
1312
{ label: "Terraform template", route: routes.terraformTemplate },
14-
{ label: "Download", route: routes.listDirectory },
1513
{ label: "Installation", route: Endpoints.POST_INSTALL },
1614
{ label: "Helm Template", route: Endpoints.POST_IAC_HELM },
1715
];
16+
17+
export const terraformRoutes = {
18+
dockerService: "/docker-service",
19+
ec2Service: "/ec2-service",
20+
s3Service: "/s3-service",
21+
iamService: "/iam-service",
22+
};
23+
24+
export const terraformBtnMapping = [
25+
{ label: "Docker service", route: terraformRoutes.dockerService },
26+
{ label: "EC2 service", route: terraformRoutes.ec2Service },
27+
{ label: "S3 service", route: terraformRoutes.s3Service },
28+
{ label: "IAM service", route: terraformRoutes.iamService },
29+
];

0 commit comments

Comments
 (0)