add user guard to default admin layout (#497)

* add user guard to default admin layout

* Update AnalyticsDashboardPage.tsx

Author: vincanger

template/app/main.wasp

@@ -301,6 +301,6 @@ page NotFoundPage {
 route AdminMessagesRoute { path: "/admin/messages", to: AdminMessagesPage }
 page AdminMessagesPage {
   authRequired: true,
-  component: import AdminMessages from "@src/messages/MessagesPage"
+  component: import AdminMessages from "@src/admin/dashboards/messages/MessagesPage"
 }
 //#endregion

template/app/src/admin/dashboards/analytics/AnalyticsDashboardPage.tsx

@@ -2,7 +2,6 @@ import { type AuthUser } from 'wasp/auth';
 import { getDailyStats, useQuery } from 'wasp/client/operations';
 import { cn } from '../../../lib/utils';
 import DefaultLayout from '../../layout/DefaultLayout';
-import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin';
 import RevenueAndProfitChart from './RevenueAndProfitChart';
 import SourcesTable from './SourcesTable';
 import TotalPageViewsCard from './TotalPageViewsCard';
@@ -11,10 +10,23 @@ import TotalRevenueCard from './TotalRevenueCard';
 import TotalSignupsCard from './TotalSignupsCard';
 
 const Dashboard = ({ user }: { user: AuthUser }) => {
-  useRedirectHomeUnlessUserIsAdmin({ user });
-
   const { data: stats, isLoading, error } = useQuery(getDailyStats);
 
+  if (error) {
+    return (
+      <DefaultLayout user={user}>
+        <div className='flex h-full items-center justify-center'>
+          <div className='rounded-lg bg-card p-8 shadow-lg'>
+            <p className='text-2xl font-bold text-red-500'>Error</p>
+            <p className='mt-2 text-sm text-muted-foreground'>
+              {error.message || 'Something went wrong while fetching stats.'}
+            </p>
+          </div>
+        </div>
+      </DefaultLayout>
+    );
+  }
+
   return (
     <DefaultLayout user={user}>
       <div className='relative'>

template/app/src/messages/MessageButton.tsx renamed to template/app/src/admin/dashboards/messages/MessageButton.tsx

@@ -0,0 +1,13 @@
+// TODO: Add messages page
+import type { AuthUser } from "wasp/auth"
+import DefaultLayout from "../../layout/DefaultLayout"
+
+function AdminMessages({user} : {user: AuthUser}) {
+  return (
+    <DefaultLayout user={user}>
+      <div>This page is under construction 🚧</div>
+    </DefaultLayout>
+  )
+}
+
+export default AdminMessages

template/app/src/admin/dashboards/messages/MessagesPage.tsx

@@ -2,11 +2,8 @@ import { type AuthUser } from 'wasp/auth';
 import UsersTable from './UsersTable';
 import Breadcrumb from '../../layout/Breadcrumb';
 import DefaultLayout from '../../layout/DefaultLayout';
-import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin';
 
 const Users = ({ user }: { user: AuthUser }) => {
-  useRedirectHomeUnlessUserIsAdmin({user})
-
   return (
     <DefaultLayout user={user}>
       <Breadcrumb pageName='Users' />

template/app/src/admin/dashboards/users/UsersDashboardPage.tsx

@@ -1,11 +1,8 @@
 import { type AuthUser } from 'wasp/auth';
 import Breadcrumb from '../../layout/Breadcrumb';
 import DefaultLayout from '../../layout/DefaultLayout';
-import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin';
 
 const Calendar = ({ user }: { user: AuthUser }) => {
-  useRedirectHomeUnlessUserIsAdmin({ user });
-
   return (
     <DefaultLayout user={user}>
       <Breadcrumb pageName='Calendar' />

template/app/src/admin/elements/calendar/CalendarPage.tsx

@@ -9,11 +9,8 @@ import { Label } from '../../../components/ui/label';
 import { Textarea } from '../../../components/ui/textarea';
 import Breadcrumb from '../../layout/Breadcrumb';
 import DefaultLayout from '../../layout/DefaultLayout';
-import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin';
 
 const SettingsPage = ({ user }: { user: AuthUser }) => {
-  useRedirectHomeUnlessUserIsAdmin({ user });
-
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     // TODO add toast provider / wrapper
     event.preventDefault();

template/app/src/admin/elements/settings/SettingsPage.tsx

@@ -3,11 +3,8 @@ import { type AuthUser } from 'wasp/auth';
 import { Button } from '../../../components/ui/button';
 import Breadcrumb from '../../layout/Breadcrumb';
 import DefaultLayout from '../../layout/DefaultLayout';
-import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin';
 
 const Buttons = ({ user }: { user: AuthUser }) => {
-  useRedirectHomeUnlessUserIsAdmin({ user });
-
   return (
     <DefaultLayout user={user}>
       <Breadcrumb pageName='Buttons' />

template/app/src/admin/elements/ui-elements/ButtonsPage.tsx

@@ -1,5 +1,6 @@
-import { FC, ReactNode, useState } from 'react';
 import { type AuthUser } from 'wasp/auth';
+import { FC, ReactNode, useState } from 'react';
+import { Navigate } from 'react-router-dom';
 import Header from './Header';
 import Sidebar from './Sidebar';
 
@@ -11,6 +12,10 @@ interface Props {
 const DefaultLayout: FC<Props> = ({ children, user }) => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
+  if (!user.isAdmin) {
+    return <Navigate to='/' replace />;
+  }
+
   return (
     <div className='bg-background text-foreground'>
       <div className='flex h-screen overflow-hidden'>

template/app/src/admin/layout/DefaultLayout.tsx

@@ -1,7 +1,7 @@
 import { type AuthUser } from 'wasp/auth';
 import DarkModeSwitcher from '../../client/components/DarkModeSwitcher';
 import { cn } from '../../lib/utils';
-import MessageButton from '../../messages/MessageButton';
+import MessageButton from '../dashboards/messages/MessageButton';
 import { UserDropdown } from '../../user/UserDropdown';
 
 const Header = (props: {