All tasks done

components/AddTask.js

@@ -1,16 +1,71 @@
+import { useState } from "react"
+import { useAuth } from "../context/auth"
+import axios from '../utils/axios'
+
+
 export default function AddTask() {
+
+  const { token, notify } = useAuth()
+
+  const [task,setTask] = useState('')
+
   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(validInputField(task)){
+      const id = new Date().getTime().toString()
+
+      const dataForApiRequest = {
+        id: id,
+        title: task
+      }
+
+      axios({
+        headers:{
+          Authorization: `Token ${token}`,
+        },
+        url: '/todo/create/',
+        method: 'post',
+        data: dataForApiRequest,
+      })
+        .then(function (data,status){
+          //console.log(data);
+          notify('Task was added successfully','success')
+        })
+        .catch( function (error){
+          //console.log('some error occurred...');
+          notify('Some error occurred','error')
+        })
+
+        setTask('')
+    }
+    else{
+      notify('Please enter valid task','warn')
+    }
+    }
+
+
+
+  const validInputField = (text) => {
+    if(text !== ''){
+      return true
+    }
+    else{
+      return false
+    }
   }
+
   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'
+        value={task}
+        onChange={(e)=> setTask(e.target.value)}
         placeholder='Enter Task'
       />
       <button

components/LoginForm.js

@@ -1,11 +1,55 @@
+import { 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'
+
+
 export default function RegisterForm() {
+
+  const [username,setUsername] = useState('')
+  const [password,setPassword] = useState('')
+  const { setToken,token, notify } = useAuth()
+  const router = useRouter()
+
+  no_auth_required()
+
+  const dataForApiRequest = {
+    username,
+    password,
+  }
+
   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(validInputFields(username,password)){
+      axios
+        .post('/auth/login/',
+        dataForApiRequest
+        )
+          .then(function (data, status){
+            setToken(data.data.token)
+            router.reload()
+          })
+          .catch(function (err){
+            notify('Invalid Username or Password','error')
+            notify('If new user try registering ','info')
+          })
+    }
+  }
+
+  const validInputFields = (userName,passWord) => {
+    if(userName !== '' && passWord !== ''){
+      return true
+    }
+    else{
+      notify('Invalid input fields','warn')
+      return false
+    }
   }
 
   return (
@@ -18,6 +62,8 @@ export default function RegisterForm() {
             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,6 +72,8 @@ 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'
           />
 

components/Nav.js

@@ -1,14 +1,35 @@
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable @next/next/no-img-element */
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
 import { useAuth } from '../context/auth'
 /**
  *
  * @todo Condtionally render login/register and Profile name in NavBar
  */
 
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
+  const { logout, token, profileName, avatarImage } = useAuth()
+
+  const [showProfile,setShowProfile] = useState(false)
+
+  useEffect(()=>{
+    if(!token){
+      setShowProfile(false)
+    }
+    else{
+      setShowProfile(true)
+    }
+  },[])
+
+  useEffect(()=>{
+    if(!token){
+      setShowProfile(false)
+    }
+    else{
+      setShowProfile(true)
+    }
+  },[token])
 
   return (
     <nav className='bg-blue-600'>
@@ -30,6 +51,7 @@ export default function Nav() {
             <Link href='/register'>Register</Link>
           </li>
         </ul>
+        {(showProfile && avatarImage && profileName ) &&
         <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'>
@@ -56,6 +78,7 @@ export default function Nav() {
             </ul>
           </div>
         </div>
+        }
       </ul>
     </nav>
   )

components/RegisterForm.js

@@ -4,7 +4,7 @@ import { useAuth } from '../context/auth'
 import { useRouter } from 'next/router'
 
 export default function Register() {
-  const { setToken } = useAuth()
+  const { setToken, notify } = useAuth()
   const router = useRouter()
 
   const [firstName, setFirstName] = useState('')
@@ -28,10 +28,12 @@ export default function Register() {
       password === ''
     ) {
       console.log('Please fill all the fields correctly.')
+      notify('Please fill all the fields correctly','warn')
       return false
     }
     if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
       console.log('Please enter a valid email address.')
+      notify('Please enter a valid email address','warn')
       return false
     }
     return true

components/TodoListItem.js

@@ -1,11 +1,27 @@
 /* eslint-disable @next/next/no-img-element */
 
-export default function TodoListItem() {
+import axios from "axios"
+import { useRef, useState } from "react"
+import { useAuth } from "../context/auth"
+
+export default function TodoListItem({id,title}) {
+
+  const [newTitle,setNewTitle] = useState(title)
+  const { token, notify } = useAuth()
+  const inputRef = useRef(null)
+  const doneButtonRef = useRef(null)
+  const editAndDeleteButtonRef = useRef(null)
+  const titleRef = useRef(null)
+
   const editTask = (id) => {
     /**
-     * @todo Complete this function.
-     * @todo 1. Update the dom accordingly
-     */
+    * @todo Complete this function.
+    * @todo 1. Update the dom accordingly
+    */
+    editAndDeleteButtonRef.current.className = 'hideme'
+    titleRef.current.className = 'hideme'
+    inputRef.current.className = 'appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring  todo-edit-task-input'
+    doneButtonRef.current.className = ''
   }
 
   const deleteTask = (id) => {
@@ -14,42 +30,100 @@ 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.
      */
+    axios({
+      headers:{
+        Authorization: `Token ${token}`
+      },
+      url: `https://todo-app-csoc.herokuapp.com/todo/${id}/`,
+      method:'delete',
+    })
+      .then(function (data,status){
+        notify('Task was deleted successfully', 'success')
+      })
+      .catch(function (error){
+        notify('Some error occurred...','error')
+      })
+
   }
 
   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.
-     */
+    */
+
+    if( validFieldInputs() ){
+
+      const dataForApiRequest = {
+        id,
+        title: newTitle
+      }
+
+      axios({
+        headers:{
+          Authorization: `Token ${token}`
+        },
+        url: `https://todo-app-csoc.herokuapp.com/todo/${id}/`,
+        method:'patch',
+        data: dataForApiRequest,
+      })
+        .then(function (data,status){
+          editAndDeleteButtonRef.current.className = ''
+          titleRef.current.className = 'todo-task  text-gray-600'
+          inputRef.current.className = 'hideme'
+          doneButtonRef.current.className = 'hideme'
+          notify('Task was updated successfully','success')
+        })
+        .catch(function (error){
+          notify('Some error occurred...','error')
+        })
+    }
+
+    else{
+      console.log('please enter valid tasks');
+      notify('Please enter valid task','warn')
+    }
+  }
+
+  const validFieldInputs = () => {
+    if(newTitle !== ''){
+      return true
+    }
+    else{
+      return false
+    }
   }
 
   return (
     <>
-      <li className='border flex border-gray-500 rounded px-2 py-2 justify-between items-center mb-2'>
+      <li key={id} 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='hideme'
           placeholder='Edit The Task'
+          value={newTitle}
+          onChange={(e) => setNewTitle(e.target.value)}
+          ref={inputRef}
         />
-        <div id='done-button-1' className='hideme'>
+        <div id={`done-button-${id}`} className='hideme' ref={doneButtonRef}>
           <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'
             type='button'
-            onClick={updateTask(1)}
+            onClick={() => updateTask(id)}
           >
             Done
-          </button>
+        </button>
         </div>
-        <div id='task-1' className='todo-task  text-gray-600'>
-          Sample Task 1
+        <div id={`task-${id}`} className='todo-task  text-gray-600' ref={titleRef} >
+          {title}
         </div>
-        <span id='task-actions-1' className=''>
+        <span id={`task-actions-${id}`} className='' ref={editAndDeleteButtonRef}>
           <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
@@ -62,7 +136,7 @@ export default function TodoListItem() {
           <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)}
+            onClick={() => deleteTask(id)}
           >
             <img
               src='https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg'