diff --git a/.eslintrc b/.eslintrc index a2ceebe..15db834 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,3 +1,7 @@ { - "extends": ["next/babel", "next/core-web-vitals"] + "extends": ["next", "next/core-web-vitals"], + "rules": { + // Other rules + "@next/next/no-img-element": "off" + } } diff --git a/components/AddTask.js b/components/AddTask.js index 9652adb..db29a5b 100644 --- a/components/AddTask.js +++ b/components/AddTask.js @@ -1,25 +1,65 @@ -export default function AddTask() { +import { useState } from "react" +import axios from '../utils/axios' +import { useAuth } from "../context/auth"; + +import {displaySuccess, displayWarning, displayError, displayInfo} from '../pages/_app' + + +export default function AddTask(props) { + + const [task, setTask] = useState(''); + const { token } = useAuth(); + + + const refreshTask = () => props.getTasks(); + + 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 === '') { + displayWarning("Task Cannot be Empty") + return + } + + const dataForApiRequest = { + title: task, + } + + axios({ + url: 'todo/create/', + headers: { + Authorization: 'Token ' + token, + }, + method: 'post', + data: dataForApiRequest, + }) + .then(function ({ data, status }) { + setTask("") + refreshTask(); + displaySuccess("Task Added Successfully") + }) + .catch(function (err) { + displayError("Some Error Occurred") + }) } return ( -
- - -
+ <> +
+ setTask(e.target.value)} + /> + +
+ ) } diff --git a/components/LoginForm.js b/components/LoginForm.js index fa28f9e..6c34adc 100644 --- a/components/LoginForm.js +++ b/components/LoginForm.js @@ -1,43 +1,97 @@ +import React, { useEffect, useState } from 'react' +import axios from '../utils/axios' +import { useAuth } from '../context/auth' +import { useRouter } from 'next/router' +import {displaySuccess, displayWarning, displayError, displayInfo} from '../pages/_app' + + 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) - */ + + + const router = useRouter(); + const { setToken, token } = useAuth(); + + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + + function logInValidate(username, password) { + if (username === '' || password === '') { + displayError("Invalid Credential") + return false; + } + return true; + } + + + const login = (e) => { + + e.preventDefault(); + + if (logInValidate(username, password)) { + + displayInfo("Please Wait ...."); + + const data = { + username: username, + password: password, + } + + axios.post( + 'auth/login/', + data, + ) + .then(function ({ data, status }) { + + displaySuccess("Logged In Succssfully"); + + setTimeout(() => { + setToken(data.token) + router.push('/') + }, 3000); + + }) + .catch(function (err) { + displayError('Failed To Log In Try Again') + }) + } } return ( -
-
-
-

Login

- - - - - + <> +
+
+
+

Login

+ setUsername(e.target.value)} + placeholder='Username' + /> + + setPassword(e.target.value)} + placeholder='Password' + /> + + +
-
+ ) } diff --git a/components/Nav.js b/components/Nav.js index e03cb0f..8bd382d 100644 --- a/components/Nav.js +++ b/components/Nav.js @@ -1,14 +1,22 @@ -/* 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 - */ +import { displayError } from '../pages/_app' + + + + export default function Nav() { - const { logout, profileName, avatarImage } = useAuth() + + + const { logout, profileName, avatarImage, token } = useAuth() + + + function handleLogout() { + logout(); + displayError("Logged Out Successfully") + } return (
} ) diff --git a/components/RegisterForm.js b/components/RegisterForm.js index a6ef2e3..d72fba8 100644 --- a/components/RegisterForm.js +++ b/components/RegisterForm.js @@ -2,6 +2,7 @@ import React, { useState } from 'react' import axios from '../utils/axios' import { useAuth } from '../context/auth' import { useRouter } from 'next/router' +import {displaySuccess, displayWarning, displayError, displayInfo} from '../pages/_app' export default function Register() { const { setToken } = useAuth() @@ -27,11 +28,12 @@ export default function Register() { username === '' || password === '' ) { - console.log('Please fill all the fields correctly.') + + displayError("Invalid Credentials") return false } if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) { - console.log('Please enter a valid email address.') + displayError("Invalid Email") return false } return true @@ -43,7 +45,7 @@ export default function Register() { if ( registerFieldsAreValid(firstName, lastName, email, username, password) ) { - console.log('Please wait...') + displayInfo("Please Wait") const dataForApiRequest = { name: firstName + ' ' + lastName, @@ -57,11 +59,17 @@ export default function Register() { dataForApiRequest, ) .then(function ({ data, status }) { - setToken(data.token) - router.push('/') + + displaySuccess("Registered Succssfully"); + + setTimeout(() => { + setToken(data.token) + router.push('/') + }, 3000); + }) .catch(function (err) { - console.log( + displayError( 'An account using same email or username is already created' ) }) @@ -69,68 +77,70 @@ export default function Register() { } return ( -
-
-
-

Register

- setFirstName(e.target.value)} - placeholder='First Name' - /> - setLastName(e.target.value)} - placeholder='Last Name' - /> - - setEmail(e.target.value)} - placeholder='Email Address' - /> - - setUsername(e.target.value)} - placeholder='Username' - /> - - setPassword(e.target.value)} - placeholder='Password' - /> - - + <> +
+
+
+

Register

+ setFirstName(e.target.value)} + placeholder='First Name' + /> + setLastName(e.target.value)} + placeholder='Last Name' + /> + + setEmail(e.target.value)} + placeholder='Email Address' + /> + + setUsername(e.target.value)} + placeholder='Username' + /> + + setPassword(e.target.value)} + placeholder='Password' + /> + + +
-
+ ) } diff --git a/components/TodoListItem.js b/components/TodoListItem.js index 7965f3b..1ab60e5 100644 --- a/components/TodoListItem.js +++ b/components/TodoListItem.js @@ -1,55 +1,106 @@ /* eslint-disable @next/next/no-img-element */ +import React, { useState } from "react" +import { useAuth } from "../context/auth" +import axios from "../utils/axios" +import {displayError, displayInfo, displaySuccess, displayWarning} from '../pages/_app' + + +export default function TodoListItem(props) { + + + const { token } = useAuth(); + const refreshTask = () => props.getTasks(); + const [editingTask, setEditingTask] = useState(false); + const display1 = { display: editingTask ? 'none' : 'flex' } + const display2 = { display: !editingTask ? 'none' : 'flex' } + const [updatedTask, setUpdatedTask] = useState(''); + -export default function TodoListItem() { const editTask = (id) => { - /** - * @todo Complete this function. - * @todo 1. Update the dom accordingly - */ + setEditingTask(!editingTask); } 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({ + url: 'todo/' + id + '/', + headers: { + Authorization: 'Token ' + token, + }, + method: 'delete', + }) + .then(function ({ data, status }) { + displayError("Task Deleted Successfully"); + refreshTask(); + }) + .catch((err) => { + displayError("Some Error Occurred"); + }) + } 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. - */ + + console.log(updatedTask); + + if (updatedTask === '') { + displayWarning("😡😡 Task Cannot be Empty 😡😡") + return; + } + + const dataForApiRequest = { + title: updatedTask, + } + + axios( + { + url: 'todo/' + id + '/', + headers: { + Authorization: 'Token ' + token, + }, + method: 'patch', + data: dataForApiRequest + + }) + .then(function ({ data, status }) { + refreshTask(); + displayWarning("Task Updated Successfully") + setEditingTask(!editingTask); + }) + .catch((err) => { + displayError("Some Error Occurred"); + }) } return ( <>
  • setUpdatedTask(e.target.value)} + style={display2} /> -
    +
    -
    - Sample Task 1 +
    + {props.title}
    - +