Merge pull request #100 from yccodr/refactor/subscriber-modal

Refactor Subscriber Modal Page

frontend/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.6.0",
     "@mui/icons-material": "^5.15.11",
     "@mui/material": "^5.15.11",
     "@types/node": "^20.11.24",
@@ -15,16 +16,19 @@
     "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.5",
     "react-router-dom": "^6.22.2",
     "typescript": "^5.3.3",
-    "vite": "^5.1.7",
-    "web-vitals": "^3.5.2"
+    "vite": "^5.1.4",
+    "web-vitals": "^3.5.2",
+    "zod": "^3.23.8"
   },
   "scripts": {
     "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "format": "prettier --write 'src/**/*.{js,jsx,tsx,css,md,json}' --config ./.prettierrc"
+    "format": "prettier --write 'src/**/*.{js,jsx,tsx,css,md,json}' --config ./.prettierrc",
+    "test": "vitest"
   },
   "eslintConfig": {
     "extends": [
@@ -54,7 +58,8 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.0",
-    "prettier": "^3.2.5"
+    "prettier": "^3.2.5",
+    "vitest": "^2.0.2"
   },
   "packageManager": "yarn@4.1.0"
 }

frontend/src/hooks/subscription-form.tsx

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import { Subscription } from "../api";
+import { FormProvider, UseFormProps, useForm, useFormContext } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { defaultSubscriptionDTO, subscriptionDTOSchema, type SubscriptionDTO } from "../lib/dtos/subscription";
+
+const SubscriberFormOptions = {
+  mode: "onBlur",
+  reValidateMode: "onChange",
+  resolver: zodResolver(subscriptionDTOSchema),
+  defaultValues: defaultSubscriptionDTO(),
+} satisfies UseFormProps<Subscription>;
+
+export const SubscriberFormProvider = ({ children }: { children: ReactNode }) => {
+  const method = useForm<Subscription>(SubscriberFormOptions);
+  return <FormProvider {...method}>{children}</FormProvider>;
+};
+
+export const useSubscriptionForm = () => {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    getValues,
+    setValue,
+    setFocus,
+    reset,
+    control,
+    formState: { errors: validationErrors },
+  } = useFormContext<SubscriptionDTO>();
+
+  return {
+    register,
+    validationErrors,
+    handleSubmit,
+    watch,
+    getValues,
+    control,
+    setValue,
+    setFocus,
+    reset,
+  };
+};

frontend/src/lib/const.ts

@@ -0,0 +1 @@
+export const DEFAULT_5QI = 9;