fix: broken clickoutside & example custom page

premieroctet · Dec 13, 2024 · 2ee9186 · 2ee9186
1 parent aba7c4d
commit 2ee9186
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 46 deletions.
diff --git a/.changeset/beige-meals-deliver.md b/.changeset/beige-meals-deliver.md
@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+fix: broken clickoutside & example custom page
diff --git a/apps/example/app/[locale]/admin/custom/page.tsx b/apps/example/app/[locale]/admin/custom/page.tsx
@@ -31,36 +31,25 @@ const CustomPage = async () => {
       }}
     >
       <div className="p-10">
-        <h1 className="mb-4 text-xl font-bold leading-7 text-gray-900 dark:text-gray-300 sm:truncate sm:text-3xl sm:tracking-tight">
+        <h1 className="mb-4 text-xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight dark:text-gray-300">
           Dashboard
         </h1>
         <div className="mt-2">
           <div>
             <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
-              <div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow dark:bg-gray-800 sm:p-6">
-                <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                  Total Users
-                </dt>
-                <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
-                  8
-                </dd>
-              </div>
-              <div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow dark:bg-gray-800 sm:p-6">
-                <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                  Total Posts
-                </dt>
-                <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
-                  59
-                </dd>
-              </div>
-              <div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow dark:bg-gray-800 sm:p-6">
-                <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                  Total Categories
-                </dt>
-                <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
-                  1
-                </dd>
-              </div>
+              {stats.map((item) => (
+                <div
+                  key={item.name}
+                  className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6 dark:bg-gray-800"
+                >
+                  <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
+                    {item.name}
+                  </dt>
+                  <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
+                    {item.stat}
+                  </dd>
+                </div>
+              ))}
             </dl>
           </div>
         </div>

diff --git a/apps/example/pages/pagerouter/admin/custom/index.tsx b/apps/example/pages/pagerouter/admin/custom/index.tsx
@@ -48,12 +48,12 @@ const CustomPage = ({
               {stats.map((item) => (
                 <div
                   key={item.name}
-                  className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6"
+                  className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6 dark:bg-gray-800"
                 >
-                  <dt className="truncate text-sm font-medium text-gray-500">
+                  <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
                     {item.name}
                   </dt>
-                  <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
+                  <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
                     {item.stat}
                   </dd>
                 </div>

diff --git a/packages/next-admin/src/components/Menu.tsx b/packages/next-admin/src/components/Menu.tsx
@@ -46,7 +46,7 @@ const ColorSchemeSwitch = dynamic(() => import("./ColorSchemeSwitch"), {
 });
 
 export type MenuProps = {
-  resource?: ModelName;
+  resource?: ModelName | null;
   resources?: ModelName[];
   resourcesTitles?: Record<ModelName, string | undefined>;
   customPages?: AdminComponentProps["customPages"];

diff --git a/packages/next-admin/src/context/ConfigContext.tsx b/packages/next-admin/src/context/ConfigContext.tsx
@@ -12,7 +12,7 @@ export type ConfigContextType = {
   basePath: string;
   isAppDir?: boolean;
   apiBasePath: string;
-  resource?: ModelName;
+  resource?: ModelName | null;
   resourcesIdProperty: Record<ModelName, string> | null;
   schema: Schema;
   nextAdminContext?: NextAdminContext;
@@ -28,7 +28,7 @@ type ProviderProps = {
   options?: NextAdminOptions;
   children: React.ReactNode;
   isAppDir?: boolean;
-  resource?: ModelName;
+  resource?: ModelName | null;
   resourcesIdProperty: Record<ModelName, string> | null;
   schema: Schema;
   nextAdminContext?: NextAdminContext;

diff --git a/packages/next-admin/src/hooks/useCloseOnOutsideClick.ts b/packages/next-admin/src/hooks/useCloseOnOutsideClick.ts
@@ -12,17 +12,9 @@ const useClickOutside = <E extends HTMLElement = HTMLElement>(
       }
     };
 
-    setTimeout(() => {
-      /**
-       * There is a weird behavior on Page Router where this triggers
-       * just when a selector is opened. I suppose this is because the click event is not finished
-       * dispatching when we click on a trigger, but this is strange that
-       * this does not occur in App Router
-       */
-      document.addEventListener("click", handleClickOutside);
-    });
+    document.addEventListener("mousedown", handleClickOutside);
     return () => {
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [callback]);
 

diff --git a/packages/next-admin/src/types.ts b/packages/next-admin/src/types.ts
@@ -830,7 +830,7 @@ export type AdminComponentProps = {
   apiBasePath: string;
   schema: Schema;
   data?: ListData<ModelName>;
-  resource?: ModelName;
+  resource?: ModelName | null;
   slug?: string;
   /**
    * Page router only

diff --git a/packages/next-admin/src/utils/server.ts b/packages/next-admin/src/utils/server.ts
@@ -1161,10 +1161,12 @@ export const getResourceFromParams = (
   params: string[],
   resources: Prisma.ModelName[]
 ) => {
-  return resources.find((r) => {
-    const slugifiedResource = r.toLowerCase();
-    return params.some((param) => param.toLowerCase() === slugifiedResource);
-  });
+  return (
+    resources.find((r) => {
+      const slugifiedResource = r.toLowerCase();
+      return params.some((param) => param.toLowerCase() === slugifiedResource);
+    }) ?? null
+  );
 };
 
 /**