From b14bfe5509f5f9e34d9f9ee4251fb297f75ac10f Mon Sep 17 00:00:00 2001 From: Elian Echavarria Date: Mon, 30 Jun 2025 17:04:26 -0400 Subject: [PATCH] Work Group --- package-lock.json | 4 ++-- src/App.jsx | 19 ++++++++++++--- src/components/AddTask.jsx | 4 +++- src/components/NavBar.jsx | 1 + src/components/TaskCard.jsx | 9 +++++++- src/components/TaskDetails.jsx | 42 ++++++++++++++++++++++++++++++++++ src/components/TaskList.jsx | 1 + src/components/UserTask.jsx | 39 +++++++++++++++++++++++++++++++ src/components/Users.jsx | 39 +++++++++++++++++++++++++++++++ 9 files changed, 151 insertions(+), 7 deletions(-) create mode 100644 src/components/TaskDetails.jsx create mode 100644 src/components/UserTask.jsx create mode 100644 src/components/Users.jsx 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..879b26e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,7 +5,12 @@ 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 TaskDetails from "./components/TaskDetails" +import Users from "./components/Users"; +import UserTasks from "./components/UserTask"; + +import { BrowserRouter as Router, Routes, Route } from "react-router"; + const App = () => { const [tasks, setTasks] = useState([]); @@ -26,12 +31,20 @@ 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! */} + + } /> + task.completed)} fetchAllTasks={fetchAllTasks} />} /> + !task.completed)} fetchAllTasks={fetchAllTasks} />} /> + } /> + } /> + } /> + } />
); diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx index 3673cf1..2fc4b00 100644 --- a/src/components/AddTask.jsx +++ b/src/components/AddTask.jsx @@ -1,10 +1,11 @@ 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(); @@ -16,6 +17,7 @@ const AddTask = ({ fetchAllTasks }) => { // After we submit the form, it'd be great if we could navigate back to the home page. // Is there a way to programmatically navigate to the home page? 🤔 fetchAllTasks(); + navigate('/'); } catch (error) { console.error("Error adding task:", error); } diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index 9e63901..210fba6 100644 --- a/src/components/NavBar.jsx +++ b/src/components/NavBar.jsx @@ -12,6 +12,7 @@ const NavBar = () => { Completed Tasks Incomplete Tasks Add Task + Users ); }; diff --git a/src/components/TaskCard.jsx b/src/components/TaskCard.jsx index 82258d9..d89d7cb 100644 --- a/src/components/TaskCard.jsx +++ b/src/components/TaskCard.jsx @@ -1,14 +1,21 @@ import React from "react"; import axios from "axios"; import "./TaskCardStyles.css"; +import { Link } from "react-router"; + const TaskCard = ({ task, fetchAllTasks }) => { + + + const handleCompleteTask = async () => { try { await axios.patch(`http://localhost:8080/api/tasks/${task.id}`, { completed: !task.completed, }); fetchAllTasks(); + + console.log(task.id); } catch (error) { console.error("Error completing task:", error); } @@ -26,7 +33,7 @@ const TaskCard = ({ task, fetchAllTasks }) => { return (
-

{task.title}

+ {task.title}
{task.completed ? (

🔄

diff --git a/src/components/TaskDetails.jsx b/src/components/TaskDetails.jsx new file mode 100644 index 0000000..d7a46d8 --- /dev/null +++ b/src/components/TaskDetails.jsx @@ -0,0 +1,42 @@ +import React, { useState, useEffect } from "react"; +import { useParams } from "react-router"; +import axios from "axios"; + +const TaskDetails = ({ tasks }) => { + const { id } = useParams(); + const taskId = Number(id); + + const [task, setTask] = useState(null); + + useEffect(() => { + if (tasks && tasks.length > 0) { + const localTask = tasks.find((t) => t.id === taskId); + if (localTask) { + setTask(localTask); + } + } else { + axios.get(`/api/tasks/${taskId}`) + .then((res) => setTask(res.data)) + .catch((err) => console.error("Error fetching task:", err)); + } + }, [tasks, taskId]); + + + if (!task) return

Loading task...

; + + return ( +
+
+

{task.title}

+

{task.description}

+

{task.completed ? "✅ Completed" : "❌ Incomplete"}

+

Assigned to: {task.user?.name || "Unknown"}

+
+
+ ) + + + +} + +export default TaskDetails; \ No newline at end of file diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx index 43487ef..21ba922 100644 --- a/src/components/TaskList.jsx +++ b/src/components/TaskList.jsx @@ -1,6 +1,7 @@ import React from "react"; import TaskCard from "./TaskCard"; + const TaskList = ({ tasks, fetchAllTasks }) => { return (
diff --git a/src/components/UserTask.jsx b/src/components/UserTask.jsx new file mode 100644 index 0000000..1497821 --- /dev/null +++ b/src/components/UserTask.jsx @@ -0,0 +1,39 @@ +import React, { useEffect, useState } from "react"; +import { useParams } from "react-router"; +import axios from "axios"; + +const UserTasks = () => { + const { id } = useParams(); // Get user id from URL params + const [tasks, setTasks] = useState([]); + + useEffect(() => { + async function fetchUserTasks() { + try { + const response = await axios.get(`http://localhost:8080/api/users/${id}/tasks`); + setTasks(response.data); + } catch (error) { + console.error("Failed to fetch tasks:", error); + } + } + fetchUserTasks(); + }, [id]); + + return ( +
+

User {id}'s Tasks

+ {tasks.length === 0 ? ( +

No tasks found for this user.

+ ) : ( +
    + {tasks.map(task => ( +
  • + {task.title}: {task.description} [{task.completed ? "Done" : "Pending"}] +
    • + ))} +
+ )} +
+ ); +}; + +export default UserTasks; diff --git a/src/components/Users.jsx b/src/components/Users.jsx new file mode 100644 index 0000000..1b86c4a --- /dev/null +++ b/src/components/Users.jsx @@ -0,0 +1,39 @@ +import React from 'react' +import { useState, useEffect } from 'react'; +import axios from 'axios'; +import { Link } from 'react-router'; + +const Users = () => { + const [users, setUsers] = useState([]); + + async function fetchAllUsers() { + try { + const response = await axios.get("http://localhost:8080/api/users"); + setUsers(response.data); + } catch (error) { + console.error("Error fetching users:", error); + } + } + + useEffect(() => { + fetchAllUsers(); + }, []); + + + + + return ( +
+
+

Users List

+ {users.map((user) => ( +
+ {user.name} +
+ ))} +
+
+ ) +} + +export default Users