week3task

components/AddTask.js

@@ -1,5 +1,34 @@
+import React, {useState} from "react";
+
+
 export default function AddTask() {
+	const[task,settask]=useState("");
 	const addTask = () => {
+
+
+		function handlechange(event){
+			newvalue=event.target.value;
+			settask(newvalue);
+
+		}
+
+    // Make API request to add the task
+    axiosInstance
+      .post("tasks/", { task: task })
+      .then((response) => {
+
+        const newTask = response.data;
+
+
+
+
+        settask("");
+      })
+      .catch((error) => {
+
+        console.error(error);
+      });
+
 		/**
 		 * @todo Complete this function.
 		 * @todo 1. Send the request to add the task to the backend server.
@@ -10,6 +39,7 @@ export default function AddTask() {
 	return (
 		<div className="flex items-center max-w-sm mt-24">
 			<input
+
 				type="text"
 				className="todo-add-task-input px-4 py-2 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full"
 				placeholder="Enter Task"

components/LoginForm.js

@@ -1,11 +1,56 @@
+import React, {useState} from "react";
+import {useAuth}  from "../context/auth";
+import {AuthProvider} from "../context/auth";
+import axios from  "../utils/axios";
+import axiosInstance from "../utils/axios";
+
+
+
+
+
+
+
 export default function RegisterForm() {
+	const {setToken}=useAuth();
 	const login = () => {
 		/***
 		 * @todo Complete this function.
 		 * @todo 1. Write code for form validation.
 		 * @todo 2. Fetch the auth token from backend and login the user.
 		 * @todo 3. Set the token in the context (See context/auth.js)
+		 * 
 		 */
+
+
+	const username = document.getElementById("inputUsername").value;
+    const password = document.getElementById("inputPassword").value;
+
+
+    axiosInstance
+      .post("auth/login/", {
+        username: username,
+        password: password,
+      })
+      .then((response) => {
+
+        const token = response.data.token;
+
+
+        setToken(token);
+
+
+        document.getElementById("inputUsername").value = "";
+        document.getElementById("inputPassword").value = "";
+
+
+      })
+      .catch((error) => {
+
+        console.log("Authentication failed");
+      });
+
+
+
 	};
 
 	return (
@@ -14,6 +59,7 @@ export default function RegisterForm() {
 				<div className="bg-white px-6 py-8 rounded shadow-md text-black w-full">
 					<h1 className="mb-8 text-3xl text-center">Login</h1>
 					<input
+					onChange={handlechange}
 						type="text"
 						className="block border border-grey-light w-full p-3 rounded mb-4"
 						name="inputUsername"
@@ -22,6 +68,7 @@ export default function RegisterForm() {
 					/>
 
 					<input
+					onChange={phandlechange}
 						type="password"
 						className="block border border-grey-light w-full p-3 rounded mb-4"
 						name="inputPassword"

components/Nav.js

@@ -23,14 +23,18 @@ export default function Nav() {
 					</li>
 				</ul>
 				<ul className="flex">
+				{!token &&(<>
 					<li className="text-white mr-2">
 						<Link href="/login">Login</Link>
 					</li>
 					<li className="text-white">
 						<Link href="/register">Register</Link>
 					</li>
+					</>
+				)}
+
 				</ul>
-				<div className="inline-block relative w-28">
+				{token &&(<div className="inline-block relative w-28">
 					<div className="group inline-block relative">
 						<button className="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
 							<img src={avatarImage} />
@@ -53,7 +57,8 @@ export default function Nav() {
 							</li>
 						</ul>
 					</div>
-				</div>
+				</div>)}
+
 			</ul>
 		</nav>
 	);

components/TodoListItem.js

@@ -1,6 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
+import React from "react";
+import { useAuth } from "../context/auth";
+import { useState } from "react";
+import axiosInstance from "../utils/axios";
 
 export default function TodoListItem() {
+
+	const { token } = useAuth();
+	const [task, setTask] = useState("");
+	const [editMode, setEditMode] = useState(false);
 	const editTask = (id) => {
 		/**
 		 * @todo Complete this function.
@@ -9,6 +17,18 @@ export default function TodoListItem() {
 	};
 
 	const deleteTask = (id) => {
+		axiosInstance
+      .delete(`/tasks/${id}`, {
+        headers: {
+          Authorization: `Token ${token}`,
+        },
+      })
+      .then((response) => {
+        console.log("Task deleted successfully");
+      })
+      .catch((error) => {
+        console.error("Failed to delete task", error);
+      });
 		/**
 		 * @todo Complete this function.
 		 * @todo 1. Send the request to delete the task to the backend server.
@@ -22,33 +42,80 @@ export default function TodoListItem() {
 		 * @todo 1. Send the request to update the task to the backend server.
 		 * @todo 2. Update the task in the dom.
 		 */
+		axiosInstance
+      .put(
+        `/tasks/${id}`,
+        { task: updatedTask },
+        {
+          headers: {
+            Authorization: `Token ${token}`,
+          },
+        }
+      )
+      .then((response) => {
+        console.log("Task updated successfully");
+        setEditMode(false);
+      })
+      .catch((error) => {
+        console.error("Failed to update task", error);
+      });
 	};
-
+	const handleEditClick = () => {
+		setEditMode(true);
+	  };
+
+	  const handleUpdateClick = (id) => {
+		updateTask(id, task);
+	  };
+
+	  const handleCancelClick = () => {
+		setEditMode(false);
+	  };
+
+	  useEffect(() => {
+		if (token) {
+
+		}
+	  }, [token]);
 	return (
 		<>
 			<li className="border flex border-gray-500 rounded px-2 py-2 justify-between items-center mb-2">
-				<input
+				{editMode?(<input
 					id="input-button-1"
 					type="text"
+					onChange={(e) => setTask(e.target.value)}
 					className="hideme appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring  todo-edit-task-input"
 					placeholder="Edit The Task"
-				/>
-				<div id="done-button-1" className="hideme">
-					<button
-						className="bg-transparent hover:bg-gray-500 text-gray-700 text-sm  hover:text-white py-2 px-3 border border-gray-500 hover:border-transparent rounded todo-update-task"
-						type="button"
-						onClick={updateTask(1)}>
-						Done
-					</button>
-				</div>
-				<div id="task-1" className="todo-task  text-gray-600">
-					Sample Task 1
-				</div>
-				<span id="task-actions-1" className="">
+				/>):(
+          <div className="todo-task text-gray-600">{task}</div>
+        )}
+
+
+
+				<span>
+          {editMode ? (
+            <>
+              <button
+                className="bg-transparent hover:bg-gray-500 text-gray-700 text-sm hover:text-white py-2 px-3 border border-gray-500 hover:border-transparent rounded todo-update-task"
+                type="button"
+                onClick={() => handleUpdateClick(1)}
+              >
+                Done
+              </button>
+              <button
+                className="bg-transparent hover:bg-red-500 hover:text-white border border-red-500 hover:border-transparent rounded px-2 py-2"
+                type="button"
+                onClick={handleCancelClick}
+              >
+                Cancel
+              </button>
+            </>
+          ) : (
+            <>
 					<button
 						style={{ marginRight: "5px" }}
 						type="button"
-						onClick={editTask(1)}
+						onClick={handleEditClick}
 						className="bg-transparent hover:bg-yellow-500 hover:text-white border border-yellow-500 hover:border-transparent rounded px-2 py-2">
 						<img
 							src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486663/CSOC/edit.png"
@@ -60,15 +127,17 @@ export default function TodoListItem() {
 					<button
 						type="button"
 						className="bg-transparent hover:bg-red-500 hover:text-white border border-red-500 hover:border-transparent rounded px-2 py-2"
-						onClick={deleteTask(1)}>
+						onClick={()=>deleteTask(1)}>
 						<img
 							src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"
 							width="18px"
 							height="22px"
 							alt="Delete"
 						/>
 					</button>
-				</span>
+					</>
+		  )}
+		  </span>
 			</li>
 		</>
 	);

middlewares/auth_required.js

@@ -1,3 +1,22 @@
 /***
  * @todo Redirect the user to login page if token is not present.
  */
+import { useEffect } from 'react';
+import { useAuth } from '../context/auth';
+import { useRouter } from 'next/router';
+
+
+const AuthenticProt = () => {
+  const router = useRouter();
+  const { token } = useAuth();
+
+  useEffect(function() {
+    if (!token) {
+      router.push('/login');
+    }
+  }, [token, router]);
+
+  return token;
+};
+
+export default AuthenticProt;