From 9d65358b25bbfb7116129761ef954aa6dd576972 Mon Sep 17 00:00:00 2001 From: temu man Date: Wed, 29 Nov 2023 08:40:21 -0600 Subject: [PATCH 1/3] Edit task component added --- app.js | 26 ++++---- client/index.html | 10 ++- client/src/pages/EditTask.jsx | 121 +++++++++++++++++++++++++++++++++- client/src/pages/Home.jsx | 86 ++++++++++++------------ client/vite.config.js | 3 + 5 files changed, 186 insertions(+), 60 deletions(-) diff --git a/app.js b/app.js index 2077d43..dc7cfd8 100644 --- a/app.js +++ b/app.js @@ -8,11 +8,11 @@ app.use(cors()) const connection = mysql.createConnection({ - user: "task-user", - host: "localhost", - database: "task-db", - password: "123456", -}) + user: "myDBuser", + password: "Testme1234", + host: "127.0.0.1", + database: "workout", +}); connection.connect((err) => { if (err) { @@ -27,6 +27,13 @@ connection.connect((err) => { // middleware app.use(express.json()) +// create table +const taskTable = ` CREATE TABLE Task ( + id INT NOT NULL AUTO_INCREMENT, + task_name VARCHAR(255), + completed BOOLEAN DEFAULT false, + PRIMARY KEY (id) +) `; // create task app.post('/task/create', (req, res) => { @@ -41,7 +48,7 @@ app.post('/task/create', (req, res) => { return res.send(err.message) } else { - return res.send("Task created yoni") + return res.send("Task created") } }) }) @@ -159,9 +166,4 @@ app.listen(5000, (err) => { }) -const taskTable = ` CREATE TABLE Task ( - id INT NOT NULL AUTO_INCREMENT, - task_name VARCHAR(255), - completed BOOLEAN DEFAULT false, - PRIMARY KEY (id) -) ` + diff --git a/client/index.html b/client/index.html index 6d1ca10..e541696 100644 --- a/client/index.html +++ b/client/index.html @@ -7,9 +7,15 @@ + + - - Vite + React + Task Manager diff --git a/client/src/pages/EditTask.jsx b/client/src/pages/EditTask.jsx index 1a168d5..cb8fa38 100644 --- a/client/src/pages/EditTask.jsx +++ b/client/src/pages/EditTask.jsx @@ -1,10 +1,125 @@ -import { useParams } from 'react-router-dom'; +import { Link, useParams } from "react-router-dom"; +import axios from "../axiosConfig"; +import { useState, useEffect } from "react"; function EditTask() { + const [tasks, settasks] = useState([]); + const [taskName, setTaskName] = useState(""); const { id } = useParams(); + const [formStatus, setformStatus] = useState({ + formMsg: "", + formSuccess: true, + }); + // for checkbox + const [isChecked, setIsChecked] = useState(false); + const handleCheckboxChange = (e) => { + setIsChecked(e.target.checked); + }; + console.log(isChecked); + // fetch data + async function fetchData() { + try { + const { data } = await axios("/task"); + // console.log(data); + const filteredData = data.filter((item) => item.id == id); - console.log(id); + settasks(() => { + return filteredData; + }); + } catch (error) { + console.log(error); + } + } + console.log(tasks); - return
EditTask - {id}
; + // fetch + useEffect(() => { + fetchData(); + }, []); + + // console.log(id); + // edit status alert + function formStatusLOgic(msg, status) { + setformStatus({ + formMsg: msg, + formSuccess: status, + }); + setTimeout(() => { + setformStatus({ + formMsg: "", + formSuccess: true, + }); + }, 3000); + } + // update task + async function updateTask(e) { + e.preventDefault(); + try { + let { data } = await axios.patch("/task/" + id, { + name: taskName, + completed: isChecked, + }); + console.log(data); + formStatusLOgic("Success edited task", true); + } catch (error) {} + } + + return ( +
+
+

Edit task

+ {tasks.map((item, i) => ( +
+
+
Task id:
{" "} +
{item.id}
+
+
+
Task name:
+
+ setTaskName(e.target.value)} + name="name" + className="task-input" + placeholder="e.g. learn nodejs" + /> +
+
+
+
Completed
+
+ +
+
+ + +
+ {formStatus.formMsg} +
+
+ ))} +
+
+ + + + +
+
+ ); } export default EditTask; diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx index f6d37a1..879f63c 100644 --- a/client/src/pages/Home.jsx +++ b/client/src/pages/Home.jsx @@ -1,16 +1,16 @@ -import { useState, useEffect } from 'react'; -import { Link } from 'react-router-dom'; +import { useState, useEffect } from "react"; +import { Link } from "react-router-dom"; -import axios from '../axiosConfig'; +import axios from "../axiosConfig"; function Home() { const [tasks, settasks] = useState([]); const [isLoading, setisLoding] = useState(false); // task name state - const [taskName, settaskName] = useState(''); + const [taskName, settaskName] = useState(""); const [formStatus, setformStatus] = useState({ - formMsg: '', + formMsg: "", formSuccess: true, }); @@ -18,10 +18,12 @@ function Home() { async function fetchData() { try { setisLoding(true); - const { data } = await axios('/task'); + const { data } = await axios("/task"); console.log(data); settasks(data); - setisLoding(false); + setTimeout(() => { + setisLoding(false); + }, 1000); } catch (error) { setisLoding(false); console.log(error); @@ -35,7 +37,7 @@ function Home() { }); setTimeout(() => { setformStatus({ - formMsg: '', + formMsg: "", formSuccess: true, }); }, 3000); @@ -46,15 +48,15 @@ function Home() { e.preventDefault(); try { if (!taskName) { - formStatusLOgic('task name is required', false); + formStatusLOgic("task name is required", false); return; } - await axios.post('/task/create', { + await axios.post("/task/create", { name: taskName, }); - settaskName(''); + settaskName(""); fetchData(); - formStatusLOgic('task created successfully', true); + formStatusLOgic("task created successfully", true); } catch (error) { console.log(error); } @@ -62,9 +64,15 @@ function Home() { async function handleDelete(id) { try { - await axios.delete('/task/' + id); + let sure = window.confirm("Do you want to proceed to delete the task?"); + if (sure) { + await axios.delete("/task/" + id); fetchData(); - formStatusLOgic('task deleted successfully', true); + formStatusLOgic("Task deleted successfully", true); + } else { + alert('No worries task is still there') + } + } catch (error) { console.log(error); } @@ -76,39 +84,37 @@ function Home() { return ( <> -
+

task manager

-
+
{ + onChange={(e) => { settaskName(e.target.value); }} - type='text' - name='name' - className='task-input' - placeholder='e.g. learn nodejs' + type="text" + name="name" + className="task-input" + placeholder="e.g. learn nodejs" /> -
{formStatus.formMsg}
-
+
{isLoading ? ( -

+

) : ( <> -
+
{tasks.length === 0 ? (

no tasks found

) : ( @@ -118,35 +124,29 @@ function Home() {
- + {task.task_name}
-
+
{/* */} - - + + {/* */}
diff --git a/client/vite.config.js b/client/vite.config.js index 5a33944..ecaf3ee 100644 --- a/client/vite.config.js +++ b/client/vite.config.js @@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + server: { + port:3009 + } }) From 3f3d39df1e1ca5b1649804595e8156f3fe059402 Mon Sep 17 00:00:00 2001 From: temu man Date: Wed, 29 Nov 2023 22:39:34 -0600 Subject: [PATCH 2/3] edit component updated for initial default input value --- app.js | 235 +++++++++++++++------------------- client/src/main.css | 7 + client/src/main.jsx | 5 +- client/src/pages/EditTask.jsx | 28 ++-- client/src/pages/Home.jsx | 2 +- 5 files changed, 128 insertions(+), 149 deletions(-) diff --git a/app.js b/app.js index dc7cfd8..2e2f6f0 100644 --- a/app.js +++ b/app.js @@ -1,11 +1,9 @@ -const express = require('express'); +const express = require("express"); const app = express(); -const mysql = require('mysql'); -const cors = require('cors'); - - -app.use(cors()) +const mysql = require("mysql"); +const cors = require("cors"); +app.use(cors()); const connection = mysql.createConnection({ user: "myDBuser", @@ -15,17 +13,15 @@ const connection = mysql.createConnection({ }); connection.connect((err) => { - if (err) { - console.log(err.message) - } - else { - console.log("connection established") - } -}) - + if (err) { + console.log(err.message); + } else { + console.log("connection established"); + } +}); -// middleware -app.use(express.json()) +// middleware +app.use(express.json()); // create table const taskTable = ` CREATE TABLE Task ( @@ -36,134 +32,105 @@ const taskTable = ` CREATE TABLE Task ( ) `; // create task -app.post('/task/create', (req, res) => { - const name = req.body.name - - if (!name) { - return res.status(400).send("Name is required!") - } - const createTask = `INSERT INTO Task (task_name) VALUES ('${name}')` - connection.query(createTask, (err, result) => { - if (err) { - return res.send(err.message) - } - else { - return res.send("Task created") - } - }) -}) - - +app.post("/task/create", (req, res) => { + const name = req.body.name; + + if (!name) { + return res.status(400).send("Name is required!"); + } + const createTask = `INSERT INTO Task (task_name) VALUES ('${name}')`; + connection.query(createTask, (err, result) => { + if (err) { + return res.send(err.message); + } else { + return res.send("Task created"); + } + }); +}); // real all tasks **** -app.get('/task', (req, res) => { - - - const readAllTasks = `SELECT * FROM Task ORDER BY id DESC` - - connection.query(readAllTasks, (err, result) => { - if (err) { - return res.status(500).send(err.message) - } - else { - return res.json(result) - } - }) - -}) +app.get("/task", (req, res) => { + const readAllTasks = `SELECT * FROM Task ORDER BY id DESC`; + + connection.query(readAllTasks, (err, result) => { + if (err) { + return res.status(500).send(err.message); + } else { + return res.json(result); + } + }); +}); // read single task -app.get('/task/:id', (req, res) => { - const id = req.params.id - - const readTask = `SELECT * FROM Task WHERE id = '${id}'` - - connection.query(readTask, (err, result) => { - if (err) { - return res.send(err.message) - } - else if (result.length == 0) { - return res.send(`No task with id ${id}`) - } - else { - return res.json(result) - } - }) - -}) - +app.get("/task/:id", (req, res) => { + const id = req.params.id; + + const readTask = `SELECT * FROM Task WHERE id = '${id}'`; + + connection.query(readTask, (err, result) => { + if (err) { + return res.send(err.message); + } else if (result.length == 0) { + return res.send(`No task with id ${id}`); + } else { + return res.json(result); + } + }); +}); // update single task -app.patch('/task/:id', (req, res) => { - - const id = req.params.id - const name = req.body.name - let completed = req.body.completed - - if (!name) { - return res.send("Name is required!") - } - - if (completed) { - completed = 1 - } - else { - completed = 0 - } - - const updateTask = ` UPDATE Task +app.patch("/task/:id", (req, res) => { + const id = req.params.id; + const name = req.body.name; + let completed = req.body.completed; + + if (!name) { + return res.send("Name is required!"); + } + + if (completed) { + completed = 1; + } else { + completed = 0; + } + + const updateTask = ` UPDATE Task SET task_name = "${name}", completed = ${completed} - WHERE id=${id} ` - - - connection.query(updateTask, (err, result) => { - if (err) { - return res.send(err.message) - } - else if (result.affectedRows == 0) { - return res.send(`No task with id ${id}`) - } - else { - return res.send("Task updated ") - } - }) -}) - + WHERE id=${id} `; + + connection.query(updateTask, (err, result) => { + if (err) { + return res.send(err.message); + } else if (result.affectedRows == 0) { + return res.send(`No task with id ${id}`); + } else { + return res.send("Task updated "); + } + }); +}); // Delete single task app.delete("/task/:id", (req, res) => { - const id = req.params.id - - const deleteTask = `DELETE FROM Task WHERE id = ${id} ` - - connection.query(deleteTask, (err, result) => { - if (err) { - return res.send(err.message) - } - else if (result.affectedRows == 0) { - return res.send(`No task with id ${id}`) - } - else { - return res.send("Task deleted") - } - }) - - -}) - - - - + const id = req.params.id; + + const deleteTask = `DELETE FROM Task WHERE id = ${id} `; + + connection.query(deleteTask, (err, result) => { + if (err) { + return res.send(err.message); + } else if (result.affectedRows == 0) { + return res.send(`No task with id ${id}`); + } else { + return res.send("Task deleted"); + } + }); +}); app.listen(5000, (err) => { - if (err) { - console.log(err) - } - else { - console.log("app listening on port 5000...") - } -}) - - - + if (err) { + console.log(err); + } else { + console.log("app listening on port 5000..."); + } +}); diff --git a/client/src/main.css b/client/src/main.css index 346cb09..ead667e 100644 --- a/client/src/main.css +++ b/client/src/main.css @@ -195,6 +195,13 @@ textarea { border-color: transparent; border: 1px solid var(--grey-300); } +/* custom added */ +.input-padd{ + padding: 0; +} +.checkbox{ + width: 10%; +} .form-row { margin-bottom: 1rem; } diff --git a/client/src/main.jsx b/client/src/main.jsx index ff4481b..ad2951b 100644 --- a/client/src/main.jsx +++ b/client/src/main.jsx @@ -6,7 +6,10 @@ import './main.css'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.createRoot(document.getElementById('root')).render( - + + + + ); diff --git a/client/src/pages/EditTask.jsx b/client/src/pages/EditTask.jsx index cb8fa38..503639f 100644 --- a/client/src/pages/EditTask.jsx +++ b/client/src/pages/EditTask.jsx @@ -15,7 +15,7 @@ function EditTask() { const handleCheckboxChange = (e) => { setIsChecked(e.target.checked); }; - console.log(isChecked); + // console.log(isChecked); // fetch data async function fetchData() { try { @@ -30,14 +30,18 @@ function EditTask() { console.log(error); } } - console.log(tasks); // fetch useEffect(() => { fetchData(); }, []); - - // console.log(id); + let namedTask = tasks[0]?.task_name; + + // Having the input field an initial default value with fetched task name + useEffect(() => { + setTaskName(namedTask); + },[tasks]) + // edit status alert function formStatusLOgic(msg, status) { setformStatus({ @@ -71,7 +75,7 @@ function EditTask() { {tasks.map((item, i) => (
-
Task id:
{" "} +
Task id:
{item.id}
@@ -82,8 +86,7 @@ function EditTask() { value={taskName} onChange={(e) => setTaskName(e.target.value)} name="name" - className="task-input" - placeholder="e.g. learn nodejs" + className="task-input input-padd" />
@@ -91,6 +94,7 @@ function EditTask() {
Completed
))} -
- - - - -
+ + + +
); } diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx index 879f63c..6a05003 100644 --- a/client/src/pages/Home.jsx +++ b/client/src/pages/Home.jsx @@ -64,7 +64,7 @@ function Home() { async function handleDelete(id) { try { - let sure = window.confirm("Do you want to proceed to delete the task?"); + let sure = window.confirm("Continue to delete?"); if (sure) { await axios.delete("/task/" + id); fetchData(); From 76a156a772a2856cf5f94a82b27757eaade57dea Mon Sep 17 00:00:00 2001 From: temu man Date: Wed, 29 Nov 2023 22:48:23 -0600 Subject: [PATCH 3/3] checkbox default value added based on the status --- client/src/pages/EditTask.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/client/src/pages/EditTask.jsx b/client/src/pages/EditTask.jsx index 503639f..01a50ae 100644 --- a/client/src/pages/EditTask.jsx +++ b/client/src/pages/EditTask.jsx @@ -36,11 +36,17 @@ function EditTask() { fetchData(); }, []); let namedTask = tasks[0]?.task_name; + let checkedDefault = tasks[0]?.completed + console.log(checkedDefault); - // Having the input field an initial default value with fetched task name + // Having the input field an initial default value with fetched task name n checked status useEffect(() => { setTaskName(namedTask); - },[tasks]) + setIsChecked(checkedDefault) + }, [tasks]) + + + // edit status alert function formStatusLOgic(msg, status) {