diff --git a/.eslintrc b/.eslintrc index a2ceebe..97a2bb8 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,3 +1,3 @@ { - "extends": ["next/babel", "next/core-web-vitals"] + "extends": ["next", "next/core-web-vitals"] } diff --git a/components/AddTask.js b/components/AddTask.js index 9652adb..f037422 100644 --- a/components/AddTask.js +++ b/components/AddTask.js @@ -1,23 +1,52 @@ +import axios from '../utils/axios' +import React, { useEffect, useState } from 'react' +import { useAuth } from '../context/auth' +import { API_URL } from '../utils/constants' +import {toast} from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; + 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) { + toast.error('Task cannot be empty!',{position: toast.POSITION.TOP_CENTER}) + } + else { + axios({ + headers: { + Authorization: 'Token ' + token + }, + url: API_URL + 'todo/create/', + method: 'post', + data: {title: task} + }).then(function({data,status}){ + toast.success('Task added successfully!',{position: toast.POSITION.TOP_CENTER}) + setTask('') + }).catch((error) => { + toast.error('Please try again!',{position: toast.POSITION.TOP_CENTER}) + }) + } } + return (
setTask(e.target.value)} />
diff --git a/components/LoginForm.js b/components/LoginForm.js index fa28f9e..0ddc387 100644 --- a/components/LoginForm.js +++ b/components/LoginForm.js @@ -1,22 +1,67 @@ +import React, { useState } from 'react' +import axios from '../utils/axios' +import { useAuth } from '../context/auth' +import { useRouter } from 'next/router' +import { no_auth_required } from '../middlewares/no_auth_required' +import {toast} from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; + export default function RegisterForm() { - const login = () => { - /*** - * @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) - */ + no_auth_required() + + const { setToken } = useAuth() + const router = useRouter() + const [username, setUsername] = useState('') + const [password, setPassword] = useState('') + + const loginFieldsAreValid = (username,password) => { + if (username == '' || password == '') { + toast.warning('Please fill all the fields correctly.',{position: toast.POSITION.TOP_CENTER}) + return false + } + else return true + } + + const login = (e) => { + e.preventDefault() + + if (loginFieldsAreValid(username, password)) { + toast.info('Please wait...',{position: toast.POSITION.TOP_CENTER}) + + const dataForApiRequest = { + username: username, + password: password, + } + + axios.post( + 'auth/login/', + dataForApiRequest, + ) + .then(function({data,status}) { + + setToken(data.token) + router.push("LOGIN","/") + }) + .catch(function(err) { + toast.error('Invalid credentials! Try again...',{position: toast.POSITION.TOP_CENTER}) + }) + } + + } return ( +
-
-

Login

+
+

Login

setUsername(e.target.value)} id='inputUsername' placeholder='Username' /> @@ -26,14 +71,16 @@ export default function RegisterForm() { className='block border border-grey-light w-full p-3 rounded mb-4' name='inputPassword' id='inputPassword' + value={password} + onChange={(e) => setPassword(e.target.value)} placeholder='Password' />
diff --git a/components/Nav.js b/components/Nav.js index e03cb0f..c6cdc89 100644 --- a/components/Nav.js +++ b/components/Nav.js @@ -2,16 +2,15 @@ /* 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 - */ +import { useState, useEffect } from 'react' export default function Nav() { - const { logout, profileName, avatarImage } = useAuth() + const { logout, profileName, avatarImage, token } = useAuth() + const [ tokenValid, setTokenValid ] = useState(true) + useEffect(()=>{(token)?setTokenValid(true):setTokenValid(false)},[token]) return ( -
diff --git a/components/RegisterForm.js b/components/RegisterForm.js index a6ef2e3..93daa63 100644 --- a/components/RegisterForm.js +++ b/components/RegisterForm.js @@ -2,8 +2,11 @@ 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() const router = useRouter() @@ -27,11 +30,11 @@ export default function Register() { username === '' || password === '' ) { - console.log('Please fill all the fields correctly.') + toast.warning('Please fill all the fields correctly.',{position: toast.POSITION.TOP_CENTER}) 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.',{position: toast.POSITION.TOP_CENTER}) return false } return true @@ -43,7 +46,7 @@ export default function Register() { if ( registerFieldsAreValid(firstName, lastName, email, username, password) ) { - console.log('Please wait...') + toast.info('Please wait...',{position: toast.POSITION.TOP_CENTER}) const dataForApiRequest = { name: firstName + ' ' + lastName, @@ -58,12 +61,10 @@ export default function Register() { ) .then(function ({ data, status }) { setToken(data.token) - router.push('/') + router.push("REGISTER","/") }) .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: toast.POSITION.TOP_CENTER}) }) } } @@ -71,8 +72,8 @@ export default function Register() { return (
-
-

Register

+
+

Register

+ onClick={register}> Register
diff --git a/components/TodoListItem.js b/components/TodoListItem.js index 7965f3b..cca8208 100644 --- a/components/TodoListItem.js +++ b/components/TodoListItem.js @@ -1,56 +1,80 @@ /* eslint-disable @next/next/no-img-element */ -export default function TodoListItem() { - const editTask = (id) => { - /** - * @todo Complete this function. - * @todo 1. Update the dom accordingly - */ +import axios from '../utils/axios' +import React, { useEffect, useState } from 'react' +import { useAuth } from '../context/auth' +import { API_URL } from '../utils/constants' +import {toast} from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; + +export default function TodoListItem(props) { + + const { token } = useAuth() + const [edit, setEdit] = useState(false) + const [editText, setEditText] = useState('props.title') + + const editTask = () => { + setEditText('') + setEdit(true) } 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(function({data,status}){ + toast.success('Task deleted successfully!',{position: toast.POSITION.TOP_CENTER}) + }).catch((error)=>{ + toast.error('Please try again!',{position: toast.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. - */ + + axios({ + headers: {Authorization: 'Token ' + token}, + url: API_URL + 'todo/' + id + '/', + method: 'patch', + data: {id: id, title: editText}, + }).then(function({data,status}){ + toast.success('Task updated successfully!',{position: toast.POSITION.TOP_CENTER}) + }).catch((error)=>{ + toast.error('Please try again!',{position: toast.POSITION.TOP_CENTER}) + }) + setEdit(false) } return ( <> -
  • +
  • {setEditText(e.target.value)}} /> -
    +
    -
    - Sample Task 1 +
    + {props.title}
    - +