From b8220780db0a6acd5b272f9bea4b5b1322a9c9cf Mon Sep 17 00:00:00 2001 From: mfaux Date: Tue, 15 Oct 2024 07:55:01 +0200 Subject: [PATCH] feat: read and display tasks --- app/tasks/_components/tasks.tsx | 71 +++++++++++++++++++++++++++++++++ app/tasks/page.tsx | 8 +++- components/ui/scroll-area.tsx | 48 ++++++++++++++++++++++ components/ui/shell/main.tsx | 4 +- db/queries.ts | 18 +++++++++ db/seed.ts | 59 +++++++++++++++++++++++---- db/types.ts | 3 ++ package.json | 1 + pnpm-lock.yaml | 33 +++++++++++++++ 9 files changed, 233 insertions(+), 12 deletions(-) create mode 100644 app/tasks/_components/tasks.tsx create mode 100644 components/ui/scroll-area.tsx create mode 100644 db/queries.ts create mode 100644 db/types.ts diff --git a/app/tasks/_components/tasks.tsx b/app/tasks/_components/tasks.tsx new file mode 100644 index 0000000..8a59525 --- /dev/null +++ b/app/tasks/_components/tasks.tsx @@ -0,0 +1,71 @@ +'use client'; + +import { ScrollArea } from '@/components/ui/scroll-area'; +import { Task } from '@/db/types'; +import { cn } from '@/lib/utils'; +import { useState } from 'react'; + +type TasksProps = { + tasks: Task[]; +}; + +export default function Tasks({ tasks }: TasksProps) { + const [task, setTask] = useState({ selected: '' }); + return ( + +
+ {tasks.map((item) => ( + + ))} +
+ + ); +} diff --git a/app/tasks/page.tsx b/app/tasks/page.tsx index 790f0ea..ab1becf 100644 --- a/app/tasks/page.tsx +++ b/app/tasks/page.tsx @@ -1,3 +1,7 @@ -export default function Tasks() { - return
Tasks
; +import { getAllTasks } from '@/db/queries'; +import Tasks from './_components/tasks'; + +export default async function TasksPage() { + const tasks = await getAllTasks('fox', 50, 0); + return ; } diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx new file mode 100644 index 0000000..0b4a48d --- /dev/null +++ b/components/ui/scroll-area.tsx @@ -0,0 +1,48 @@ +"use client" + +import * as React from "react" +import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" + +import { cn } from "@/lib/utils" + +const ScrollArea = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + {children} + + + + +)) +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = "vertical", ...props }, ref) => ( + + + +)) +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName + +export { ScrollArea, ScrollBar } diff --git a/components/ui/shell/main.tsx b/components/ui/shell/main.tsx index 8c9ede9..1f6584c 100644 --- a/components/ui/shell/main.tsx +++ b/components/ui/shell/main.tsx @@ -5,7 +5,5 @@ import type { PropsWithChildren } from 'react'; type HeaderBarProps = PropsWithChildren<{}>; export const Main = ({ children }: HeaderBarProps) => { - return ( -
{children}
- ); + return
{children}
; }; diff --git a/db/queries.ts b/db/queries.ts new file mode 100644 index 0000000..de328e3 --- /dev/null +++ b/db/queries.ts @@ -0,0 +1,18 @@ +'use server'; + +import { eq } from 'drizzle-orm'; +import { db } from './drizzle'; +import { tasks } from './schema'; + +export const getAllTasks = async ( + userId: string, + limit: number, + offset: number, +) => { + return await db + .select() + .from(tasks) + .limit(limit) + .offset(offset) + .where(eq(tasks.userId, userId)); +}; diff --git a/db/seed.ts b/db/seed.ts index 47cc65e..33ea964 100644 --- a/db/seed.ts +++ b/db/seed.ts @@ -27,11 +27,11 @@ async function seedUsers() { async function seedProjects() { await db.insert(projects).values([ { - id: 'my-project', - name: 'My Project', - description: 'This is a project', + id: 'swolo', + name: 'Project management app', + description: 'Project management and note-taking app wit GTD principles.', userId: 'fox', - key: 'my-project', + key: 'swolo', }, ]); } @@ -40,13 +40,58 @@ async function seedTasks() { await db.insert(tasks).values([ { id: createId(), - title: 'My Task', - description: 'This is a task', + title: 'Implement synching', + description: 'Sync data from the cloud to the local desktop.', status: 'todo', userId: 'fox', - projectId: 'my-project', + projectId: 'swolo', key: 'my-task', }, + { + id: createId(), + title: 'Design app layout', + description: 'Create wireframes and mockups for the app.', + status: 'in-progress', + userId: 'fox', + projectId: 'swolo', + key: 'design-layout', + }, + { + id: createId(), + title: 'Develop authentication module', + description: 'Implement user login and registration functionality.', + status: 'todo', + userId: 'fox', + projectId: 'swolo', + key: 'auth-module', + }, + { + id: createId(), + title: 'Set up database', + description: 'Configure the database schema and connections.', + status: 'todo', + userId: 'fox', + projectId: 'swolo', + key: 'setup-database', + }, + { + id: createId(), + title: 'Create API endpoints', + description: 'Develop RESTful API endpoints for the app.', + status: 'todo', + userId: 'fox', + projectId: 'swolo', + key: 'create-api', + }, + { + id: createId(), + title: 'Implement frontend', + description: 'Build the frontend using React.', + status: 'todo', + userId: 'fox', + projectId: 'swolo', + key: 'implement-frontend', + }, ]); } diff --git a/db/types.ts b/db/types.ts new file mode 100644 index 0000000..3fb4213 --- /dev/null +++ b/db/types.ts @@ -0,0 +1,3 @@ +import { tasks } from './schema'; + +export type Task = typeof tasks.$inferSelect; diff --git a/package.json b/package.json index b9bf532..bc70d66 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-menubar": "^1.1.2", + "@radix-ui/react-scroll-area": "^1.2.0", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-visually-hidden": "^1.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5d50f46..2601f84 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ importers: '@radix-ui/react-menubar': specifier: ^1.1.2 version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-scroll-area': + specifier: ^1.2.0 + version: 1.2.0(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-select': specifier: ^2.1.2 version: 2.1.2(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -782,6 +785,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-scroll-area@1.2.0': + resolution: {integrity: sha512-q2jMBdsJ9zB7QG6ngQNzNwlvxLQqONyL58QbEGwuyRZZb/ARQwk3uQVbCF7GvQVOtV6EU/pDxAw3zRzJZI3rpQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-select@2.1.2': resolution: {integrity: sha512-rZJtWmorC7dFRi0owDmoijm6nSJH1tVw64QGiNIZ9PNLyBDtG+iAq+XGsya052At4BfarzY/Dhv9wrrUr6IMZA==} peerDependencies: @@ -3052,6 +3068,23 @@ snapshots: '@types/react': 18.3.11 '@types/react-dom': 18.3.1 + '@radix-ui/react-scroll-area@1.2.0(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/number': 1.1.0 + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.11)(react@18.3.1) + '@radix-ui/react-context': 1.1.1(@types/react@18.3.11)(react@18.3.1) + '@radix-ui/react-direction': 1.1.0(@types/react@18.3.11)(react@18.3.1) + '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.11)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.11)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.11 + '@types/react-dom': 18.3.1 + '@radix-ui/react-select@2.1.2(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/number': 1.1.0