Todo React week-3 Task

.eslintrc

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"]
+  "extends": ["next", "next/core-web-vitals"]
 }

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 (
     <div className='flex items-center max-w-sm mt-24'>
       <input
         type='text'
+        id='addTask'
         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)}
       />
       <button
         type='button'
+        id='addTaskButton'
         className='todo-add-task bg-transparent hover:bg-green-500 text-green-700 text-sm hover:text-white px-3 py-2 border border-green-500 hover:border-transparent rounded'
-        onClick={addTask}
-      >
+        onClick={addTask}>
         Add Task
       </button>
     </div>

components/LoginForm.js

@@ -1,23 +1,68 @@
+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 (
+
     <div className='bg-grey-lighter min-h-screen flex flex-col'>
       <div className='container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2'>
-        <div className='bg-white px-6 py-8 rounded shadow-md text-black w-full'>
-          <h1 className='mb-8 text-3xl text-center'>Login</h1>
+        <div className='bg-white px-6 py-8 rounded shadow-md text-black w-full' id='box'>
+          <h1 className='mb-8 text-3xl text-center'><strong><u>Login</u></strong></h1>
           <input
             type='text'
             className='block border border-grey-light w-full p-3 rounded mb-4'
             name='inputUsername'
             id='inputUsername'
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
             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'
           />
 
           <button
             type='submit'
+            id='loginButton'
             className='w-full text-center py-3 rounded bg-transparent text-green-500 hover:text-white hover:bg-green-500 border border-green-500 hover:border-transparent focus:outline-none my-1'
-            onClick={login}
-          >
+            onClick={login}>
             Login
           </button>
         </div>

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 (
-    <nav className='bg-blue-600'>
+    <nav className='navBar'>
       <ul className='flex items-center justify-between p-5'>
         <ul className='flex items-center justify-between space-x-4'>
           <li>
@@ -22,6 +21,8 @@ export default function Nav() {
             </Link>
           </li>
         </ul>
+        {!tokenValid &&
+        <div>
         <ul className='flex'>
           <li className='text-white mr-2'>
             <Link href='/login'>Login</Link>
@@ -30,9 +31,11 @@ export default function Nav() {
             <Link href='/register'>Register</Link>
           </li>
         </ul>
-        <div className='inline-block relative w-28'>
+        </div>}
+        <div className='inline-block relative w-50'>
           <div className='group inline-block relative'>
-            <button className='bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center'>
+            {tokenValid && <>
+              <button className='bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center'>
               <img src={avatarImage} />
               <span className='mr-1'>{profileName}</span>
               <svg
@@ -48,12 +51,12 @@ export default function Nav() {
                 <a
                   className='rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap'
                   href='#'
-                  onClick={logout}
-                >
+                  onClick={logout} >
                   Logout
                 </a>
               </li>
             </ul>
+            </>}
           </div>
         </div>
       </ul>

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,21 +61,19 @@ 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})
         })
     }
   }
 
   return (
     <div className='bg-grey-lighter min-h-screen flex flex-col'>
       <div className='container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2'>
-        <div className='bg-white px-6 py-8 rounded shadow-md text-black w-full'>
-          <h1 className='mb-8 text-3xl text-center'>Register</h1>
+        <div className='bg-white px-6 py-8 rounded shadow-md text-black w-full' id='box'>
+          <h1 className='mb-8 text-3xl text-center'><strong><u>Register</u></strong></h1>
           <input
             type='text'
             className='block border border-grey-light w-full p-3 rounded mb-4'
@@ -124,9 +125,9 @@ export default function Register() {
 
           <button
             type='submit'
+            id='registerButton'
             className='w-full text-center py-3 rounded bg-transparent text-green-500 hover:text-white hover:bg-green-500 border border-green-500 hover:border-transparent focus:outline-none my-1'
-            onClick={register}
-          >
+            onClick={register}>
             Register
           </button>
         </div>