#3875 use hook and click page works

Author: staysgt

src/frontend/src/app/AppAuthenticated.tsx

@@ -80,6 +80,7 @@ const AppAuthenticated: React.FC<AppAuthenticatedProps> = ({ userId, userRole })
               <Route path={routes.STATISTICS} component={Statistics} />
               <Route path={routes.HOME} component={Home} />
               <Route path={routes.RETROSPECTIVE} component={RetrospectiveGanttChartPage} />
+              <Route path={routes.PROJECT_MANAGEMENT} component={ProjectManagementPage} />
               <Route path={routes.EVENTS} component={GuestEventPage} />
               <Redirect from={routes.BASE} to={routes.HOME} />
               <Route path="*" component={PageNotFound} />

src/frontend/src/pages/ProjectManagementPage/ProjectManagementPage.tsx

@@ -1,33 +1,26 @@
 import { Grid } from '@mui/material';
-import { GuestDefinition } from 'shared';
+import { GuestDefinition, GuestDefinitionType } from 'shared';
 import PageLayout from '../../components/PageLayout';
 import ProjectManagementCard from './ProjectManagementCard';
+import { useAllGuestDefinitions } from '../../hooks/recruitment.hooks';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import ErrorPage from '../ErrorPage';
 
 const ProjectManagementPage: React.FC = () => {
   // replace when hook is ready
-  const definitions: GuestDefinition[] = [
-    {
-      definitionId: '1',
-      term: 'NER',
-      description: 'A really awesome organization!',
-      order: 1,
-      buttonText: 'learn more!',
-      buttonLink: '/home'
-    },
-    {
-      definitionId: '2',
-      term: 'NER2',
-      description: 'A really awesome organization2!',
-      order: 0,
-      buttonText: 'learn more2!',
-      buttonLink: '/home'
-    }
-  ];
+  const { data: definitions, isLoading, isError, error } = useAllGuestDefinitions();
+
+  if (isError) {
+    return <ErrorPage message={error.message} />;
+  }
+  if (isLoading || !definitions) return <LoadingIndicator />;
+
+  const filteredDefinitions = definitions.filter((definition) => definition.type === GuestDefinitionType.PROJECT_MANAGEMENT);
 
   return (
     <PageLayout title="Project Management">
       <Grid container spacing={2} sx={{ mt: 1 }}>
-        {definitions
+        {filteredDefinitions
           .sort((a, b) => a.order - b.order)
           .map((definition) => (
             <Grid item xs={12} sm={6} md={4} key={definition.definitionId} sx={{ display: 'flex' }}>