React 18 and Vite (#4510)

resources/scripts/components/elements/PermissionRoute.tsx

@@ -1,28 +1,26 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
-import { RouteProps } from 'react-router';
-import Can from '@/components/elements/Can';
-import { ServerError } from '@/components/elements/ScreenBlock';
+import type { ReactNode } from 'react';
 
-interface Props extends Omit<RouteProps, 'path'> {
-    path: string;
-    permission: string | string[] | null;
+import { ServerError } from '@/components/elements/ScreenBlock';
+import { usePermissions } from '@/plugins/usePermissions';
+
+interface Props {
+    children?: ReactNode;
+
+    permission?: string | string[];
 }
 
-export default ({ permission, children, ...props }: Props) => (
-    <Route {...props}>
-        {!permission ? (
-            children
-        ) : (
-            <Can
-                matchAny
-                action={permission}
-                renderOnError={
-                    <ServerError title={'Access Denied'} message={'You do not have permission to access this page.'} />
-                }
-            >
-                {children}
-            </Can>
-        )}
-    </Route>
-);
+function PermissionRoute({ children, permission }: Props): JSX.Element {
+    if (permission === undefined) {
+        return <>{children}</>;
+    }
+
+    const can = usePermissions(permission);
+
+    if (can.filter(p => p).length > 0) {
+        return <>{children}</>;
+    }
+
+    return <ServerError title="Access Denied" message="You do not have permission to access this page." />;
+}
+
+export default PermissionRoute;