fterdal · Rend1027 · Jun 30, 2025 · Jun 30, 2025 · Jun 30, 2025 · Jun 30, 2025
diff --git a/.env.devolopment b/.env.devolopment
@@ -0,0 +1 @@
+API_URL=https://localhost:8080/api
diff --git a/.env.production b/.env.production
@@ -0,0 +1 @@
+API_URL = https://client-side-routing-backend-nu.vercel.app/api
diff --git a/dist/index.html b/dist/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Client-Side Routing Assignment</title>
-    <script defer src="main.js"></script>
+    <script defer src="/main.js"></script>
   </head>
   <body>
     <div id="root"></div>
   </body>
-</html>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@babel/preset-react": "^7.27.1",
     "axios": "^1.10.0",
     "babel-loader": "^10.0.0",
+    "dotenv": "^17.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.6.3",

diff --git a/src/App.jsx b/src/App.jsx
@@ -5,14 +5,20 @@ 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";
+import api from "./api/axiosInstance";
+import IncompleteTasks from "./components/IncompleteTasks";
+// comment
 const App = () => {
   const [tasks, setTasks] = useState([]);
 
   async function fetchAllTasks() {
     try {
-      const response = await axios.get("http://localhost:8080/api/tasks");
+      const response = await api.get(`/tasks`);
+       console.log("✅ API response:", response.data);
       setTasks(response.data);
     } catch (error) {
       console.error("Error fetching tasks:", error);
@@ -26,12 +32,15 @@ const App = () => {
   return (
     <div>
       <NavBar />
-      <TaskList tasks={tasks} fetchAllTasks={fetchAllTasks} />
-      <AddTask fetchAllTasks={fetchAllTasks} />
       <Routes>
+        <Route path="/" element={<TaskList tasks={tasks} fetchAllTasks={fetchAllTasks} />}/>
         {/* 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! */}
+        <Route path="/add-task" element = {<AddTask fetchAllTasks={fetchAllTasks} />}></Route>
+        <Route path="/completed" element={<CompletedTasks tasks={tasks} fetchAllTasks={fetchAllTasks} />} />
+        <Route path="/incomplete" element={<IncompleteTasks tasks={tasks} fetchAllTasks={fetchAllTasks} />}></Route>
+        <Route path="/tasks/:id" element = {<SingleTask/>}></Route>
       </Routes>
     </div>
   );

diff --git a/src/api/axiosInstance.js b/src/api/axiosInstance.js
@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const api = axios.create({
+    baseURL: "https://client-side-routing-backend-nu.vercel.app/api",
+});
+
+export default api;
diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx
@@ -1,15 +1,17 @@
 import React, { useState } from "react";
 import axios from "axios";
 import "./AddTaskStyles.css";
+import { useNavigate } from "react-router";
+import api from "../api/axiosInstance";
 
 const AddTask = ({ fetchAllTasks }) => {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
-
+  const navigate = useNavigate();
   const handleSubmit = async (event) => {
     event.preventDefault();
     try {
-      await axios.post("http://localhost:8080/api/tasks", {
+      await api.post("/tasks", {
         title,
         description,
       });
@@ -36,7 +38,9 @@ const AddTask = ({ fetchAllTasks }) => {
           value={description}
           onChange={(e) => setDescription(e.target.value)}
         />
-        <button type="submit">Add</button>
+        <button type="submit" onClick={() => navigate("/")}>
+          Add
+        </button>
       </form>
     </div>
   );

diff --git a/src/components/CompleteTasks.jsx b/src/components/CompleteTasks.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import TaskList from "./TaskList";
+
+const CompletedTasks = ({ tasks, fetchAllTasks }) => {
+  const completedTasks = tasks.filter((task) => task.completed);
+  return <TaskList tasks={completedTasks} fetchAllTasks={fetchAllTasks} />;
+};
+
+export default CompletedTasks;
diff --git 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 <TaskList tasks={incompleteTasks} fetchAllTasks={fetchAllTasks} />;
+};
+
+export default IncompleteTasks;
diff --git 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 (
     <nav className="navbar">
-      {/* Currently, we're using <a> tags to navigate to different pages.
-      This means that every time we click on a link, the page will reload.
+      {/* Currently, we're using <NavLink> tags to navigate to different pages.
+      This means that every time we click on NavLink link, the page will reload.
       Let's fix that!
       */}
-      <a href="/">All Tasks</a>
-      <a href="/completed">Completed Tasks</a>
-      <a href="/incomplete">Incomplete Tasks</a>
-      <a href="/add-task">Add Task</a>
+      <NavLink to="/">All Tasks</NavLink>
+      <NavLink to="/completed">Completed Tasks</NavLink>
+      <NavLink to="/incomplete">Incomplete Tasks</NavLink>
+      <NavLink to="/add-task">Add Task</NavLink>
     </nav>
   );
 };

diff --git a/src/components/SingleTask.css b/src/components/SingleTask.css
@@ -0,0 +1,3 @@
+.user-name {
+    color: red;
+}
diff --git a/src/components/SingleTask.jsx b/src/components/SingleTask.jsx
@@ -0,0 +1,59 @@
+import axios from "axios";
+import React, {use, useEffect, useState} from "react"
+import TaskCard from "./TaskCard";
+import { useParams } from "react-router";
+import api from "../api/axiosInstance";
+import './SingleTask.css'
+
+const SingleTask = (props) => {
+    const {tasks} = props;
+    console.log("This is tasks state-->", tasks)
+    const params = useParams();
+    const id = Number(params.id);
+
+    const [currentTask, setCurrentTask] = useState([]);
+    const [currentUserId, setCurrentuserId] = useState([]);
+    const [user, setUser] = useState([]);
+    let userId = Number(currentUserId)
+    // console.log("Current user-->", currentUser)
+
+    const fetchTaskById = async () => {
+        try {
+             const response = await api.get(`/tasks/${id}`);
+            setCurrentTask(response.data)
+            const user = response.data.userId;
+            setCurrentuserId(user)
+        } catch(error) {
+            console.log("failed to fetch task by id", error)
+        }
+    }
+
+    useEffect(() => {
+        fetchTaskById();
+    }, [id]);
+
+    const fetchUserByID = async () => {
+        try {
+            const response = await api.get(`/users/${userId}`);
+            setUser(response.data)
+        } catch(error) {
+            console.log("failed to fetch user by id", error)
+        }
+    }
+
+    useEffect(() => {
+        fetchUserByID();
+    },[currentUserId]);
+
+
+    return (
+        <main>{user.name ?<h1 className="user-name">This task is assigned to {user.name}</h1>
+    :
+    <h1 className="user-name">This task is not assigned</h1>}
+
+            <TaskCard task = {currentTask} fetchAllTasks={() => {}}/>
+        </main>
+    )
+};
+
+export default SingleTask;
diff --git a/src/components/TaskCard.jsx b/src/components/TaskCard.jsx
@@ -1,11 +1,13 @@
 import React from "react";
 import axios from "axios";
+import {Link} from "react-router";
 import "./TaskCardStyles.css";
+import api from "../api/axiosInstance";
 
-const TaskCard = ({ task, fetchAllTasks }) => {
+const TaskCard = ({ task, fetchAllTasks, currentTask}) => {
   const handleCompleteTask = async () => {
     try {
-      await axios.patch(`http://localhost:8080/api/tasks/${task.id}`, {
+      await api.patch(`/tasks/${task.id}`, {
         completed: !task.completed,
       });
       fetchAllTasks();
@@ -16,7 +18,7 @@ const TaskCard = ({ task, fetchAllTasks }) => {
 
   const handleDeleteTask = async () => {
     try {
-      await axios.delete(`http://localhost:8080/api/tasks/${task.id}`);
+      await api.delete(`/tasks/${task.id}`);
       fetchAllTasks();
     } catch (error) {
       console.error("Error deleting task:", error);
@@ -26,7 +28,7 @@ const TaskCard = ({ task, fetchAllTasks }) => {
   return (
     <div className={`task-card ${task.completed ? "completed" : "incomplete"}`}>
       <div className="task-card-header">
-        <h2>{task.title}</h2>
+        <Link to={`/tasks/${task.id}`}><h2>{task.title}</h2></Link> 
         <div className="task-card-header-buttons">
           {task.completed ? (
             <p onClick={handleCompleteTask}>🔄</p>

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,8 @@
 const path = require("path");
+const webpack = require("webpack");
+const dotenv = require("dotenv"); 
 
+const env = dotenv.config({ path: `.env.${process.env.NODE_ENV}` }).parsed || {};
 module.exports = {
   mode: "development",
   entry: "./src/App.jsx",
@@ -37,4 +40,9 @@ module.exports = {
     historyApiFallback: true,
     port: 3000,
   },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.API_URL': JSON.stringify(env.API_URL),
+    })
+  ]
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		API_URL = https://client-side-routing-backend-nu.vercel.app/api