diff --git a/components/AddTask.js b/components/AddTask.js index 8b8177f..2a688eb 100644 --- a/components/AddTask.js +++ b/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)}} /> - - +
+ {token && <> + + + }
+ + } ); diff --git a/components/RegisterForm.js b/components/RegisterForm.js index 67bc737..e4ea41a 100644 --- a/components/RegisterForm.js +++ b/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!") }); } }; diff --git a/components/TodoListItem.js b/components/TodoListItem.js index 5b45bd0..436da6a 100644 --- a/components/TodoListItem.js +++ b/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 ( <>
  • {setEditedTask(e.target.value)}} /> -
    +
    -
    - Sample Task 1 +
    + {props.title}
    - +