#46 Add initial activity feed page

src/NavigationBar.tsx

@@ -44,6 +44,9 @@ export default function NavigationBar({
           </Link>
           {isAuthenticated && (
             <>
+              <Link className='hidden lg:block' to='/feed'>
+                <NavigationBarItem>Activity</NavigationBarItem>
+              </Link>
               {canUploadQuiz && (
                 <Link className='hidden lg:block' to='/quiz/create'>
                   <NavigationBarItem>Upload Quiz</NavigationBarItem>

src/app.tsx

@@ -8,6 +8,7 @@ import QuizDetails from './QuizDetails';
 import { useQuizlord } from './QuizlordProvider';
 import Button from './components/Button';
 import Loader from './components/Loader';
+import ActivityFeed from './pages/feed/ActivityFeed';
 import QuizList from './pages/list/QuizList';
 import QuizStatistics from './pages/statistics/QuizStatistics';
 import { userCanPerformAction } from './services/authorization';
@@ -55,6 +56,7 @@ export function App() {
             <Route path='/quiz/:id' element={<QuizDetails />} />
             <Route path='/quiz/:id/enter' element={<EnterQuizResults />} />
             <Route path='/stats' element={<QuizStatistics />} />
+            <Route path='/feed' element={<ActivityFeed />} />
           </Routes>
         )}
       </div>

src/hooks/useActivityFeed.hook.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@apollo/client';
+
+import { ACTIVITY_FEED } from '../queries/feed';
+
+// TODO this should be generated from the GraphQL schema
+export interface RecentActivityItem {
+  date: Date;
+  text: string;
+  action?: {
+    name: string;
+    link: string;
+  };
+}
+
+export function useActivityFeed(): {
+  loading: boolean;
+  data: { activityFeed: RecentActivityItem[] } | undefined;
+  refetch: () => void;
+} {
+  const { loading, data, refetch } = useQuery(ACTIVITY_FEED, {
+    fetchPolicy: 'network-only',
+    notifyOnNetworkStatusChange: true,
+  });
+
+  return { loading, data, refetch };
+}

src/pages/feed/ActivityFeed.tsx

@@ -0,0 +1,21 @@
+import Loader from '../../components/Loader';
+import { formatDate } from '../../helpers';
+import { useActivityFeed } from '../../hooks/useActivityFeed.hook';
+
+export default function ActivityFeed() {
+  const { data, loading } = useActivityFeed();
+
+  if (loading || !data) {
+    return <Loader message='Loading recent activities...' />;
+  }
+
+  return (
+    <ul>
+      {data?.activityFeed.map((activity) => (
+        <li className='mt-4'>
+          <strong>{formatDate(activity.date)}:</strong> {activity.text}
+        </li>
+      ))}
+    </ul>
+  );
+}

src/queries/feed.ts

@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client';
+
+export const ACTIVITY_FEED = gql`
+  query GetActivityFeed {
+    activityFeed {
+      date
+      action {
+        link
+        name
+      }
+      text
+    }
+  }
+`;