Week3-React Tasks Done

components/AddTask.js

@@ -1,10 +1,37 @@
+import { useState } from "react";
+import { useAuth } from "../context/auth";
+import { API_URL } from '../utils/constants'
+import axios from "../utils/axios";
+
 export default function AddTask() {
+
+	const [task,setTask] = useState("");
+	const { token } = useAuth();
+
 	const addTask = () => {
 		/**
 		 * @todo Complete this function.
 		 * @todo 1. Send the request to add the task to the backend server.
 		 * @todo 2. Add the task in the dom.
 		 */
+		if(task.length===0) console.log("Enter a task")
+		else{
+			axios({
+				headers:{
+					Authorization:'Token '+token
+				},
+				url:API_URL + 'todo/create/',
+				method:'POST',
+				data:{
+					title: task
+				}
+			}).then(({data,status}) =>{
+				setTask("");
+				console.log("Task successfully Added")
+			}).catch((err)=>{
+				console.log("Task not Added")
+			})
+		}
 	};
 
 	return (
@@ -13,6 +40,8 @@ export default function AddTask() {
 				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"
+				value={task}
+				onChange={(e)=>{setTask(e.target.value)}}
 			/>
 			<button
 				type="button"

components/LoginForm.js

@@ -1,11 +1,59 @@
+import { useState } from "react";
+import {useRouter} from "next/router";
+import { useAuth } from "../context/auth";
+import axios from "../utils/axios"; 
+import { toast } from 'react-toastify';
+
+  import 'react-toastify/dist/ReactToastify.css';
+
+
+
 export default function RegisterForm() {
-	const login = () => {
+
+	const { setToken } = useAuth();
+	const router = useRouter();
+
+	const [username , setusername]=useState("");
+	const [password , setpassword]=useState("");
+
+	const inputFieldsAreValid = (username, password) => {
+		if (username === "" || password === "") {
+			console.log("Please fill all the fields correctly.");
+			return false;
+		}
+
+		return true;
+	};
+
+	const login = (e) => {
 		/***
 		 * @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)
 		 */
+		e.preventDefault();
+
+		if (inputFieldsAreValid(username, password)) {
+			console.log("Please wait...");
+
+			const dataForApiRequest = {
+				username: username,
+				password: password,
+			};
+
+			axios
+				.post("auth/login/", dataForApiRequest)
+				.then(({ data,status})=>{
+					setToken(data.token)
+					router.push("/")
+					router.reload();
+				})
+				.catch(function (err) {
+					toast.error("Enter Correct Username and Password");
+				});
+		}
+
 	};
 
 	return (
@@ -19,6 +67,8 @@ export default function RegisterForm() {
 						name="inputUsername"
 						id="inputUsername"
 						placeholder="Username"
+						value={username}
+						onChange={(e)=>{setusername(e.target.value)}}
 					/>
 
 					<input
@@ -27,6 +77,8 @@ export default function RegisterForm() {
 						name="inputPassword"
 						id="inputPassword"
 						placeholder="Password"
+						value={password}
+						onChange={(e)=>{setpassword(e.target.value)}}
 					/>
 
 					<button

components/Nav.js

@@ -2,13 +2,19 @@
 /* eslint-disable @next/next/no-img-element */
 import Link from "next/link";
 import { useAuth } from "../context/auth";
+import auth_required from "../middlewares/auth_required";
+import no_auth_required from "../middlewares/no_auth_required";
+
 /**
  *
  * @todo Condtionally render login/register and Profile name in NavBar
  */
 
 export default function Nav() {
-	const { logout, profileName, avatarImage } = useAuth();
+	const { logout, profileName, avatarImage, token } = useAuth();
+
+	auth_required();
+	no_auth_required();
 
 	return (
 		<nav className="bg-blue-600">
@@ -22,6 +28,7 @@ export default function Nav() {
 						</Link>
 					</li>
 				</ul>
+				{!token?
 				<ul className="flex">
 					<li className="text-white mr-2">
 						<Link href="/login">Login</Link>
@@ -30,30 +37,34 @@ export default function Nav() {
 						<Link href="/register">Register</Link>
 					</li>
 				</ul>
+				:
 				<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} />
-							<span className="mr-1">{profileName}</span>
-							<svg
-								className="fill-current h-4 w-4"
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 20 20">
-								<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-							</svg>
-						</button>
-						<ul className="absolute hidden text-gray-700 pt-1 group-hover:block">
-							<li className="">
-								<a
-									className="rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
-									href="#"
-									onClick={logout}>
-									Logout
-								</a>
-							</li>
-						</ul>
-					</div>
+				<div className="group inline-block relative">
+					{token && <>
+					<button className="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
+						<img src={avatarImage} />
+						<span className="mr-1">{profileName}</span>
+						<svg
+							className="fill-current h-4 w-4"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20">
+							<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+						</svg>
+					</button>
+					<ul className="absolute hidden text-gray-700 pt-1 group-hover:block">
+						<li className="">
+							<a
+								className="rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
+								href="#"
+								onClick={()=>logout()}>
+								Logout
+							</a>
+						</li>
+					</ul>
+					</>}
 				</div>
+			</div>
+				}
 			</ul>
 		</nav>
 	);

components/RegisterForm.js

@@ -2,6 +2,9 @@ import React, { useState } from "react";
 import axios from "../utils/axios";
 import { useAuth } from "../context/auth";
 import { useRouter } from "next/router";
+import { toast } from 'react-toastify';
+
+  import 'react-toastify/dist/ReactToastify.css';
 
 export default function Register() {
 	const { setToken } = useAuth();
@@ -15,11 +18,11 @@ export default function Register() {
 
 	const registerFieldsAreValid = (firstName, lastName, email, username, password) => {
 		if (firstName === "" || lastName === "" || email === "" || username === "" || password === "") {
-			console.log("Please fill all the fields correctly.");
+			toast.error("Please fill all the fields correctly.");
 			return false;
 		}
 		if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
-			console.log("Please enter a valid email address.");
+			toast.error("Please enter a valid email address.");
 			return false;
 		}
 		return true;
@@ -40,12 +43,13 @@ export default function Register() {
 
 			axios
 				.post("auth/register/", dataForApiRequest)
-				.then(function ({ data, status }) {
+				.then(function ({ data, status }){
 					setToken(data.token);
-					router.push("/");
+					router.push("/")
+					router.reload()
 				})
 				.catch(function (err) {
-					console.log("An account using same email or username is already created");
+					toast.error("Username and Password already exists!")
 				});
 		}
 	};

components/TodoListItem.js

@@ -1,11 +1,21 @@
 /* eslint-disable @next/next/no-img-element */
+import { useAuth } from "../context/auth";
+import { useState , useEffect } from "react";
+import { API_URL } from "../utils/constants";
+import axios from "../utils/axios";
+
+export default function TodoListItem(props) {
+
+	const { token } = useAuth();
+	const [editedTask,setEditedTask] = useState(props.title);
+	const [edit,setEdit] = useState(false)
 
-export default function TodoListItem() {
 	const editTask = (id) => {
 		/**
 		 * @todo Complete this function.
 		 * @todo 1. Update the dom accordingly
 		 */
+		setEdit(true)
 	};
 
 	const deleteTask = (id) => {
@@ -14,6 +24,17 @@ export default function TodoListItem() {
 		 * @todo 1. Send the request to delete the task to the backend server.
 		 * @todo 2. Remove the task from the dom.
 		 */
+		axios({
+			headers:{
+				Authorization : 'Token '+ token
+			},
+			url : API_URL + 'todo/'+id+'/',
+			method:'DELETE'
+		}).then(({data,status})=>{
+			console.log("Task successfully deleted");
+		}).catch((err)=>{
+			console.log("Some error occured while deleting your Task !")
+		})
 	};
 
 	const updateTask = (id) => {
@@ -22,34 +43,52 @@ 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.
 		 */
+		axios({
+			headers:{
+				Authorization : 'Token '+token
+			},
+			url:API_URL+'todo/'+id+'/',
+			method:'PATCH',
+			data:{
+				title:editedTask
+			}
+		}).then(({data,status})=>{
+			console.log("Task Updated!");
+		}).catch((err)=>{
+			console.log('Some error occured while editing your Task !')
+		})
+
+		setEdit(false)
 	};
 
 	return (
 		<>
 			<li className="border flex border-gray-500 rounded px-2 py-2 justify-between items-center mb-2">
 				<input
-					id="input-button-1"
+					id={`input-button-${props.id}`}
 					type="text"
-					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"
+					className={`${edit?"appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring  todo-edit-task-input":'hideme'}`}
 					placeholder="Edit The Task"
+					value={editedTask}
+					onChange={(e)=>{setEditedTask(e.target.value)}}
 				/>
-				<div id="done-button-1" className="hideme">
+				<div id={`done-button-${props.id}`} className={`${edit?'':"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)}>
+						onClick={()=>updateTask(props.id)}>
 						Done
 					</button>
 				</div>
-				<div id="task-1" className="todo-task  text-gray-600">
-					Sample Task 1
+				<div id={`task-${props.id}`} className={`${edit?'hideme':"todo-task  text-gray-600"}`}>
+					{props.title}
 				</div>
-				<span id="task-actions-1" className="">
+				<span id={`task-actions-${props.id}`} className="">
 					<button
 						style={{ marginRight: "5px" }}
 						type="button"
-						onClick={editTask(1)}
-						className="bg-transparent hover:bg-yellow-500 hover:text-white border border-yellow-500 hover:border-transparent rounded px-2 py-2">
+						onClick={()=>editTask(props.id)}
+						className={`${edit?'hideme':"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"
 							width="18px"
@@ -59,11 +98,11 @@ export default function TodoListItem() {
 					</button>
 					<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)}>
+						className={`${edit?"bg-transparent hover:bg-red-500  hover:text-white border border-red-500 hover:border-transparent rounded mx-2 px-2 py-2":'hideme'}`}
+						onClick={()=>deleteTask(props.id)}>
 						<img
 							src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"
-							width="18px"
+							width="30px"
 							height="22px"
 							alt="Delete"
 						/>

context/auth.js

@@ -17,6 +17,7 @@ export const AuthProvider = ({ children }) => {
 	const logout = () => {
 		deleteToken();
 		router.push("/login");
+		router.reload()
 	};
 
 	useEffect(() => {