chore: build all tasks page

Jay-Karia · Sep 1, 2024 · ff2e1d6 · ff2e1d6
1 parent e42060f
commit ff2e1d6
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tasks",
-  "version": "0.1.0",
+  "version": "1.0.0-beta.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/src/app/(tasks)/tasks/page.tsx b/src/app/(tasks)/tasks/page.tsx
@@ -1,9 +1,39 @@
-import { Metadata } from "next";
+"use client";
 
-export const metadata: Metadata = {
-  title: "Tasks | All Tasks",
-};
+import { useQuery } from "@tanstack/react-query";
+import { getAllTasks } from "@/actions/task";
+import Link from "next/link";
+import { Checkbox } from "@/components/ui/checkbox";
+import Task from "@/components/task";
 
 export default function TasksPage() {
-  return <div className="w-full">All Tasks</div>;
+  const query = useQuery({
+    queryKey: ["tasks"],
+    queryFn: async () => await getAllTasks(),
+  });
+
+  return (
+    <div className="flex h-full w-full flex-col gap-4 p-2">
+      <h4 className="overflow-hidden break-words text-lg font-medium tracking-tight text-blue-700">
+        All Tasks
+      </h4>
+      {query.isLoading ? (
+        <>Loading ...</>
+      ) : query.isError ? (
+        <>{query.error}</>
+      ) : query.data && query.data.length > 0 ? (
+        <div className="flex flex-col bg-white">
+          {query.data.map(task => {
+            return (
+              <Link href={`/list/${task.listId}`}>
+                <Task task={task} viewOnly />
+              </Link>
+            );
+          })}
+        </div>
+      ) : (
+        <>No tasks found</>
+      )}
+    </div>
+  );
 }
diff --git a/src/components/add-list.tsx b/src/components/add-list.tsx
@@ -20,9 +20,7 @@ export default function AddList({ children }: { children: React.ReactNode }) {
         <DialogHeader>
           <DialogTitle>Add new List</DialogTitle>
         </DialogHeader>
-        <div>
-          <ListForm />
-        </div>
+        <ListForm />
       </DialogContent>
     </Dialog>
   );

diff --git a/src/components/add-task.tsx b/src/components/add-task.tsx
@@ -37,7 +37,7 @@ export default function AddTask({ listId }: Props) {
     },
   });
   return (
-    <div className="w-[90%]">
+    <div className="sm:w-[100%]">
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
           <FormField

diff --git a/src/components/all-tasks.tsx b/src/components/all-tasks.tsx
@@ -14,14 +14,13 @@ export default function AllTasks({ listId }: Props) {
   });
 
   return (
-    // <div>
     <ScrollArea className="h-full">
       {query.isLoading ? (
         <>Loading ...</>
       ) : query.isError ? (
         <>{query.error}</>
       ) : query.data && query.data.length > 0 ? (
-        <div className="flex w-[90%] flex-col rounded-sm border border-t-0 bg-white shadow-sm">
+        <div className="flex flex-col rounded-sm border border-t-0 bg-white shadow-sm">
           {query.data.map(task => {
             return (
               <div key={task.id}>
@@ -33,7 +32,6 @@ export default function AllTasks({ listId }: Props) {
       ) : (
         <>No tasks found</>
       )}
-      {/* </div> */}
     </ScrollArea>
   );
 }
diff --git a/src/components/list-form.tsx b/src/components/list-form.tsx
@@ -55,7 +55,6 @@ export default function ListForm() {
               <FormControl>
                 <Input {...field} />
               </FormControl>
-              <FormDescription>Add list title</FormDescription>
               <FormMessage />
             </FormItem>
           )}

diff --git a/src/components/list-page-header.tsx b/src/components/list-page-header.tsx
@@ -13,7 +13,7 @@ import { AiOutlineEllipsis } from "react-icons/ai";
 
 export default function ListPageHeader({ list }: { list: List }) {
   return (
-    <div className="flex w-[90%] flex-wrap items-center gap-2 text-blue-700">
+    <div className="flex items-center gap-2 text-blue-700">
       <span className="flex gap-2 overflow-hidden">
         <PiListBullets size={25} className="min-w-6" />
         <h4 className="overflow-hidden break-words text-lg font-medium tracking-tight">

diff --git a/src/components/task.tsx b/src/components/task.tsx
@@ -17,9 +17,10 @@ import DeleteTask from "./delete-task";
 
 type Props = {
   task: TaskType;
+  viewOnly: boolean;
 };
 
-export default function Task({ task }: Props) {
+export default function Task({ task, viewOnly = false }: Props) {
   const queryClient = useQueryClient();
   const isCompleted = task.completed;
   const mutation = useMutation({
@@ -38,29 +39,32 @@ export default function Task({ task }: Props) {
       <div className="flex aspect-square items-center justify-center p-4 outline-1 outline-gray-300 hover:outline">
         <Checkbox
           onClick={() => {
-            mutation.mutate();
+            if (!viewOnly) mutation.mutate();
           }}
           checked={task.completed}
+          disabled={viewOnly}
         />
       </div>
       <div className="flex w-full items-center justify-start outline-1 outline-gray-300 hover:outline">
         <small className="px-4 text-sm font-normal leading-none">{task.title}</small>
       </div>
-      <div className="mx-2 flex items-center justify-center p-2 outline-gray-300">
-        <DropdownMenu>
-          <DropdownMenuTrigger className="hover:cursor-pointer">
-            <HiMiniEllipsisHorizontal className="text-blue-700" />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem asChild>
-              <RenameTask task={task} />
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <DeleteTask taskId={task.id} listId={task.listId} />
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
+      {!viewOnly && (
+        <div className="mx-2 flex items-center justify-center p-2 outline-gray-300">
+          <DropdownMenu>
+            <DropdownMenuTrigger className="hover:cursor-pointer">
+              <HiMiniEllipsisHorizontal className="text-blue-700" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem asChild>
+                <RenameTask task={task} />
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <DeleteTask taskId={task.id} listId={task.listId} />
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/schemas/task.ts b/src/schemas/task.ts
@@ -1,5 +1,5 @@
 import { z } from "zod";
 
 export const taskSchema = z.object({
-  title: z.string().min(2),
+  title: z.string().min(2).max(50),
 });