+>(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px]',
+ className,
+ )}
+ {...props}
+ />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ = {
+ title: string;
+ field: keyof Entry;
+ Cell?({ entry }: { entry: Entry }): React.ReactElement;
+};
+
+export type TableProps = {
+ data: Entry[];
+ columns: TableColumn[];
+ pagination?: TablePaginationProps;
+};
+
+export const Table = ({
+ data,
+ columns,
+ pagination,
+}: TableProps) => {
+ if (!data?.length) {
+ return (
+
+ );
+ }
+ return (
+ <>
+
+
+
+ {columns.map((column, index) => (
+ {column.title}
+ ))}
+
+
+
+ {data.map((entry, entryIndex) => (
+
+ {columns.map(({ Cell, field, title }, columnIndex) => (
+
+ {Cell ? | : `${entry[field]}`}
+
+ ))}
+
+ ))}
+
+
+
+ {pagination && {}}
+ teams={[]}
+ />,
+ { user: null },
+ );
+
+ await userEvent.type(screen.getByLabelText(/first name/i), newUser.firstName);
+ await userEvent.type(screen.getByLabelText(/last name/i), newUser.lastName);
+ await userEvent.type(screen.getByLabelText(/email address/i), newUser.email);
+ await userEvent.type(screen.getByLabelText(/password/i), newUser.password);
+ await userEvent.type(screen.getByLabelText(/team name/i), newUser.teamName);
+
+ await userEvent.click(screen.getByRole('button', { name: /register/i }));
+
+ await waitFor(() => expect(onSuccess).toHaveBeenCalledTimes(1));
+});
diff --git a/apps/nextjs-app/src/features/auth/components/login-form.tsx b/apps/nextjs-app/src/features/auth/components/login-form.tsx
new file mode 100644
index 00000000..a038647d
--- /dev/null
+++ b/apps/nextjs-app/src/features/auth/components/login-form.tsx
@@ -0,0 +1,65 @@
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
+
+import { Button } from '@/components/ui/button';
+import { Form, Input } from '@/components/ui/form';
+import { useLogin, loginInputSchema } from '@/lib/auth';
+
+type LoginFormProps = {
+ onSuccess: () => void;
+};
+
+export const LoginForm = ({ onSuccess }: LoginFormProps) => {
+ const login = useLogin({
+ onSuccess,
+ });
+ const router = useRouter();
+ const redirectTo = router.query.redirectTo as string | undefined;
+
+ return (
+
+ );
+};
diff --git a/apps/nextjs-app/src/features/auth/components/register-form.tsx b/apps/nextjs-app/src/features/auth/components/register-form.tsx
new file mode 100644
index 00000000..cfeca3e5
--- /dev/null
+++ b/apps/nextjs-app/src/features/auth/components/register-form.tsx
@@ -0,0 +1,119 @@
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
+import * as React from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Form, Input, Select, Label, Switch } from '@/components/ui/form';
+import { useRegister, registerInputSchema } from '@/lib/auth';
+import { Team } from '@/types/api';
+
+type RegisterFormProps = {
+ onSuccess: () => void;
+ chooseTeam: boolean;
+ setChooseTeam: () => void;
+ teams?: Team[];
+};
+
+export const RegisterForm = ({
+ onSuccess,
+ chooseTeam,
+ setChooseTeam,
+ teams,
+}: RegisterFormProps) => {
+ const registering = useRegister({ onSuccess });
+ const router = useRouter();
+ const redirectTo = router.query.redirectTo as string | undefined;
+
+ return (
+
+ );
+};
diff --git a/apps/nextjs-app/src/features/comments/api/create-comment.ts b/apps/nextjs-app/src/features/comments/api/create-comment.ts
new file mode 100644
index 00000000..506a6897
--- /dev/null
+++ b/apps/nextjs-app/src/features/comments/api/create-comment.ts
@@ -0,0 +1,48 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { z } from 'zod';
+
+import { api } from '@/lib/api-client';
+import { MutationConfig } from '@/lib/react-query';
+import { Comment } from '@/types/api';
+
+import { getInfiniteCommentsQueryOptions } from './get-comments';
+
+export const createCommentInputSchema = z.object({
+ discussionId: z.string().min(1, 'Required'),
+ body: z.string().min(1, 'Required'),
+});
+
+export type CreateCommentInput = z.infer;
+
+export const createComment = ({
+ data,
+}: {
+ data: CreateCommentInput;
+}): Promise => {
+ return api.post('/comments', data);
+};
+
+type UseCreateCommentOptions = {
+ discussionId: string;
+ mutationConfig?: MutationConfig;
+};
+
+export const useCreateComment = ({
+ mutationConfig,
+ discussionId,
+}: UseCreateCommentOptions) => {
+ const queryClient = useQueryClient();
+
+ const { onSuccess, ...restConfig } = mutationConfig || {};
+
+ return useMutation({
+ onSuccess: (...args) => {
+ queryClient.invalidateQueries({
+ queryKey: getInfiniteCommentsQueryOptions(discussionId).queryKey,
+ });
+ onSuccess?.(...args);
+ },
+ ...restConfig,
+ mutationFn: createComment,
+ });
+};
diff --git a/apps/nextjs-app/src/features/comments/api/delete-comment.ts b/apps/nextjs-app/src/features/comments/api/delete-comment.ts
new file mode 100644
index 00000000..7e2dcd3a
--- /dev/null
+++ b/apps/nextjs-app/src/features/comments/api/delete-comment.ts
@@ -0,0 +1,35 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { api } from '@/lib/api-client';
+import { MutationConfig } from '@/lib/react-query';
+
+import { getInfiniteCommentsQueryOptions } from './get-comments';
+
+export const deleteComment = ({ commentId }: { commentId: string }) => {
+ return api.delete(`/comments/${commentId}`);
+};
+
+type UseDeleteCommentOptions = {
+ discussionId: string;
+ mutationConfig?: MutationConfig;
+};
+
+export const useDeleteComment = ({
+ mutationConfig,
+ discussionId,
+}: UseDeleteCommentOptions) => {
+ const queryClient = useQueryClient();
+
+ const { onSuccess, ...restConfig } = mutationConfig || {};
+
+ return useMutation({
+ onSuccess: (...args) => {
+ queryClient.invalidateQueries({
+ queryKey: getInfiniteCommentsQueryOptions(discussionId).queryKey,
+ });
+ onSuccess?.(...args);
+ },
+ ...restConfig,
+ mutationFn: deleteComment,
+ });
+};
diff --git a/apps/nextjs-app/src/features/comments/api/get-comments.ts b/apps/nextjs-app/src/features/comments/api/get-comments.ts
new file mode 100644
index 00000000..b1c76479
--- /dev/null
+++ b/apps/nextjs-app/src/features/comments/api/get-comments.ts
@@ -0,0 +1,53 @@
+import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
+
+import { api, attachCookie } from '@/lib/api-client';
+import { QueryConfig } from '@/lib/react-query';
+import { Comment, Meta } from '@/types/api';
+
+export const getComments = ({
+ discussionId,
+ page = 1,
+ cookie,
+}: {
+ discussionId: string;
+ page?: number;
+ cookie?: string;
+}): Promise<{ data: Comment[]; meta: Meta }> => {
+ return api.get(`/comments`, {
+ params: {
+ discussionId,
+ page,
+ },
+ headers: attachCookie(cookie).headers,
+ });
+};
+
+export const getInfiniteCommentsQueryOptions = (
+ discussionId: string,
+ cookie?: string,
+) => {
+ return infiniteQueryOptions({
+ queryKey: ['comments', discussionId],
+ queryFn: ({ pageParam = 1 }) => {
+ return getComments({ discussionId, page: pageParam as number, cookie });
+ },
+ getNextPageParam: (lastPage) => {
+ if (lastPage?.meta?.page === lastPage?.meta?.totalPages) return undefined;
+ const nextPage = lastPage.meta.page + 1;
+ return nextPage;
+ },
+ initialPageParam: 1,
+ });
+};
+
+type UseCommentsOptions = {
+ discussionId: string;
+ page?: number;
+ queryConfig?: QueryConfig;
+};
+
+export const useInfiniteComments = ({ discussionId }: UseCommentsOptions) => {
+ return useInfiniteQuery({
+ ...getInfiniteCommentsQueryOptions(discussionId),
+ });
+};
diff --git a/apps/nextjs-app/src/features/comments/components/comments-list.tsx b/apps/nextjs-app/src/features/comments/components/comments-list.tsx
new file mode 100644
index 00000000..701c59cd
--- /dev/null
+++ b/apps/nextjs-app/src/features/comments/components/comments-list.tsx
@@ -0,0 +1,97 @@
+import { ArchiveX } from 'lucide-react';
+import { usePathname } from 'next/navigation';
+
+import { Button } from '@/components/ui/button';
+import { MDPreview } from '@/components/ui/md-preview';
+import { Spinner } from '@/components/ui/spinner';
+import { useUser } from '@/lib/auth';
+import { POLICIES, Authorization } from '@/lib/authorization';
+import { User } from '@/types/api';
+import { formatDate } from '@/utils/format';
+
+import { useInfiniteComments } from '../api/get-comments';
+
+import { DeleteComment } from './delete-comment';
+
+type CommentsListProps = {
+ discussionId: string;
+};
+
+export const CommentsList = ({ discussionId }: CommentsListProps) => {
+ const user = useUser();
+ const commentsQuery = useInfiniteComments({ discussionId });
+ const pathname = usePathname();
+ const isPublicView = pathname?.startsWith?.('/public/');
+
+ if (commentsQuery.isLoading) {
+ return (
+
+
+ );
+ }
+
+ const comments = commentsQuery.data?.pages.flatMap((page) => page.data);
+
+ if (!comments?.length)
+ return (
+
+ );
+
+ return (
+ <>
+
+ {comments.map((comment, index) => (
+
+
+
+
+ {formatDate(comment.createdAt)}
+
+ {comment.author && (
+
+ {' '}
+ by {comment.author.firstName} {comment.author.lastName}
+
+ )}
+
+ {!isPublicView && (
+
+
+
+ )}
+
+ ))}
+
+ {commentsQuery.hasNextPage && (
+
+ commentsQuery.fetchNextPage()}>
+ {commentsQuery.isFetchingNextPage ? (
+
+
+ )}
+
+ );
+};
diff --git a/apps/nextjs-app/src/features/comments/components/comments.tsx b/apps/nextjs-app/src/features/comments/components/comments.tsx
new file mode 100644
index 00000000..32b5307d
--- /dev/null
+++ b/apps/nextjs-app/src/features/comments/components/comments.tsx
@@ -0,0 +1,22 @@
+import { usePathname } from 'next/navigation';
+
+import { CommentsList } from './comments-list';
+import { CreateComment } from './create-comment';
+
+type CommentsProps = {
+ discussionId: string;
+};
+
+export const Comments = ({ discussionId }: CommentsProps) => {
+ const pathname = usePathname();
+ const isPublicView = pathname?.startsWith?.('/public/');
+ return (
+
+
+
Comments:
+ {!isPublicView &&
+
+
+ Submit
+
+ }
+ >
+
+
+ );
+};
diff --git a/apps/nextjs-app/src/features/comments/components/delete-comment.tsx b/apps/nextjs-app/src/features/comments/components/delete-comment.tsx
new file mode 100644
index 00000000..ac9b3969
--- /dev/null
+++ b/apps/nextjs-app/src/features/comments/components/delete-comment.tsx
@@ -0,0 +1,55 @@
+import { Trash } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { ConfirmationDialog } from '@/components/ui/dialog';
+import { useNotifications } from '@/components/ui/notifications';
+
+import { useDeleteComment } from '../api/delete-comment';
+
+type DeleteCommentProps = {
+ id: string;
+ discussionId: string;
+};
+
+export const DeleteComment = ({ id, discussionId }: DeleteCommentProps) => {
+ const { addNotification } = useNotifications();
+ const deleteCommentMutation = useDeleteComment({
+ discussionId,
+ mutationConfig: {
+ onSuccess: () => {
+ addNotification({
+ type: 'success',
+ title: 'Comment Deleted',
+ });
+ },
+ },
+ });
+
+ return (
+ deleteCommentMutation.mutate({ commentId: id })}
+ >
+ Delete Comment
+
+ }
+ />
+ );
+};
diff --git a/apps/nextjs-app/src/features/discussions/api/create-discussion.ts b/apps/nextjs-app/src/features/discussions/api/create-discussion.ts
new file mode 100644
index 00000000..ea7bb529
--- /dev/null
+++ b/apps/nextjs-app/src/features/discussions/api/create-discussion.ts
@@ -0,0 +1,47 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { z } from 'zod';
+
+import { api } from '@/lib/api-client';
+import { MutationConfig } from '@/lib/react-query';
+import { Discussion } from '@/types/api';
+
+import { getDiscussionsQueryOptions } from './get-discussions';
+
+export const createDiscussionInputSchema = z.object({
+ title: z.string().min(1, 'Required'),
+ body: z.string().min(1, 'Required'),
+ public: z.boolean(),
+});
+
+export type CreateDiscussionInput = z.infer;
+
+export const createDiscussion = ({
+ data,
+}: {
+ data: CreateDiscussionInput;
+}): Promise => {
+ return api.post(`/discussions`, data);
+};
+
+type UseCreateDiscussionOptions = {
+ mutationConfig?: MutationConfig;
+};
+
+export const useCreateDiscussion = ({
+ mutationConfig,
+}: UseCreateDiscussionOptions = {}) => {
+ const queryClient = useQueryClient();
+
+ const { onSuccess, ...restConfig } = mutationConfig || {};
+
+ return useMutation({
+ onSuccess: (...args) => {
+ queryClient.invalidateQueries({
+ queryKey: getDiscussionsQueryOptions().queryKey,
+ });
+ onSuccess?.(...args);
+ },
+ ...restConfig,
+ mutationFn: createDiscussion,
+ });
+};
diff --git a/apps/nextjs-app/src/features/discussions/api/delete-discussion.ts b/apps/nextjs-app/src/features/discussions/api/delete-discussion.ts
new file mode 100644
index 00000000..07c95eca
--- /dev/null
+++ b/apps/nextjs-app/src/features/discussions/api/delete-discussion.ts
@@ -0,0 +1,37 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { api } from '@/lib/api-client';
+import { MutationConfig } from '@/lib/react-query';
+
+import { getDiscussionsQueryOptions } from './get-discussions';
+
+export const deleteDiscussion = ({
+ discussionId,
+}: {
+ discussionId: string;
+}) => {
+ return api.delete(`/discussions/${discussionId}`);
+};
+
+type UseDeleteDiscussionOptions = {
+ mutationConfig?: MutationConfig;
+};
+
+export const useDeleteDiscussion = ({
+ mutationConfig,
+}: UseDeleteDiscussionOptions = {}) => {
+ const queryClient = useQueryClient();
+
+ const { onSuccess, ...restConfig } = mutationConfig || {};
+
+ return useMutation({
+ onSuccess: (...args) => {
+ queryClient.invalidateQueries({
+ queryKey: getDiscussionsQueryOptions().queryKey,
+ });
+ onSuccess?.(...args);
+ },
+ ...restConfig,
+ mutationFn: deleteDiscussion,
+ });
+};
diff --git a/apps/nextjs-app/src/features/discussions/api/get-discussion.ts b/apps/nextjs-app/src/features/discussions/api/get-discussion.ts
new file mode 100644
index 00000000..ccd101e7
--- /dev/null
+++ b/apps/nextjs-app/src/features/discussions/api/get-discussion.ts
@@ -0,0 +1,42 @@
+import { useQuery, queryOptions } from '@tanstack/react-query';
+
+import { api, attachCookie } from '@/lib/api-client';
+import { QueryConfig } from '@/lib/react-query';
+import { Discussion } from '@/types/api';
+
+export const getDiscussion = ({
+ discussionId,
+ cookie,
+}: {
+ discussionId: string;
+ cookie?: string;
+}): Promise<{ data: Discussion }> => {
+ return api.get(`/discussions/${discussionId}`, {
+ headers: attachCookie(cookie).headers,
+ });
+};
+
+export const getDiscussionQueryOptions = (
+ discussionId: string,
+ cookie?: string,
+) => {
+ return queryOptions({
+ queryKey: ['discussions', discussionId],
+ queryFn: () => getDiscussion({ discussionId, cookie }),
+ });
+};
+
+type UseDiscussionOptions = {
+ discussionId: string;
+ queryConfig?: QueryConfig;
+};
+
+export const useDiscussion = ({
+ discussionId,
+ queryConfig,
+}: UseDiscussionOptions) => {
+ return useQuery({
+ ...getDiscussionQueryOptions(discussionId),
+ ...queryConfig,
+ });
+};
diff --git a/apps/nextjs-app/src/features/discussions/api/get-discussions.ts b/apps/nextjs-app/src/features/discussions/api/get-discussions.ts
new file mode 100644
index 00000000..b93e785d
--- /dev/null
+++ b/apps/nextjs-app/src/features/discussions/api/get-discussions.ts
@@ -0,0 +1,44 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+
+import { api, attachCookie } from '@/lib/api-client';
+import { QueryConfig } from '@/lib/react-query';
+import { Discussion, Meta } from '@/types/api';
+
+export const getDiscussions = (
+ { page, cookie }: { page?: number; cookie?: string } = { page: 1 },
+): Promise<{
+ data: Discussion[];
+ meta: Meta;
+}> => {
+ return api.get(`/discussions`, {
+ params: {
+ page,
+ },
+ headers: attachCookie(cookie).headers,
+ });
+};
+
+export const getDiscussionsQueryOptions = ({
+ page,
+ cookie,
+}: { page?: number; cookie?: string } = {}) => {
+ return queryOptions({
+ queryKey: page ? ['discussions', { page }] : ['discussions'],
+ queryFn: () => getDiscussions({ page, cookie }),
+ });
+};
+
+type UseDiscussionsOptions = {
+ page?: number;
+ queryConfig?: QueryConfig;
+};
+
+export const useDiscussions = ({
+ queryConfig,
+ page,
+}: UseDiscussionsOptions) => {
+ return useQuery({
+ ...getDiscussionsQueryOptions({ page }),
+ ...queryConfig,
+ });
+};
diff --git a/apps/nextjs-app/src/features/discussions/api/update-discussion.ts b/apps/nextjs-app/src/features/discussions/api/update-discussion.ts
new file mode 100644
index 00000000..2f1f41ce
--- /dev/null
+++ b/apps/nextjs-app/src/features/discussions/api/update-discussion.ts
@@ -0,0 +1,49 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { z } from 'zod';
+
+import { api } from '@/lib/api-client';
+import { MutationConfig } from '@/lib/react-query';
+import { Discussion } from '@/types/api';
+
+import { getDiscussionQueryOptions } from './get-discussion';
+
+export const updateDiscussionInputSchema = z.object({
+ title: z.string().min(1, 'Required'),
+ body: z.string().min(1, 'Required'),
+ public: z.boolean(),
+});
+
+export type UpdateDiscussionInput = z.infer;
+
+export const updateDiscussion = ({
+ data,
+ discussionId,
+}: {
+ data: UpdateDiscussionInput;
+ discussionId: string;
+}): Promise => {
+ return api.patch(`/discussions/${discussionId}`, data);
+};
+
+type UseUpdateDiscussionOptions = {
+ mutationConfig?: MutationConfig;
+};
+
+export const useUpdateDiscussion = ({
+ mutationConfig,
+}: UseUpdateDiscussionOptions = {}) => {
+ const queryClient = useQueryClient();
+
+ const { onSuccess, ...restConfig } = mutationConfig || {};
+
+ return useMutation({
+ onSuccess: (data, ...args) => {
+ queryClient.refetchQueries({
+ queryKey: getDiscussionQueryOptions(data.id).queryKey,
+ });
+ onSuccess?.(data, ...args);
+ },
+ ...restConfig,
+ mutationFn: updateDiscussion,
+ });
+};
diff --git a/apps/nextjs-app/src/features/discussions/components/create-discussion.tsx b/apps/nextjs-app/src/features/discussions/components/create-discussion.tsx
new file mode 100644
index 00000000..f866e10a
--- /dev/null
+++ b/apps/nextjs-app/src/features/discussions/components/create-discussion.tsx
@@ -0,0 +1,98 @@
+import { Plus } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+ Form,
+ FormDrawer,
+ Input,
+ Label,
+ Switch,
+ Textarea,
+} from '@/components/ui/form';
+import { useNotifications } from '@/components/ui/notifications';
+import { Authorization, ROLES } from '@/lib/authorization';
+
+import {
+ createDiscussionInputSchema,
+ useCreateDiscussion,
+} from '../api/create-discussion';
+
+export const CreateDiscussion = () => {
+ const { addNotification } = useNotifications();
+ const createDiscussionMutation = useCreateDiscussion({
+ mutationConfig: {
+ onSuccess: () => {
+ addNotification({
+ type: 'success',
+ title: 'Discussion Created',
+ });
+ },
+ },
+ });
+
+ return (
+
+
+ Submit
+
+ }
+ >
+
+
+
+ );
+};
diff --git a/apps/nextjs-app/src/features/discussions/components/delete-discussion.tsx b/apps/nextjs-app/src/features/discussions/components/delete-discussion.tsx
new file mode 100644
index 00000000..e4d625fb
--- /dev/null
+++ b/apps/nextjs-app/src/features/discussions/components/delete-discussion.tsx
@@ -0,0 +1,53 @@
+import { Trash } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { ConfirmationDialog } from '@/components/ui/dialog';
+import { useNotifications } from '@/components/ui/notifications';
+import { Authorization, ROLES } from '@/lib/authorization';
+
+import { useDeleteDiscussion } from '../api/delete-discussion';
+
+type DeleteDiscussionProps = {
+ id: string;
+};
+
+export const DeleteDiscussion = ({ id }: DeleteDiscussionProps) => {
+ const { addNotification } = useNotifications();
+ const deleteDiscussionMutation = useDeleteDiscussion({
+ mutationConfig: {
+ onSuccess: () => {
+ addNotification({
+ type: 'success',
+ title: 'Discussion Deleted',
+ });
+ },
+ },
+ });
+
+ return (
+
+
+ deleteDiscussionMutation.mutate({ discussionId: id })
+ }
+ >
+ Delete Discussion
+
+ }
+ />
+
+ );
+};
diff --git a/apps/nextjs-app/src/features/discussions/components/discussion-view.tsx b/apps/nextjs-app/src/features/discussions/components/discussion-view.tsx
new file mode 100644
index 00000000..7c9b6299
--- /dev/null
+++ b/apps/nextjs-app/src/features/discussions/components/discussion-view.tsx
@@ -0,0 +1,73 @@
+import { Link as LinkIcon } from 'lucide-react';
+import { usePathname } from 'next/navigation';
+
+import { Link } from '@/components/ui/link';
+import { MDPreview } from '@/components/ui/md-preview';
+import { Spinner } from '@/components/ui/spinner';
+import { formatDate } from '@/utils/format';
+
+import { useDiscussion } from '../api/get-discussion';
+import { UpdateDiscussion } from '../components/update-discussion';
+
+export const DiscussionView = ({ discussionId }: { discussionId: string }) => {
+ const pathname = usePathname();
+ const isPublicView = pathname?.startsWith?.('/public/');
+
+ const discussionQuery = useDiscussion({
+ discussionId,
+ });
+
+ if (discussionQuery.isLoading) {
+ return (
+
+
+ );
+ }
+
+ const discussion = discussionQuery?.data?.data;
+
+ if (!discussion) return null;
+
+ return (
+
+
+
+
+ {formatDate(discussion.createdAt)}
+
+ {discussion.author && (
+
+ by {discussion.author.firstName} {discussion.author.lastName}
+
+ )}
+
+ {!isPublicView && discussion.public && (
+
+
+ {!isPublicView && (
+
+
+ )}
+
+
+
+
+ );
+ }
+
+ const discussions = discussionsQuery.data?.data;
+ const meta = discussionsQuery.data?.meta;
+
+ if (!discussions) return null;
+
+ return (
+ {formatDate(createdAt)};
+ },
+ },
+ {
+ title: '',
+ field: 'id',
+ Cell({ entry: { id } }) {
+ return (
+
+
+ Submit
+
+ }
+ >
+
+
+
+ );
+};
diff --git a/apps/nextjs-app/src/features/teams/api/get-teams.ts b/apps/nextjs-app/src/features/teams/api/get-teams.ts
new file mode 100644
index 00000000..f9d009b1
--- /dev/null
+++ b/apps/nextjs-app/src/features/teams/api/get-teams.ts
@@ -0,0 +1,27 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+
+import { api } from '@/lib/api-client';
+import { QueryConfig } from '@/lib/react-query';
+import { Team } from '@/types/api';
+
+export const getTeams = (): Promise<{ data: Team[] }> => {
+ return api.get('/teams');
+};
+
+export const getTeamsQueryOptions = () => {
+ return queryOptions({
+ queryKey: ['teams'],
+ queryFn: () => getTeams(),
+ });
+};
+
+type UseTeamsOptions = {
+ queryConfig?: QueryConfig;
+};
+
+export const useTeams = ({ queryConfig = {} }: UseTeamsOptions = {}) => {
+ return useQuery({
+ ...getTeamsQueryOptions(),
+ ...queryConfig,
+ });
+};
diff --git a/apps/nextjs-app/src/features/users/api/delete-user.ts b/apps/nextjs-app/src/features/users/api/delete-user.ts
new file mode 100644
index 00000000..5f2cb2e3
--- /dev/null
+++ b/apps/nextjs-app/src/features/users/api/delete-user.ts
@@ -0,0 +1,37 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { api } from '@/lib/api-client';
+import { MutationConfig } from '@/lib/react-query';
+
+import { getUsersQueryOptions } from './get-users';
+
+export type DeleteUserDTO = {
+ userId: string;
+};
+
+export const deleteUser = ({ userId }: DeleteUserDTO) => {
+ return api.delete(`/users/${userId}`);
+};
+
+type UseDeleteUserOptions = {
+ mutationConfig?: MutationConfig;
+};
+
+export const useDeleteUser = ({
+ mutationConfig,
+}: UseDeleteUserOptions = {}) => {
+ const queryClient = useQueryClient();
+
+ const { onSuccess, ...restConfig } = mutationConfig || {};
+
+ return useMutation({
+ onSuccess: (...args) => {
+ queryClient.invalidateQueries({
+ queryKey: getUsersQueryOptions().queryKey,
+ });
+ onSuccess?.(...args);
+ },
+ ...restConfig,
+ mutationFn: deleteUser,
+ });
+};
diff --git a/apps/nextjs-app/src/features/users/api/get-users.ts b/apps/nextjs-app/src/features/users/api/get-users.ts
new file mode 100644
index 00000000..e13d1063
--- /dev/null
+++ b/apps/nextjs-app/src/features/users/api/get-users.ts
@@ -0,0 +1,27 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+
+import { api } from '@/lib/api-client';
+import { QueryConfig } from '@/lib/react-query';
+import { User } from '@/types/api';
+
+export const getUsers = (): Promise<{ data: User[] }> => {
+ return api.get(`/users`);
+};
+
+export const getUsersQueryOptions = () => {
+ return queryOptions({
+ queryKey: ['users'],
+ queryFn: getUsers,
+ });
+};
+
+type UseUsersOptions = {
+ queryConfig?: QueryConfig;
+};
+
+export const useUsers = ({ queryConfig }: UseUsersOptions = {}) => {
+ return useQuery({
+ ...getUsersQueryOptions(),
+ ...queryConfig,
+ });
+};
diff --git a/apps/nextjs-app/src/features/users/api/update-profile.ts b/apps/nextjs-app/src/features/users/api/update-profile.ts
new file mode 100644
index 00000000..cf360498
--- /dev/null
+++ b/apps/nextjs-app/src/features/users/api/update-profile.ts
@@ -0,0 +1,40 @@
+import { useMutation } from '@tanstack/react-query';
+import { z } from 'zod';
+
+import { api } from '@/lib/api-client';
+import { useUser } from '@/lib/auth';
+import { MutationConfig } from '@/lib/react-query';
+
+export const updateProfileInputSchema = z.object({
+ email: z.string().min(1, 'Required').email('Invalid email'),
+ firstName: z.string().min(1, 'Required'),
+ lastName: z.string().min(1, 'Required'),
+ bio: z.string(),
+});
+
+export type UpdateProfileInput = z.infer;
+
+export const updateProfile = ({ data }: { data: UpdateProfileInput }) => {
+ return api.patch(`/users/profile`, data);
+};
+
+type UseUpdateProfileOptions = {
+ mutationConfig?: MutationConfig;
+};
+
+export const useUpdateProfile = ({
+ mutationConfig,
+}: UseUpdateProfileOptions = {}) => {
+ const { refetch: refetchUser } = useUser();
+
+ const { onSuccess, ...restConfig } = mutationConfig || {};
+
+ return useMutation({
+ onSuccess: (...args) => {
+ refetchUser();
+ onSuccess?.(...args);
+ },
+ ...restConfig,
+ mutationFn: updateProfile,
+ });
+};
diff --git a/apps/nextjs-app/src/features/users/components/delete-user.tsx b/apps/nextjs-app/src/features/users/components/delete-user.tsx
new file mode 100644
index 00000000..3078e160
--- /dev/null
+++ b/apps/nextjs-app/src/features/users/components/delete-user.tsx
@@ -0,0 +1,46 @@
+import { Button } from '@/components/ui/button';
+import { ConfirmationDialog } from '@/components/ui/dialog';
+import { useNotifications } from '@/components/ui/notifications';
+import { useUser } from '@/lib/auth';
+
+import { useDeleteUser } from '../api/delete-user';
+
+type DeleteUserProps = {
+ id: string;
+};
+
+export const DeleteUser = ({ id }: DeleteUserProps) => {
+ const user = useUser();
+ const { addNotification } = useNotifications();
+ const deleteUserMutation = useDeleteUser({
+ mutationConfig: {
+ onSuccess: () => {
+ addNotification({
+ type: 'success',
+ title: 'User Deleted',
+ });
+ },
+ },
+ });
+
+ if (user.data?.id === id) return null;
+
+ return (
+ Delete}
+ confirmButton={
+ deleteUserMutation.mutate({ userId: id })}
+ >
+ Delete User
+
+ }
+ />
+ );
+};
diff --git a/apps/nextjs-app/src/features/users/components/update-profile.tsx b/apps/nextjs-app/src/features/users/components/update-profile.tsx
new file mode 100644
index 00000000..4af708f2
--- /dev/null
+++ b/apps/nextjs-app/src/features/users/components/update-profile.tsx
@@ -0,0 +1,91 @@
+import { Pen } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Form, FormDrawer, Input, Textarea } from '@/components/ui/form';
+import { useNotifications } from '@/components/ui/notifications';
+import { useUser } from '@/lib/auth';
+
+import {
+ updateProfileInputSchema,
+ useUpdateProfile,
+} from '../api/update-profile';
+
+export const UpdateProfile = () => {
+ const user = useUser();
+ const { addNotification } = useNotifications();
+ const updateProfileMutation = useUpdateProfile({
+ mutationConfig: {
+ onSuccess: () => {
+ addNotification({
+ type: 'success',
+ title: 'Profile Updated',
+ });
+ },
+ },
+ });
+
+ return (
+
+ Submit
+
+ }
+ >
+
+
+ );
+};
diff --git a/apps/nextjs-app/src/features/users/components/users-list.tsx b/apps/nextjs-app/src/features/users/components/users-list.tsx
new file mode 100644
index 00000000..380a3c12
--- /dev/null
+++ b/apps/nextjs-app/src/features/users/components/users-list.tsx
@@ -0,0 +1,61 @@
+import { Spinner } from '@/components/ui/spinner';
+import { Table } from '@/components/ui/table';
+import { formatDate } from '@/utils/format';
+
+import { useUsers } from '../api/get-users';
+
+import { DeleteUser } from './delete-user';
+
+export const UsersList = () => {
+ const usersQuery = useUsers();
+
+ if (usersQuery.isLoading) {
+ return (
+
+
+ );
+ }
+
+ const users = usersQuery.data?.data;
+
+ if (!users) return null;
+
+ return (
+ {formatDate(createdAt)};
+ },
+ },
+ {
+ title: '',
+ field: 'id',
+ Cell({ entry: { id } }) {
+ return
+ {protectedResource}
+ ,
+ {
+ user,
+ },
+ );
+
+ expect(screen.getByText(protectedResource)).toBeInTheDocument();
+});
+
+test('should not view protected resource if user role does not match and show fallback message instead', async () => {
+ const user = await createUser({
+ role: ROLES.USER,
+ });
+
+ const protectedResource = 'This is very confidential data';
+
+ const forbiddenMessage = 'You are unauthorized to view this resource';
+ await renderApp(
+ {forbiddenMessage}}
+ allowedRoles={[ROLES.ADMIN]}
+ >
+ {protectedResource}
+ ,
+ { user },
+ );
+
+ await screen.findByText(forbiddenMessage);
+
+ expect(screen.queryByText(protectedResource)).not.toBeInTheDocument();
+
+ expect(screen.getByText(forbiddenMessage)).toBeInTheDocument();
+});
+
+test('should view protected resource if policy check passes', async () => {
+ const user = await createUser({
+ role: ROLES.ADMIN,
+ });
+
+ const protectedResource = 'This is very confidential data';
+
+ await renderApp(
+ {protectedResource} ,
+ { user },
+ );
+
+ expect(screen.getByText(protectedResource)).toBeInTheDocument();
+});
+
+test('should not view protected resource if policy check fails and show fallback message instead', async () => {
+ const user = await createUser({
+ role: ROLES.USER,
+ });
+
+ const protectedResource = 'This is very confidential data';
+
+ const forbiddenMessage = 'You are unauthorized to view this resource';
+ await renderApp(
+ {forbiddenMessage}}
+ policyCheck={false}
+ >
+ {protectedResource}
+ ,
+ { user },
+ );
+
+ expect(screen.queryByText(protectedResource)).not.toBeInTheDocument();
+
+ expect(screen.getByText(forbiddenMessage)).toBeInTheDocument();
+});
diff --git a/apps/nextjs-app/src/lib/api-client.ts b/apps/nextjs-app/src/lib/api-client.ts
new file mode 100644
index 00000000..93131e6e
--- /dev/null
+++ b/apps/nextjs-app/src/lib/api-client.ts
@@ -0,0 +1,58 @@
+import Axios, { InternalAxiosRequestConfig } from 'axios';
+
+import { useNotifications } from '@/components/ui/notifications';
+import { env } from '@/config/env';
+
+function authRequestInterceptor(config: InternalAxiosRequestConfig) {
+ if (config.headers) {
+ config.headers.Accept = 'application/json';
+ }
+
+ config.withCredentials = true;
+ return config;
+}
+
+export const api = Axios.create({
+ baseURL: env.API_URL,
+});
+
+api.interceptors.request.use(authRequestInterceptor);
+api.interceptors.response.use(
+ (response) => {
+ return response.data;
+ },
+ (error) => {
+ const message = error.response?.data?.message || error.message;
+ useNotifications.getState().addNotification({
+ type: 'error',
+ title: 'Error',
+ message,
+ });
+
+ if (error.response?.status === 401) {
+ if (typeof window !== 'undefined') {
+ const searchParams = new URLSearchParams();
+ const redirectTo = searchParams.get('redirectTo');
+ if (redirectTo) {
+ window.location.href = `/auth/login?redirectTo=${redirectTo}`;
+ } else {
+ window.location.href = '/auth/login';
+ }
+ }
+ }
+
+ return Promise.reject(error);
+ },
+);
+
+export const attachCookie = (
+ cookie?: string,
+ headers?: Record,
+) => {
+ return {
+ headers: {
+ ...headers,
+ ...(cookie ? { Cookie: cookie } : {}),
+ },
+ };
+};
diff --git a/apps/nextjs-app/src/lib/auth.tsx b/apps/nextjs-app/src/lib/auth.tsx
new file mode 100644
index 00000000..c3288274
--- /dev/null
+++ b/apps/nextjs-app/src/lib/auth.tsx
@@ -0,0 +1,91 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import { configureAuth } from 'react-query-auth';
+import { z } from 'zod';
+
+import { AuthResponse, User } from '@/types/api';
+
+import { api } from './api-client';
+
+// api call definitions for auth (types, schemas, requests):
+// these are not part of features as this is a module shared across features
+
+const getUser = async (): Promise => {
+ const response = await api.get('/auth/me');
+
+ return response.data;
+};
+
+const logout = (): Promise => {
+ return api.post('/auth/logout');
+};
+
+export const loginInputSchema = z.object({
+ email: z.string().min(1, 'Required').email('Invalid email'),
+ password: z.string().min(5, 'Required'),
+});
+
+export type LoginInput = z.infer;
+const loginWithEmailAndPassword = (data: LoginInput): Promise => {
+ return api.post('/auth/login', data);
+};
+
+export const registerInputSchema = z
+ .object({
+ email: z.string().min(1, 'Required'),
+ firstName: z.string().min(1, 'Required'),
+ lastName: z.string().min(1, 'Required'),
+ password: z.string().min(1, 'Required'),
+ })
+ .and(
+ z
+ .object({
+ teamId: z.string().min(1, 'Required'),
+ teamName: z.null().default(null),
+ })
+ .or(
+ z.object({
+ teamName: z.string().min(1, 'Required'),
+ teamId: z.null().default(null),
+ }),
+ ),
+ );
+
+export type RegisterInput = z.infer;
+
+const registerWithEmailAndPassword = (
+ data: RegisterInput,
+): Promise => {
+ return api.post('/auth/register', data);
+};
+
+const authConfig = {
+ userFn: getUser,
+ loginFn: async (data: LoginInput) => {
+ const response = await loginWithEmailAndPassword(data);
+ return response.user;
+ },
+ registerFn: async (data: RegisterInput) => {
+ const response = await registerWithEmailAndPassword(data);
+ return response.user;
+ },
+ logoutFn: logout,
+};
+
+export const { useUser, useLogin, useLogout, useRegister, AuthLoader } =
+ configureAuth(authConfig);
+
+export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+ const user = useUser();
+ const router = useRouter();
+
+ useEffect(() => {
+ if (!user.data) {
+ router.replace(
+ `/auth/login?redirectTo=${encodeURIComponent(router.pathname)}`,
+ );
+ }
+ }, [user.data, router]);
+
+ return children;
+};
diff --git a/apps/nextjs-app/src/lib/authorization.tsx b/apps/nextjs-app/src/lib/authorization.tsx
new file mode 100644
index 00000000..fbf094a2
--- /dev/null
+++ b/apps/nextjs-app/src/lib/authorization.tsx
@@ -0,0 +1,85 @@
+import { useRouter } from 'next/router';
+import * as React from 'react';
+
+import { Comment, User } from '@/types/api';
+
+import { useUser } from './auth';
+
+export enum ROLES {
+ ADMIN = 'ADMIN',
+ USER = 'USER',
+}
+
+type RoleTypes = keyof typeof ROLES;
+
+export const POLICIES = {
+ 'comment:delete': (user: User, comment: Comment) => {
+ if (user?.role === 'ADMIN') {
+ return true;
+ }
+
+ if (user?.role === 'USER' && comment.author?.id === user.id) {
+ return true;
+ }
+
+ return false;
+ },
+};
+
+export const useAuthorization = () => {
+ const user = useUser();
+ const router = useRouter();
+
+ if (!user.data && !user.isLoading) {
+ const redirectTo = encodeURIComponent(router.pathname);
+ window.location.href = `/auth/login?redirectTo=${redirectTo}`;
+ }
+
+ const checkAccess = React.useCallback(
+ ({ allowedRoles }: { allowedRoles: RoleTypes[] }) => {
+ if (allowedRoles && allowedRoles.length > 0 && user.data) {
+ return allowedRoles?.includes(user.data.role);
+ }
+
+ return true;
+ },
+ [user.data],
+ );
+
+ return { checkAccess, role: user?.data?.role };
+};
+
+type AuthorizationProps = {
+ forbiddenFallback?: React.ReactNode;
+ children: React.ReactNode;
+} & (
+ | {
+ allowedRoles: RoleTypes[];
+ policyCheck?: never;
+ }
+ | {
+ allowedRoles?: never;
+ policyCheck: boolean;
+ }
+);
+
+export const Authorization = ({
+ policyCheck,
+ allowedRoles,
+ forbiddenFallback = null,
+ children,
+}: AuthorizationProps) => {
+ const { checkAccess } = useAuthorization();
+
+ let canAccess = false;
+
+ if (allowedRoles) {
+ canAccess = checkAccess({ allowedRoles });
+ }
+
+ if (typeof policyCheck !== 'undefined') {
+ canAccess = policyCheck;
+ }
+
+ return <>{canAccess ? children : forbiddenFallback};
+};
diff --git a/apps/nextjs-app/src/lib/react-query.ts b/apps/nextjs-app/src/lib/react-query.ts
new file mode 100644
index 00000000..0ac673c0
--- /dev/null
+++ b/apps/nextjs-app/src/lib/react-query.ts
@@ -0,0 +1,26 @@
+import { UseMutationOptions, DefaultOptions } from '@tanstack/react-query';
+
+export const queryConfig = {
+ queries: {
+ // throwOnError: true,
+ refetchOnWindowFocus: false,
+ retry: false,
+ staleTime: 1000 * 60,
+ },
+} satisfies DefaultOptions;
+
+export type ApiFnReturnType Promise> =
+ Awaited>;
+
+export type QueryConfig any> = Omit<
+ ReturnType,
+ 'queryKey' | 'queryFn'
+>;
+
+export type MutationConfig<
+ MutationFnType extends (...args: any) => Promise,
+> = UseMutationOptions<
+ ApiFnReturnType,
+ Error,
+ Parameters[0]
+>;
diff --git a/apps/nextjs-app/src/pages/404.tsx b/apps/nextjs-app/src/pages/404.tsx
new file mode 100644
index 00000000..2aa724ad
--- /dev/null
+++ b/apps/nextjs-app/src/pages/404.tsx
@@ -0,0 +1,15 @@
+import { Link } from '@/components/ui/link';
+
+const NotFoundPage = () => {
+ return (
+
+
404 - Not Found
+
Sorry, the page you are looking for does not exist.
+
+ Go to Home
+
+
= NextPage & {
+ getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+ Component: NextPageWithLayout;
+};
+
+export default function App({ Component, pageProps }: AppPropsWithLayout) {
+ const getLayout = Component.getLayout ?? ((page) => page);
+ return {getLayout( ;
+}
diff --git a/apps/nextjs-app/src/pages/app/discussions/[discussionId].tsx b/apps/nextjs-app/src/pages/app/discussions/[discussionId].tsx
new file mode 100644
index 00000000..4dda5581
--- /dev/null
+++ b/apps/nextjs-app/src/pages/app/discussions/[discussionId].tsx
@@ -0,0 +1 @@
+export { DiscussionPage as default } from '@/app/pages/app/discussions/discussion';
diff --git a/apps/nextjs-app/src/pages/app/discussions/index.tsx b/apps/nextjs-app/src/pages/app/discussions/index.tsx
new file mode 100644
index 00000000..baad9a2a
--- /dev/null
+++ b/apps/nextjs-app/src/pages/app/discussions/index.tsx
@@ -0,0 +1 @@
+export { DiscussionsPage as default } from '@/app/pages/app/discussions/discussions';
diff --git a/apps/nextjs-app/src/pages/app/index.tsx b/apps/nextjs-app/src/pages/app/index.tsx
new file mode 100644
index 00000000..56da8442
--- /dev/null
+++ b/apps/nextjs-app/src/pages/app/index.tsx
@@ -0,0 +1 @@
+export { DashboardPage as default } from '@/app/pages/app/dashboard';
diff --git a/apps/nextjs-app/src/pages/app/profile.tsx b/apps/nextjs-app/src/pages/app/profile.tsx
new file mode 100644
index 00000000..64b53045
--- /dev/null
+++ b/apps/nextjs-app/src/pages/app/profile.tsx
@@ -0,0 +1 @@
+export { ProfilePage as default } from '@/app/pages/app/profile';
diff --git a/apps/nextjs-app/src/pages/app/users.tsx b/apps/nextjs-app/src/pages/app/users.tsx
new file mode 100644
index 00000000..f7bffe43
--- /dev/null
+++ b/apps/nextjs-app/src/pages/app/users.tsx
@@ -0,0 +1 @@
+export { UsersPage as default } from '@/app/pages/app/users';
diff --git a/apps/nextjs-app/src/pages/auth/login.tsx b/apps/nextjs-app/src/pages/auth/login.tsx
new file mode 100644
index 00000000..21170557
--- /dev/null
+++ b/apps/nextjs-app/src/pages/auth/login.tsx
@@ -0,0 +1 @@
+export { LoginPage as default } from '@/app/pages/auth/login';
diff --git a/apps/nextjs-app/src/pages/auth/register.tsx b/apps/nextjs-app/src/pages/auth/register.tsx
new file mode 100644
index 00000000..2fa77b12
--- /dev/null
+++ b/apps/nextjs-app/src/pages/auth/register.tsx
@@ -0,0 +1 @@
+export { RegisterPage as default } from '@/app/pages/auth/register';
diff --git a/apps/nextjs-app/src/pages/index.tsx b/apps/nextjs-app/src/pages/index.tsx
new file mode 100644
index 00000000..dbe1e60b
--- /dev/null
+++ b/apps/nextjs-app/src/pages/index.tsx
@@ -0,0 +1,89 @@
+import { useRouter } from 'next/router';
+
+import { Head } from '@/components/seo';
+import { Button } from '@/components/ui/button';
+import { useUser } from '@/lib/auth';
+
+export const HomePage = () => {
+ const router = useRouter();
+ const user = useUser();
+
+ const handleStart = () => {
+ if (user.data) {
+ router.push('/app');
+ } else {
+ router.push('/auth/login');
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+ Bulletproof React
+
+
+
Showcasing Best Practices For Building React Applications
+
+
+
+
+
+
+
+
+
>>(
+ overrides?: T,
+) => {
+ return { ...generateUser(), ...overrides };
+};
+
+const generateTeam = () => ({
+ id: randUuid(),
+ name: randCompanyName(),
+ description: randParagraph(),
+ createdAt: Date.now(),
+});
+
+export const createTeam = >>(
+ overrides?: T,
+) => {
+ return { ...generateTeam(), ...overrides };
+};
+
+const generateDiscussion = () => ({
+ id: randUuid(),
+ title: randCatchPhrase(),
+ body: randParagraph(),
+ createdAt: Date.now(),
+ public: true,
+});
+
+export const createDiscussion = <
+ T extends Partial>,
+>(
+ overrides?: T & {
+ authorId?: string;
+ teamId?: string;
+ },
+) => {
+ return { ...generateDiscussion(), ...overrides };
+};
+
+const generateComment = () => ({
+ id: randUuid(),
+ body: randParagraph(),
+ createdAt: Date.now(),
+});
+
+export const createComment = <
+ T extends Partial>,
+>(
+ overrides?: T & {
+ authorId?: string;
+ discussionId?: string;
+ },
+) => {
+ return { ...generateComment(), ...overrides };
+};
diff --git a/apps/nextjs-app/src/testing/mocks/browser.ts b/apps/nextjs-app/src/testing/mocks/browser.ts
new file mode 100644
index 00000000..c95883bc
--- /dev/null
+++ b/apps/nextjs-app/src/testing/mocks/browser.ts
@@ -0,0 +1,5 @@
+import { setupWorker } from 'msw/browser';
+
+import { handlers } from './handlers';
+
+export const worker = setupWorker(...handlers);
diff --git a/apps/nextjs-app/src/testing/mocks/db.ts b/apps/nextjs-app/src/testing/mocks/db.ts
new file mode 100644
index 00000000..0ab10e78
--- /dev/null
+++ b/apps/nextjs-app/src/testing/mocks/db.ts
@@ -0,0 +1,102 @@
+import { factory, primaryKey } from '@mswjs/data';
+import { nanoid } from 'nanoid';
+
+const models = {
+ user: {
+ id: primaryKey(nanoid),
+ firstName: String,
+ lastName: String,
+ email: String,
+ password: String,
+ teamId: String,
+ role: String,
+ bio: String,
+ createdAt: Date.now,
+ },
+ team: {
+ id: primaryKey(nanoid),
+ name: String,
+ description: String,
+ createdAt: Date.now,
+ },
+ discussion: {
+ id: primaryKey(nanoid),
+ title: String,
+ body: String,
+ authorId: String,
+ teamId: String,
+ createdAt: Date.now,
+ public: Boolean,
+ },
+ comment: {
+ id: primaryKey(nanoid),
+ body: String,
+ authorId: String,
+ discussionId: String,
+ createdAt: Date.now,
+ },
+};
+
+export const db = factory(models);
+
+export type Model = keyof typeof models;
+
+const dbFilePath = 'mocked-db.json';
+
+export const loadDb = async () => {
+ // If we are running in a Node.js environment
+ if (typeof window === 'undefined') {
+ const { readFile, writeFile } = await import('fs/promises');
+ try {
+ const data = await readFile(dbFilePath, 'utf8');
+ return JSON.parse(data);
+ } catch (error: any) {
+ if (error?.code === 'ENOENT') {
+ const emptyDB = {};
+ await writeFile(dbFilePath, JSON.stringify(emptyDB, null, 2));
+ return emptyDB;
+ } else {
+ console.error('Error loading mocked DB:', error);
+ return null;
+ }
+ }
+ }
+ // If we are running in a browser environment
+ return Object.assign(
+ JSON.parse(window.localStorage.getItem('msw-db') || '{}'),
+ );
+};
+
+export const storeDb = async (data: string) => {
+ // If we are running in a Node.js environment
+ if (typeof window === 'undefined') {
+ const { writeFile } = await import('fs/promises');
+ await writeFile(dbFilePath, data);
+ } else {
+ // If we are running in a browser environment
+ window.localStorage.setItem('msw-db', data);
+ }
+};
+
+export const persistDb = async (model: Model) => {
+ if (process.env.NODE_ENV === 'test') return;
+ const data = await loadDb();
+ data[model] = db[model].getAll();
+ await storeDb(JSON.stringify(data));
+};
+
+export const initializeDb = async () => {
+ const database = await loadDb();
+ Object.entries(db).forEach(([key, model]) => {
+ const dataEntres = database[key];
+ if (dataEntres) {
+ dataEntres?.forEach((entry: Record) => {
+ model.create(entry);
+ });
+ }
+ });
+};
+
+export const resetDb = () => {
+ window.localStorage.clear();
+};
diff --git a/apps/nextjs-app/src/testing/mocks/handlers/auth.ts b/apps/nextjs-app/src/testing/mocks/handlers/auth.ts
new file mode 100644
index 00000000..5b7a67ef
--- /dev/null
+++ b/apps/nextjs-app/src/testing/mocks/handlers/auth.ts
@@ -0,0 +1,165 @@
+import Cookies from 'js-cookie';
+import { HttpResponse, http } from 'msw';
+
+import { env } from '@/config/env';
+
+import { db, persistDb } from '../db';
+import {
+ authenticate,
+ hash,
+ requireAuth,
+ AUTH_COOKIE,
+ networkDelay,
+} from '../utils';
+
+type RegisterBody = {
+ firstName: string;
+ lastName: string;
+ email: string;
+ password: string;
+ teamId?: string;
+ teamName?: string;
+};
+
+type LoginBody = {
+ email: string;
+ password: string;
+};
+
+export const authHandlers = [
+ http.post(`${env.API_URL}/auth/register`, async ({ request }) => {
+ await networkDelay();
+ try {
+ const userObject = (await request.json()) as RegisterBody;
+
+ const existingUser = db.user.findFirst({
+ where: {
+ email: {
+ equals: userObject.email,
+ },
+ },
+ });
+
+ if (existingUser) {
+ return HttpResponse.json(
+ { message: 'The user already exists' },
+ { status: 400 },
+ );
+ }
+
+ let teamId;
+ let role;
+
+ if (!userObject.teamId) {
+ const team = db.team.create({
+ name: userObject.teamName ?? `${userObject.firstName} Team`,
+ });
+ await persistDb('team');
+ teamId = team.id;
+ role = 'ADMIN';
+ } else {
+ const existingTeam = db.team.findFirst({
+ where: {
+ id: {
+ equals: userObject.teamId,
+ },
+ },
+ });
+
+ if (!existingTeam) {
+ return HttpResponse.json(
+ {
+ message: 'The team you are trying to join does not exist!',
+ },
+ { status: 400 },
+ );
+ }
+ teamId = userObject.teamId;
+ role = 'USER';
+ }
+
+ db.user.create({
+ ...userObject,
+ role,
+ password: hash(userObject.password),
+ teamId,
+ });
+
+ await persistDb('user');
+
+ const result = authenticate({
+ email: userObject.email,
+ password: userObject.password,
+ });
+
+ // todo: remove once tests in Github Actions are fixed
+ Cookies.set(AUTH_COOKIE, result.jwt, { path: '/' });
+
+ return HttpResponse.json(result, {
+ headers: {
+ // with a real API servier, the token cookie should also be Secure and HttpOnly
+ 'Set-Cookie': `${AUTH_COOKIE}=${result.jwt}; Path=/;`,
+ },
+ });
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ }),
+
+ http.post(`${env.API_URL}/auth/login`, async ({ request }) => {
+ await networkDelay();
+
+ try {
+ const credentials = (await request.json()) as LoginBody;
+ const result = authenticate(credentials);
+
+ // todo: remove once tests in Github Actions are fixed
+ Cookies.set(AUTH_COOKIE, result.jwt, { path: '/' });
+
+ return HttpResponse.json(result, {
+ headers: {
+ // with a real API servier, the token cookie should also be Secure and HttpOnly
+ 'Set-Cookie': `${AUTH_COOKIE}=${result.jwt}; Path=/;`,
+ },
+ });
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ }),
+
+ http.post(`${env.API_URL}/auth/logout`, async () => {
+ await networkDelay();
+
+ // todo: remove once tests in Github Actions are fixed
+ Cookies.remove(AUTH_COOKIE);
+
+ return HttpResponse.json(
+ { message: 'Logged out' },
+ {
+ headers: {
+ 'Set-Cookie': `${AUTH_COOKIE}=; Path=/;`,
+ },
+ },
+ );
+ }),
+
+ http.get(`${env.API_URL}/auth/me`, async ({ cookies }) => {
+ await networkDelay();
+
+ try {
+ const { user } = requireAuth(cookies);
+ return HttpResponse.json({ data: user });
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ }),
+];
diff --git a/apps/nextjs-app/src/testing/mocks/handlers/comments.ts b/apps/nextjs-app/src/testing/mocks/handlers/comments.ts
new file mode 100644
index 00000000..b3a682b9
--- /dev/null
+++ b/apps/nextjs-app/src/testing/mocks/handlers/comments.ts
@@ -0,0 +1,142 @@
+import { HttpResponse, http } from 'msw';
+
+import { env } from '@/config/env';
+
+import { db, persistDb } from '../db';
+import { networkDelay, requireAuth, sanitizeUser } from '../utils';
+
+type CreateCommentBody = {
+ body: string;
+ discussionId: string;
+};
+
+export const commentsHandlers = [
+ http.get(`${env.API_URL}/comments`, async ({ request, cookies }) => {
+ await networkDelay();
+
+ try {
+ const url = new URL(request.url);
+ const discussionId = url.searchParams.get('discussionId') || '';
+ const page = Number(url.searchParams.get('page') || 1);
+
+ const discussion = db.discussion.findFirst({
+ where: {
+ id: {
+ equals: discussionId,
+ },
+ },
+ });
+
+ if (!discussion?.public) {
+ const { error } = requireAuth(cookies);
+ if (error) {
+ return HttpResponse.json({ message: error }, { status: 401 });
+ }
+ }
+
+ const total = db.comment.count({
+ where: {
+ discussionId: {
+ equals: discussionId,
+ },
+ },
+ });
+
+ const totalPages = Math.ceil(total / 10);
+
+ const comments = db.comment
+ .findMany({
+ where: {
+ discussionId: {
+ equals: discussionId,
+ },
+ },
+ take: 10,
+ skip: 10 * (page - 1),
+ })
+ .map(({ authorId, ...comment }) => {
+ const author = db.user.findFirst({
+ where: {
+ id: {
+ equals: authorId,
+ },
+ },
+ });
+ return {
+ ...comment,
+ author: author ? sanitizeUser(author) : {},
+ };
+ });
+ return HttpResponse.json({
+ data: comments,
+ meta: {
+ page,
+ total,
+ totalPages,
+ },
+ });
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ }),
+
+ http.post(`${env.API_URL}/comments`, async ({ request, cookies }) => {
+ await networkDelay();
+
+ try {
+ const { user, error } = requireAuth(cookies);
+ if (error) {
+ return HttpResponse.json({ message: error }, { status: 401 });
+ }
+ const data = (await request.json()) as CreateCommentBody;
+ const result = db.comment.create({
+ authorId: user?.id,
+ ...data,
+ });
+ await persistDb('comment');
+ return HttpResponse.json(result);
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ }),
+
+ http.delete(
+ `${env.API_URL}/comments/:commentId`,
+ async ({ params, cookies }) => {
+ await networkDelay();
+
+ try {
+ const { user, error } = requireAuth(cookies);
+ if (error) {
+ return HttpResponse.json({ message: error }, { status: 401 });
+ }
+ const commentId = params.commentId as string;
+ const result = db.comment.delete({
+ where: {
+ id: {
+ equals: commentId,
+ },
+ ...(user?.role === 'USER' && {
+ authorId: {
+ equals: user.id,
+ },
+ }),
+ },
+ });
+ await persistDb('comment');
+ return HttpResponse.json(result);
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ },
+ ),
+];
diff --git a/apps/nextjs-app/src/testing/mocks/handlers/discussions.ts b/apps/nextjs-app/src/testing/mocks/handlers/discussions.ts
new file mode 100644
index 00000000..34dfe3e7
--- /dev/null
+++ b/apps/nextjs-app/src/testing/mocks/handlers/discussions.ts
@@ -0,0 +1,249 @@
+import { HttpResponse, http } from 'msw';
+
+import { env } from '@/config/env';
+
+import { db, persistDb } from '../db';
+import {
+ requireAuth,
+ requireAdmin,
+ sanitizeUser,
+ networkDelay,
+} from '../utils';
+
+type DiscussionBody = {
+ title: string;
+ body: string;
+ public: boolean;
+};
+
+export const discussionsHandlers = [
+ http.get(`${env.API_URL}/discussions`, async ({ cookies, request }) => {
+ await networkDelay();
+
+ try {
+ const { user, error } = requireAuth(cookies);
+ if (error) {
+ return HttpResponse.json({ message: error }, { status: 401 });
+ }
+
+ const url = new URL(request.url);
+
+ const page = Number(url.searchParams.get('page') || 1);
+
+ const total = db.discussion.count({
+ where: {
+ teamId: {
+ equals: user?.teamId,
+ },
+ },
+ });
+
+ const totalPages = Math.ceil(total / 10);
+
+ const result = db.discussion
+ .findMany({
+ where: {
+ teamId: {
+ equals: user?.teamId,
+ },
+ },
+ take: 10,
+ skip: 10 * (page - 1),
+ })
+ .map(({ authorId, ...discussion }) => {
+ const author = db.user.findFirst({
+ where: {
+ id: {
+ equals: authorId,
+ },
+ },
+ });
+ return {
+ ...discussion,
+ author: author ? sanitizeUser(author) : {},
+ };
+ });
+ return HttpResponse.json({
+ data: result,
+ meta: {
+ page,
+ total,
+ totalPages,
+ },
+ });
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ }),
+
+ http.get(
+ `${env.API_URL}/discussions/:discussionId`,
+ async ({ params, cookies }) => {
+ await networkDelay();
+
+ const discussionId = params.discussionId as string;
+
+ const discussion = db.discussion.findFirst({
+ where: {
+ id: {
+ equals: discussionId,
+ },
+ },
+ });
+
+ if (discussion?.public) {
+ const author = db.user.findFirst({
+ where: {
+ id: {
+ equals: discussion.authorId,
+ },
+ },
+ });
+
+ const result = {
+ ...discussion,
+ author: author ? sanitizeUser(author) : {},
+ };
+
+ return HttpResponse.json({ data: result });
+ }
+
+ try {
+ const { user, error } = requireAuth(cookies);
+ if (error) {
+ return HttpResponse.json({ message: error }, { status: 401 });
+ }
+ const discussion = db.discussion.findFirst({
+ where: {
+ id: {
+ equals: discussionId,
+ },
+ teamId: {
+ equals: user?.teamId,
+ },
+ },
+ });
+
+ if (!discussion) {
+ return HttpResponse.json(
+ { message: 'Discussion not found' },
+ { status: 404 },
+ );
+ }
+
+ const author = db.user.findFirst({
+ where: {
+ id: {
+ equals: discussion.authorId,
+ },
+ },
+ });
+
+ const result = {
+ ...discussion,
+ author: author ? sanitizeUser(author) : {},
+ };
+
+ return HttpResponse.json({ data: result });
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ },
+ ),
+
+ http.post(`${env.API_URL}/discussions`, async ({ request, cookies }) => {
+ await networkDelay();
+
+ try {
+ const { user, error } = requireAuth(cookies);
+ if (error) {
+ return HttpResponse.json({ message: error }, { status: 401 });
+ }
+ const data = (await request.json()) as DiscussionBody;
+ requireAdmin(user);
+ const result = db.discussion.create({
+ teamId: user?.teamId,
+ authorId: user?.id,
+ ...data,
+ });
+ await persistDb('discussion');
+ return HttpResponse.json(result);
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ }),
+
+ http.patch(
+ `${env.API_URL}/discussions/:discussionId`,
+ async ({ request, params, cookies }) => {
+ await networkDelay();
+
+ try {
+ const { user, error } = requireAuth(cookies);
+ if (error) {
+ return HttpResponse.json({ message: error }, { status: 401 });
+ }
+ const data = (await request.json()) as DiscussionBody;
+ const discussionId = params.discussionId as string;
+ requireAdmin(user);
+ const result = db.discussion.update({
+ where: {
+ teamId: {
+ equals: user?.teamId,
+ },
+ id: {
+ equals: discussionId,
+ },
+ },
+ data,
+ });
+ await persistDb('discussion');
+ return HttpResponse.json(result);
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ },
+ ),
+
+ http.delete(
+ `${env.API_URL}/discussions/:discussionId`,
+ async ({ cookies, params }) => {
+ await networkDelay();
+
+ try {
+ const { user, error } = requireAuth(cookies);
+ if (error) {
+ return HttpResponse.json({ message: error }, { status: 401 });
+ }
+ const discussionId = params.discussionId as string;
+ requireAdmin(user);
+ const result = db.discussion.delete({
+ where: {
+ id: {
+ equals: discussionId,
+ },
+ },
+ });
+ await persistDb('discussion');
+ return HttpResponse.json(result);
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ },
+ ),
+];
diff --git a/apps/nextjs-app/src/testing/mocks/handlers/index.ts b/apps/nextjs-app/src/testing/mocks/handlers/index.ts
new file mode 100644
index 00000000..7cedec6b
--- /dev/null
+++ b/apps/nextjs-app/src/testing/mocks/handlers/index.ts
@@ -0,0 +1,23 @@
+import { HttpResponse, http } from 'msw';
+
+import { env } from '@/config/env';
+
+import { networkDelay } from '../utils';
+
+import { authHandlers } from './auth';
+import { commentsHandlers } from './comments';
+import { discussionsHandlers } from './discussions';
+import { teamsHandlers } from './teams';
+import { usersHandlers } from './users';
+
+export const handlers = [
+ ...authHandlers,
+ ...commentsHandlers,
+ ...discussionsHandlers,
+ ...teamsHandlers,
+ ...usersHandlers,
+ http.get(`${env.API_URL}/healthcheck`, async () => {
+ await networkDelay();
+ return HttpResponse.json({ ok: true });
+ }),
+];
diff --git a/apps/nextjs-app/src/testing/mocks/handlers/teams.ts b/apps/nextjs-app/src/testing/mocks/handlers/teams.ts
new file mode 100644
index 00000000..cbec6072
--- /dev/null
+++ b/apps/nextjs-app/src/testing/mocks/handlers/teams.ts
@@ -0,0 +1,22 @@
+import { HttpResponse, http } from 'msw';
+
+import { env } from '@/config/env';
+
+import { db } from '../db';
+import { networkDelay } from '../utils';
+
+export const teamsHandlers = [
+ http.get(`${env.API_URL}/teams`, async () => {
+ await networkDelay();
+
+ try {
+ const result = db.team.getAll();
+ return HttpResponse.json({ data: result });
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ }),
+];
diff --git a/apps/nextjs-app/src/testing/mocks/handlers/users.ts b/apps/nextjs-app/src/testing/mocks/handlers/users.ts
new file mode 100644
index 00000000..444b9180
--- /dev/null
+++ b/apps/nextjs-app/src/testing/mocks/handlers/users.ts
@@ -0,0 +1,104 @@
+import { HttpResponse, http } from 'msw';
+
+import { env } from '@/config/env';
+
+import { db, persistDb } from '../db';
+import {
+ requireAuth,
+ requireAdmin,
+ sanitizeUser,
+ networkDelay,
+} from '../utils';
+
+type ProfileBody = {
+ email: string;
+ firstName: string;
+ lastName: string;
+ bio: string;
+};
+
+export const usersHandlers = [
+ http.get(`${env.API_URL}/users`, async ({ cookies }) => {
+ await networkDelay();
+
+ try {
+ const { user, error } = requireAuth(cookies);
+ if (error) {
+ return HttpResponse.json({ message: error }, { status: 401 });
+ }
+ const result = db.user
+ .findMany({
+ where: {
+ teamId: {
+ equals: user?.teamId,
+ },
+ },
+ })
+ .map(sanitizeUser);
+
+ return HttpResponse.json({ data: result });
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ }),
+
+ http.patch(`${env.API_URL}/users/profile`, async ({ request, cookies }) => {
+ await networkDelay();
+
+ try {
+ const { user, error } = requireAuth(cookies);
+ if (error) {
+ return HttpResponse.json({ message: error }, { status: 401 });
+ }
+ const data = (await request.json()) as ProfileBody;
+ const result = db.user.update({
+ where: {
+ id: {
+ equals: user?.id,
+ },
+ },
+ data,
+ });
+ await persistDb('user');
+ return HttpResponse.json(result);
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ }),
+
+ http.delete(`${env.API_URL}/users/:userId`, async ({ cookies, params }) => {
+ await networkDelay();
+
+ try {
+ const { user, error } = requireAuth(cookies);
+ if (error) {
+ return HttpResponse.json({ message: error }, { status: 401 });
+ }
+ const userId = params.userId as string;
+ requireAdmin(user);
+ const result = db.user.delete({
+ where: {
+ id: {
+ equals: userId,
+ },
+ teamId: {
+ equals: user?.teamId,
+ },
+ },
+ });
+ await persistDb('user');
+ return HttpResponse.json(result);
+ } catch (error: any) {
+ return HttpResponse.json(
+ { message: error?.message || 'Server Error' },
+ { status: 500 },
+ );
+ }
+ }),
+];
diff --git a/apps/nextjs-app/src/testing/mocks/index.ts b/apps/nextjs-app/src/testing/mocks/index.ts
new file mode 100644
index 00000000..c4cfd221
--- /dev/null
+++ b/apps/nextjs-app/src/testing/mocks/index.ts
@@ -0,0 +1,10 @@
+import { env } from '@/config/env';
+
+export const enableMocking = async () => {
+ if (env.ENABLE_API_MOCKING) {
+ const { worker } = await import('./browser');
+ const { initializeDb } = await import('./db');
+ await initializeDb();
+ return worker.start();
+ }
+};
diff --git a/apps/nextjs-app/src/testing/mocks/server.ts b/apps/nextjs-app/src/testing/mocks/server.ts
new file mode 100644
index 00000000..5ac9204f
--- /dev/null
+++ b/apps/nextjs-app/src/testing/mocks/server.ts
@@ -0,0 +1,5 @@
+import { setupServer } from 'msw/node';
+
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);
diff --git a/apps/nextjs-app/src/testing/mocks/utils.ts b/apps/nextjs-app/src/testing/mocks/utils.ts
new file mode 100644
index 00000000..6184fb8b
--- /dev/null
+++ b/apps/nextjs-app/src/testing/mocks/utils.ts
@@ -0,0 +1,110 @@
+import Cookies from 'js-cookie';
+import { delay } from 'msw';
+
+import { db } from './db';
+
+export const encode = (obj: any) => {
+ const btoa =
+ typeof window === 'undefined'
+ ? (str: string) => Buffer.from(str, 'binary').toString('base64')
+ : window.btoa;
+ return btoa(JSON.stringify(obj));
+};
+
+export const decode = (str: string) => {
+ const atob =
+ typeof window === 'undefined'
+ ? (str: string) => Buffer.from(str, 'base64').toString('binary')
+ : window.atob;
+ return JSON.parse(atob(str));
+};
+
+export const hash = (str: string) => {
+ let hash = 5381,
+ i = str.length;
+
+ while (i) {
+ hash = (hash * 33) ^ str.charCodeAt(--i);
+ }
+ return String(hash >>> 0);
+};
+
+export const networkDelay = () => {
+ const delayTime = process.env.TEST
+ ? 200
+ : Math.floor(Math.random() * 700) + 300;
+ return delay(delayTime);
+};
+
+const omit = (obj: T, keys: string[]): T => {
+ const result = {} as T;
+ for (const key in obj) {
+ if (!keys.includes(key)) {
+ result[key] = obj[key];
+ }
+ }
+
+ return result;
+};
+
+export const sanitizeUser = (user: O) =>
+ omit(user, ['password', 'iat']);
+
+export function authenticate({
+ email,
+ password,
+}: {
+ email: string;
+ password: string;
+}) {
+ const user = db.user.findFirst({
+ where: {
+ email: {
+ equals: email,
+ },
+ },
+ });
+
+ if (user?.password === hash(password)) {
+ const sanitizedUser = sanitizeUser(user);
+ const encodedToken = encode(sanitizedUser);
+ return { user: sanitizedUser, jwt: encodedToken };
+ }
+
+ const error = new Error('Invalid username or password');
+ throw error;
+}
+
+export const AUTH_COOKIE = `bulletproof_react_app_token`;
+
+export function requireAuth(cookies: Record) {
+ try {
+ const encodedToken = cookies[AUTH_COOKIE] || Cookies.get(AUTH_COOKIE);
+ if (!encodedToken) {
+ return { error: 'Unauthorized', user: null };
+ }
+ const decodedToken = decode(encodedToken) as { id: string };
+
+ const user = db.user.findFirst({
+ where: {
+ id: {
+ equals: decodedToken.id,
+ },
+ },
+ });
+
+ if (!user) {
+ return { error: 'Unauthorized', user: null };
+ }
+
+ return { user: sanitizeUser(user) };
+ } catch (err: any) {
+ return { error: 'Unauthorized', user: null };
+ }
+}
+
+export function requireAdmin(user: any) {
+ if (user.role !== 'ADMIN') {
+ throw Error('Unauthorized');
+ }
+}
diff --git a/apps/nextjs-app/src/testing/setup-tests.ts b/apps/nextjs-app/src/testing/setup-tests.ts
new file mode 100644
index 00000000..3a9c11aa
--- /dev/null
+++ b/apps/nextjs-app/src/testing/setup-tests.ts
@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom/vitest';
+
+import { initializeDb, resetDb } from '@/testing/mocks/db';
+import { server } from '@/testing/mocks/server';
+
+vi.mock('zustand');
+
+beforeAll(() => {
+ server.listen({ onUnhandledRequest: 'error' });
+ vi.mock('next/router', () => require('next-router-mock'));
+});
+afterAll(() => server.close());
+beforeEach(() => {
+ const ResizeObserverMock = vi.fn(() => ({
+ observe: vi.fn(),
+ unobserve: vi.fn(),
+ disconnect: vi.fn(),
+ }));
+
+ vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+
+ window.btoa = (str: string) => Buffer.from(str, 'binary').toString('base64');
+ window.atob = (str: string) => Buffer.from(str, 'base64').toString('binary');
+
+ initializeDb();
+});
+afterEach(() => {
+ server.resetHandlers();
+ resetDb();
+});
diff --git a/apps/nextjs-app/src/testing/test-utils.tsx b/apps/nextjs-app/src/testing/test-utils.tsx
new file mode 100644
index 00000000..4dfd64f9
--- /dev/null
+++ b/apps/nextjs-app/src/testing/test-utils.tsx
@@ -0,0 +1,75 @@
+import {
+ render as rtlRender,
+ waitForElementToBeRemoved,
+ screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Cookies from 'js-cookie';
+
+import { AppProvider } from '@/app/provider';
+
+import {
+ createDiscussion as generateDiscussion,
+ createUser as generateUser,
+} from './data-generators';
+import { db } from './mocks/db';
+import { AUTH_COOKIE, authenticate, hash } from './mocks/utils';
+
+export const waitForLoadingToFinish = () =>
+ waitForElementToBeRemoved(
+ () => [
+ ...screen.queryAllByTestId(/loading/i),
+ ...screen.queryAllByText(/loading/i),
+ ],
+ { timeout: 4000 },
+ );
+
+export const createUser = async (userProperties?: any) => {
+ const user = generateUser(userProperties) as any;
+ await db.user.create({ ...user, password: hash(user.password) });
+ return user;
+};
+
+export const createDiscussion = async (discussionProperties?: any) => {
+ const discussion = generateDiscussion(discussionProperties);
+ const res = await db.discussion.create(discussion);
+ return res;
+};
+
+export const loginAsUser = async (user: any) => {
+ const authUser = await authenticate(user);
+ Cookies.set(AUTH_COOKIE, authUser.jwt);
+ return authUser;
+};
+
+const initializeUser = async (user: any) => {
+ if (typeof user === 'undefined') {
+ const newUser = await createUser();
+ return loginAsUser(newUser);
+ } else if (user) {
+ return loginAsUser(user);
+ } else {
+ return null;
+ }
+};
+
+export const renderApp = async (
+ ui: any,
+ { user, ...renderOptions }: Record = {},
+) => {
+ // if you want to render the app unauthenticated then pass "null" as the user
+ const initializedUser = await initializeUser(user);
+
+ const returnValue = {
+ ...rtlRender(ui, {
+ wrapper: AppProvider,
+ ...renderOptions,
+ }),
+ user: initializedUser,
+ };
+
+ return returnValue;
+};
+
+export * from '@testing-library/react';
+export { userEvent, rtlRender };
diff --git a/apps/nextjs-app/src/types/api.ts b/apps/nextjs-app/src/types/api.ts
new file mode 100644
index 00000000..051db377
--- /dev/null
+++ b/apps/nextjs-app/src/types/api.ts
@@ -0,0 +1,51 @@
+// let's imagine this file is autogenerated from the backend
+// ideally, we want to keep these api related types in sync
+// with the backend instead of manually writing them out
+
+export type BaseEntity = {
+ id: string;
+ createdAt: number;
+};
+
+export type Entity = {
+ [K in keyof T]: T[K];
+} & BaseEntity;
+
+export type Meta = {
+ page: number;
+ total: number;
+ totalPages: number;
+};
+
+export type User = Entity<{
+ firstName: string;
+ lastName: string;
+ email: string;
+ role: 'ADMIN' | 'USER';
+ teamId: string;
+ bio: string;
+}>;
+
+export type AuthResponse = {
+ jwt: string;
+ user: User;
+};
+
+export type Team = Entity<{
+ name: string;
+ description: string;
+}>;
+
+export type Discussion = Entity<{
+ title: string;
+ body: string;
+ teamId: string;
+ author: User;
+ public: boolean;
+}>;
+
+export type Comment = Entity<{
+ body: string;
+ discussionId: string;
+ author: User;
+}>;
diff --git a/apps/nextjs-app/src/utils/cn.ts b/apps/nextjs-app/src/utils/cn.ts
new file mode 100644
index 00000000..9ad0df42
--- /dev/null
+++ b/apps/nextjs-app/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/apps/nextjs-app/src/utils/format.ts b/apps/nextjs-app/src/utils/format.ts
new file mode 100644
index 00000000..9012923f
--- /dev/null
+++ b/apps/nextjs-app/src/utils/format.ts
@@ -0,0 +1,4 @@
+import { default as dayjs } from 'dayjs';
+
+export const formatDate = (date: number) =>
+ dayjs(date).format('MMMM D, YYYY h:mm A');
diff --git a/apps/nextjs-app/tailwind.config.cjs b/apps/nextjs-app/tailwind.config.cjs
new file mode 100644
index 00000000..cce2e4a5
--- /dev/null
+++ b/apps/nextjs-app/tailwind.config.cjs
@@ -0,0 +1,76 @@
+/** @type {import('tailwindcss').Config} */
+
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+ content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ theme: {
+ container: {
+ center: true,
+ padding: '2rem',
+ screens: {
+ '2xl': '1400px',
+ },
+ },
+ extend: {
+ fontFamily: {
+ sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+ },
+ colors: {
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))',
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))',
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))',
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))',
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))',
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))',
+ },
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))',
+ },
+ },
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)',
+ },
+ keyframes: {
+ 'accordion-down': {
+ from: { height: '0' },
+ to: { height: 'var(--radix-accordion-content-height)' },
+ },
+ 'accordion-up': {
+ from: { height: 'var(--radix-accordion-content-height)' },
+ to: { height: '0' },
+ },
+ },
+ animation: {
+ 'accordion-down': 'accordion-down 0.2s ease-out',
+ 'accordion-up': 'accordion-up 0.2s ease-out',
+ },
+ },
+ },
+ plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+};
diff --git a/apps/nextjs-app/tsconfig.json b/apps/nextjs-app/tsconfig.json
new file mode 100644
index 00000000..8e928315
--- /dev/null
+++ b/apps/nextjs-app/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "target": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "paths": {
+ "@/*": ["./src/*"]
+ },
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ]
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}
diff --git a/apps/nextjs-app/vitest.config.ts b/apps/nextjs-app/vitest.config.ts
new file mode 100644
index 00000000..3e19cbc2
--- /dev/null
+++ b/apps/nextjs-app/vitest.config.ts
@@ -0,0 +1,19 @@
+///
+
+