Completed-All-TASKS!!!

components/AddTask.js

@@ -1,14 +1,40 @@
+import { useState } from 'react'
+import axios from '../utils/axios'
+import { useAuth } from '../context/auth'
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+
+toast.configure()
 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.
-     */
+  const [Todotxt, setTodotxt] = useState("");
+  const { config,API_BASE_URL} = useAuth();
+  const addTask = (e) => {
+    e.preventDefault()
+    if (!Todotxt || Todotxt=="") {
+        return;
+    }
+    axios
+        .post(API_BASE_URL + "todo/create/",{ title: Todotxt },config)    
+        .then(function (response) {
+            axios
+            .get(API_BASE_URL + "todo/",config)
+            .then(function ({ data, status }) {
+                const newTodo = data[data.length - 1];
+                const taskNo = newTodo.id;
+                setTodotxt("");
+                toast.success('Task added',{position: toast.POSITION.BOTTOM_RIGHT})
+            });
+        })
+        .catch(function (err) {
+          toast.error("An error occurred!");
+          });
   }
+
   return (
     <div className='flex items-center max-w-sm mt-24'>
       <input
+        value={Todotxt}
+        onChange={(e)=>{setTodotxt(e.target.value)}}
         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'

components/LoginForm.js

@@ -1,12 +1,35 @@
+import axios from '../utils/axios';
+import { useAuth } from '../context/auth'
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { useEffect } from 'react'
+
+toast.configure()
 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)
-     */
-  }
+  const { login,API_BASE_URL,setpagetype } = useAuth()
+  useEffect(()=>{setpagetype("LOGIN");return;},[])
+  const loginnow = () => {
+    const user_name = document.getElementById("inputUsername").value.trim();
+    const user_pass = document.getElementById("inputPassword").value;
+    if (user_name == "" || user_pass == "") {
+        toast.error("Please fill the empty fields.",{position: toast.POSITION.BOTTOM_RIGHT})
+        return;
+    }
+    toast.info("Checking credentials...",{position: toast.POSITION.BOTTOM_RIGHT})
+    axios
+        .post(API_BASE_URL + "auth/login/",{
+            username: user_name,
+            password: user_pass
+        })
+        .then(({ data, status }) => {
+            toast.success("Successfully logged in!",{position: toast.POSITION.BOTTOM_RIGHT})
+            localStorage.setItem("token", data.token);
+            login(data.token);
+        })
+        .catch((err) => {
+            toast.error("Cannot Login! :( Check credentials.",{position: toast.POSITION.BOTTOM_RIGHT})
+        });
+      }
 
   return (
     <div className='bg-grey-lighter min-h-screen flex flex-col'>
@@ -32,7 +55,7 @@ export default function RegisterForm() {
           <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}
+            onClick={loginnow}
           >
             Login
           </button>

components/Nav.js

@@ -1,15 +1,34 @@
-/* eslint-disable jsx-a11y/alt-text */
-/* 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'
+import {toast} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
+toast.configure()
 export default function Nav() {
-  const { logout, profileName, avatarImage } = useAuth()
-
+  const { logout, profileName, avatarImage,pagetype,setpagetype,token } = useAuth();
+  const [showlogin, setShowlogin] = useState(false);
+  const [showregister, setShowregister] = useState(false);
+  const [showavtar, setShowavtar] = useState(true);
+
+  function pagechange(){
+    if(pagetype=="HOME"){
+      setShowlogin(false);
+      setShowregister(false);
+      setShowavtar(true);
+    }
+    if(pagetype=="LOGIN"){
+      setShowlogin(false);
+      setShowregister(true);
+      setShowavtar(false);
+    }
+    if(pagetype=="REGISTER"){
+      setShowlogin(true);
+      setShowregister(false);
+      setShowavtar(false);
+    }
+  }
+  useEffect(() => {pagechange()},[pagetype]);
   return (
     <nav className='bg-blue-600'>
       <ul className='flex items-center justify-between p-5'>
@@ -23,14 +42,14 @@ export default function Nav() {
           </li>
         </ul>
         <ul className='flex'>
-          <li className='text-white mr-2'>
+          <li className='text-white mr-2' style ={{display: (showlogin?"":"none")}}>
             <Link href='/login'>Login</Link>
           </li>
-          <li className='text-white'>
+          <li className='text-white' style ={{display: (showregister?"":"none")}}>
             <Link href='/register'>Register</Link>
           </li>
         </ul>
-        <div className='inline-block relative w-28'>
+        <div className='inline-block relative w-28' style ={{display: (showavtar?"":"none")}}>
           <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} />

components/RegisterForm.js

@@ -1,11 +1,15 @@
-import React, { useState } from 'react'
+import React, { useState,useEffect } 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'
 
+toast.configure()
 export default function Register() {
-  const { setToken } = useAuth()
+  const { setpagetype,login } = useAuth()
   const router = useRouter()
+  useEffect(()=>{setpagetype("REGISTER");},[])
 
   const [firstName, setFirstName] = useState('')
   const [lastName, setLastName] = useState('')
@@ -27,11 +31,11 @@ export default function Register() {
       username === '' ||
       password === ''
     ) {
-      console.log('Please fill all the fields correctly.')
+      toast.error('Please fill all the fields correctly.',{position: toast.POSITION.BOTTOM_RIGHT})
       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.BOTTOM_RIGHT})
       return false
     }
     return true
@@ -43,7 +47,7 @@ export default function Register() {
     if (
       registerFieldsAreValid(firstName, lastName, email, username, password)
     ) {
-      console.log('Please wait...')
+      toast.warning('Please wait...',{position: toast.POSITION.BOTTOM_RIGHT})
 
       const dataForApiRequest = {
         name: firstName + ' ' + lastName,
@@ -57,13 +61,11 @@ export default function Register() {
         dataForApiRequest,
       )
         .then(function ({ data, status }) {
-          setToken(data.token)
-          router.push('/')
+          login(data.token)
+          toast.success('Registered Successfully',{position: toast.POSITION.BOTTOM_RIGHT})
         })
         .catch(function (err) {
-          console.log(
-            'An account using same email or username is already created'
-          )
+          toast.warning('An account using same email or username is already created',{position: toast.POSITION.BOTTOM_RIGHT})
         })
     }
   }

components/TodoListItem.js

@@ -1,55 +1,75 @@
-/* eslint-disable @next/next/no-img-element */
+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 TodoListItem() {
+toast.configure()
+export default function TodoListItem(props) {
+  const {config,API_BASE_URL  } = useAuth()
+  const [Newdata, setNewdata] = useState(props.todo.title);
+  const [editnow, seteditnow] = useState(false);
   const editTask = (id) => {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Update the dom accordingly
-     */
+    seteditnow(true);
   }
 
   const deleteTask = (id) => {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Send the request to delete the task to the backend server.
-     * @todo 2. Remove the task from the dom.
-     */
+    axios
+    .delete(API_BASE_URL + "todo/" + id + "/",config)
+    .then(function ({ data, status }) {
+        toast.success('Task deleted!',{position: toast.POSITION.BOTTOM_RIGHT})
+        props.onDelete(props.todo);
+    })
+    .catch(function (err) {
+      toast.error("An error occurred!");
+    });
   }
 
   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 (!Newdata) {
+        return;
+    }
+    axios
+        .patch(API_BASE_URL + "todo/" + id + "/",{ title: Newdata },config)
+        .then(function ({ data, status }) {
+          toast.success('Task updated!',{position: toast.POSITION.BOTTOM_RIGHT})
+          seteditnow(false);
+        })
+        .catch(function (err) {
+          toast.error("An error occurred!");
+          });
+
   }
-
+  
   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-"+props.todo.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'
+          value={Newdata}
+          onChange={(e)=>{setNewdata(e.target.value)}}
+          style ={{display: (editnow?"":"none")}}
+          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'
           placeholder='Edit The Task'
         />
-        <div id='done-button-1' className='hideme'>
+        <div style ={{display: (editnow?"":"none")}} id={'done-button-'+props.todo.id}>
           <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(props.todo.id)}}
           >
             Done
           </button>
         </div>
-        <div id='task-1' className='todo-task  text-gray-600'>
-          Sample Task 1
+        <div id={'task-'+props.todo.id} style ={{display: (editnow?"none":"")}} className='todo-task  text-gray-600'>
+          {Newdata}
         </div>
-        <span id='task-actions-1' className=''>
+        <span id={'task-actions-'+props.todo.id} style ={{display: (editnow?"none":"")}} className=''>
           <button
             style={{ marginRight: '5px' }}
             type='button'
-            onClick={editTask(1)}
+            onClick={()=>{editTask(props.todo.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 +82,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(props.todo.id)}}
           >
             <img
               src='https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg'

context/auth.js

@@ -10,13 +10,35 @@ export const AuthProvider = ({ children }) => {
   const [profileName, setProfileName] = useState('')
   const [avatarImage, setAvatarImage] = useState('#')
   const [cookies, setCookies, removeCookies] = useCookies(['auth'])
-  const token = cookies.token
-
+  const [pagetype,setpagetype] = useState("HOME"); 
+  const token = cookies.token;
+  const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/';
+  const config={
+    headers: {
+        Authorization: "Token " + cookies.token
+    },
+  };
+
   const setToken = (newToken) => setCookies('token', newToken, { path: '/' })
   const deleteToken = () => removeCookies('token')
+
+  const loginpage=()=>{
+    const text= window.location.href;
+    if(text.indexOf("/login")===-1) router.push('/login')
+  }
+  const homepage=()=>{
+    const text= window.location.href;
+    if(text.indexOf("/login")>-1 || text.indexOf("/register")>-1) router.push('/')
+  }
   const logout = () => {
-    deleteToken()
-    router.push('/login')
+    deleteToken();
+    const text= window.location.href;
+    if(text.indexOf("/login")===-1) router.push('/login');
+  }
+  const login = (newtoken) => {
+    setToken(newtoken);
+    const text= window.location.href;
+    if(text.indexOf("/login")>-1 || text.indexOf("/register")>-1) window.location.href='/';
   }
 
   useEffect(() => {
@@ -52,11 +74,18 @@ export const AuthProvider = ({ children }) => {
         avatarImage,
         setAvatarImage,
         logout,
+        login,
+        loginpage,
+        homepage,
+        pagetype,
+        setpagetype,
+        API_BASE_URL,
+        config,
       }}
     >
       {children}
     </AuthContext.Provider>
   )
 }
 
-export const useAuth = () => useContext(AuthContext)
+export const useAuth = () => useContext(AuthContext);