diff --git a/src/NavigationBar.tsx b/src/NavigationBar.tsx
index 410716f..00cca45 100644
--- a/src/NavigationBar.tsx
+++ b/src/NavigationBar.tsx
@@ -44,6 +44,9 @@ export default function NavigationBar({
{isAuthenticated && (
<>
+
+ Activity
+
{canUploadQuiz && (
Upload Quiz
diff --git a/src/app.tsx b/src/app.tsx
index 9708fc9..6a2ee5f 100644
--- a/src/app.tsx
+++ b/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() {
} />
} />
} />
+ } />
)}
diff --git a/src/hooks/useActivityFeed.hook.ts b/src/hooks/useActivityFeed.hook.ts
new file mode 100644
index 0000000..f8fc8d5
--- /dev/null
+++ b/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 };
+}
diff --git a/src/pages/feed/ActivityFeed.tsx b/src/pages/feed/ActivityFeed.tsx
new file mode 100644
index 0000000..3ec2d28
--- /dev/null
+++ b/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 ;
+ }
+
+ return (
+
+ {data?.activityFeed.map((activity) => (
+ -
+ {formatDate(activity.date)}: {activity.text}
+
+ ))}
+
+ );
+}
diff --git a/src/queries/feed.ts b/src/queries/feed.ts
new file mode 100644
index 0000000..5c7f68c
--- /dev/null
+++ b/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
+ }
+ }
+`;