Fix useForm Hook Types

background/messages/read.ts

@@ -1,5 +1,5 @@
 import type { PlasmoMessaging } from "@plasmohq/messaging";
- 
+
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
   const { token, siteUrl } = await chrome.storage.local.get(["token", "siteUrl"]);
 
@@ -22,5 +22,5 @@ const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
     res.send(addReq);
   }
 }
- 
+
 export default handler;

contents/invokeFetch.ts

@@ -1,5 +1,5 @@
 import type { PlasmoCSConfig } from "plasmo"
- 
+
 export const config: PlasmoCSConfig = {
   matches: ["<all_urls>"],
   world: "MAIN"

hooks/useForm.ts

@@ -1,27 +1,30 @@
-import { useEffect, useRef, type FormEvent } from "react";
+import { useRef, type InputHTMLAttributes } from "react";
 
-type Values = Record<string, string | number>;
+type defaultValues = Record<string, any>;
 
-interface Props {
+interface Props<T extends defaultValues = defaultValues> {
-  initialValues?: Values;
+  initialValues?: Partial<T>;
-  onSubmit?: (values: Values) => void;
 }
 
-type a = (values: Values) => void;
+type InputElements =
+  | HTMLInputElement
+  | HTMLSelectElement
+  | HTMLTextAreaElement
+;
 
-interface UseFormReturns {
+interface UseFormReturns<T extends defaultValues> {
-  getValue: () => Values;
+  getValue: () => T;
-  setValue: (name: string, value: string | number) => void;
+  setValue: (name: keyof T, value: string | number) => void;
-  setValues: (values: Values) => void;
+  setValues: (values: Partial<T>) => void;
-  bindInput: (name: string) => any;
+  bindInput: (name: keyof T) => InputHTMLAttributes<InputElements>;
-  onSubmit: (a: a) => (ev: FormEvent) => void;
+  // onSubmit: (values: T) => (ev: React.FormEvent) => void
+  onSubmit: (fn: (values: T) => void) => (ev: React.FormEvent) => void
 }
 
-function useForm({ initialValues }: Props) {
+function useForm<T extends defaultValues>({ initialValues }: Props<T>) {
-  const formRef = useRef<HTMLFormElement>();
+  const inputs = useRef<Partial<Record<keyof T, InputElements>>>({});
-  const inputs = useRef({});
+  const values = useRef<T>({ ...initialValues } as T);
-  const values = useRef({ ...initialValues });
+  const inst = useRef<UseFormReturns<T>>();
-  const inst = useRef<UseFormReturns>();
 
   if (!inst.current) {
     const getValue = () => {
@@ -29,15 +32,15 @@ function useForm({ initialValues }: Props) {
     }
 
     const setValue = (name, value) => {
-      console.log(inputs.current[name]);
+      console.log(inputs.current[name], name);
 
       if (inputs.current[name]) {
-        values.current[name] = value;
+        values.current[name as keyof T] = value;
         inputs.current[name].value = value;
       }
     }
 
-    const setValues = (values: Values) => {
+    const setValues = (values) => {
       Object.keys(values).forEach((key) => {
         setValue(key, values[key]);
       });
@@ -45,29 +48,32 @@ function useForm({ initialValues }: Props) {
 
     const bindInput = (name: string) => {
       console.log('bindinput')
-  
+
       return {
         name,
         id: name,
         ref: (target) => {
           console.log('ref', target);
-  
+
           if (target) {
-            inputs.current[name] = target;
+            inputs.current[name as keyof T] = target;
           }
-  
-          return undefined;
         },
         defaultValue: initialValues[name],
         onChange: (ev) => {
-          values.current[ev.target.name] = ev.target.value;
+          const { name, value } = ev.target;
+
+          values.current[name as keyof T] = value;
         },
       }
     }
 
-    const onSubmit = (fn) => (ev: SubmitEvent) => {
+    const onSubmit = (fn: (values: T) => void) => {
-      ev.preventDefault();
+      return (ev: React.FormEvent) => {
-      fn(getValue());
+        ev.preventDefault();
+
+        fn(getValue());
+      }
     }
 
     inst.current = {
@@ -79,16 +85,6 @@ function useForm({ initialValues }: Props) {
     };
   }
 
-  useEffect(() => {
-    console.log('form', formRef.current);
-
-    // formRef.current.onsubmit = (ev: SubmitEvent) => {
-    //   ev.preventDefault();
-    //   console.log(t.current?.getValue());
-    //   console.log(inputs);
-    // }
-  }, []);
-
   return inst.current;
 }
 

popup/popup.module.less

@@ -22,7 +22,7 @@
       margin-right: .5em;
     }
   }
-  
+
   .item:hover {
     background-color: #eee;
   }
@@ -53,7 +53,7 @@
       }
     }
   }
-  
+
   .body {
     padding: 1em;
   }

popup/read.tsx

@@ -15,6 +15,10 @@ interface FormValue {
   link: string;
   desc: string;
   tips: string;
+  author: string;
+  image: string;
+  sitename: string;
+  tags: string;
 }
 
 const getInfo = async () => {
@@ -50,10 +54,7 @@ function Read({ onBack }: ReadProps) {
   const [count, setCount] = useState(0);
   const { bindInput, setValues, onSubmit } = useForm<FormValue>({
     initialValues: {
-      test: 'test',
+      tags: "",
-    },
-    onSubmit: (values) => {
-      submitForm(values);
     },
   });