fix: compatible with latest lint rules

Author: pan93412

app/(admin)/(user-management)/users/_components/update-form.tsx

@@ -6,7 +6,7 @@ import { UpdateFormBody } from "@/components/update-modal/form-body";
 import type { UpdateFormBaseProps } from "@/components/update-modal/types";
 import { zodResolver } from "@hookform/resolvers/zod";
 import React from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 
 export const formSchema = z.object({
@@ -39,6 +39,9 @@ export function UpdateUserForm({
     defaultValues,
   });
 
+  const avatar = useWatch({ control: form.control, name: "avatar" });
+  const name = useWatch({ control: form.control, name: "name" });
+
   const handleSubmit = (data: z.infer<typeof formSchema>) => {
     onSubmit({
       name: data.name,
@@ -85,8 +88,8 @@ export function UpdateUserForm({
         />
 
         <Avatar>
-          <AvatarImage src={form.watch("avatar")} />
-          <AvatarFallback>{form.watch("name")}</AvatarFallback>
+          <AvatarImage src={avatar} />
+          <AvatarFallback>{name}</AvatarFallback>
         </Avatar>
       </div>
 

app/(admin)/me/_components/form.tsx

@@ -9,7 +9,7 @@ import { useUser } from "@/providers/use-user";
 import { useMutation } from "@apollo/client/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { ME_UPDATE_MUTATION } from "./mutation";
@@ -30,6 +30,8 @@ export function MeForm() {
     },
   });
 
+  const avatar = useWatch({ control: form.control, name: "avatar" });
+
   useEffect(() => {
     if (!form.formState.isDirty) return;
     const message = "您有尚未儲存的更動。確定要關閉而不儲存嗎？您的更動將會遺失。";
@@ -47,8 +49,6 @@ export function MeForm() {
     };
   }, [form.formState.isDirty]);
 
-  const avatar = form.watch("avatar");
-
   const [updateMe] = useMutation(ME_UPDATE_MUTATION, {
     refetchQueries: [BASIC_USER_INFO_QUERY],
     onError: (error) => {

components/data-table/general.tsx

@@ -12,6 +12,8 @@ export function GeneralDataTable<TData, TValue>({
   columns,
   data,
 }: GeneralDataTableProps<TData, TValue>) {
+  "use no memo";
+
   const table = useReactTable({
     data,
     columns,

components/ui/sidebar.tsx

@@ -723,11 +723,6 @@ function SidebarMenuSkeleton({
 }: React.ComponentProps<"div"> & {
   showIcon?: boolean;
 }) {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
-
   return (
     <div
       data-slot="sidebar-menu-skeleton"
@@ -745,7 +740,7 @@ function SidebarMenuSkeleton({
         className="h-4 max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
         style={{
-          "--skeleton-width": width,
+          "--skeleton-width": "90%",
         } as React.CSSProperties}
       />
     </div>