Adrito-M

.eslintrc

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

components/AddTask.js

@@ -1,17 +1,87 @@
-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.
-     */
+import axios from "../utils/axios"
+import { useState } from "react"
+import { useAuth } from "../context/auth"
+import {toast} from "react-toastify"
+import 'react-toastify/dist/ReactToastify.css';
+
+export default function AddTask({tasks, allTasks, setTasks, setAllTasks, query}) {
+  const {token} = useAuth()
+  const [_title, setTitle] = useState('')
+  let adding = false
+  const addTask = async () => {
+    if (adding) return
+    if (_title === '') {
+      toast.error('Task title cannot be empty', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+      return
+    }
+    adding = true
+    toast.info('Adding task', {
+      position: "bottom-right",
+      autoClose: 500,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+      theme: "colored",
+    })
+    await axios({
+      method: 'POST',
+      url: 'todo/create/',
+      headers: {Authorization: `Token ${token}`},
+      data: {title: _title}
+    }).catch( () => {
+      toast.error('Something went wrong', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      });
+      return
+    })
+    toast.success('Task added successfully!', {
+      position: "bottom-right",
+      autoClose: 2000,
+      hideProgressBar: true,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+      theme: "colored",
+    });
+    setTitle('')
+    const newTask = await axios({
+      method: 'GET',
+      url: 'todo/',
+      headers: {Authorization: `token ${token}`}
+    }).then(res => res.data.pop())
+
+    if (newTask.title.toLowerCase().indexOf(query) !== -1) setTasks([...tasks, newTask])
+    setAllTasks([...allTasks, newTask])
+    adding = false
   }
+
   return (
-    <div className='flex items-center max-w-sm mt-24'>
+    <div className='flex items-center max-w-sm mt-10'>
       <input
         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={_title}
+        onChange={(e) => setTitle(e.target.value)}
       />
       <button
         type='button'

components/LoginForm.js

@@ -1,12 +1,61 @@
-export default function RegisterForm() {
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { useAuth } from "../context/auth";
+import axiosInstance from "../utils/axios";
+import {toast} from "react-toastify"
+import 'react-toastify/dist/ReactToastify.css';
+
+export default function LoginForm() {
+  const auth = useAuth()
+  const route = useRouter()
+
   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)
-     */
+    if (username === '' || password === '') {
+      toast.error('Username or Password cannot be empty', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+      return
+    }
+
+    axiosInstance.post('auth/login/',{username: username, password: password})
+    .then(ret => ret.data.token)
+    .then((token) => {
+      auth.setToken(token)
+      toast.success('Login successful', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+      route.push('/')
+    })
+    .catch(() => {
+      toast.error('Invalid username or password', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
+    })
   }
+
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
 
   return (
     <div className='bg-grey-lighter min-h-screen flex flex-col'>
@@ -19,6 +68,7 @@ export default function RegisterForm() {
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            onChange={event => setUsername(event.target.value)}
           />
 
           <input
@@ -27,6 +77,7 @@ export default function RegisterForm() {
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            onChange={event => setPassword(event.target.value)}
           />
 
           <button

components/Nav.js

@@ -2,16 +2,21 @@
 /* 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 { useEffect, useState } from 'react';
 
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
+
+  const { token, logout, profileName, avatarImage } = useAuth()
+  const [LoginRegisterClass, setLoginRegisterClass] = useState('')
+  const [ProfileClass, setProfileClass] = useState('')
+
+  useEffect(() => {
+    setLoginRegisterClass(`${token ? 'hideme' : ''} flex`)
+    setProfileClass(`${token ? '' : 'hideme'} inline-block relative`)
+  }, [token])
 
   return (
-    <nav className='bg-blue-600'>
+    <nav className='bg-blue-600 sticky top-0'>
       <ul className='flex items-center justify-between p-5'>
         <ul className='flex items-center justify-between space-x-4'>
           <li>
@@ -22,34 +27,26 @@ export default function Nav() {
             </Link>
           </li>
         </ul>
-        <ul className='flex'>
+        <ul className={LoginRegisterClass}>
           <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={ProfileClass}>
           <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} />
+              <img src={avatarImage} className='pr-4'/>
               <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'
-              >
+              <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}
-                >
+                <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>

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 {toast} from "react-toastify"
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function Register() {
   const { setToken } = useAuth()
@@ -27,11 +29,29 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      toast.error('Please fill all the fields correctly.', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
       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: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
       return false
     }
     return true
@@ -43,7 +63,16 @@ export default function Register() {
     if (
       registerFieldsAreValid(firstName, lastName, email, username, password)
     ) {
-      console.log('Please wait...')
+      toast.info('Please wait...', {
+        position: "bottom-right",
+        autoClose: 2000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: "colored",
+      })
 
       const dataForApiRequest = {
         name: firstName + ' ' + lastName,
@@ -56,14 +85,31 @@ export default function Register() {
         'auth/register/',
         dataForApiRequest,
       )
-        .then(function ({ data, status }) {
+        .then(function ({ data }) {
           setToken(data.token)
           router.push('/')
+          toast.success('Login successful', {
+            position: "bottom-right",
+            autoClose: 2000,
+            hideProgressBar: true,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "colored",
+          })
         })
         .catch(function (err) {
-          console.log(
-            'An account using same email or username is already created'
-          )
+          toast.warn('An account using same email or username is already created', {
+            position: "bottom-right",
+            autoClose: 2000,
+            hideProgressBar: true,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "colored",
+          })
         })
     }
   }

components/Search.js

@@ -0,0 +1,21 @@
+import { useState } from "react"
+
+export default function Search({ allTasks, setTasks, setQuery }) {
+
+  const onChange = (e) => {
+    const a = e.target.value
+    setTasks(allTasks.filter(({title}) => title.toLowerCase().indexOf(a.toLowerCase()) !== -1))
+    setQuery(a.toLowerCase())
+  }
+
+  return (
+    <div className='flex items-center max-w-sm mt-10'>
+      <input
+        type='text'
+        className='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='Search'
+        onChange={onChange}
+      />
+    </div>
+  )
+}