Completed Task-3 ReactJs (ujju20)

components/AddTask.js

@@ -1,17 +1,77 @@
-export default function AddTask() {
+import { useState } from "react";
+import axios from '../utils/axios';
+import { useAuth } from '../context/auth';
+import Script from "next/dist/client/script";
+export default function AddTask(props) {
+  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==='')
+    {
+      iziToast.destroy();
+      iziToast.info({
+        title:"Info",
+        message:"Please Enter Something"
+      })
+      return;
+    }
+
+
+    const dataForAPIRequest={
+      "title":Task,
+    }
+
+     axios.post('todo/create/',dataForAPIRequest,{
+      headers:{
+        Authorization:'Token '+token,
+      }
+    })
+    .then((res) => {
+      axios({
+        headers:{
+          Authorization:'Token '+token
+        },
+        url:'todo/',
+        method:'get'
+      })
+      .then((res) => {
+        const newTask=res.data[res.data.length-1];
+        props.addNewTask(newTask);
+      })
+
+      iziToast.destroy();
+      iziToast.success({
+        title:"Success",
+        message:"Task Added Successfully"
+      })
+
+    })
+    .catch(() => {
+      iziToast.destroy();
+      iziToast.error();({
+        title:"Error",
+        message:"Some Error Occured"
+      })
+    });
+
+
   }
   return (
     <div className='flex items-center max-w-sm mt-24'>
+       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css"></link>
+      <Script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></Script>
       <input
+        id="input-field"
         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'
+        onChange={(e) => {setTask(e.target.value);}}
       />
       <button
         type='button'

components/LoginForm.js

@@ -1,11 +1,81 @@
+import axios from '../utils/axios';
+import { useAuth } from '../context/auth';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { data } from 'autoprefixer';
+
 export default function RegisterForm() {
-  const login = () => {
+  const router= useRouter();
+  const [username,setUsername] = useState('');
+  const [password,setPassword] = useState('');
+  const { setToken }=useAuth();
+
+  const loginFieldsValid =(username,password) => {
+    if(username==='' || password==='')
+    {
+      iziToast.destroy();
+      iziToast.info({
+        title:"Info",
+        message:"Please Enter valid details"
+      });
+      return false;
+    }
+    return true;
+  };
+
+  const login = (e) => {
     /***
      * @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)
      */
+    e.preventDefault();
+
+
+    if(loginFieldsValid(username,password)){
+      iziToast.destroy();
+      iziToast.info({
+        title:"Info",
+        message:"Please Wait...."
+      })
+
+      const dataForApiRequest={
+        "username":username,
+        "password":password,
+      }
+
+      axios({
+        url:'auth/login/',
+        method:'POST',
+        data:dataForApiRequest
+      })
+      .then(
+        ({data}) => {
+          console.log(data.token);
+          setToken(data.token);
+          iziToast.destroy();
+          iziToast.success({
+            title:"Success",
+            message:"Logged In"
+          })
+          router.push('/');
+    })
+      .catch(
+        (err) => {
+          console.error(err);
+          iziToast.destroy();
+          iziToast.error({
+            title:"Error",
+            message:"This User Account does not exist"
+          })
+
+        }
+      )
+
+    }
+
+
   }
 
   return (
@@ -19,6 +89,7 @@ export default function RegisterForm() {
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            onChange={(e) => setUsername(e.target.value)}
           />
 
           <input
@@ -27,6 +98,7 @@ export default function RegisterForm() {
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            onChange={(e) => setPassword(e.target.value)}
           />
 
           <button

components/Nav.js

@@ -1,14 +1,68 @@
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable @next/next/no-img-element */
 import Link from 'next/link'
-import { useAuth } from '../context/auth'
+import { useAuth } from '../context/auth';
+import { useEffect, useState } from 'react';
 /**
  *
  * @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();
+  const [state,setState]=useState(null);
+  useEffect(() => {
+    if(token)
+    {
+      setState(AuthState);
+    }
+    else
+    {
+      setState(NoAuthState);
+    }
+  },[profileName,avatarImage,token])
+
+  const AuthState = (
+    <div className='inline-block relative w-28'>
+    <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'>
+        <img src={avatarImage} />
+        <span className='mr-1'>{profileName}</span>
+        <svg
+          className='fill-current h-4 w-4'
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox='0 0 20 20'
+        >
+          <path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
+        </svg>
+      </button>
+      <ul className='absolute hidden text-gray-700 pt-1 group-hover:block'>
+        <li className=''>
+          <a
+            className='rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap'
+            href='#'
+            onClick={logout}
+          >
+            Logout
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  )
+
+  const NoAuthState=(
+    <ul className='flex'>
+          <li className='text-white mr-2'>
+            <Link href='/login'>Login</Link>
+          </li>
+          <li className='text-white'>
+            <Link href='/register'>Register</Link>
+          </li>
+        </ul>
+  )
+
 
   return (
     <nav className='bg-blue-600'>
@@ -22,40 +76,9 @@ export default function Nav() {
             </Link>
           </li>
         </ul>
-        <ul className='flex'>
-          <li className='text-white mr-2'>
-            <Link href='/login'>Login</Link>
-          </li>
-          <li className='text-white'>
-            <Link href='/register'>Register</Link>
-          </li>
-        </ul>
-        <div className='inline-block relative w-28'>
-          <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'>
-              <img src={avatarImage} />
-              <span className='mr-1'>{profileName}</span>
-              <svg
-                className='fill-current h-4 w-4'
-                xmlns='http://www.w3.org/2000/svg'
-                viewBox='0 0 20 20'
-              >
-                <path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
-              </svg>
-            </button>
-            <ul className='absolute hidden text-gray-700 pt-1 group-hover:block'>
-              <li className=''>
-                <a
-                  className='rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap'
-                  href='#'
-                  onClick={logout}
-                >
-                  Logout
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
+        {state}
+
+
       </ul>
     </nav>
   )

components/RegisterForm.js

@@ -1,17 +1,17 @@
-import React, { useState } from 'react'
-import axios from '../utils/axios'
-import { useAuth } from '../context/auth'
-import { useRouter } from 'next/router'
+import React, { useState } from 'react';
+import axios from '../utils/axios';
+import { useAuth } from '../context/auth';
+import { useRouter } from 'next/router';
 
 export default function Register() {
-  const { setToken } = useAuth()
-  const router = useRouter()
+  const { setToken } = useAuth();
+  const router = useRouter();
 
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [username, setUsername] = useState('')
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState('');
 
   const registerFieldsAreValid = (
     firstName,
@@ -27,8 +27,12 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
-      return false
+      iziToast.destroy();
+      iziToast.info({
+        title:"Info",
+        message:"Please Enter valid details"
+      });
+      return false;
     }
     if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
       console.log('Please enter a valid email address.')
@@ -57,13 +61,16 @@ export default function Register() {
         dataForApiRequest,
       )
         .then(function ({ data, status }) {
-          setToken(data.token)
-          router.push('/')
+          setToken(data.token);
+          router.push('/');
         })
         .catch(function (err) {
-          console.log(
-            'An account using same email or username is already created'
-          )
+          iziToast.destroy();
+          iziToast.error({
+            title:"Error",
+            message:"An account using same email or username is already created"
+          })
+
         })
     }
   }