From bcf2f28a6bce112eaf435342b066f280d9eff5d0 Mon Sep 17 00:00:00 2001
From: Mathis <avnyr@yidhra.fr>
Date: Fri, 25 Oct 2024 14:44:22 +0200
Subject: [PATCH] Add `useCallbackRef` hook and update imports

Implemented a custom `useCallbackRef` hook to optimize callback refs. Updated import paths for consistency and replaced `Cross2Icon` with `CrossIcon` in FileUploader component.
---
 .../frontend/src/components/file-uploader.tsx |  8 +++---
 apps/frontend/src/components/ui/avatar.tsx    |  2 +-
 apps/frontend/src/components/ui/drawer.tsx    |  2 +-
 apps/frontend/src/components/ui/select.tsx    |  2 +-
 apps/frontend/src/hooks/use-callback-ref.ts   | 27 +++++++++++++++++++
 .../src/hooks/use-controllable-state.ts       |  6 +++--
 6 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 apps/frontend/src/hooks/use-callback-ref.ts

diff --git a/apps/frontend/src/components/file-uploader.tsx b/apps/frontend/src/components/file-uploader.tsx
index 0bdff71..3b021f5 100644
--- a/apps/frontend/src/components/file-uploader.tsx
+++ b/apps/frontend/src/components/file-uploader.tsx
@@ -1,11 +1,13 @@
 import Dropzone, { DropzoneProps, FileRejection } from 'react-dropzone';
 import { toast } from 'sonner';
 import React from 'react';
-import { FileTextIcon, UploadIcon } from 'lucide-react';
+import { CrossIcon, FileTextIcon, UploadIcon } from 'lucide-react';
 import { ScrollArea } from './ui/scroll-area';
 import { Progress } from '@radix-ui/react-progress';
 import { Button } from './ui/button';
-import { formatBytes } from '../lib/utils';
+import { cn, formatBytes } from '../lib/utils';
+import { useControllableState } from '../hooks/use-controllable-state';
+import Image from 'next/image';
 
 
 interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -288,7 +290,7 @@ function FileCard({ file, progress, onRemove }: FileCardProps) {
           className="size-7"
           onClick={onRemove}
         >
-          <Cross2Icon className="size-4" aria-hidden="true" />
+          <CrossIcon className="size-4" aria-hidden="true" />
           <span className="sr-only">Remove file</span>
         </Button>
       </div>
diff --git a/apps/frontend/src/components/ui/avatar.tsx b/apps/frontend/src/components/ui/avatar.tsx
index 51e507b..9122baa 100644
--- a/apps/frontend/src/components/ui/avatar.tsx
+++ b/apps/frontend/src/components/ui/avatar.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
diff --git a/apps/frontend/src/components/ui/drawer.tsx b/apps/frontend/src/components/ui/drawer.tsx
index 6a0ef53..537cdd2 100644
--- a/apps/frontend/src/components/ui/drawer.tsx
+++ b/apps/frontend/src/components/ui/drawer.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const Drawer = ({
   shouldScaleBackground = true,
diff --git a/apps/frontend/src/components/ui/select.tsx b/apps/frontend/src/components/ui/select.tsx
index cbe5a36..240b789 100644
--- a/apps/frontend/src/components/ui/select.tsx
+++ b/apps/frontend/src/components/ui/select.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const Select = SelectPrimitive.Root
 
diff --git a/apps/frontend/src/hooks/use-callback-ref.ts b/apps/frontend/src/hooks/use-callback-ref.ts
new file mode 100644
index 0000000..873db58
--- /dev/null
+++ b/apps/frontend/src/hooks/use-callback-ref.ts
@@ -0,0 +1,27 @@
+import * as React from "react"
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+ */
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef<T extends (...args: never[]) => unknown>(
+  callback: T | undefined
+): T {
+  const callbackRef = React.useRef(callback)
+
+  React.useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(
+    () => ((...args) => callbackRef.current?.(...args)) as T,
+    []
+  )
+}
+
+export { useCallbackRef }
\ No newline at end of file
diff --git a/apps/frontend/src/hooks/use-controllable-state.ts b/apps/frontend/src/hooks/use-controllable-state.ts
index b259376..257f72d 100644
--- a/apps/frontend/src/hooks/use-controllable-state.ts
+++ b/apps/frontend/src/hooks/use-controllable-state.ts
@@ -1,6 +1,7 @@
 import * as React from "react"
 
-import { useCallbackRef } from "@/hooks/use-callback-ref"
+import { useCallbackRef } from "../hooks/use-callback-ref"
+import { useEffect } from 'react';
 
 /**
  * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
@@ -54,7 +55,8 @@ function useUncontrolledState<T>({
   const prevValueRef = React.useRef(value)
   const handleChange = useCallbackRef(onChange)
 
-  React.useEffect(() => {
+  // @ts-ignore
+  useEffect(() => {
     if (prevValueRef.current !== value) {
       handleChange(value as T)
       prevValueRef.current = value