diff --git a/components/AddTask.js b/components/AddTask.js index 8b8177f..77e312c 100644 --- a/components/AddTask.js +++ b/components/AddTask.js @@ -1,22 +1,47 @@ -export default function AddTask() { +import { useState } from "react"; +import { useAuth } from "../context/auth"; +import axios from "axios"; + +export default function AddTask({ updateTasks }) { + const backendUrl = "https://todo-api-s7vj.onrender.com" + const { token } = useAuth(); + const [taskData, setTaskdata] = useState() + 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. */ + console.log("Token :", token) + + axios.post(`${backendUrl}/todo/create/`, { title: taskData }, { + headers: { + Authorization: `Token ${token}`, + }, + }) + .then(response => { + console.log('Todo created successfully:', response); + // updateTasks will call the getTasks() function defined in index.js which will rerender all the tasks including the newer task which is just added + updateTasks() + }) + .catch(error => { + console.error('Error creating todo:', error); + }); + }; return ( -
+
{ setTaskdata(e.target.value) }} /> diff --git a/components/LoginForm.js b/components/LoginForm.js index 244f45a..5729a84 100644 --- a/components/LoginForm.js +++ b/components/LoginForm.js @@ -1,4 +1,17 @@ +import React, { useState } from "react"; +import axios from "../utils/axios"; +import { useAuth } from "../context/auth"; +import { useRouter } from "next/router"; +import Link from "next/link"; + + export default function RegisterForm() { + const { setToken } = useAuth(); + const router = useRouter(); + + const [uname, setUname] = useState(""); + const [pass, setPass] = useState(""); + const login = () => { /*** * @todo Complete this function. @@ -6,18 +19,54 @@ export default function RegisterForm() { * @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 login_validations = (username, password) => { + if (username === "" || password === "") { + console.log("Please fill all the fields correctly."); + return false; + } + return true; + }; + + if (login_validations(uname, pass)) { + console.log("Please wait..."); + + const login_credentials = { + username: uname, + password: pass, + }; + + axios + .post("/auth/login/", login_credentials) + .then(function ({ data, status }) { + const token = data.token; + setToken(token); + router.push("/").then(() => { + window.location.reload(); + }); + // router.push("/"); + // window.location.reload(); + }) + .catch(function (err) { + console.log("An error occurred :", err); + }); + } + + }; return (
-
+

Login

setUname(e.target.value)} placeholder="Username" /> @@ -26,6 +75,8 @@ export default function RegisterForm() { className="block border border-grey-light w-full p-3 rounded mb-4" name="inputPassword" id="inputPassword" + value={pass} + onChange={(e) => setPass(e.target.value)} placeholder="Password" /> @@ -35,6 +86,9 @@ export default function RegisterForm() { onClick={login}> Login +
+ Not registered yet, Register here +
diff --git a/components/Nav.js b/components/Nav.js index 00c05d1..6915262 100644 --- a/components/Nav.js +++ b/components/Nav.js @@ -2,59 +2,101 @@ /* eslint-disable @next/next/no-img-element */ import Link from "next/link"; import { useAuth } from "../context/auth"; +import { useState, useEffect, useRef } from "react"; /** * * @todo Condtionally render login/register and Profile name in NavBar */ + export default function Nav() { const { logout, profileName, avatarImage } = useAuth(); - + const [isDropdownOpen, setDropdownOpen] = useState(false); + const dropdownRef = useRef(null); + + const toggleDropdown = () => { + setDropdownOpen(!isDropdownOpen); + }; + + const handleClickOutside = (event) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { + setDropdownOpen(false); + } + }; + + useEffect(() => { + document.addEventListener("click", handleClickOutside); + return () => { + document.removeEventListener("click", handleClickOutside); + }; + }, []); + return ( -
+ )} + + ); -} + } diff --git a/components/RegisterForm.js b/components/RegisterForm.js index 67bc737..1d3e118 100644 --- a/components/RegisterForm.js +++ b/components/RegisterForm.js @@ -2,6 +2,8 @@ import React, { useState } from "react"; import axios from "../utils/axios"; import { useAuth } from "../context/auth"; import { useRouter } from "next/router"; +import Link from "next/link"; + export default function Register() { const { setToken } = useAuth(); @@ -42,7 +44,9 @@ export default function Register() { .post("auth/register/", dataForApiRequest) .then(function ({ data, status }) { setToken(data.token); - router.push("/"); + router.push("/").then(() => { + window.location.reload(); + }); }) .catch(function (err) { console.log("An account using same email or username is already created"); @@ -51,7 +55,7 @@ export default function Register() { }; return ( -
+

Register

@@ -110,6 +114,9 @@ export default function Register() { onClick={register}> Register +
+ Already registered, Login here +
diff --git a/components/TodoListItem.js b/components/TodoListItem.js index 5b45bd0..58d8d14 100644 --- a/components/TodoListItem.js +++ b/components/TodoListItem.js @@ -1,54 +1,100 @@ /* eslint-disable @next/next/no-img-element */ +import { useState } from "react"; +import { useAuth } from "../context/auth"; +import axios from "axios"; -export default function TodoListItem() { - const editTask = (id) => { +export default function TodoListItem({ title, id, updateTasks }) { + const [editTitle, setEditTitle] = useState() + const [isEditing, setIsEditing] = useState(false) // Added state to track editing mode + const backendUrl = "https://todo-api-s7vj.onrender.com" + const { token } = useAuth(); + + const editTask = (task_id) => { /** * @todo Complete this function. * @todo 1. Update the dom accordingly */ + + setIsEditing(true); // Set isEditing state to true when the button is clicked }; - const deleteTask = (id) => { + const deleteTask = (task_id) => { /** * @todo Complete this function. * @todo 1. Send the request to delete the task to the backend server. * @todo 2. Remove the task from the dom. */ + + axios + .delete(`${backendUrl}/todo/${task_id}/`, { + headers: { + Authorization: `Token ${token}`, + }, + }) + .then(response => { + console.log('Task deleted successfully:', response); + updateTasks() + }) + .catch(error => { + console.error('Error deleting task:', error); + }); }; - const updateTask = (id) => { + const updateTask = (task_id) => { /** * @todo Complete this function. * @todo 1. Send the request to update the task to the backend server. * @todo 2. Update the task in the dom. */ + + // Send the PUT request + axios + .put(`${backendUrl}/todo/${task_id}/`, { title: editTitle }, { + headers: { + Authorization: `Token ${token}`, + }, + }) + .then((response) => { + setIsEditing(false); + const updatedTask = response.data; + updateTasks() + console.log('Task updated successfully:', updatedTask); + }) + .catch((error) => { + console.error('Error updating task:', error); + }); }; return ( <> -
  • + +
  • setEditTitle(e.target.value)} /> -
    +
    -
    - Sample Task 1 +
    + {title}