Merge pull request #29 from d4vidsha/d4vidsha/task-creation

feat: create task list page in `/tasks`

Author: d4vidsha

frontend/Dockerfile

@@ -1,5 +1,5 @@
 # Stage 0, "build-stage", based on Node.js, to build and compile the frontend
-FROM node:20 as build-stage
+FROM node:20 AS build-stage
 
 WORKDIR /app
 

frontend/src/components/Common/Navbar.tsx

@@ -1,17 +1,15 @@
 import { Button, Flex, Icon, useDisclosure } from "@chakra-ui/react"
+import type { ComponentType, ElementType } from "react"
 import { FaPlus } from "react-icons/fa"
 
-import AddUser from "../Admin/AddUser"
-import AddItem from "../Items/AddItem"
-
 interface NavbarProps {
   type: string
+  addModalAs: ComponentType | ElementType
 }
 
-const Navbar = ({ type }: NavbarProps) => {
-  const addUserModal = useDisclosure()
-  const addItemModal = useDisclosure()
-
+const Navbar = ({ type, addModalAs }: NavbarProps) => {
+  const addModal = useDisclosure()
+  const AddModal = addModalAs
   return (
     <>
       <Flex py={8} gap={4}>
@@ -26,12 +24,11 @@ const Navbar = ({ type }: NavbarProps) => {
           variant="primary"
           gap={1}
           fontSize={{ base: "sm", md: "inherit" }}
-          onClick={type === "User" ? addUserModal.onOpen : addItemModal.onOpen}
+          onClick={addModal.onOpen}
         >
           <Icon as={FaPlus} /> Add {type}
         </Button>
-        <AddUser isOpen={addUserModal.isOpen} onClose={addUserModal.onClose} />
-        <AddItem isOpen={addItemModal.isOpen} onClose={addItemModal.onClose} />
+        <AddModal isOpen={addModal.isOpen} onClose={addModal.onClose} />
       </Flex>
     </>
   )

frontend/src/components/navbar.tsx

@@ -15,7 +15,7 @@ import UserMenu from "./user-menu"
 
 const navigation = [
   { icon: Calendar, title: "Calendar", path: "/" },
-  { icon: CheckSquare2, title: "Tasks", path: "/items" },
+  { icon: CheckSquare2, title: "Tasks", path: "/tasks" },
 ]
 
 const NavBar = () => {

frontend/src/components/user-auth-form.tsx

@@ -62,7 +62,12 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Input placeholder="Email" type="email" {...field} />
+                  <Input
+                    placeholder="Email"
+                    type="email"
+                    disabled={isLoading}
+                    {...field}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -78,6 +83,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                     <Input
                       placeholder="Password"
                       type={showPassword ? "text" : "password"}
+                      disabled={isLoading}
                       {...field}
                     />
                     <EyeToggle

frontend/src/components/user-menu.tsx

@@ -41,7 +41,7 @@ const UserMenu = () => {
             </Link>
           </DropdownMenuItem>
           <DropdownMenuItem asChild>
-            <Link to="/admin">
+            <Link to="/admin" search>
               <Users className="mr-2 h-4 w-4" />
               <span>User Management</span>
             </Link>

frontend/src/routeTree.gen.ts

@@ -17,6 +17,7 @@ import { Route as RecoverPasswordImport } from './routes/recover-password'
 import { Route as LoginImport } from './routes/login'
 import { Route as LayoutImport } from './routes/_layout'
 import { Route as LayoutIndexImport } from './routes/_layout/index'
+import { Route as LayoutTasksImport } from './routes/_layout/tasks'
 import { Route as LayoutSettingsImport } from './routes/_layout/settings'
 import { Route as LayoutItemsImport } from './routes/_layout/items'
 import { Route as LayoutAdminImport } from './routes/_layout/admin'
@@ -53,6 +54,11 @@ const LayoutIndexRoute = LayoutIndexImport.update({
   getParentRoute: () => LayoutRoute,
 } as any)
 
+const LayoutTasksRoute = LayoutTasksImport.update({
+  path: '/tasks',
+  getParentRoute: () => LayoutRoute,
+} as any)
+
 const LayoutSettingsRoute = LayoutSettingsImport.update({
   path: '/settings',
   getParentRoute: () => LayoutRoute,
@@ -104,6 +110,10 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutSettingsImport
       parentRoute: typeof LayoutImport
     }
+    '/_layout/tasks': {
+      preLoaderRoute: typeof LayoutTasksImport
+      parentRoute: typeof LayoutImport
+    }
     '/_layout/': {
       preLoaderRoute: typeof LayoutIndexImport
       parentRoute: typeof LayoutImport
@@ -118,6 +128,7 @@ export const routeTree = rootRoute.addChildren([
     LayoutAdminRoute,
     LayoutItemsRoute,
     LayoutSettingsRoute,
+    LayoutTasksRoute,
     LayoutIndexRoute,
   ]),
   LoginRoute,

frontend/src/routes/_layout/tasks.tsx

@@ -0,0 +1,62 @@
+import { createFileRoute } from "@tanstack/react-router"
+import { motion } from "framer-motion"
+import { Check, Circle } from "lucide-react"
+import { useState } from "react"
+
+export const Route = createFileRoute("/_layout/tasks")({
+  component: Tasks,
+})
+
+const tasks = [
+  { id: 1, title: "Study for 3 hours", completed: true },
+  { id: 2, title: "Create task list", completed: false },
+  { id: 3, title: "Clean bedroom", completed: false },
+  {
+    id: 4,
+    title:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    completed: false,
+  },
+]
+
+function Tasks() {
+  return (
+    <div className="mx-20 my-10">
+      <div className="flex justify-center">
+        <div className="flex-col shrink w-[800px] min-w-56">
+          <header className="mb-4">
+            <h1 className="text-3xl font-bold">Inbox</h1>
+          </header>
+          <main className="flex flex-col">
+            {tasks.map((task) => (
+              <Task key={task.id} task={task} />
+            ))}
+          </main>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Task({
+  task,
+}: { task: { id: number; title: string; completed: boolean } }) {
+  const [isCompleted, setIsCompleted] = useState(task.completed)
+  return (
+    <div className="flex gap-2 shrink-1 border-b py-3">
+      <motion.button
+        whileTap={{ scale: 1.2 }}
+        onTap={() => setIsCompleted(!isCompleted)}
+        className="flex-none self-start"
+      >
+        <div className="grid grid-cols-1 grid-rows-1">
+          <Circle className="h-5 w-5 row-start-1 row-end-1 col-start-1 col-end-1" />
+          <div className="flex justify-center items-center row-start-1 row-end-1 col-start-1 col-end-1">
+            {isCompleted && <Check strokeWidth={4.5} className="h-3 w-3" />}
+          </div>
+        </div>
+      </motion.button>
+      <p className="text-sm line-clamp-4 text-ellipsis">{task.title}</p>
+    </div>
+  )
+}