Lists

.eslintrc.json

@@ -10,6 +10,9 @@
     ".next/**/*"
   ],
   "rules": {
+    "no-unused-vars": "warn",
+    "no-console": "error",
+    "newline-before-return": "error",
     "import/order": [
       "error",
       {

app/actions/list.action.ts

@@ -1,19 +1,19 @@
 'use server';
 
-import { revalidateTag } from 'next/cache';
+// 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({
+const addListSchema = z.object({
   name: z.string(),
   spaceId: z.string()
 });
 
 export const addList = async (formData: FormData) => {
-  const { name, spaceId } = schema.parse({
+  const { name, spaceId } = addListSchema.parse({
     name: formData.get('name'),
     spaceId: formData.get('spaceId')
   });
@@ -23,23 +23,30 @@ export const addList = async (formData: FormData) => {
   const newList = await prisma.list.create({
     data: {
       name,
-      Space: {
-        connect: {
-          id: spaceId
-        }
-      },
-      creator: {
-        connect: {
-          id: session?.user.id
-        }
-      }
+      Space: { connect: { id: spaceId } },
+      creator: { connect: { id: session?.user.id } }
     },
-    select: {
-      id: true
-    }
+    select: { id: true }
   });
 
-  revalidateTag(`/spaces/${spaceId}`);
-
+  // revalidateTag(`/spaces/${spaceId}`);
   redirect(`/spaces/${spaceId}/lists/${newList.id}`);
 };
+
+const changeFaveSchema = z.object({
+  listId: z.string(),
+  favorite: z.boolean()
+});
+
+export const changeFaveStatus = async (formData: FormData) => {
+  const { listId: id, favorite } = changeFaveSchema.parse({
+    listId: formData.get('listId'),
+    spaceId: formData.get('spaceId'),
+    favorite: formData.get('favorite') === 'on'
+  });
+
+  await prisma.list.update({
+    where: { id },
+    data: { favorite: favorite }
+  });
+};

app/page.tsx

@@ -1,7 +1,48 @@
-export default function Home() {
+import { SpaceList } from '@/components/ListItem';
+import { auth } from '@/lib/auth';
+import { prisma } from '@/lib/prisma';
+
+export default async function Home() {
+  const session = await auth();
+
+  if (!session) {
+    return (
+      <main>
+        <h1>hello</h1>
+      </main>
+    );
+  }
+
+  const lists = await prisma.list.findMany({
+    where: {
+      favorite: true,
+      creatorId: session.user.id
+    },
+    include: {
+      items: {
+        include: {
+          creator: {
+            select: {
+              name: true
+            }
+          }
+        }
+      }
+    }
+  });
+
   return (
     <main>
-      <h1>hello</h1>
+      <section className="px-2">
+        <h2 className="text-4xl">Favorites</h2>
+        {lists.length > 0 && (
+          <ul className="flex flex-col gap-4 mt-4 max-w-[450px]">
+            {lists.map((list) => (
+              <SpaceList list={list} key={list.id} />
+            ))}
+          </ul>
+        )}
+      </section>
     </main>
   );
 }

app/spaces/[spaceId]/lists/[listId]/@list/components/ListCompoent.tsx

@@ -0,0 +1,78 @@
+import clsx from 'clsx';
+
+import { Label } from '@/components/ui/label';
+
+import { RemoveForm, ToggleCompleteForm } from './listsForms';
+import { RepeatStatusUpdateForm } from './RepeatStatusUpdateForm';
+
+type ListItems = Array<{
+  id: string;
+  type: 'DAILY' | 'ONCE';
+  name: string;
+  creator: { name: string | null };
+}>;
+
+type Props<List extends ListItems> = {
+  type: 'ONGOING' | 'COMPLETED';
+  items?: List;
+  listId: string;
+  spaceId: string;
+  title?: string;
+};
+
+export function ListComponent<T extends ListItems>({
+  items,
+  type,
+  listId,
+  spaceId,
+  title
+}: Props<T>) {
+  return (
+    <>
+      {title && <h3 className="text-lg mt-8">{title}</h3>}
+      <ul
+        className={clsx(
+          'flex flex-col gap-4 mt-4 max-w-[450px]',
+          type === 'COMPLETED' && 'line-through'
+        )}
+      >
+        {items?.map((item) => {
+          return (
+            <li
+              key={item.id}
+              className="flex gap-4 items-center justify-between border rounded-lg"
+            >
+              <div className="flex gap-4 items-center">
+                <RepeatStatusUpdateForm itemId={item.id} itemType={item.type} />
+                <Label
+                  className={clsx(
+                    'text-sm mb-0',
+                    type === 'COMPLETED' && 'opacity-40'
+                  )}
+                >
+                  {item.name}{' '}
+                  <span className="text-xs text-gray-400">
+                    (By {item.creator.name?.split(' ')[0]})
+                  </span>
+                </Label>
+              </div>
+              <div className="flex gap-2">
+                <ToggleCompleteForm
+                  listId={listId}
+                  itemId={item.id}
+                  spaceId={spaceId}
+                  type={type}
+                />
+                <RemoveForm
+                  listId={listId}
+                  itemId={item.id}
+                  spaceId={spaceId}
+                />
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </>
+  );
+}

app/spaces/[spaceId]/lists/[listId]/@list/components/RepeatStatusUpdateForm.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useState } from 'react';
+
+import Image from 'next/image';
+
+import { Toggle } from '@/components/ui/toggle';
+
+import { toggleRepeatStatus } from '../../listItem.action';
+import recurringIcon from '../../recurring_icon.png';
+
+type Props = {
+  itemId: string;
+  itemType: 'DAILY' | 'ONCE';
+};
+export function RepeatStatusUpdateForm({ itemId, itemType }: Props) {
+  const [repeatStatus, setRepeatStatus] = useState(itemType);
+
+  const isDaily = repeatStatus === 'DAILY';
+
+  return (
+    <form
+      action={async () => {
+        const repeat = repeatStatus === 'DAILY' ? 'ONCE' : 'DAILY';
+
+        const formData = new FormData();
+
+        formData.append('id', itemId);
+        formData.append('repeat', repeat);
+
+        setRepeatStatus(repeat);
+
+        await toggleRepeatStatus(formData);
+      }}
+    >
+      <Toggle type="submit" aria-label="toggle Repetition" pressed={isDaily}>
+        <Image
+          src={recurringIcon}
+          alt="recurring icon"
+          width={24}
+          height={24}
+          className={`${isDaily ? 'opacity-100' : 'opacity-20'}`}
+        />
+      </Toggle>
+    </form>
+  );
+}

app/spaces/[spaceId]/lists/[listId]/@list/components/listsForms.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@/components/ui/button';
+import { Toggle } from '@/components/ui/toggle';
+
+import { deleteListItem, toggleCompleteStatus } from '../../listItem.action';
+
+type Props = {
+  listId: string;
+  spaceId: string;
+  itemId: string;
+};
+
+export function RemoveForm({ listId, spaceId, itemId }: Props) {
+  return (
+    <form
+      action={async (formData) => {
+        'use server';
+        formData.append('listId', listId);
+        formData.append('listItemId', itemId);
+        formData.append('spaceId', spaceId);
+
+        await deleteListItem(formData);
+      }}
+    >
+      <Toggle type="submit" aria-label="remove">
+        &#x292B;
+      </Toggle>
+    </form>
+  );
+}
+
+export function ToggleCompleteForm({
+  listId,
+  spaceId,
+  itemId,
+  type
+}: Props & { type: 'ONGOING' | 'COMPLETED' }) {
+  return (
+    <form
+      action={async (formData) => {
+        'use server';
+        formData.append('listId', listId);
+        formData.append('listItemId', itemId);
+        formData.append('spaceId', spaceId);
+        if (type === 'ONGOING') {
+          formData.append('isComplete', 'on');
+        }
+
+        await toggleCompleteStatus(formData);
+      }}
+    >
+      <Button type="submit" aria-label="complete" variant="ghost" size="icon">
+        {type === 'COMPLETED' ? '↻' : '✓'}
+      </Button>
+    </form>
+  );
+}

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

@@ -0,0 +1,56 @@
+import { prisma } from '@/lib/prisma';
+import { isCompleted } from '@/utils/listItem';
+
+import { ListComponent } from './components/ListCompoent';
+import { SpaceItemParams } from '../../../page';
+
+type ListItemParams = SpaceItemParams & {
+  listId: string;
+};
+
+export default async function List({ params }: { params: ListItemParams }) {
+  const items = await prisma.listItem.findMany({
+    where: {
+      list: { id: params.listId }
+    },
+    include: { creator: { select: { name: true } } }
+  });
+
+  const { ongoingItems, completedItems } = items.reduce<{
+    ongoingItems: typeof items;
+    completedItems: typeof items;
+  }>(
+    (acc, item) => {
+      if (isCompleted(item.completedAt)) {
+        acc.completedItems.push(item);
+
+        return acc;
+      }
+
+      acc.ongoingItems.push(item);
+
+      return acc;
+    },
+    { ongoingItems: [], completedItems: [] }
+  );
+
+  return (
+    <>
+      <ListComponent
+        type="ONGOING"
+        items={ongoingItems}
+        listId={params.listId}
+        spaceId={params.spaceId}
+        title="Ongoing"
+      />
+
+      <ListComponent
+        type="COMPLETED"
+        items={completedItems}
+        listId={params.listId}
+        spaceId={params.spaceId}
+        title="Completed"
+      />
+    </>
+  );
+}