initial commit

Author: ymc9

Diff for: .babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": ["next/babel"],
+    // "superjson-next" plugin uses superjson for serialization between getServerSideProps and client,
+    // so that types like Date and BigInt are properly handled
+    "plugins": ["superjson-next"]
+}

Diff for: .env

@@ -0,0 +1,4 @@
+NEXTAUTH_SECRET=abc123
+DATABASE_URL="postgresql://postgres:abc123@localhost:5432/todo?schema=public"
+GITHUB_ID=
+GITHUB_SECRET=

Diff for: .eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

Diff for: .github/workflows/build.yml

@@ -0,0 +1,33 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: CI
+
+env:
+    DO_NOT_TRACK: '1'
+
+on:
+    push:
+        branches: ['main']
+    pull_request:
+        branches: ['main']
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [16.x]
+                # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+        steps:
+            - uses: actions/checkout@v3
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v3
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: 'npm'
+            - run: npm ci
+            - run: npm run lint
+            - run: npm run build

Diff for: .gitignore

@@ -0,0 +1,6 @@
+logs
+*.log
+node_modules/
+.env.local
+.next
+.DS_Store

Diff for: README.md

@@ -1,2 +1,45 @@
-# sample-todo-trpc
-A complete Todo app sample built with ZenStack, tRPC, and Next.js
+# A Collaborative Todo Sample
+
+This project is a collaborative todo app built with [tRPC](https://trpc.io], [Next.js](https://nextjs.org), [Next-Auth](nextauth.org), and [ZenStack](https://zenstack.dev).
+
+In this fictitious app, users can be invited to workspaces where they can collaborate on todos. Public todo lists are visible to all members in the workspace.
+
+See a live deployment at: https://zenstack-todo.vercel.app/.
+
+## Features:
+
+-   User signup/signin
+-   Creating workspaces and inviting members
+-   Data segregation and permission control
+
+## Running the sample:
+
+1. Setup a new PostgreSQL database
+
+    You can launch a PostgreSQL instance locally, or create one from a hoster like [Supabase](https://supabase.com). Create a new database for this app, and set the connection string in .env file.
+
+1. Install dependencies
+
+    ```bash
+    npm install
+    ```
+
+1. Generate server and client-side code from model
+
+    ```bash
+    npm run generate
+    ```
+
+1. Synchronize database schma
+
+    ```bash
+    npm run db:push
+    ```
+
+1. Start dev server
+
+    ```bash
+    npm run dev
+    ```
+
+For more information on using ZenStack, visit [https://zenstack.dev](https://zenstack.dev).

Diff for: components/AuthGuard.tsx

@@ -0,0 +1,24 @@
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/router';
+
+type Props = {
+    children: JSX.Element | JSX.Element[];
+};
+
+export default function AuthGuard({ children }: Props) {
+    const { status } = useSession();
+    const router = useRouter();
+
+    if (router.pathname === '/signup' || router.pathname === '/signin') {
+        return <>{children}</>;
+    }
+
+    if (status === 'loading') {
+        return <p>Loading...</p>;
+    } else if (status === 'unauthenticated') {
+        router.push('/signin');
+        return <></>;
+    } else {
+        return <>{children}</>;
+    }
+}

Diff for: components/Avatar.tsx

@@ -0,0 +1,24 @@
+import { User } from 'next-auth';
+import Image from 'next/image';
+
+type Props = {
+    user: User;
+    size?: number;
+};
+
+export default function Avatar({ user, size }: Props) {
+    if (!user) {
+        return <></>;
+    }
+    return (
+        <div className="tooltip" data-tip={user.name || user.email}>
+            <Image
+                src={user.image || '/avatar.jpg'}
+                alt="avatar"
+                width={size || 32}
+                height={size || 32}
+                className="rounded-full"
+            />
+        </div>
+    );
+}

Diff for: components/BreadCrumb.tsx

@@ -0,0 +1,44 @@
+import { List, Space } from '@prisma/client';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+type Props = {
+    space: Space;
+    list?: List;
+};
+
+export default function BreadCrumb({ space, list }: Props) {
+    const router = useRouter();
+
+    const parts = router.asPath.split('/').filter((p) => p);
+    const [base] = parts;
+    if (base !== 'space') {
+        return <></>;
+    }
+
+    const items: Array<{ text: string; link: string }> = [];
+
+    items.push({ text: 'Home', link: '/' });
+    items.push({ text: space.name || '', link: `/space/${space.slug}` });
+
+    if (list) {
+        items.push({
+            text: list?.title || '',
+            link: `/space/${space.slug}/${list.id}`,
+        });
+    }
+
+    return (
+        <div className="text-sm text-gray-600 breadcrumbs">
+            <ul>
+                {items.map((item, i) => (
+                    <li key={i}>
+                        <Link href={item.link}>
+                            <a>{item.text}</a>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

Diff for: components/ManageMembers.tsx

@@ -0,0 +1,138 @@
+import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { useCurrentUser } from '@lib/context';
+import { isTRPCClientError, trpc } from '@lib/trpc';
+import { Space, SpaceUser, SpaceUserRole, User } from '@prisma/client';
+import { inferProcedureOutput } from '@trpc/server';
+import { ChangeEvent, KeyboardEvent, useState } from 'react';
+import { toast } from 'react-toastify';
+import Avatar from './Avatar';
+
+type Props = {
+    space: Space;
+};
+
+export default function ManageMembers({ space }: Props) {
+    const [email, setEmail] = useState('');
+    const [role, setRole] = useState<SpaceUserRole>(SpaceUserRole.USER);
+    const user = useCurrentUser();
+
+    const { data: members } = trpc.spaceUser.findMany.useQuery<
+        inferProcedureOutput<typeof trpc.spaceUser.findMany>,
+        // a cast is needed because trpc's procedure typing is static
+        (SpaceUser & { user: User })[]
+    >({
+        where: {
+            spaceId: space.id,
+        },
+        include: {
+            user: true,
+        },
+        orderBy: {
+            role: 'desc',
+        },
+    });
+
+    const { mutateAsync: addMember } = trpc.spaceUser.create.useMutation();
+    const { mutateAsync: delMember } = trpc.spaceUser.delete.useMutation();
+
+    const inviteUser = async () => {
+        try {
+            const r = await addMember({
+                data: {
+                    user: {
+                        connect: {
+                            email,
+                        },
+                    },
+                    space: {
+                        connect: {
+                            id: space.id,
+                        },
+                    },
+                    role,
+                },
+            });
+            console.log('SpaceUser created:', r);
+        } catch (err: any) {
+            console.error(err);
+            if (isTRPCClientError(err) && err.data?.prismaError) {
+                console.error('PrismaError:', err.data.prismaError);
+                if (err.data.prismaError.code === 'P2002') {
+                    toast.error('User is already a member of the space');
+                } else if (err.data.prismaError.code === 'P2025') {
+                    toast.error('User is not found for this email');
+                } else {
+                    toast.error(`Unexpected Prisma error: ${err.data.prismaError.code}`);
+                }
+            } else {
+                toast.error(`Error occurred: ${JSON.stringify(err)}`);
+            }
+        }
+    };
+
+    const removeMember = async (id: string) => {
+        if (confirm(`Are you sure to remove this member from space?`)) {
+            await delMember({ where: { id } });
+        }
+    };
+
+    return (
+        <div>
+            <div className="flex flex-wrap gap-2 items-center mb-8 w-full">
+                <input
+                    type="text"
+                    placeholder="Type user email and enter to invite"
+                    className="input input-sm input-bordered flex-grow mr-2"
+                    value={email}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                        setEmail(e.currentTarget.value);
+                    }}
+                    onKeyUp={(e: KeyboardEvent<HTMLInputElement>) => {
+                        if (e.key === 'Enter') {
+                            inviteUser();
+                        }
+                    }}
+                />
+
+                <select
+                    className="select select-sm mr-2"
+                    value={role}
+                    onChange={(e: ChangeEvent<HTMLSelectElement>) => {
+                        setRole(e.currentTarget.value as SpaceUserRole);
+                    }}
+                >
+                    <option value={SpaceUserRole.USER}>USER</option>
+                    <option value={SpaceUserRole.ADMIN}>ADMIN</option>
+                </select>
+
+                <button onClick={() => inviteUser()}>
+                    <PlusIcon className="w-6 h-6 text-gray-500" />
+                </button>
+            </div>
+
+            <ul className="space-y-2">
+                {members?.map((member) => (
+                    <li key={member.id} className="flex flex-wrap w-full justify-between">
+                        <div className="flex items-center">
+                            <div className="hidden md:block mr-2">
+                                <Avatar user={member.user} size={32} />
+                            </div>
+                            <p className="w-36 md:w-48 line-clamp-1 mr-2">{member.user.name || member.user.email}</p>
+                            <p>{member.role}</p>
+                        </div>
+                        <div className="flex items-center">
+                            {user?.id !== member.user.id && (
+                                <TrashIcon
+                                    className="w-4 h-4 text-gray-500"
+                                    onClick={() => {
+                                        removeMember(member.id);
+                                    }}
+                                />
+                            )}
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

Diff for: components/NavBar.tsx

@@ -0,0 +1,49 @@
+import { Space } from '@prisma/client';
+import { User } from 'next-auth';
+import { signOut } from 'next-auth/react';
+import Image from 'next/image';
+import Link from 'next/link';
+import Avatar from './Avatar';
+
+type Props = {
+    space: Space | undefined;
+    user: User | undefined;
+};
+
+export default function NavBar({ user, space }: Props) {
+    const onSignout = async () => {
+        await signOut({ callbackUrl: '/signin' });
+    };
+
+    return (
+        <div className="navbar bg-base-100 px-8 py-2 border-b">
+            <div className="flex-1">
+                <Link href="/">
+                    <a className="flex items-center">
+                        <Image src="/logo.png" alt="Logo" width={32} height={32} />
+                        <div className="text-xl font-semibold ml-2 text-slate-700 hidden md:inline-block">
+                            {space?.name || 'Welcome Todo App'}
+                        </div>
+                        <p className="text-xs ml-2 text-gray-500 self-end">Powered by ZenStack</p>
+                    </a>
+                </Link>
+            </div>
+            <div className="flex-none">
+                <div className="dropdown dropdown-end">
+                    <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
+                        {user && <Avatar user={user!} />}
+                    </label>
+                    <ul
+                        tabIndex={0}
+                        className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
+                    >
+                        <li className="border-b border-gray-200">{user && <div>{user.name || user.email}</div>}</li>
+                        <li>
+                            <a onClick={onSignout}>Logout</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}