From e77bc79fc33b3751ff86a5993907b204927ed731 Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 18:23:33 +0530 Subject: [PATCH 01/18] Update auth_required.js --- middlewares/auth_required.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/middlewares/auth_required.js b/middlewares/auth_required.js index 7f5e7bc..ec9eede 100644 --- a/middlewares/auth_required.js +++ b/middlewares/auth_required.js @@ -1,3 +1,17 @@ +import { useRouter } from "next/router"; +import { useEffect } from "react"; +import { useAuth } from "../context/auth" + /*** * @todo Redirect the user to login page if token is not present. */ +export default function authRequired(){ + + const router = useRouter() + const { token } = useAuth() + useEffect(()=>{ + if(!token){ + router.push('/login') + } + },[]) +} From 7ed52f255a37fd46077bcff48c423942e8ef60f1 Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 18:24:31 +0530 Subject: [PATCH 02/18] Update auth_required.js --- middlewares/auth_required.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/middlewares/auth_required.js b/middlewares/auth_required.js index ec9eede..24831b6 100644 --- a/middlewares/auth_required.js +++ b/middlewares/auth_required.js @@ -2,9 +2,7 @@ import { useRouter } from "next/router"; import { useEffect } from "react"; import { useAuth } from "../context/auth" -/*** - * @todo Redirect the user to login page if token is not present. - */ + export default function authRequired(){ const router = useRouter() @@ -13,5 +11,5 @@ export default function authRequired(){ if(!token){ router.push('/login') } - },[]) + },[token]) } From 133010094b4051e376596d0f85525a973f283f07 Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 18:25:46 +0530 Subject: [PATCH 03/18] Update no_auth_required.js --- middlewares/no_auth_required.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/middlewares/no_auth_required.js b/middlewares/no_auth_required.js index 82558d4..d3526ca 100644 --- a/middlewares/no_auth_required.js +++ b/middlewares/no_auth_required.js @@ -1,3 +1,14 @@ -/*** - * @todo Redirect the user to main page if token is present. - */ \ No newline at end of file +import { useRouter } from "next/router"; +import { useEffect } from "react"; +import { useAuth } from "../context/auth"; + +export default function noAuthRequired(){ + const router = useRouter() + const { token } = useAuth() + + useEffect(()=>{ + if(token){ + router.push('/') + } + },[token]) +} From 2d42a9e013e20d9489eb93ce31cbaaf6b134f2ab Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 18:27:46 +0530 Subject: [PATCH 04/18] Update auth_required.js --- middlewares/auth_required.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/middlewares/auth_required.js b/middlewares/auth_required.js index 24831b6..c2f20fd 100644 --- a/middlewares/auth_required.js +++ b/middlewares/auth_required.js @@ -8,7 +8,7 @@ export default function authRequired(){ const router = useRouter() const { token } = useAuth() useEffect(()=>{ - if(!token){ + if(token===undefined){ router.push('/login') } },[token]) From 2bf957d36424980c9449e4f7a40cad6ec044a08f Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 18:37:19 +0530 Subject: [PATCH 05/18] Update index.js --- pages/index.js | 50 +++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 43 insertions(+), 7 deletions(-) diff --git a/pages/index.js b/pages/index.js index c3c9134..c86b47e 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,32 +1,68 @@ import TodoListItem from '../components/TodoListItem' import AddTask from '../components/AddTask' +import { API_URL } from '../utils/constants' +import authRequired from '../middlewares/auth_required' import { useEffect, useState } from 'react' import axios from '../utils/axios' import { useAuth } from '../context/auth' + export default function Home() { const { token } = useAuth() const [tasks, setTasks] = useState([]) + + authRequired(); + function getTasks() { - /*** - * @todo Fetch the tasks created by the user. - * @todo Set the tasks state and display them in the using TodoListItem component - * The user token can be accessed from the context using useAuth() from /context/auth.js - */ + + axios({ + headers: { + Authorization: 'Token ' + token + }, + url: API_URL + 'todo/', + method: 'GET', + }).then(function ({ data, status }) { + setTasks(data); + // console.log(data) + }).catch(err => { + console.log("error") + }); } + + useEffect(() => { + if (token != undefined)getTasks(); + }, [tasks]) + + return ( + <>
- +
    Available Tasks - + {tasks.map(task => { + return + })}
+ + ) } From d47da7965ba621bf966d6e1559e21731d4b18e3f Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 18:51:02 +0530 Subject: [PATCH 06/18] Update AddTask.js --- components/AddTask.js | 47 ++++++++++++++++++++++++++++++++++++++----- 1 file changed, 42 insertions(+), 5 deletions(-) diff --git a/components/AddTask.js b/components/AddTask.js index 9652adb..aa443dc 100644 --- a/components/AddTask.js +++ b/components/AddTask.js @@ -1,17 +1,54 @@ +import TodoListItem from '../components/TodoListItem' +import { useEffect, useState } from 'react' +import axios from '../utils/axios' +import { useAuth } from '../context/auth' +import { API_URL }from '../utils/constants' +import { ToastContainer, toast } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; + +export function displaySuccessToast(message) { + toast.success(message); +} +export function displayWarnToast(message) { + toast.warn(message); +} + +export function displayErrorToast(message) { + toast.error(message); +} export default function AddTask() { 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===""){ + displayWarnToast("Task is empty!!"); + } + else{ + axios({ + headers: { + Authorization: 'Token ' + token + }, + url: API_URL + "todo/create/", + method: 'POST', + data: { + title: task + }, + }).then(res => { + setTask(""); + props.displayTasks(); + console.log(res); + displaySuccessToast("Task added!!!"); + }).catch(function (err) { + displayErrorToast("Task couldn't be added"); + }) + } } return (
setTask(e.target.value)} 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} />
+ + ) } From 55b109f7593c833c98735d5dcc132fb1135358aa Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 19:06:03 +0530 Subject: [PATCH 08/18] Update Nav.js --- components/Nav.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/components/Nav.js b/components/Nav.js index e03cb0f..4a4db6b 100644 --- a/components/Nav.js +++ b/components/Nav.js @@ -1,14 +1,9 @@ -/* eslint-disable jsx-a11y/alt-text */ -/* eslint-disable @next/next/no-img-element */ import Link from 'next/link' import { useAuth } from '../context/auth' -/** - * - * @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() return ( ) From 9f8c6a0e949c92ed508b7adec1026b84c3e35e4a Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 19:11:45 +0530 Subject: [PATCH 09/18] Update RegisterForm.js --- components/RegisterForm.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/components/RegisterForm.js b/components/RegisterForm.js index a6ef2e3..1b4221e 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 { ToastContainer, toast } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; export default function Register() { const { setToken } = useAuth() @@ -27,11 +29,11 @@ export default function Register() { username === '' || password === '' ) { - console.log('Please fill all the fields correctly.') + toast.warn("Please fill all the fields correctly.",{position: "top-center"}); return false } if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) { - console.log('Please enter a valid email address.') + toast.warn("Please enter a valid email address.",{position: "top-center"}) return false } return true @@ -43,7 +45,7 @@ export default function Register() { if ( registerFieldsAreValid(firstName, lastName, email, username, password) ) { - console.log('Please wait...') + toast.info('Please wait...',{position: "top-center"}) const dataForApiRequest = { name: firstName + ' ' + lastName, @@ -61,14 +63,16 @@ export default function Register() { router.push('/') }) .catch(function (err) { - console.log( - 'An account using same email or username is already created' + toast.error( + "An account using same email or username is already created",{position: "top-center"} ) }) } } return ( + <> +
@@ -132,5 +136,6 @@ export default function Register() {
+ ) } From 775ef05816547cc3d05121f4984fb6981774972d Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 19:19:09 +0530 Subject: [PATCH 10/18] Update TodoListItem.js --- components/TodoListItem.js | 90 ++++++++++++++++++++++++++++---------- 1 file changed, 66 insertions(+), 24 deletions(-) diff --git a/components/TodoListItem.js b/components/TodoListItem.js index 7965f3b..426a8b8 100644 --- a/components/TodoListItem.js +++ b/components/TodoListItem.js @@ -1,55 +1,97 @@ -/* eslint-disable @next/next/no-img-element */ +import React, {useState} from "react" +import { useAuth } from '../context/auth' +import { ToastContainer, toast } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; +import axios from '../utils/axios' +import { API_URL } from '../utils/constants' + +export default function TodoListItem(props) { + const [task, setTask] = useState(props.task) + const {token} = useAuth() + + const inputId = "input-button-"+props.id; + const doneId = "done-button-"+props.id; + const taskId = "task-"+props.id; + const taskActionsId = "task-actions-"+props.id; -export default function TodoListItem() { const editTask = (id) => { - /** - * @todo Complete this function. - * @todo 1. Update the dom accordingly - */ + document.getElementById("input-button-"+id).classList.remove("hideme"); + document.getElementById("done-button-"+id).classList.remove("hideme"); + document.getElementById("task-"+id).classList.add("hideme"); + document.getElementById("task-actions-"+id).classList.add("hideme"); } const deleteTask = (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({ + headers: { + Authorization: 'Token ' + token + }, + url: API_URL + 'todo/' + id + '/', + method: 'DELETE', + }).then(() => { + toast.success("Task has been deleted",{position: "top-center"}); + props.displayTasks(); + }).catch((err) => { + toast.warn("error",{position: "top-center"}); + }) } const updateTask = (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. - */ + if (task===""){ + toast.warn("Task is empty!!",{position: "top-center"}); + } + else{ + axios({ + headers: { + Authorization: 'Token ' + token + }, + url: API_URL + 'todo/' + id + '/', + method: 'PUT', + data: { + title: task + }, + }).then(() => { + toast.success("Todo has been updated...",{position: "top-center"}); + document.getElementById("input-button-"+props.id).classList.add("hideme"); + document.getElementById("done-button-"+props.id).classList.add("hideme"); + document.getElementById("task-"+props.id).classList.remove("hideme"); + document.getElementById("task-actions-"+props.id).classList.remove("hideme"); + props.displayTasks(); + }).catch(function (err) { + toast.warn("error",{position: "top-center"}); + }) + } } return ( <> +
  • setTask(e.target.value)} + id={inputId} 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' placeholder='Edit The Task' + value={task} /> -
    +
    -
    - Sample Task 1 +
    + {task}
    - +
    - ) } From da317fb6d5c2d003c1115263239127abbb6c0c12 Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 19:32:20 +0530 Subject: [PATCH 13/18] Update AddTask.js --- components/AddTask.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/AddTask.js b/components/AddTask.js index aa443dc..b45eaba 100644 --- a/components/AddTask.js +++ b/components/AddTask.js @@ -17,6 +17,8 @@ export function displayErrorToast(message) { toast.error(message); } export default function AddTask() { + const {token} = useAuth(); + const [task, setTask] = useState("") const addTask = () => { if (task===""){ displayWarnToast("Task is empty!!"); From 8641c8da824ee16fbfadbf210688db938fcfb8e3 Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 19:32:54 +0530 Subject: [PATCH 14/18] Update LoginForm.js --- components/LoginForm.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/LoginForm.js b/components/LoginForm.js index 817877b..ae7bc1e 100644 --- a/components/LoginForm.js +++ b/components/LoginForm.js @@ -102,3 +102,4 @@ export default function RegisterForm() { ) } +} From 3adf757b045c3f94b69ee9e15f478b318906b0b3 Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 20:10:24 +0530 Subject: [PATCH 15/18] Update LoginForm.js --- components/LoginForm.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/components/LoginForm.js b/components/LoginForm.js index ae7bc1e..f07898a 100644 --- a/components/LoginForm.js +++ b/components/LoginForm.js @@ -9,8 +9,7 @@ import 'react-toastify/dist/ReactToastify.css'; const BASE_URL = "todo-app-csoc.herokuapp.com/" ; export default function RegisterForm() { - const login = () => { - const router = useRouter(); + const router = useRouter(); const { setToken } = useAuth(); const [loginData, setLoginData] = React.useState({ @@ -36,7 +35,7 @@ export default function RegisterForm() { username: loginData.inputUsername, password: loginData.inputPassword } - if(username==="" || password===""){ + if(userData.username==="" || userData.password===""){ toast.warn("Enter username or password",{position: "top-center"}); return; } @@ -102,4 +101,4 @@ export default function RegisterForm() { ) } -} + From bd982b53adbe71d553d7d47232a7b3d2fc5a5336 Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 20:11:05 +0530 Subject: [PATCH 16/18] Update AddTask.js --- components/AddTask.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/components/AddTask.js b/components/AddTask.js index b45eaba..7e0a31e 100644 --- a/components/AddTask.js +++ b/components/AddTask.js @@ -20,7 +20,7 @@ export default function AddTask() { const {token} = useAuth(); const [task, setTask] = useState("") const addTask = () => { - if (task===""){ + if (task==""){ displayWarnToast("Task is empty!!"); } else{ @@ -34,12 +34,11 @@ export default function AddTask() { title: task }, }).then(res => { + displaySuccessToast("Task added!!!"); setTask(""); props.displayTasks(); - console.log(res); - displaySuccessToast("Task added!!!"); + }).catch(function (err) { - displayErrorToast("Task couldn't be added"); }) } } From e1e21e1e5651144865307516e0b672cddd75be08 Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 20:13:32 +0530 Subject: [PATCH 17/18] Update auth.js --- context/auth.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/context/auth.js b/context/auth.js index 646b10e..a9ed6d5 100644 --- a/context/auth.js +++ b/context/auth.js @@ -16,7 +16,7 @@ export const AuthProvider = ({ children }) => { const deleteToken = () => removeCookies('token') const logout = () => { deleteToken() - router.push('/login') + router.push('/error', '/login'); } useEffect(() => { From d55eeff8c195684e9a333c789645628ea31a672a Mon Sep 17 00:00:00 2001 From: peepo77 <96831986+peepo77@users.noreply.github.com> Date: Wed, 29 Jun 2022 20:15:14 +0530 Subject: [PATCH 18/18] Update index.js --- pages/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/index.js b/pages/index.js index d554853..b0315aa 100644 --- a/pages/index.js +++ b/pages/index.js @@ -51,6 +51,7 @@ export default function Home() {
    + ) }