From cf3f789bd3627a073669747b2b3cf89a16c45bab Mon Sep 17 00:00:00 2001
From: Vaibhav <vaibhav.krpandey.che21@itbhu.ac.in>
Date: Wed, 29 Jun 2022 16:17:47 +0530
Subject: [PATCH 1/2] Full functionality

---
 components/AddTask.js           | 35 +++++++++++++++-
 components/LoginForm.js         | 67 +++++++++++++++++++++++++----
 components/Nav.js               | 28 ++++++-------
 components/RegisterForm.js      | 27 +++++++-----
 components/TodoListItem.js      | 74 +++++++++++++++++++++++++++------
 context/auth.js                 |  7 +++-
 middlewares/auth_required.js    | 14 +++++++
 middlewares/no_auth_required.js | 17 +++++++-
 package.json                    |  2 +-
 pages/index.js                  | 31 ++++++++++++--
 styles/globals.css              |  1 +
 tailwind.config.js              |  6 ++-
 yarn.lock                       | 17 +++++---
 13 files changed, 269 insertions(+), 57 deletions(-)

diff --git a/components/AddTask.js b/components/AddTask.js
index 9652adb..f0b7ee1 100644
--- a/components/AddTask.js
+++ b/components/AddTask.js
@@ -1,25 +1,56 @@
+import axios from "../utils/axios"
+import { useState } from "react"
+import { useAuth } from "../context/auth"
+import toast, { Toaster } from 'react-hot-toast';
+
 export default function AddTask() {
+  const [taskData,settaskData] = useState('')
+  const { token, check, setCheck } = 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 (token){
+      if (taskData == ''){
+        toast.error('Enter some data')
+        return
+      }
+      const dataForApiPost = {
+          title : taskData,
+      }
+      axios.post('todo/create/',dataForApiPost,{
+        headers:{
+          Authorization: 'Token '+ token
+        }
+      }).then((res)=>{
+          settaskData('')
+          setCheck(!check)
+          toast.success('Task added successfully!')
+      }).catch((err)=>{
+          toast.error('Failed to add task')
+      })
+    }
   }
+
   return (
     <div className='flex items-center max-w-sm mt-24'>
       <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'
+        className='font-body 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)=> settaskData(e.target.value)}
       />
       <button
         type='button'
-        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'
+        className='todo-add-task bg-transparent hover:bg-yellow-500 text-yellow-700 text-sm hover:text-white px-3 py-2 border border-yellow-500 hover:border-transparent rounded'
         onClick={addTask}
       >
         Add Task
       </button>
+      <Toaster/>
     </div>
   )
 }
diff --git a/components/LoginForm.js b/components/LoginForm.js
index fa28f9e..5ec6421 100644
--- a/components/LoginForm.js
+++ b/components/LoginForm.js
@@ -1,41 +1,94 @@
-export default function RegisterForm() {
-  const login = () => {
+import React, { useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import { useRouter } from 'next/router'
+import noAuthRequired from '../middlewares/no_auth_required'
+import toast, { Toaster } from 'react-hot-toast';
+
+export default function LoginForm() {
+  
+  const { setToken } = useAuth()
+  const router = useRouter()
+
+  noAuthRequired()
+
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  
+  const loginFieldsAreValid = (username, password) => {
+    if( username == '' || password == ''){
+      toast.error("Please fill all the fields correctly")
+      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 (loginFieldsAreValid(username,password)) {
+
+      toast('Please wait...')
+      
+      const dataForApiRequest = {
+        username: username,
+        password: password
+      }
+
+      axios.post('auth/login/',dataForApiRequest)
+        .then(
+          ({ data, status }) => {
+              setToken(data.token)
+              window.location.reload()
+              toast.success('Logged in!')
+          }
+        )
+        .catch(
+          (err) => {
+            toast.error("Invalid Credentials")
+          }
+        )
+    }
   }
 
   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>
+          <h1 className='font-body font-bold mb-8 text-3xl text-center'>Login</h1>
           <input
             type='text'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            className='font-body block border border-grey-light w-full p-3 rounded mb-4'
             name='inputUsername'
             id='inputUsername'
             placeholder='Username'
+            onChange={(e) => setUsername(e.target.value)}
           />
 
           <input
             type='password'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
+            className='font-body block border border-grey-light w-full p-3 rounded mb-4'
             name='inputPassword'
             id='inputPassword'
             placeholder='Password'
+            onChange={(e) => setPassword(e.target.value)}
           />
 
           <button
             type='submit'
-            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}
+            className='font-body w-full text-center py-3 rounded bg-transparent text-yellow-500 hover:text-white hover:bg-yellow-500 border border-yellow-500 hover:border-transparent focus:outline-none my-1'
+            onClick={(e)=>{login(e)}}
           >
             Login
           </button>
+          <Toaster/>
         </div>
       </div>
     </div>
diff --git a/components/Nav.js b/components/Nav.js
index e03cb0f..b317654 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -8,33 +8,33 @@ import { useAuth } from '../context/auth'
  */
 
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
+  const { logout, profileName, avatarImage, token } = useAuth()
 
   return (
-    <nav className='bg-blue-600'>
+    <nav className='bg-yellow-600'>
       <ul className='flex items-center justify-between p-5'>
         <ul className='flex items-center justify-between space-x-4'>
           <li>
             <Link href="/" passHref={true}>
               <a>
-                <h1 className='text-white font-bold text-xl'>Todo</h1>
+                <h1 className='text-white font-bold text-4xl font-body'>Todo</h1>
               </a>
             </Link>
           </li>
         </ul>
-        <ul className='flex'>
-          <li className='text-white mr-2'>
+        {(!token) && <ul className='flex'>
+          <li className='text-white mr-2 font-body text-xl bg-yellow-500 p-2'>
             <Link href='/login'>Login</Link>
           </li>
-          <li className='text-white'>
+          <li className='text-white font-body text-xl bg-yellow-500 p-2'>
             <Link href='/register'>Register</Link>
           </li>
-        </ul>
-        <div className='inline-block relative w-28'>
+        </ul>}
+        {(token) && <div className='inline-block relative w-40'>
           <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'>
+            <button className='bg-yellow-500 text-white font-semibold py-2 px-4 rounded inline-flex items-center'>
               <img src={avatarImage} />
-              <span className='mr-1'>{profileName}</span>
+              <span className='mr-1 ml-1 font-body'>{profileName}</span>
               <svg
                 className='fill-current h-4 w-4'
                 xmlns='http://www.w3.org/2000/svg'
@@ -43,19 +43,19 @@ export default function Nav() {
                 <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'>
+            <ul className='absolute hidden text-black hover:text-white 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'
+                  className='rounded-b bg-yellow-200 hover:bg-yellow-500 py-2 px-4 block whitespace-no-wrap'
                   href='#'
-                  onClick={logout}
+                  onClick={()=>{logout()}}
                 >
                   Logout
                 </a>
               </li>
             </ul>
           </div>
-        </div>
+        </div>}
       </ul>
     </nav>
   )
diff --git a/components/RegisterForm.js b/components/RegisterForm.js
index a6ef2e3..5be4373 100644
--- a/components/RegisterForm.js
+++ b/components/RegisterForm.js
@@ -2,11 +2,16 @@ import React, { useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
 import { useRouter } from 'next/router'
+import noAuthRequired from '../middlewares/no_auth_required'
+import toast, { Toaster } from 'react-hot-toast';
 
-export default function Register() {
+
+export default function RegisterForm() {    
   const { setToken } = useAuth()
   const router = useRouter()
 
+  noAuthRequired()
+
   const [firstName, setFirstName] = useState('')
   const [lastName, setLastName] = useState('')
   const [email, setEmail] = useState('')
@@ -27,11 +32,11 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      toast.error('Please fill all the fields correctly.')
       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.')
       return false
     }
     return true
@@ -43,7 +48,7 @@ export default function Register() {
     if (
       registerFieldsAreValid(firstName, lastName, email, username, password)
     ) {
-      console.log('Please wait...')
+      toast('Please wait...')
 
       const dataForApiRequest = {
         name: firstName + ' ' + lastName,
@@ -58,10 +63,11 @@ export default function Register() {
       )
         .then(function ({ data, status }) {
           setToken(data.token)
-          router.push('/')
+          window.location.reload()
+          toast.success('Successfully registered!')
         })
         .catch(function (err) {
-          console.log(
+          toast.error(
             'An account using same email or username is already created'
           )
         })
@@ -69,10 +75,10 @@ export default function Register() {
   }
 
   return (
-    <div className='bg-grey-lighter min-h-screen flex flex-col'>
+    <div className='font-body 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>
+          <h1 className='mb-8 text-3xl text-center font-bold'>Register</h1>
           <input
             type='text'
             className='block border border-grey-light w-full p-3 rounded mb-4'
@@ -124,11 +130,12 @@ export default function Register() {
 
           <button
             type='submit'
-            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}
+            className='w-full text-center py-3 rounded bg-transparent text-yellow-500 hover:text-white hover:bg-yellow-500 border border-yellow-500 hover:border-transparent focus:outline-none my-1'
+            onClick={(e)=>{register(e)}}
           >
             Register
           </button>
+          <Toaster/>
         </div>
       </div>
     </div>
diff --git a/components/TodoListItem.js b/components/TodoListItem.js
index 7965f3b..b828206 100644
--- a/components/TodoListItem.js
+++ b/components/TodoListItem.js
@@ -1,11 +1,24 @@
 /* eslint-disable @next/next/no-img-element */
 
-export default function TodoListItem() {
+import { useState } from "react"
+import { useAuth } from "../context/auth"
+import axios from "../utils/axios"
+import toast, { Toaster } from 'react-hot-toast';
+
+export default function TodoListItem({ title, id }) {
+
+  const { token,check, setCheck } = useAuth()
+
+  const [editStatus, setEditStatus] = useState(false)
+
+  const [updateData,setupdateData] = useState('')
+  
   const editTask = (id) => {
     /**
      * @todo Complete this function.
      * @todo 1. Update the dom accordingly
      */
+    setEditStatus(!editStatus)
   }
 
   const deleteTask = (id) => {
@@ -14,6 +27,18 @@ export default function TodoListItem() {
      * @todo 1. Send the request to delete the task to the backend server.
      * @todo 2. Remove the task from the dom.
      */
+    if (token){
+      axios.delete('todo/'+id+'/',{
+        headers:{
+          Authorization: 'Token ' + token
+        }
+      }).then((res)=>{
+        setCheck(!check)
+        toast.success('Task deleted succesfully')
+      }).catch((err)=>{
+        toast.error('Failed to delete')
+      })
+    }
   }
 
   const updateTask = (id) => {
@@ -22,34 +47,57 @@ export default function TodoListItem() {
      * @todo 1. Send the request to update the task to the backend server.
      * @todo 2. Update the task in the dom.
      */
+    if(updateData == ''){
+      toast.error('Please enter task title')
+      return
+    }
+    const dataForUpdate = {
+      title: updateData
+    }
+    if(token){
+      axios.patch('todo/'+id+'/',dataForUpdate,{
+        headers:{
+          Authorization: 'Token ' + token
+        }
+      }).then((res)=>{
+        setEditStatus(!editStatus)
+        setupdateData('')
+        setCheck(!check)
+        toast.success('Update successfull!')
+      }).catch((err)=>{
+        toast.error('Update failed!')
+      })
+    }
   }
 
   return (
     <>
       <li className='border flex border-gray-500 rounded px-2 py-2 justify-between items-center mb-2'>
         <input
-          id='input-button-1'
+          id={'input-button-'+id}
           type='text'
-          className='hideme appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring  todo-edit-task-input'
+          className={`${(!editStatus) ? 'hideme' : ""} font-body appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring  todo-edit-task-input`}
           placeholder='Edit The Task'
+          onChange={(e)=>setupdateData(e.target.value)}
         />
-        <div id='done-button-1' className='hideme'>
+        <div id={'done-button-'+id} className={`${(!editStatus) ? 'hideme' : ""}`}>
           <button
-            className='bg-transparent hover:bg-gray-500 text-gray-700 text-sm  hover:text-white py-2 px-3 border border-gray-500 hover:border-transparent rounded todo-update-task'
+            className='font-body bg-transparent hover:bg-yellow-500 text-yellow-700 text-sm  hover:text-white py-2 px-3 border border-yellow-500 hover:border-transparent rounded todo-update-task'
             type='button'
-            onClick={updateTask(1)}
+            onClick={()=>{updateTask(id)}}
           >
             Done
           </button>
+          <Toaster/>
         </div>
-        <div id='task-1' className='todo-task  text-gray-600'>
-          Sample Task 1
+        <div id={'task-'+id} className='todo-task  text-gray-600'>
+          {`${(!editStatus) ? title : ""}`}
         </div>
-        <span id='task-actions-1' className=''>
+        <span id={'task-actions-'+id} className=''>
           <button
             style={{ marginRight: '5px' }}
             type='button'
-            onClick={editTask(1)}
+            onClick={()=>{editTask(id)}}
             className='bg-transparent hover:bg-yellow-500 hover:text-white border border-yellow-500 hover:border-transparent rounded px-2 py-2'
           >
             <img
@@ -59,10 +107,11 @@ export default function TodoListItem() {
               alt='Edit'
             />
           </button>
+          <Toaster/>
           <button
             type='button'
-            className='bg-transparent hover:bg-red-500 hover:text-white border border-red-500 hover:border-transparent rounded px-2 py-2'
-            onClick={deleteTask(1)}
+            className='bg-transparent hover:bg-yellow-500 hover:text-white border border-yellow-500 hover:border-transparent rounded px-2 py-2'
+            onClick={()=>{deleteTask(id)}}
           >
             <img
               src='https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg'
@@ -71,6 +120,7 @@ export default function TodoListItem() {
               alt='Delete'
             />
           </button>
+          <Toaster/>
         </span>
       </li>
     </>
diff --git a/context/auth.js b/context/auth.js
index 646b10e..85c69ce 100644
--- a/context/auth.js
+++ b/context/auth.js
@@ -16,9 +16,12 @@ export const AuthProvider = ({ children }) => {
   const deleteToken = () => removeCookies('token')
   const logout = () => {
     deleteToken()
-    router.push('/login')
+    window.location.reload()
   }
 
+  //Creating a check var
+  const [check, setCheck] = useState(false)
+
   useEffect(() => {
     if (token) {
       axios
@@ -52,6 +55,8 @@ export const AuthProvider = ({ children }) => {
         avatarImage,
         setAvatarImage,
         logout,
+        check,
+        setCheck,
       }}
     >
       {children}
diff --git a/middlewares/auth_required.js b/middlewares/auth_required.js
index 7f5e7bc..5579d25 100644
--- a/middlewares/auth_required.js
+++ b/middlewares/auth_required.js
@@ -1,3 +1,17 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useAuth } from "../context/auth"
+
 /***
  * @todo Redirect the user to login page if token is not present.
  */
+export default function authRequired(){
+    
+    const router = useRouter()
+    const { token } = useAuth()
+    useEffect(()=>{
+        if(!token){
+            router.push('/login')
+        }
+    },[])
+}
\ No newline at end of file
diff --git a/middlewares/no_auth_required.js b/middlewares/no_auth_required.js
index 82558d4..9b0b7b5 100644
--- a/middlewares/no_auth_required.js
+++ b/middlewares/no_auth_required.js
@@ -1,3 +1,18 @@
 /***
  * @todo Redirect the user to main page if token is present.
- */
\ No newline at end of file
+ */
+
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useAuth } from "../context/auth";
+
+export default function noAuthRequired(){
+    const router = useRouter()
+    const { token } = useAuth()
+
+    useEffect(()=>{
+        if(token){
+            router.push('/')
+        }
+    },[])
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 98b7437..301efcc 100644
--- a/package.json
+++ b/package.json
@@ -11,12 +11,12 @@
   "dependencies": {
     "autoprefixer": "^10.2.6",
     "axios": "^0.21.1",
-    "izitoast": "^1.4.0",
     "next": "11.0.0",
     "postcss": "^8.3.5",
     "react": "17.0.2",
     "react-cookie": "^4.0.3",
     "react-dom": "17.0.2",
+    "react-hot-toast": "^2.2.0",
     "tailwindcss": "^2.2.2"
   },
   "devDependencies": {
diff --git a/pages/index.js b/pages/index.js
index c3c9134..8737350 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,28 +3,53 @@ import AddTask from '../components/AddTask'
 import { useEffect, useState } from 'react'
 import axios from '../utils/axios'
 import { useAuth } from '../context/auth'
+import authRequired from '../middlewares/auth_required'
 
 export default function Home() {
-  const { token } = useAuth()
+  const { token, check } = useAuth()
   const [tasks, setTasks] = useState([])
 
+  authRequired()
+  
   function getTasks() {
     /***
      * @todo Fetch the tasks created by the user.
      * @todo Set the tasks state and display them in the using TodoListItem component
      * The user token can be accessed from the context using useAuth() from /context/auth.js
      */
+
+    if(token){
+      axios.get('todo/',{
+        headers:{
+          Authorization: 'Token ' + token
+        }
+      }).then((res)=>{
+          setTasks(res.data)
+      }).catch((err)=>{
+          console.log('Failed to fetch tasks')
+      })
+    }
   }
 
+  useEffect(()=>{
+      getTasks()
+  },[check])
+
   return (
     <div>
       <center>
         <AddTask />
         <ul className='flex-col mt-9 max-w-sm mb-3 '>
-          <span className='inline-block bg-blue-600 py-1 mb-2 px-9 text-sm text-white font-bold rounded-full '>
+          <span className='font-body inline-block bg-yellow-600 py-1 mb-2 px-9 text-sm text-white font-bold rounded-full '>
             Available Tasks
           </span>
-          <TodoListItem />
+          {tasks.map((task)=>(
+              <TodoListItem
+                key={task.id} 
+                title = {task.title}
+                id = {task.id}
+              />
+          ))}
         </ul>
       </center>
     </div>
diff --git a/styles/globals.css b/styles/globals.css
index 872cd43..ac28448 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
 
 .hideme {
   display: none !important;
diff --git a/tailwind.config.js b/tailwind.config.js
index 74df067..3ac5945 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,11 @@ module.exports = {
   purge: ['./pages/**/*.{js,jsx}', './components/**/*.{js,jsx}'],
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        'body' : ['Space Grotesk']
+      }
+    },
   },
   variants: {
     display: ['group-hover'],
diff --git a/yarn.lock b/yarn.lock
index 11dbcb7..2cc0366 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1556,6 +1556,11 @@ globby@^11.0.3:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
+goober@^2.1.1:
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.10.tgz#058def43ba1e3b06f973dbb372a4978aa42f1049"
+  integrity sha512-7PpuQMH10jaTWm33sQgBQvz45pHR8N4l3Cu3WMGEWmHShAcTuuP7I+5/DwKo39fwti5A80WAjvqgz6SSlgWmGA==
+
 graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.6"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
@@ -1886,11 +1891,6 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
-izitoast@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/izitoast/-/izitoast-1.4.0.tgz#1aa4e3408b7159fba743506af66d8be54fd929fb"
-  integrity sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w==
-
 jest-worker@27.0.0-next.5:
   version "27.0.0-next.5"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.0.0-next.5.tgz#5985ee29b12a4e191f4aae4bb73b97971d86ec28"
@@ -2788,6 +2788,13 @@ react-dom@17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-hot-toast@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.2.0.tgz#ab6f4caed4214b9534f94bb8cfaaf21b051e62b9"
+  integrity sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==
+  dependencies:
+    goober "^2.1.1"
+
 react-is@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"

From 921a10a819da35bd6d9b6aa9044f61a93c26942c Mon Sep 17 00:00:00 2001
From: Vaibhav <vaibhav.krpandey.che21@itbhu.ac.in>
Date: Wed, 29 Jun 2022 16:37:08 +0530
Subject: [PATCH 2/2] Updated

---
 .eslintrc | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

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"
+  }
 }