@dashadmin/dash-admin 1.3.17 → 1.3.20

package/dist/templates/ResourceTemplate.tsx.memoized_experiment

@@ -0,0 +1,350 @@
+/* eslint-disable no-mixed-spaces-and-tabs */
+import { Resource } from 'react-admin';
+import { CustomRoutes } from 'react-admin/src';
+import { Route, useParams } from 'react-router-dom';
+//import { Outlet } from 'react-router';
+import {
+    IDashAutoAdminResourceConfig,
+    evalActionPermission,
+} from 'dash-auto-admin';
+import React, { PropsWithChildren, useMemo, useCallback } from 'react';
+import MotionWrapper from '../layout/MotionWrapper';
+import Redirect from '../components/Redirect';
+import { ResourceTemplateCreate } from './ResourceTemplateCreate';
+import { ResourceTemplateEdit } from './ResourceTemplateEdit';
+import { ResourceTemplateList } from './ResourceTemplateList';
+import { ResourceTemplateShow } from './ResourceTemplateShow';
+import {DASHAdminSystemConstants} from '../config/DASHAdminSystemConstants';
+import TrashTemplate from './TrashTemplate';
+import { DashResourceProvider } from '../contexts/DashResourceContext';
+
+export interface IResourceTemplate {
+    resourceConfig: IDashAutoAdminResourceConfig;
+}
+
+// Memoized ResourceTemplateList
+const MemoizedResourceTemplateList = React.memo(({ resourceConfig }: { resourceConfig: IDashAutoAdminResourceConfig }) => (
+    <DashResourceProvider resourceConfig={resourceConfig}>
+        <ResourceTemplateList resourceConfig={resourceConfig} />
+    </DashResourceProvider>
+), (prevProps, nextProps) => {
+    return prevProps.resourceConfig === nextProps.resourceConfig;
+});
+
+// Memoized ResourceTemplateCreate
+const MemoizedResourceTemplateCreate = React.memo(({ resourceConfig }: { resourceConfig: IDashAutoAdminResourceConfig }) => (
+    <DashResourceProvider resourceConfig={resourceConfig}>
+        <ResourceTemplateCreate resourceConfig={resourceConfig} />
+    </DashResourceProvider>
+), (prevProps, nextProps) => {
+    return prevProps.resourceConfig === nextProps.resourceConfig;
+});
+
+// Memoized ResourceTemplateShow
+const MemoizedResourceTemplateShow = React.memo(({ resourceConfig }: { resourceConfig: IDashAutoAdminResourceConfig }) => (
+    <DashResourceProvider resourceConfig={resourceConfig}>
+        <ResourceTemplateShow resourceConfig={resourceConfig} />
+    </DashResourceProvider>
+), (prevProps, nextProps) => {
+    return prevProps.resourceConfig === nextProps.resourceConfig;
+});
+
+// Memoized ResourceTemplateEdit
+const MemoizedResourceTemplateEdit = React.memo(({ resourceConfig }: { resourceConfig: IDashAutoAdminResourceConfig }) => (
+    <DashResourceProvider resourceConfig={resourceConfig}>
+        <ResourceTemplateEdit resourceConfig={resourceConfig} />
+    </DashResourceProvider>
+), (prevProps, nextProps) => {
+    return prevProps.resourceConfig === nextProps.resourceConfig;
+});
+
+// Memoized TrashTemplate
+const MemoizedTrashTemplate = React.memo(({ resourceConfig }: { resourceConfig: IDashAutoAdminResourceConfig }) => (
+    <DashResourceProvider resourceConfig={resourceConfig}>
+        <TrashTemplate resourceConfig={resourceConfig} />
+    </DashResourceProvider>
+), (prevProps, nextProps) => {
+    return prevProps.resourceConfig === nextProps.resourceConfig;
+});
+
+// Memoized Redirect component
+const MemoizedRedirect = React.memo(({ 
+    resourceConfig, 
+    stateHashPattern, 
+    method, 
+    drawerMethod 
+}: { 
+    resourceConfig: IDashAutoAdminResourceConfig;
+    stateHashPattern: string;
+    method: string;
+    drawerMethod: string;
+}) => (
+    <DashResourceProvider resourceConfig={resourceConfig}>
+        <Redirect
+            stateHashPattern={stateHashPattern}
+            method={method}
+            drawerMethod={drawerMethod}
+            resourceConfig={resourceConfig}
+        />
+    </DashResourceProvider>
+), (prevProps, nextProps) => {
+    return (
+        prevProps.resourceConfig === nextProps.resourceConfig &&
+        prevProps.stateHashPattern === nextProps.stateHashPattern &&
+        prevProps.method === nextProps.method &&
+        prevProps.drawerMethod === nextProps.drawerMethod
+    );
+});
+
+// Cache for memoized resource templates
+const resourceTemplateCache = new Map<string, React.ReactElement>();
+
+// This is the function that gets called - it returns JSX
+export const ResourceTemplate = (resourceConfig: IDashAutoAdminResourceConfig): React.ReactElement => {
+    const debug = false;
+    
+    // Create a cache key based on the resource config
+    const cacheKey = `${resourceConfig.model}-${resourceConfig.create}-${resourceConfig.edit}-${resourceConfig.view}-${resourceConfig.list}-${resourceConfig.delete}-${resourceConfig.drawer}-${JSON.stringify(resourceConfig.drawerOptions)}`;
+    
+    // Check if we have a cached version
+    if (resourceTemplateCache.has(cacheKey)) {
+        return resourceTemplateCache.get(cacheKey)!;
+    }
+
+    const _create = evalActionPermission(resourceConfig, resourceConfig?.create);
+    const _edit = evalActionPermission(resourceConfig, resourceConfig?.edit);
+    const _view = evalActionPermission(resourceConfig, resourceConfig?.view);
+    const _list = evalActionPermission(resourceConfig, resourceConfig?.list);
+    const _delete = evalActionPermission(resourceConfig, resourceConfig?.delete);
+
+    if (debug) {
+        console.info(`${resourceConfig.model} ResourceTemplate`, {
+            resourceConfig: resourceConfig,
+            evaluatedPermissions: {
+                create: _create,
+                edit: _edit,
+                view: _view,
+                list: _list,
+                delete: _delete,
+            },
+        });
+    }
+
+    const idParamName = resourceConfig?.idParamName || 'id';
+    const URL_PREFIX = DASHAdminSystemConstants.system.URL_PREFIX;
+
+    // Generate drawer routes
+    const drawerRoutes = [];
+    if (resourceConfig?.drawer === true) {
+        if (resourceConfig?.drawerOptions?.create !== false) {
+            drawerRoutes.push(
+                <Route
+                    key={`${resourceConfig.model}-create`}
+                    path={URL_PREFIX + resourceConfig.model + '/create'}
+                    element={
+                        <MemoizedRedirect
+                            resourceConfig={resourceConfig}
+                            stateHashPattern={URL_PREFIX + resourceConfig.model + '/inline/create'}
+                            method='list'
+                            drawerMethod='create'
+                        />
+                    }
+                />
+            );
+        }
+
+        if (resourceConfig?.drawerOptions?.edit !== false) {
+            drawerRoutes.push(
+                <Route
+                    key={`${resourceConfig.model}-inline`}
+                    path={URL_PREFIX + resourceConfig.model + '/inline'}
+                    element={
+                        <MemoizedRedirect
+                            resourceConfig={resourceConfig}
+                            stateHashPattern={URL_PREFIX + resourceConfig.model + '/inline'}
+                            method='list'
+                            drawerMethod='edit'
+                        />
+                    }
+                />
+            );
+        }
+
+        if (resourceConfig?.drawerOptions?.view !== false) {
+            drawerRoutes.push(
+                <Route
+                    key={`${resourceConfig.model}-inline-view`}
+                    path={URL_PREFIX + resourceConfig.model + '/inline/:' + idParamName}
+                    element={
+                        <MemoizedRedirect
+                            resourceConfig={resourceConfig}
+                            stateHashPattern={
+                                URL_PREFIX +
+                                resourceConfig.model +
+                                '/inline/:' +
+                                idParamName +
+                                '/:method'
+                            }
+                            method='list'
+                            drawerMethod='edit'
+                        />
+                    }
+                />
+            );
+        }
+
+        if (resourceConfig?.drawerOptions?.edit !== false) {
+            drawerRoutes.push(
+                <Route
+                    key={`${resourceConfig.model}-inline-edit`}
+                    path={URL_PREFIX + resourceConfig.model + '/inline/:' + idParamName + '/edit'}
+                    element={
+                        <MemoizedRedirect
+                            resourceConfig={resourceConfig}
+                            stateHashPattern={
+                                URL_PREFIX +
+                                resourceConfig.model +
+                                '/inline/:' +
+                                idParamName +
+                                '/:method'
+                            }
+                            method='list'
+                            drawerMethod='edit'
+                        />
+                    }
+                />
+            );
+        }
+
+        if (resourceConfig?.drawerOptions?.view !== false) {
+            drawerRoutes.push(
+                <Route
+                    key={`${resourceConfig.model}-inline-show`}
+                    path={URL_PREFIX + resourceConfig.model + '/inline/:' + idParamName + '/show'}
+                    element={
+                        <MemoizedRedirect
+                            resourceConfig={resourceConfig}
+                            stateHashPattern={
+                                URL_PREFIX +
+                                resourceConfig.model +
+                                '/inline/:' +
+                                idParamName +
+                                '/:method'
+                            }
+                            method='list'
+                            drawerMethod='show'
+                        />
+                    }
+                />
+            );
+        }
+
+        if (resourceConfig?.drawerOptions?.create !== false) {
+            drawerRoutes.push(
+                <Route
+                    key={`${resourceConfig.model}-inline-create`}
+                    path={URL_PREFIX + resourceConfig.model + '/inline/create'}
+                    element={
+                        <MemoizedRedirect
+                            resourceConfig={resourceConfig}
+                            stateHashPattern={URL_PREFIX + resourceConfig.model + '/inline/create'}
+                            method='list'
+                            drawerMethod='create'
+                        />
+                    }
+                />
+            );
+        }
+    }
+
+    // Generate resource routes
+    const resourceRoutes = [];
+    
+    // Trash route
+    resourceRoutes.push(
+        <Route 
+            key={`${resourceConfig.model}-trash`}
+            path="trash/*" 
+            element={<MemoizedTrashTemplate resourceConfig={resourceConfig} />} 
+        />
+    );
+
+    // List route
+    if (_list) {
+        resourceRoutes.push(
+            <Route 
+                key={`${resourceConfig.model}-list`}
+                path={`/*`} 
+                element={<MemoizedResourceTemplateList resourceConfig={resourceConfig} />} 
+            />
+        );
+    }
+
+    // Create route
+    if (_create) {
+        resourceRoutes.push(
+            <Route 
+                key={`${resourceConfig.model}-create`}
+                path={`create/*`} 
+                element={<MemoizedResourceTemplateCreate resourceConfig={resourceConfig} />} 
+            />
+        );
+    }
+
+    // Show route
+    if (_view) {
+        resourceRoutes.push(
+            <Route 
+                key={`${resourceConfig.model}-show`}
+                path={`:id/show/*`}  
+                element={<MemoizedResourceTemplateShow resourceConfig={resourceConfig} />} 
+            />
+        );
+    }
+
+    // Edit route
+    if (_edit) {
+        resourceRoutes.push(
+            <Route 
+                key={`${resourceConfig.model}-edit`}
+                path={`:id/*`} 
+                element={<MemoizedResourceTemplateEdit resourceConfig={resourceConfig} />} 
+            />
+        );
+    }
+
+    // Generate custom routes
+    const customRoutes = typeof resourceConfig.customRoutes === 'function' 
+        ? resourceConfig.customRoutes(resourceConfig) 
+        : <></>;
+
+    // Create the final JSX
+    const result = (
+        <React.Fragment key={`resource-template-${resourceConfig.model}`}>
+            <CustomRoutes>
+                <Route element={<MotionWrapper />}>
+                    {customRoutes}
+                    {drawerRoutes}
+                </Route>
+            </CustomRoutes>
+
+            <Resource
+                options={{ label: resourceConfig.label, group: resourceConfig.group }}
+                name={resourceConfig.model}
+                recordRepresentation={resourceConfig?.recordRepresentation || "name"}
+                resourceConfig={resourceConfig}
+                // @ts-ignore Expected mismatch types, nevertheless compatible 
+                icon={resourceConfig?.icon || <></>}
+            >
+                {resourceRoutes}
+            </Resource>
+        </React.Fragment>
+    );
+
+    // Cache the result
+    resourceTemplateCache.set(cacheKey, result);
+    
+    return result;
+};
+
+export default ResourceTemplate;