From 490f0bb61673bc3d667ae68ba7f74b94c2f642b4 Mon Sep 17 00:00:00 2001 From: ridhlab Date: Fri, 29 Dec 2023 09:43:45 +0700 Subject: [PATCH] feat(variable-input): add create and update --- src/components/shared/Form/ButtonActions.tsx | 16 ++++ src/helpers/route.ts | 4 +- .../requests/VariableInput/index.ts | 3 + src/pages/VariableInput/Form.tsx | 83 ++++++++++++++++++- src/pages/VariableInput/index.tsx | 8 +- src/services/apis/VariableInput/index.ts | 42 ++++++++++ src/services/mutation/VariableInput/index.ts | 36 ++++++++ src/services/query/VariableInput/index.ts | 27 +++++- tsconfig.json | 1 + 9 files changed, 206 insertions(+), 14 deletions(-) create mode 100644 src/components/shared/Form/ButtonActions.tsx create mode 100644 src/interfaces/requests/VariableInput/index.ts create mode 100644 src/services/mutation/VariableInput/index.ts diff --git a/src/components/shared/Form/ButtonActions.tsx b/src/components/shared/Form/ButtonActions.tsx new file mode 100644 index 0000000..3c5ecc2 --- /dev/null +++ b/src/components/shared/Form/ButtonActions.tsx @@ -0,0 +1,16 @@ +import { Row, Space } from "antd"; +import React from "react"; + +interface IProps { + actions: React.ReactNode[]; +} + +const ButtonAction: React.FC = ({ actions }) => { + return ( + + {actions.map((action) => action)} + + ); +}; + +export default ButtonAction; diff --git a/src/helpers/route.ts b/src/helpers/route.ts index 68911e0..13b4808 100644 --- a/src/helpers/route.ts +++ b/src/helpers/route.ts @@ -1,7 +1,7 @@ -import { Routes } from "@/routes/routes"; +import { EndpointApi, Routes } from "@/routes/routes"; export const parsingRoute = ( - url: Routes, + url: Routes | EndpointApi, propsParams?: Record ): string => { let newUrl: string = url; diff --git a/src/interfaces/requests/VariableInput/index.ts b/src/interfaces/requests/VariableInput/index.ts new file mode 100644 index 0000000..5d09a3f --- /dev/null +++ b/src/interfaces/requests/VariableInput/index.ts @@ -0,0 +1,3 @@ +export interface IVariableInputStoreUpdateRequest { + name: string; +} diff --git a/src/pages/VariableInput/Form.tsx b/src/pages/VariableInput/Form.tsx index 3af5b6f..c741168 100644 --- a/src/pages/VariableInput/Form.tsx +++ b/src/pages/VariableInput/Form.tsx @@ -1,15 +1,68 @@ import { Breadcrumbs } from "@/common/breadcrumb"; +import Button from "@/components/shared/Button/Button"; +import ButtonAction from "@/components/shared/Form/ButtonActions"; +import LoaderCenter from "@/components/shared/Loader/LoaderCenter"; +import { getRequiredMessage } from "@/helpers/form"; +import { modalConfirm } from "@/helpers/modal-confirm"; +import { prompNotification } from "@/helpers/notification"; +import { useFormUtility } from "@/hooks/useFormUtility"; +import { IVariableInputStoreUpdateRequest } from "@/interfaces/requests/VariableInput"; import MainLayout from "@/layouts/MainLayout"; -import { Card } from "antd"; +import { Routes } from "@/routes/routes"; +import { + useVariableInputMutationStore, + useVariableInputMutationUpdate, +} from "@/services/mutation/VariableInput"; +import { useVariableInputQueryDetail } from "@/services/query/VariableInput"; +import { Card, Form, Input } from "antd"; import React from "react"; -import { useParams } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; +import * as yup from "yup"; interface IProps { editPage?: boolean; } +const schema: yup.ObjectSchema = yup.object({ + name: yup.string().required(getRequiredMessage("Name")), +}); + const VariableInputForm: React.FC = ({ editPage = false }) => { const { id } = useParams(); + const query = useVariableInputQueryDetail(id); + + const { form, yupSync } = useFormUtility({ schema }); + const navigate = useNavigate(); + + const mutationUpdate = useVariableInputMutationUpdate(id, { + onSuccess: ({ message }) => { + prompNotification({ method: "success", message }); + navigate(Routes.VariableInputIndex); + }, + onError: (error) => + prompNotification({ message: error.message, method: "error" }), + }); + const mutationStore = useVariableInputMutationStore({ + onSuccess: ({ message }) => { + prompNotification({ method: "success", message }); + navigate(Routes.VariableInputIndex); + }, + onError: (error) => + prompNotification({ message: error.message, method: "error" }), + }); + + const onFinish = () => { + modalConfirm({ + onOk: async () => { + await form.validateFields(); + const payload = form.getFieldsValue(); + editPage + ? mutationUpdate.mutate(payload) + : mutationStore.mutate(payload); + }, + }); + }; + return ( = ({ editPage = false }) => { : Breadcrumbs.VariableInput.Create() } > - + + {query.isLoading || query.isFetching ? ( + + ) : ( +
+ + + + + Cancel + , + , + ]} + /> + + )} +
); }; diff --git a/src/pages/VariableInput/index.tsx b/src/pages/VariableInput/index.tsx index 7afaeef..592a268 100644 --- a/src/pages/VariableInput/index.tsx +++ b/src/pages/VariableInput/index.tsx @@ -26,12 +26,6 @@ const VariableInputIndex: React.FC = () => { render: (id) => ( { , ]} > - {query.isLoading ? ( + {query.isLoading || query.isFetching ? ( ) : ( { try { @@ -12,3 +14,43 @@ export const getVariableInputIndex = async () => { throw (error as AxiosError).response.data; } }; + +export const getVariableInputDetail = async (id) => { + try { + const response = await axiosAuthInstance.get( + parsingRoute(EndpointApi.VariableInputDetail, { id }) + ); + return response.data; + } catch (error) { + throw (error as AxiosError).response.data; + } +}; + +export const variableInputStore = async ( + payload: IVariableInputStoreUpdateRequest +) => { + try { + const response = await axiosAuthInstance.post( + EndpointApi.VariableInputStore, + payload + ); + return response.data; + } catch (error) { + throw (error as AxiosError).response.data; + } +}; + +export const variableInputUpdate = async ( + id, + payload: IVariableInputStoreUpdateRequest +) => { + try { + const response = await axiosAuthInstance.put( + parsingRoute(EndpointApi.VariableInputUpdate, { id }), + payload + ); + return response.data; + } catch (error) { + throw (error as AxiosError).response.data; + } +}; diff --git a/src/services/mutation/VariableInput/index.ts b/src/services/mutation/VariableInput/index.ts new file mode 100644 index 0000000..2582e51 --- /dev/null +++ b/src/services/mutation/VariableInput/index.ts @@ -0,0 +1,36 @@ +import { IVariableInputStoreUpdateRequest } from "@/interfaces/requests/VariableInput"; +import { IBaseResponse } from "@/interfaces/responses/base"; +import { + variableInputStore, + variableInputUpdate, +} from "@/services/apis/VariableInput"; +import { UseMutationOptions, useMutation } from "@tanstack/react-query"; + +export const useVariableInputMutationStore = ( + options?: UseMutationOptions< + IBaseResponse, + IBaseResponse, + IVariableInputStoreUpdateRequest + > +) => { + return useMutation({ + mutationKey: ["store-variable-input"], + mutationFn: (payload) => variableInputStore(payload), + ...options, + }); +}; + +export const useVariableInputMutationUpdate = ( + id, + options?: UseMutationOptions< + IBaseResponse, + IBaseResponse, + IVariableInputStoreUpdateRequest + > +) => { + return useMutation({ + mutationKey: ["update-variable-input", id], + mutationFn: (payload) => variableInputUpdate(id, payload), + ...options, + }); +}; diff --git a/src/services/query/VariableInput/index.ts b/src/services/query/VariableInput/index.ts index 247505c..c0477e3 100644 --- a/src/services/query/VariableInput/index.ts +++ b/src/services/query/VariableInput/index.ts @@ -1,6 +1,12 @@ -import { IVariableInputIndexResponse } from "@/interfaces/responses/VariableInput"; +import { + IVariableInputDetailResponse, + IVariableInputIndexResponse, +} from "@/interfaces/responses/VariableInput"; import { IBaseResponse } from "@/interfaces/responses/base"; -import { getVariableInputIndex } from "@/services/apis/VariableInput"; +import { + getVariableInputDetail, + getVariableInputIndex, +} from "@/services/apis/VariableInput"; import { UseQueryOptions, useQuery } from "@tanstack/react-query"; export const useVariableInputQueryIndex = ( @@ -16,3 +22,20 @@ export const useVariableInputQueryIndex = ( ...options, }); }; + +export const useVariableInputQueryDetail = ( + id, + options?: UseQueryOptions< + IVariableInputDetailResponse, + IBaseResponse, + IVariableInputDetailResponse + > +) => { + return useQuery({ + queryKey: ["variable-input-index", id], + queryFn: () => getVariableInputDetail(id), + enabled: !!id, + refetchOnMount: true, + ...options, + }); +}; diff --git a/tsconfig.json b/tsconfig.json index 98a4fc5..6529810 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,6 +20,7 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "strictNullChecks": false, + "noImplicitAny": false, /* Path */ "baseUrl": "./src",