From 993f232e66c366e67b30c4eb7104149e559cfe63 Mon Sep 17 00:00:00 2001 From: rend1027 Date: Mon, 30 Jun 2025 13:38:21 -0400 Subject: [PATCH 1/6] deployment --- package-lock.json | 4 ++-- src/App.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 16f6f39..ea74e9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "ttp-react-forms", + "name": "ttp-client-side-routing", "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "ttp-react-forms", + "name": "ttp-client-side-routing", "version": "1.0.0", "license": "ISC", "dependencies": { diff --git a/src/App.jsx b/src/App.jsx index 14763f7..c9e291b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,7 +12,7 @@ const App = () => { async function fetchAllTasks() { try { - const response = await axios.get("http://localhost:8080/api/tasks"); + const response = await axios.get("https://client-side-routing-frontend-seven.vercel.app/api/tasks"); setTasks(response.data); } catch (error) { console.error("Error fetching tasks:", error); From 13a5db8f7c2e30a3a1f19127678fcc0c5bd17729 Mon Sep 17 00:00:00 2001 From: rend1027 Date: Mon, 30 Jun 2025 13:43:08 -0400 Subject: [PATCH 2/6] reset --- src/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index c9e291b..14763f7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,7 +12,7 @@ const App = () => { async function fetchAllTasks() { try { - const response = await axios.get("https://client-side-routing-frontend-seven.vercel.app/api/tasks"); + const response = await axios.get("http://localhost:8080/api/tasks"); setTasks(response.data); } catch (error) { console.error("Error fetching tasks:", error); From f62acfb9bc39cd7e6f8ac40e7844949dfdadc828 Mon Sep 17 00:00:00 2001 From: rend1027 Date: Mon, 30 Jun 2025 17:41:58 -0400 Subject: [PATCH 3/6] flo --- src/App.jsx | 11 ++++++++--- src/components/CompleteTasks.jsx | 11 +++++++++++ src/components/NavBar.jsx | 14 ++++++++------ src/components/SingleTask.jsx | 28 ++++++++++++++++++++++++++++ src/components/TaskCard.jsx | 3 ++- 5 files changed, 57 insertions(+), 10 deletions(-) create mode 100644 src/components/CompleteTasks.jsx create mode 100644 src/components/SingleTask.jsx diff --git a/src/App.jsx b/src/App.jsx index 14763f7..df2c697 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,7 +5,10 @@ import "./AppStyles.css"; import TaskList from "./components/TaskList"; import AddTask from "./components/AddTask"; import NavBar from "./components/NavBar"; -import { BrowserRouter as Router, Routes } from "react-router"; +import CompletedTasks from "./components/CompleteTasks"; +import TaskDetail from "./components/SingleTask"; +import { BrowserRouter as Router, Routes, Route } from "react-router"; +import SingleTask from "./components/SingleTask"; const App = () => { const [tasks, setTasks] = useState([]); @@ -26,12 +29,14 @@ const App = () => { return (
- - + }/> {/* Currently, we don't have any routes defined. And you can see above that we're rendering the TaskList and AddTask components directly, no matter what our URL looks like. Let's fix that! */} + }> + }> + }>
); diff --git a/src/components/CompleteTasks.jsx b/src/components/CompleteTasks.jsx new file mode 100644 index 0000000..c720992 --- /dev/null +++ b/src/components/CompleteTasks.jsx @@ -0,0 +1,11 @@ +import React from "react"; + +const CompletedTasks = () => { + return ( +
+

This is complete task component

+
+ ) +}; + +export default CompletedTasks; \ No newline at end of file diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index 9e63901..17a0cd9 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -1,17 +1,19 @@ import React from "react"; +import { NavLink } from "react-router"; + import "./NavBarStyles.css"; const NavBar = () => { return ( ); }; diff --git a/src/components/SingleTask.jsx b/src/components/SingleTask.jsx new file mode 100644 index 0000000..c42b749 --- /dev/null +++ b/src/components/SingleTask.jsx @@ -0,0 +1,28 @@ +import axios from "axios"; +import React, {useEffect} from "react" +import { useParams } from "react-router"; + +const SingleTask = () => { + const params = useParams(); + const id = Number(params.id); + + const fetchTaskById = async () => { + try { + await axios.get(`http://localhost:8080/api/tasks/${task.id}`); + const task = response.data + } catch (error) { + console.log("Failed to fetch task by id", error) + } + } + useEffect(() => { + fetchTaskById(); + }, []); + + return ( +
+ +
+ ) +}; + +export default SingleTask; \ No newline at end of file diff --git a/src/components/TaskCard.jsx b/src/components/TaskCard.jsx index 82258d9..4049a7c 100644 --- a/src/components/TaskCard.jsx +++ b/src/components/TaskCard.jsx @@ -1,5 +1,6 @@ import React from "react"; import axios from "axios"; +import {Link} from "react-router"; import "./TaskCardStyles.css"; const TaskCard = ({ task, fetchAllTasks }) => { @@ -26,7 +27,7 @@ const TaskCard = ({ task, fetchAllTasks }) => { return (
-

{task.title}

+

{task.title}

{task.completed ? (

🔄

From e4ecdb4b9486819c20839cbaced6123612dc3b4b Mon Sep 17 00:00:00 2001 From: pedrosortega Date: Mon, 30 Jun 2025 19:58:49 -0400 Subject: [PATCH 4/6] added home page redirectory --- src/components/AddTask.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx index 3673cf1..322aba1 100644 --- a/src/components/AddTask.jsx +++ b/src/components/AddTask.jsx @@ -1,11 +1,12 @@ import React, { useState } from "react"; import axios from "axios"; import "./AddTaskStyles.css"; +import { useNavigate } from "react-router"; const AddTask = ({ fetchAllTasks }) => { const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); - + const navigate = useNavigate(); const handleSubmit = async (event) => { event.preventDefault(); try { @@ -36,7 +37,9 @@ const AddTask = ({ fetchAllTasks }) => { value={description} onChange={(e) => setDescription(e.target.value)} /> - +
); From fc90b9c8c1db388b2a2c758fdc54a718c177190a Mon Sep 17 00:00:00 2001 From: Tran Vo Date: Mon, 30 Jun 2025 22:30:27 -0400 Subject: [PATCH 5/6] added incompplete.jsx --- src/components/IncompleteTasks.jsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/IncompleteTasks.jsx diff --git a/src/components/IncompleteTasks.jsx b/src/components/IncompleteTasks.jsx new file mode 100644 index 0000000..e69de29 From f8d48dc49e6670d287321d8bfe810f429bbee122 Mon Sep 17 00:00:00 2001 From: Tran Vo Date: Mon, 30 Jun 2025 23:00:15 -0400 Subject: [PATCH 6/6] Complete/Incomplete Task render --- src/App.jsx | 4 +++- src/components/CompleteTasks.jsx | 10 ++++------ src/components/IncompleteTasks.jsx | 9 +++++++++ 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index df2c697..c36e70f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,6 +9,7 @@ import CompletedTasks from "./components/CompleteTasks"; import TaskDetail from "./components/SingleTask"; import { BrowserRouter as Router, Routes, Route } from "react-router"; import SingleTask from "./components/SingleTask"; +import IncompleteTasks from "./components/IncompleteTasks"; const App = () => { const [tasks, setTasks] = useState([]); @@ -35,7 +36,8 @@ const App = () => { rendering the TaskList and AddTask components directly, no matter what our URL looks like. Let's fix that! */} }> - }> + } /> + }> }>
diff --git a/src/components/CompleteTasks.jsx b/src/components/CompleteTasks.jsx index c720992..515ad81 100644 --- a/src/components/CompleteTasks.jsx +++ b/src/components/CompleteTasks.jsx @@ -1,11 +1,9 @@ import React from "react"; +import TaskList from "./TaskList"; -const CompletedTasks = () => { - return ( -
-

This is complete task component

-
- ) +const CompletedTasks = ({ tasks, fetchAllTasks }) => { + const completedTasks = tasks.filter((task) => task.completed); + return ; }; export default CompletedTasks; \ No newline at end of file diff --git a/src/components/IncompleteTasks.jsx b/src/components/IncompleteTasks.jsx index e69de29..46c5772 100644 --- a/src/components/IncompleteTasks.jsx +++ b/src/components/IncompleteTasks.jsx @@ -0,0 +1,9 @@ +import React from "react"; +import TaskList from "./TaskList"; + +const IncompleteTasks = ({ tasks, fetchAllTasks }) => { + const incompleteTasks = tasks.filter((task) => !task.completed); + return ; +}; + +export default IncompleteTasks; \ No newline at end of file