From eef369ecc73bed31f10447a17fa750d34c66e4dc Mon Sep 17 00:00:00 2001 From: S M Tareq Aziz Date: Mon, 29 Apr 2024 15:20:35 +0600 Subject: [PATCH 1/2] feat : Database integrated with backend --- packages/backend/src/index.ts | 140 ++++++++++++++++++---------------- 1 file changed, 75 insertions(+), 65 deletions(-) diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts index f94d6794..22b87da3 100644 --- a/packages/backend/src/index.ts +++ b/packages/backend/src/index.ts @@ -3,49 +3,31 @@ import { Elysia, t } from 'elysia' import { migrate } from 'drizzle-orm/bun-sqlite/migrator' import { db } from './db/db' import { todos } from './db/schema' +import { eq } from 'drizzle-orm' migrate(db, { migrationsFolder: './drizzle' }) -const todoList = [ - { - id: 1, - starred: false, - completed: false, - desc: 'Wake up at 5am' - }, - { - id: 2, - starred: false, - completed: false, - desc: 'Brush your teeth' - }, - { - id: 3, - starred: false, - completed: false, - desc: "I don't know what to do!" - }, - { - id: 4, - starred: true, - completed: true, - desc: "Yeah, I don't know yet!" - } -] - const app = new Elysia() .use(cors()) .get('/todos', () => db.select().from(todos)) .get( '/todos/:id', - ({ params, error }) => { - const todo = todoList.find((todo) => todo.id === params.id) - - if (!todo) { - return error(404, 'Todo not found.') + async ({ params, error }) => { + try { + const [todo] = await db + .select() + .from(todos) + .where(eq(todos.id, params.id)) + + if (!todo) { + return error(404, 'Todo not found.') + } + + return todo + } catch (err) { + console.error(err) + return error(500, 'Internal Server Error') } - - return todo }, { params: t.Object({ @@ -55,28 +37,43 @@ const app = new Elysia() ) .post( '/todos', - async ({ body, set }) => { - await db.insert(todos).values(body) - set.status = 'Created' + async ({ body, set, error }) => { + try { + const [newTodo] = await db.insert(todos).values(body).returning() + set.status = 'Created' + return newTodo + } catch (err) { + console.error(err) + return error(500, 'Internal Server Error') + } }, { body: t.Object({ - desc: t.String() + desc: t.String(), + starred: t.Boolean(), + completed: t.Boolean() }) } ) .put( '/todos/:id', - ({ params, body, error }) => { - const todo = todoList.find((todo) => todo.id === params.id) - - if (!todo) { - return error(204, 'Todo can not be updated.') + async ({ params, body, error }) => { + try { + const [updatedTodo] = await db + .update(todos) + .set(body) + .where(eq(todos.id, params.id)) + .returning() + + if (!updatedTodo) { + return error(204, 'Todo can not be updated.') + } + + return updatedTodo + } catch (err) { + console.error(err) + return error(500, 'Internal Server Error') } - - Object.assign(todo, body) - - return todo }, { params: t.Object({ @@ -91,16 +88,23 @@ const app = new Elysia() ) .patch( '/todos/:id', - ({ params, body, error }) => { - const todo = todoList.find((todo) => todo.id === params.id) - - if (!todo) { - return error(204, 'Todo can not be updated.') + async ({ params, body, error }) => { + try { + const [updatedTodo] = await db + .update(todos) + .set(body) + .where(eq(todos.id, params.id)) + .returning() + + if (!updatedTodo) { + return error(204, 'Todo can not be updated.') + } + + return updatedTodo + } catch (err) { + console.error(err) + return error(500, 'Internal Server Error') } - - Object.assign(todo, body) - - return todo }, { params: t.Object({ @@ -115,16 +119,22 @@ const app = new Elysia() ) .delete( '/todos/:id', - ({ params, error }) => { - const todo = todoList.find((todo) => todo.id === params.id) - - if (!todo) { - return error(204, 'Todo can not be deleted.') + async ({ params, error }) => { + try { + const [deletedTodo] = await db + .delete(todos) + .where(eq(todos.id, params.id)) + .returning() + + if (!deletedTodo) { + return error(204, 'Todo can not be deleted.') + } + + return deletedTodo + } catch (err) { + console.error(err) + return error(500, 'Internal Server Error') } - - todoList.splice(todoList.indexOf(todo), 1) - - return todo }, { params: t.Object({ From 9fb99164f39a91ce44747fb7e6375408bd96b518 Mon Sep 17 00:00:00 2001 From: S M Tareq Aziz Date: Mon, 29 Apr 2024 16:23:23 +0600 Subject: [PATCH 2/2] feat : frontend connected to backend --- packages/frontend/src/App.tsx | 82 +++++++++++++++++++++++++---------- 1 file changed, 58 insertions(+), 24 deletions(-) diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx index 68e45643..adea9ba0 100644 --- a/packages/frontend/src/App.tsx +++ b/packages/frontend/src/App.tsx @@ -79,34 +79,68 @@ function App() { }) }, []) - const handleDelete = (id: number) => - setTodos(todos.filter((todo) => todo.id !== id)) - - const toggleStar = (id: number) => - setTodos( - todos.map((todo) => - todo.id === id ? { ...todo, starred: !todo.starred } : todo - ) - ) - - const toggleChecked = (id: number) => - setTodos( - todos.map((todo) => - todo.id === id ? { ...todo, completed: !todo.completed } : todo - ) - ) - - const addTodo = () => { - setTodos([ - ...todos, - { - id: todos.length, + const addTodo = async () => { + try { + const res = await client.todos.post({ desc: inputRef.current!.value, starred: false, completed: false + }) + + if (res.error) { + res.error + } + + if (res.data) { + setTodos([...todos, res.data]) } - ]) - inputRef.current!.value = '' + + inputRef.current!.value = '' + } catch (error) { + console.error('An error occurred while adding todo:', error) + } + } + const handleDelete = async (id: number) => { + try { + const res = await client.todos({ id }).delete() + if (res.error) { + res.error + } else { + setTodos(todos.filter((todo) => todo.id !== id)) + } + } catch (error) { + console.error('An error occurred while deleting:', error) + } + } + + const toggleStar = (id: number) => { + const currentStarred = todos.find((todo) => todo.id === id)?.starred + client + .todos({ id }) + .patch({ starred: !currentStarred }) + .then((res) => { + if (res.error) { + res.error + } + if (res.data) { + setTodos(todos.map((todo) => (todo.id === id ? res.data : todo))) + } + }) + } + + const toggleChecked = (id: number) => { + const currentChecked = todos.find((todo) => todo.id === id)?.completed + client + .todos({ id }) + .patch({ completed: !currentChecked }) + .then((res) => { + if (res.error) { + res.error + } + if (res.data) { + setTodos(todos.map((todo) => (todo.id === id ? res.data : todo))) + } + }) } return (