Completed the Web-Week3-React project

components/AddTask.js

@@ -1,22 +1,50 @@
+import { useState } from "react";
+import axios from "../utils/axios";
+import { useAuth } from "../context/auth";
+
 export default function AddTask() {
-	const addTask = () => {
+
+	const [task, setTask] = useState("")
+	const { token } = useAuth();
+
+
+	const addTask = async() => {
 		/**
 		 * @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.
 		 */
+		console.log(token)
+		const options={
+			headers: {
+				'Authorization': 'Token ' + token,
+				'Content-Type': 'application/json',
+			}
+		}
+
+		try{
+			await axios.post("todo/create/",{title:task},options)
+
+		}
+		catch(err){
+			console.log(err)
+		}
+
 	};
 
 	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"
+				name="task"
+				className="todo-add-task-input px-4 py-2 placeholder-blueGray-100 text-gray-500 bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring-1 focus:ring-my-white w-full"
 				placeholder="Enter Task"
+				value={task}
+				onChange={(e)=>setTask(e.target.value)}
 			/>
 			<button
 				type="button"
-				className="todo-add-task bg-transparent hover:bg-green-500 text-green-700 text-sm hover:text-white px-3 py-2 border border-green-500 hover:border-transparent rounded"
+				className="todo-add-task bg-transparent hover:bg-my-brown text-my-brown text-sm hover:text-white px-3 py-2 border border-my-brown hover:border-transparent rounded"
 				onClick={addTask}>
 				Add Task
 			</button>

components/LoginForm.js

@@ -1,11 +1,49 @@
+import { useState } from "react";
+import { useAuth } from "../context/auth";
+import axios from "../utils/axios";
+import { useRouter } from "next/router";
+import { toast } from "react-toastify";
+
 export default function RegisterForm() {
-	const login = () => {
+	const { setToken } = useAuth();
+	const [username, setUsername] = useState("");
+	const [password, setPassword] = useState("");
+
+	const router = useRouter()
+
+	const login = async() => {
 		/***
 		 * @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)
 		 */
+		try {
+			if (!username) {
+			  toast.error("Please enter username!")
+			  return
+			}
+			else if(!password){
+				toast.error("Please enter password!")
+				return
+			}
+
+			const response = await axios.post("auth/login/", {
+			  username: username,
+			  password: password,
+			});
+
+			const { token } = response.data;
+
+			setToken(token)
+
+			//Note that I am not using router.push because it does not cause the page to refresh. I want to fetch data from the backend so, I am using window.location.href for it
+			window.location.href = "/"
+
+		  } catch (error) {
+			toast.error("Password or Username is incorrect!")
+		  }
+
 	};
 
 	return (
@@ -19,6 +57,8 @@ export default function RegisterForm() {
 						name="inputUsername"
 						id="inputUsername"
 						placeholder="Username"
+						value={username}
+						onChange={(e)=>setUsername(e.target.value)}
 					/>
 
 					<input
@@ -27,6 +67,8 @@ export default function RegisterForm() {
 						name="inputPassword"
 						id="inputPassword"
 						placeholder="Password"
+						value={password}
+						onChange={(e)=>setPassword(e.target.value)}
 					/>
 
 					<button

components/Nav.js

@@ -2,39 +2,66 @@
 /* eslint-disable @next/next/no-img-element */
 import Link from "next/link";
 import { useAuth } from "../context/auth";
+import { useRouter } from 'next/router';
+import { useEffect, useState } from "react";
 /**
  *
  * @todo Condtionally render login/register and Profile name in NavBar
  */
 
 export default function Nav() {
+	const router = useRouter();
+
+	const [direction, setDirection] = useState(true)
+	const [normal, setNormal] = useState(false)
+
 	const { logout, profileName, avatarImage } = useAuth();
 
+	const handleRegisterClick = () => {
+		setDirection(false)
+		router.push('/register');
+	  };
+
+	  const handleLoginClick = () => {
+		setDirection(true)
+		router.push('/login');
+	  };
+
+	  useEffect(()=>{
+		if(router.pathname=="/"){
+			setNormal(true)
+		}
+		else{
+			setNormal(false)
+		}
+	  },[router.pathname])
+
 	return (
-		<nav className="bg-blue-600">
+		<nav className="navbar">
 			<ul className="flex items-center justify-between p-5">
 				<ul className="flex items-center justify-between space-x-4">
 					<li>
 						<Link href="/" passHref={true}>
 							<a>
-								<h1 className="text-white font-bold text-xl">Todo</h1>
+								<h1 className="text-my-white font-bold text-5xl font-custom-2">ToDo</h1>
 							</a>
 						</Link>
 					</li>
 				</ul>
 				<ul className="flex">
-					<li className="text-white mr-2">
-						<Link href="/login">Login</Link>
+					<li className={`text-my-white mr-2 text-3xl focus:outline-none ${normal? "":`${direction? "li-dabba":""}`}`}>
+					<button onClick={handleLoginClick} className="focus:outline-none">Login</button>
 					</li>
-					<li className="text-white">
-						<Link href="/register">Register</Link>
+					<div className="w-0.5 bg-my-olive h-auto border rounded-full"></div>
+					<li className={`text-[#F6EDD9] text-3xl ml-2 focus:outline-none ${normal? "":`${direction? "":"li-dabba"}`}`}>
+					<button onClick={handleRegisterClick} className="focus:outline-none">Register</button>
 					</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>
+						<button className="text-my-white font-semibold py-2 px-4 rounded flex flex-col items-center">
+							<img style={{borderRadius:"50px"}} src={avatarImage} />
+							<span className="text-base font-custom-1">{profileName}</span>
 							<svg
 								className="fill-current h-4 w-4"
 								xmlns="http://www.w3.org/2000/svg"

components/RegisterForm.js

@@ -25,7 +25,7 @@ export default function Register() {
 		return true;
 	};
 
-	const register = (e) => {
+	const register = async(e) => {
 		e.preventDefault();
 
 		if (registerFieldsAreValid(firstName, lastName, email, username, password)) {
@@ -40,12 +40,14 @@ export default function Register() {
 
 			axios
 				.post("auth/register/", dataForApiRequest)
-				.then(function ({ data, status }) {
+				.then(function ({ data }) {
 					setToken(data.token);
-					router.push("/");
+					window.location.href = "/"
+					return
 				})
 				.catch(function (err) {
 					console.log("An account using same email or username is already created");
+					return
 				});
 		}
 	};