refactor(basic and bug fix): code clean up and better seperation of concerns

Author: mehdi-parvizi

web/src/components/internal-ui/ChatBox.tsx

@@ -29,7 +29,6 @@ const ChatBox = ({ messageData, endpoint, request, id }: Props) => {
 
   useEffect(() => {
     if (data?.data.output) addMessage(UserType.BOT, data?.data.output!, uuid());
-    console.log(messageData);
   }, [request, data]);
 
   return (

web/src/features/basicGen/BasicGen.tsx

@@ -1,53 +1,34 @@
-import { FormProvider, useForm } from "react-hook-form";
+import { FormProvider } from "react-hook-form";
 import Input from "../../components/internal-ui/Input";
-import { BasicGenFields, ENDPOINTS, UserType } from "../constants";
+import { basicGenDefaultValues, BasicGenFields, ENDPOINTS } from "../constants";
 import { Button, HStack, Stack } from "@chakra-ui/react";
 
 import useGptStore from "../../utils/store";
 import ChatBox from "../../components/internal-ui/ChatBox";
 
 import { ApiRequestBasicGen, BasicGenFormData } from "../model";
-import { useEffect, useState } from "react";
+
 import { IoSendOutline } from "react-icons/io5";
-import { v4 as uuid } from "uuid";
+
+import useFormHandler from "../../hooks/useFormHandler";
+import { basicGenMapper } from "../../utils/mapperFunctions";
 
 const BasicGen = () => {
-  const formMethods = useForm<BasicGenFormData>({
-    defaultValues: {
-      minToken: 100,
-      maxToken: 500,
-      service: "terraform",
-      input: undefined,
-    },
-    mode: "onSubmit",
-  });
+  const { formMethods, handleSubmit, onSubmit, request } = useFormHandler<
+    BasicGenFormData,
+    ApiRequestBasicGen
+  >(basicGenDefaultValues);
 
-  const { handleSubmit } = formMethods;
+  const handleFormSubmit = handleSubmit((data) => {
+    onSubmit(basicGenMapper(data), data.input);
+  });
 
   const messages = useGptStore((s) => s.messages);
-  const addMessage = useGptStore((s) => s.addMessage);
-  const [req, setReq] = useState<ApiRequestBasicGen | null>(null);
-
-  const onSubmit = (data: BasicGenFormData) => {
-    addMessage(UserType.USER, data.input, uuid());
-    const request: ApiRequestBasicGen = {
-      min_token: data.minToken,
-      max_token: data.maxToken,
-      service: data.service,
-      input: data.input,
-      requestId: uuid(),
-    };
-    if (data.input) setReq(request);
-  };
-
-  useEffect(() => {
-    return () => setReq(null);
-  }, []);
 
   return (
     <div>
       <FormProvider {...formMethods}>
-        <form onSubmit={(e) => void handleSubmit(onSubmit)(e)}>
+        <form onSubmit={handleFormSubmit}>
           <Stack gap="3" justifyContent="center" alignItems="center">
             <div className="flex gap-2">
               <Input fieldName={BasicGenFields.MIN_TOKEN} label="Min token" />
@@ -56,9 +37,9 @@ const BasicGen = () => {
             </div>
             <ChatBox
               endpoint={ENDPOINTS.postBasic}
-              request={req}
+              request={request}
               messageData={messages}
-              id={req?.requestId ?? ""}
+              id={request?.requestId ?? ""}
             />
             <HStack
               mt="3"

web/src/features/bugFix/BugFix.tsx

@@ -1,53 +1,30 @@
-import { Stack, HStack, Button } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
-import { useForm, FormProvider } from "react-hook-form";
+import { Button, HStack, Stack } from "@chakra-ui/react";
+import { FormProvider } from "react-hook-form";
 import { IoSendOutline } from "react-icons/io5";
 import ChatBox from "../../components/internal-ui/ChatBox";
-import useGptStore from "../../utils/store";
-import { UserType, ENDPOINTS, BugFixFields } from "../constants";
-import { BugFixFormData, ApiRequestBugFix } from "../model";
-import { v4 as uuid } from "uuid";
 import Input from "../../components/internal-ui/Input";
+import useFormHandler from "../../hooks/useFormHandler";
+import { bugFixMapper } from "../../utils/mapperFunctions";
+import useGptStore from "../../utils/store";
+import { bugFixDefaultValues, BugFixFields, ENDPOINTS } from "../constants";
+import { ApiRequestBugFix, BugFixFormData } from "../model";
 
 const BugFix = () => {
-  const formMethods = useForm<BugFixFormData>({
-    defaultValues: {
-      minToken: 100,
-      maxToken: 500,
-      service: "terraform",
-      version: "latest",
-      bugDescription: undefined,
-    },
-    mode: "onSubmit",
-  });
-
-  const { handleSubmit } = formMethods;
+  const { request, handleSubmit, onSubmit, formMethods } = useFormHandler<
+    BugFixFormData,
+    ApiRequestBugFix
+  >(bugFixDefaultValues);
 
   const messages = useGptStore((s) => s.messages);
-  const addMessage = useGptStore((s) => s.addMessage);
-  const [req, setReq] = useState<ApiRequestBugFix | null>(null);
-
-  const onSubmit = (data: BugFixFormData) => {
-    addMessage(UserType.USER, data.bugDescription, uuid());
-    const request: ApiRequestBugFix = {
-      min_token: data.minToken,
-      max_token: data.maxToken,
-      service: data.service,
-      bug_description: data.bugDescription,
-      version: data.version,
-      requestId: uuid(),
-    };
-    if (data.bugDescription) setReq(request);
-  };
 
-  useEffect(() => {
-    return () => setReq(null);
-  }, []);
+  const handleFormSubmit = handleSubmit((data) => {
+    onSubmit(bugFixMapper(data), data.bugDescription);
+  });
 
   return (
     <div>
       <FormProvider {...formMethods}>
-        <form onSubmit={(e) => void handleSubmit(onSubmit)(e)}>
+        <form onSubmit={handleFormSubmit}>
           <Stack gap="3" justifyContent="center" alignItems="center">
             <div className="flex gap-2">
               <Input fieldName={BugFixFields.MIN_TOKEN} label="Min token" />
@@ -57,9 +34,9 @@ const BugFix = () => {
             </div>
             <ChatBox
               endpoint={ENDPOINTS.postFix}
-              request={req}
+              request={request}
               messageData={messages}
-              id={req?.requestId ?? ""}
+              id={request?.requestId ?? ""}
             />
             <HStack
               mt="3"

web/src/features/constants.ts

@@ -27,3 +27,18 @@ export enum ENDPOINTS {
   getDonwload = "/download",
   getDirectory = "/list-directory",
 }
+
+export const basicGenDefaultValues = {
+  minToken: 100,
+  maxToken: 500,
+  service: "terraform",
+  input: undefined,
+};
+
+export const bugFixDefaultValues = {
+  minToken: 100,
+  maxToken: 500,
+  service: "terraform",
+  version: "latest",
+  bugDescription: undefined,
+};

web/src/hooks/useFormHandler.ts

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import { FieldValues, useForm, UseFormProps } from "react-hook-form";
+import { v4 as uuid } from "uuid";
+import useGptStore from "../utils/store";
+import { UserType } from "../features/constants";
+
+const useFormHandler = <T extends FieldValues, K>(
+  initialValues: UseFormProps<T>["defaultValues"]
+) => {
+  const [request, setRequest] = useState<K & { requestId: string }>();
+  const formMethods = useForm<T>({ defaultValues: initialValues });
+  const addMessage = useGptStore((s) => s.addMessage);
+  const { handleSubmit } = formMethods;
+
+  const onSubmit = (data: K, content: string) => {
+    addMessage(UserType.USER, content, uuid());
+    if (data) setRequest({ ...data, requestId: uuid() });
+  };
+  return { formMethods, request, handleSubmit, onSubmit };
+};
+
+export default useFormHandler;

web/src/utils/mapperFunctions.ts

@@ -0,0 +1,23 @@
+import {
+  BasicGenFormData,
+  ApiRequestBasicGen,
+  BugFixFormData,
+  ApiRequestBugFix,
+} from "../features/model";
+
+export const basicGenMapper = (data: BasicGenFormData): ApiRequestBasicGen => ({
+  min_token: data.minToken,
+  max_token: data.maxToken,
+  service: data.service,
+  input: data.input,
+  requestId: "",
+});
+
+export const bugFixMapper = (data: BugFixFormData): ApiRequestBugFix => ({
+  min_token: data.minToken,
+  max_token: data.maxToken,
+  bug_description: data.bugDescription,
+  service: data.service,
+  version: data.version,
+  requestId: "",
+});