Merge pull request #2 from sabovyan/spaces

Add Spaces

app/actions/list.action.ts

@@ -0,0 +1,45 @@
+'use server';
+
+import { revalidateTag } from 'next/cache';
+import { redirect } from 'next/navigation';
+import { z } from 'zod';
+
+import { auth } from '@/lib/auth';
+import { prisma } from '@/lib/prisma';
+
+const schema = z.object({
+  name: z.string(),
+  spaceId: z.string()
+});
+
+export const addList = async (formData: FormData) => {
+  const { name, spaceId } = schema.parse({
+    name: formData.get('name'),
+    spaceId: formData.get('spaceId')
+  });
+
+  const session = await auth();
+
+  const newList = await prisma.list.create({
+    data: {
+      name,
+      Space: {
+        connect: {
+          id: spaceId
+        }
+      },
+      creator: {
+        connect: {
+          id: session?.user.id
+        }
+      }
+    },
+    select: {
+      id: true
+    }
+  });
+
+  revalidateTag(`/spaces/${spaceId}`);
+
+  redirect(`/spaces/${spaceId}/lists/${newList.id}`);
+};

app/actions/space.actions.ts

@@ -0,0 +1,35 @@
+'use server';
+
+import { revalidateTag } from 'next/cache';
+import { redirect } from 'next/navigation';
+import { z } from 'zod';
+
+import { auth } from '@/lib/auth';
+import { prisma } from '@/lib/prisma';
+
+const schema = z.object({
+  name: z.string()
+});
+
+export const addSpace = async (formData: FormData) => {
+  const parsed = schema.parse({
+    name: formData.get('name')
+  });
+
+  const session = await auth();
+
+  const space = await prisma.space.create({
+    data: {
+      name: parsed.name,
+      creator: {
+        connect: {
+          id: session?.user.id
+        }
+      }
+    }
+  });
+
+  revalidateTag('/spaces');
+
+  redirect(`/spaces/${space.id}`);
+};

app/spaces/[spaceId]/lists/[listId]/not-found.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+
+import { SpaceItemParams } from '../../page';
+
+export default function NotFound() {
+  const params = useParams<SpaceItemParams>();
+
+  return (
+    <div>
+      <h3 className="text-3xl">Oops Your List was not found</h3>
+
+      <div className="flex flex-col gap-2 mt-4">
+        <p>
+          Go back to{' '}
+          <Link href={`/spaces/${params.spaceId}`} className="underline">
+            Your Lists
+          </Link>{' '}
+          or{' '}
+          <Link href="/" className="underline">
+            Home Page
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

app/spaces/[spaceId]/lists/[listId]/page.tsx

@@ -0,0 +1,24 @@
+import { notFound } from 'next/navigation';
+
+import { prisma } from '@/lib/prisma';
+
+import { SpaceItemParams } from '../../page';
+
+type ListItemParams = SpaceItemParams & {
+  listId: string;
+};
+export default async function List({ params }: { params: ListItemParams }) {
+  const list = await prisma.list.findUnique({
+    where: { id: params.listId }
+  });
+
+  if (!list) {
+    notFound();
+  }
+
+  return (
+    <div>
+      <h1>{params.spaceId}</h1>
+    </div>
+  );
+}

app/spaces/[spaceId]/lists/add/page.tsx

@@ -0,0 +1,25 @@
+import { addList } from '@/app/actions/list.action';
+import { FormField } from '@/components/formField';
+import { Button } from '@/components/ui/button';
+
+export default function AddList({
+  params: { spaceId }
+}: {
+  params: { spaceId: string };
+}) {
+  return (
+    <div>
+      <form action={addList}>
+        <FormField type="text" label="Name" name="name" />
+        <FormField
+          hidden
+          type="text"
+          name="spaceId"
+          defaultValue={spaceId}
+          readOnly
+        />
+        <Button className="w-full mt-4">Submit</Button>
+      </form>
+    </div>
+  );
+}

app/spaces/[spaceId]/not-found.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div>
+      <h3 className="text-3xl">Oops Your Space was not found</h3>
+
+      <div className="flex flex-col gap-2 mt-4">
+        <p>
+          Go back to{' '}
+          <Link href="/spaces" className="underline">
+            Your Spaces
+          </Link>{' '}
+          or{' '}
+          <Link href="/" className="underline">
+            Home Page
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

app/spaces/[spaceId]/page.tsx

@@ -0,0 +1,58 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+
+import { prisma } from '@/lib/prisma';
+
+export type SpaceItemParams = { spaceId: string };
+
+export default async function SingleSpace({
+  params: { spaceId: paramsSpaceId }
+}: {
+  params: SpaceItemParams;
+}) {
+  const space = await prisma.space.findUnique({
+    where: { id: paramsSpaceId },
+    include: { Lists: true }
+  });
+
+  if (!space) {
+    notFound();
+  }
+
+  return (
+    <section>
+      <div className="flex gap-4 mb-4 mx-4 items-center justify-start">
+        <h2 className="text-3xl border max-w-fit px-4 py-2 rounded-2xl bg-primary text-primary-foreground">
+          <Link href={`/spaces/${space.id}`}>☀︎ {space.name}</Link>
+        </h2>
+        <Link
+          href={`/spaces/${space.id}/lists/add`}
+          className="text-3xl border px-4 py-2 rounded-2xl"
+        >
+          +
+        </Link>
+      </div>
+      {!space.Lists.length ? (
+        <div>
+          <h2 className="text-2xl">No List was Found</h2>
+        </div>
+      ) : (
+        <ul className="flex flex-wrap gap-2">
+          {space.Lists.map((list) => (
+            <li
+              key={list.id}
+              className="text-xl text-center min-w-[200px] p-2 rounded-lg border"
+            >
+              <Link
+                href={`/spaces/${space.id}/lists/${list.id}`}
+                className="block"
+              >
+                {list.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

app/spaces/add/page.tsx

@@ -1,21 +1,16 @@
+import { addSpace } from '@/app/actions/space.actions';
 import { FormField } from '@/components/formField';
 import { Button } from '@/components/ui/button';
 
-export default function NewSpace() {
+export default async function NewSpace() {
   return (
     <div>
-      <h1>ADD NEW SPACE</h1>
+      <h2>ADD NEW SPACE</h2>
 
-      <form>
+      <form action={addSpace}>
         <FormField type="text" label="Name" name="name" />
-        <FormField type="number" label="Price" name="price" />
-        <FormField
-          type="date"
-          label="Date"
-          name="date"
-          defaultValue={new Date().toLocaleDateString('en-CA')}
-        />
-        <Button className="w-full mt-3">Submit</Button>
+        {/* <FormField type="text" name="userId" hidden readOnly defaultValue={session?.user.} /> */}
+        <Button className="w-full mt-4">Submit</Button>
       </form>
     </div>
   );

app/spaces/page.tsx

@@ -1,41 +1,62 @@
+import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
 import { auth } from '@/lib/auth';
 import { prisma } from '@/lib/prisma';
 
-export default async function Groups() {
+export default async function Spaces() {
   const session = await auth();
 
-  const email = session?.user?.email;
+  const id = session?.user?.id;
 
-  if (!email) {
+  if (!id) {
     redirect('/');
   }
 
-  const user = await prisma.user.findUnique({
+  const spaces = await prisma.space.findMany({
     where: {
-      email
-    },
-    include: {
-      spaces: true
+      creator: {
+        id
+      }
     }
   });
 
-  if (!user) {
-    // TODO handle it - either redirect it to sign it page or show not sign in view
-    throw new Error('handle it');
-  }
+  console.log(spaces);
 
   return (
     <main>
-      <header>
-        <h2>Your Space Management</h2>
+      <header className="mb-8 flex gap-4">
+        <h2 className="text-2xl underline">
+          <Link href={`/spaces`}>Your Spaces</Link>
+        </h2>
+
+        <Link
+          href={`/spaces/add`}
+          className="text-xl text-center border rounded-lg min-w-[50px]"
+        >
+          +
+        </Link>
       </header>
-      {user.spaces.length ? (
-        <div>your spaces</div>
-      ) : (
-        <div>no space was found</div>
-      )}
+      <div className="flex">
+        {spaces.length ? (
+          <section>
+            <ul className="flex flex-wrap gap-2">
+              {spaces.map((sp) => (
+                <li
+                  key={sp.id}
+                  className="text-xl text-center min-w-[200px] p-2 rounded-lg border"
+                >
+                  <Link href={`/spaces/${sp.id}`} className="block">
+                    {sp.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ) : (
+          <section>no space was found</section>
+        )}
+      </div>
     </main>
   );
 }

components/Nav.tsx

@@ -4,7 +4,6 @@ import { userAgent } from 'next/server';
 import { auth } from '@/lib/auth';
 
 // import { AddExpense } from './AddExpense/AddExpense';
-import { SpacesNav } from './SpacesNav';
 import { UserAccount } from './UserAccount/UserAccount';
 
 export async function Nav() {
@@ -18,7 +17,6 @@ export async function Nav() {
     <nav className="fixed bottom-0 w-full justify-end items-center flex px-4 py-2 border gap-3">
       {/* TODO move to general place */}
       {/* <AddExpense deviceType={deviceType || 'desktop'} /> */}
-      {session ? <SpacesNav /> : null}
 
       <UserAccount session={session} />
     </nav>