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 + } + } +`;