Completed task.

components/AddTask.js

@@ -1,25 +1,71 @@
-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.
-     */
-  }
-  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'
-        placeholder='Enter Task'
-      />
-      <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'
-        onClick={addTask}
-      >
-        Add Task
-      </button>
-    </div>
-  )
+import { useState } from "react";
+import axios from "axios";
+import { useAppContext } from "../context/AppContext";
+
+export default function AddTask(props) {
+    const app = useAppContext();
+    const API_BASE_URL = "https://todo-app-csoc.herokuapp.com/";
+    const [value, setValue] = useState("");
+    const addTask = () => {
+        const todoText = value.trim();
+
+        if (!todoText) {
+            iziToast.destroy();
+            iziToast.error({
+                title: "Error",
+                message: "Enter some text"
+            });
+            return;
+        }
+
+        axios({
+            headers: {
+                Authorization: "Token " + app.token
+            },
+            url: API_BASE_URL + "todo/create/",
+            method: "post",
+            data: { title: todoText }
+        })
+            .then(function (response) {
+                axios({
+                    headers: {
+                        Authorization: "Token " + app.token
+                    },
+                    url: API_BASE_URL + "todo/",
+                    method: "get"
+                }).then(function ({ data, status }) {
+                    const newTask = data[data.length - 1];
+                    props.addNewTask(newTask);
+                    iziToast.destroy();
+                    iziToast.success({
+                        title: "Todo",
+                        message: "Added new todo"
+                    });
+                });
+            })
+            .catch(function (err) {
+                iziToast.destroy();
+                iziToast.error({
+                    title: "Error",
+                    message: "An error occurred"
+                });
+            });
+    };
+    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"
+                placeholder="Enter Task"
+                value={value}
+                onChange={(e) => setValue(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"
+                onClick={addTask}>
+                Add Task
+            </button>
+        </div>
+    );
 }

components/LoginForm.js

@@ -1,42 +1,87 @@
-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.
-     */
-  }
+import React, { useState } from "react";
+import axios from "axios";
+import { useRouter } from "next/router";
+import { useAppContext } from "../context/AppContext";
 
-  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>
-          <input
-            type='text'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
-            name='inputUsername'
-            id='inputUsername'
-            placeholder='Username'
-          />
+export default function LoginForm() {
+    const app = useAppContext();
+    const API_BASE_URL = "https://todo-app-csoc.herokuapp.com/";
+    const [password, setPassword] = useState("");
+    const [username, setUsername] = useState("");
+    const router = useRouter();
 
-          <input
-            type='password'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
-            name='inputPassword'
-            id='inputPassword'
-            placeholder='Password'
-          />
+    const login = (e) => {
+        e.preventDefault();
 
-          <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}
-          >
-            Login
-          </button>
+        if (username == "" || password == "") {
+            iziToast.destroy();
+            iziToast.error({
+                title: "Error",
+                message: "Please fill all the fields correctly."
+            });
+        } else {
+            iziToast.destroy();
+            iziToast.info({
+                title: "Info",
+                message: "Please wait..."
+            });
+            const dataForApiRequest = {
+                username: username,
+                password: password
+            };
+
+            axios({
+                url: API_BASE_URL + "auth/login/",
+                method: "post",
+                data: dataForApiRequest
+            })
+                .then(function ({ data, status }) {
+                    app.login(data.token);
+                    router.replace("/");
+                })
+                .catch(function (err) {
+                    iziToast.destroy();
+                    iziToast.error({
+                        title: "Error",
+                        message: "Either username or password is incorrect"
+                    });
+                });
+        }
+    };
+
+    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>
+                    <input
+                        type="text"
+                        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"
+                    />
+
+                    <input
+                        type="password"
+                        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"
+                    />
+
+                    <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}>
+                        Login
+                    </button>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  )
+    );
 }

components/Nav.js

@@ -1,63 +1,77 @@
-/* eslint-disable jsx-a11y/alt-text */
-/* eslint-disable @next/next/no-img-element */
-import Link from 'next/link'
-/**
- *
- * @todo Condtionally render login/register and Profile name in NavBar
- */
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useAppContext } from "../context/AppContext";
 
-export default function Nav({ profileName = 'Loading', avatarImage = '#' }) {
-  const logout = () => {
-    localStorage.removeItem('token')
-    window.location.href = '/login/'
-  }
+export default function Nav({ profileName = "Loading", avatarImage = "", page = "" }) {
+    const app = useAppContext();
+    const router = useRouter();
+    const logout = () => {
+        app.logout();
+        router.replace("/login/");
+        iziToast.destroy();
+        iziToast.info({
+            title: "Logout",
+            message: "You have been logged out"
+        });
+    };
 
-  return (
-    <nav className='bg-blue-600'>
-      <ul className='flex items-center justify-between p-5'>
-        <ul className='flex items-center justify-between space-x-4'>
-          <li>
-            <h1 className='text-white font-bold text-xl'>Todo</h1>
-          </li>
-          <li className='text-white font-semibold'>
-            <Link href='/'>Tasks</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>
+    return (
+        <nav className="bg-blue-600">
+            <ul className="flex items-center justify-between p-5">
+                <ul className="flex items-center justify-between space-x-4">
+                    <li>
+                        <h1 className="text-white font-bold text-xl">Todo</h1>
+                    </li>
+                    <li className="text-white font-semibold">
+                        <Link href="/">Tasks</Link>
+                    </li>
+                </ul>
+                {page !== "index" ? (
+                    <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">
+                        <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">
+                                {avatarImage ? (
+                                    <Image
+                                        src={avatarImage}
+                                        height={33}
+                                        width={33}
+                                        alt="Profile image"
+                                    />
+                                ) : (
+                                    ""
+                                )}
+                                <span className="mr-1 ml-2">{profileName.slice(0, 8)}</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="">
+                                    <button
+                                        className="rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap"
+                                        href="#"
+                                        onClick={logout}>
+                                        Logout
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                )}
             </ul>
-          </div>
-        </div>
-      </ul>
-    </nav>
-  )
+        </nav>
+    );
 }