fix: TypeScript issues and dev tools import

ritza-co · Jan 17, 2025 · 0c0eb6f · 0c0eb6f
1 parent 5768379
commit 0c0eb6f
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 16 deletions.
diff --git a/src/app/blog-posts/page.tsx b/src/app/blog-posts/page.tsx
@@ -3,9 +3,37 @@
 import { GetManyResponse, useMany, useNavigation } from '@refinedev/core';
 import { useTable } from '@refinedev/react-table';
 import { ColumnDef, flexRender } from '@tanstack/react-table';
-import React from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 export default function BlogPostList() {
+
+    const { edit, show, create } = useNavigation();
+
+    // 1. Store the navigation functions in refs, so we can ensure
+    //    we always call the "current" version without re-creating
+    //    the callbacks below.
+    const editRef = useRef(edit);
+    const showRef = useRef(show);
+
+    // Whenever `edit` or `show` changes, update our refs.
+    useEffect(() => {
+        editRef.current = edit;
+    }, [edit]);
+
+    useEffect(() => {
+        showRef.current = show;
+    }, [show]);
+
+    // 2. Create stable callbacks (no dependencies)
+    const handleEdit = useCallback((resource: string, id: string) => {
+        editRef.current(resource, id);
+    }, []);
+
+    const handleShow = useCallback((resource: string, id: string) => {
+        showRef.current(resource, id);
+    }, []);
+
+    // 3. Define columns once, using only stable callback references
     const columns = React.useMemo<ColumnDef<any>[]>(
         () => [
             {
@@ -75,14 +103,14 @@ export default function BlogPostList() {
                         >
                             <button
                                 onClick={() => {
-                                    show('blog_posts', getValue() as string);
+                                    handleShow('blog_posts', getValue() as string);
                                 }}
                             >
                 Show
                             </button>
                             <button
                                 onClick={() => {
-                                    edit('blog_posts', getValue() as string);
+                                    handleEdit('blog_posts', getValue() as string);
                                 }}
                             >
                 Edit
@@ -92,11 +120,9 @@ export default function BlogPostList() {
                 }
             }
         ],
-        []
+        [handleEdit, handleShow]
     );
 
-    const { edit, show, create } = useNavigation();
-
     const {
         getHeaderGroups,
         getRowModel,
@@ -226,4 +252,4 @@ export default function BlogPostList() {
             </div>
         </div>
     );
-}
+}
diff --git a/src/app/categories/page.tsx b/src/app/categories/page.tsx
@@ -3,9 +3,37 @@
 import { useNavigation } from '@refinedev/core';
 import { useTable } from '@refinedev/react-table';
 import { ColumnDef, flexRender } from '@tanstack/react-table';
-import React from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 export default function CategoryList() {
+
+    const { edit, show, create } = useNavigation();
+
+    // 1. Store the navigation functions in refs, so we can ensure
+    //    we always call the "current" version without re-creating
+    //    the callbacks below.
+    const editRef = useRef(edit);
+    const showRef = useRef(show);
+
+    // Whenever `edit` or `show` changes, update our refs.
+    useEffect(() => {
+        editRef.current = edit;
+    }, [edit]);
+
+    useEffect(() => {
+        showRef.current = show;
+    }, [show]);
+
+    // 2. Create stable callbacks (no dependencies)
+    const handleEdit = useCallback((resource: string, id: string) => {
+        editRef.current(resource, id);
+    }, []);
+
+    const handleShow = useCallback((resource: string, id: string) => {
+        showRef.current(resource, id);
+    }, []);
+
+    // 3. Define columns once, using only stable callback reference
     const columns = React.useMemo<ColumnDef<any>[]>(
         () => [
             {
@@ -34,14 +62,14 @@ export default function CategoryList() {
                         >
                             <button
                                 onClick={() => {
-                                    show('categories', getValue() as string);
+                                    handleShow('categories', getValue() as string);
                                 }}
                             >
                 Show
                             </button>
                             <button
                                 onClick={() => {
-                                    edit('categories', getValue() as string);
+                                    handleEdit('categories', getValue() as string);
                                 }}
                             >
                 Edit
@@ -51,11 +79,9 @@ export default function CategoryList() {
                 }
             }
         ],
-        []
+        [handleEdit, handleShow]
     );
 
-    const { edit, show, create } = useNavigation();
-
     const {
         getHeaderGroups,
         getRowModel,
@@ -172,4 +198,4 @@ export default function CategoryList() {
             </div>
         </div>
     );
-}
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import { DevtoolsProvider } from '@providers/devtools';
+import { DevtoolsProvider, DevtoolsPanel } from '@refinedev/devtools';
 import { GitHubBanner, Refine } from '@refinedev/core';
 import { RefineKbar, RefineKbarProvider } from '@refinedev/kbar';
 import routerProvider from '@refinedev/nextjs-router';
@@ -64,9 +64,10 @@ export default function RootLayout({
                                 <RefineKbar />
                             </Refine>
                         </DevtoolsProvider>
+                        <DevtoolsPanel />
                     </RefineKbarProvider>
                 </Suspense>
             </body>
         </html>
     );
-}
+}