Merge pull request #1 from MohamedRizwan399/feature/TRAPWLS-19_LoginAuth

#TRAPWLS-19 Login and Crud code optimized

Author: MohamedRizwan399

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "my-app",
-  "version": "0.1.0",
+  "name": "javascript-crud-with-sampletasks",
+  "version": "1.0",
   "private": true,
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.7",
@@ -18,6 +18,8 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.14.1",
+    "react-toastify": "^10.0.6",
     "react-uuid": "^1.0.3",
     "redux": "^4.2.0",
     "styled-components": "^5.3.5",

src/App.css

@@ -161,6 +161,7 @@ nav ul li a:not(.active):hover{
 }
 
 .home-card{
+  height: 100%;
   width: 30%;
   padding: 10px;
   padding-bottom: 80px;
@@ -193,6 +194,22 @@ nav ul li a:not(.active):hover{
   cursor: pointer;
 }
 
+/* Styling for dashboard */
+.title-dashboard{
+  margin-left: 10px;
+  margin-top: 25px;
+  font-weight: bold;
+  font-size: 20px;
+  color: teal;
+  text-decoration: underline;
+}
+
+.issue-btn{
+  margin-left: 10px;
+  margin-top: 20px;
+  display: block;
+}
+
 /* Styling for IssueCreation page(CRUD) */
 .form-container{
   margin-left: 10px;
@@ -219,6 +236,7 @@ nav ul li a:not(.active):hover{
 }
 
 /* Styling for Tablecreation */
+
 .table-responsive {
   margin-top: 20px;
 }
@@ -243,9 +261,11 @@ nav ul li a:not(.active):hover{
 }
 
 .delete-btn{
+  margin-left: 20px;
   color: red;
 }
 .edit-btn{
+  margin-right: 20px;
   color: teal;
 }
 
@@ -339,4 +359,17 @@ nav ul li a:not(.active):hover{
 .contactus{
   margin-top: 20px;
   text-align: center;
+}
+
+/* Styling for loader*/
+.loader {
+  top: 0;
+  left: 0;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
 }

src/App.js

@@ -1,17 +1,19 @@
 import './App.css';
 import {  Routes, Route, BrowserRouter, Navigate} from 'react-router-dom';
 import { useState } from 'react';
-import Aboutus from './HomePage/Aboutus';
-import Contactus from './HomePage/Contactus';
-import LoginPage from './LoginAuthentication/LoginPage';
+import Aboutus from './homePage/Aboutus';
+import Contactus from './homePage/Contactus';
+import LoginPage from './loginAuthentication/LoginPage';
 import Dashboard from './IssueManagement/Dashboardview/Dashboard';
 import IssueCreationPage from './IssueManagement/IssueCrud/IssueCreationPage';
-import PagenotFound from './HomePage/PagenotFound';
-import HeaderNavbarLogin from './HomePage/HeaderNavbarLogin';
-import Home from './HomePage/Home';
-import Footer from './HomePage/Footer';
-import FetchApi from './FetchApiData/FetchApi';
-import Demo from './HomePage/Demo';
+import PagenotFound from './homePage/PagenotFound';
+import HeaderNavbarLogin from './homePage/HeaderNavbarLogin';
+import Home from './homePage/Home';
+import Footer from './homePage/Footer';
+import FetchApi from './fetchApiData/FetchApi';
+import Demo from './homePage/Demo';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export function App() {
   const loginData = JSON.parse(localStorage.getItem("loggedInData") || "{}");
@@ -20,6 +22,7 @@ export function App() {
   return(
     <BrowserRouter>
     <div>
+      <ToastContainer/>
       {isLoggedinUser && 
         <HeaderNavbarLogin 
           isLoggedinUser={loginData}
@@ -29,7 +32,7 @@ export function App() {
       <Routes>
         {isLoggedinUser === true ? (
           <>
-            <Route path="/" element={<LoginPage/>}/>
+            <Route path="/" element={<Home/>}/>
             <Route path="/home" element={<Home/>}/>
             <Route path="/dashboard" element={<Dashboard/>}/>
             <Route path="/issuecreate" element={<IssueCreationPage/>}/>

src/FetchApiData/FetchApi.jsx

@@ -1,34 +1,65 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { TableView } from "../IssueCrud/TableView";
 
 
 function Dashboard() {
     //for navigate
     let navigateToIssueCreationPage = useNavigate();
+    const [getIssues, setCreatedIssues] = useState([]);
 
     function createIssue() {
         navigateToIssueCreationPage('/issuecreate')
     }
 
+    useEffect(() => {
+        let getCreatedIssues = JSON.parse(localStorage.getItem("issueData"));
+        setCreatedIssues(getCreatedIssues);
+    }, [])
+
+    //deletedata
+    const deleteIssue=(id) => {
+        let alert = window.confirm(`Are you sure to delete this '${id}' issue?`)
+        console.log("From delete",id)
+        if (alert) {
+            const filteredIssues = getIssues.filter((element, index)=>  {
+                return element.id !== id;
+            })
+            setCreatedIssues(filteredIssues);
+            localStorage.setItem('issueData', JSON.stringify(filteredIssues));
+        }
+    }
 
     return(
 
         <div className="issues-table">
-            <table id="issueList" >
-                <thead>
-                    <tr><th>DASHBOARD LIST</th></tr>
-                    <tr>
-                        <th scope="col">Issue Name</th> &emsp; &emsp; &emsp; &emsp; &emsp; 
-                        <th scope="col">Assignee&emsp;&emsp;</th> &emsp; &emsp; &emsp; &emsp; &emsp; 
-                        <th scope="col">Created On&emsp;&emsp;</th> &emsp; &emsp; &emsp; &emsp; &emsp; 
-                        <th scope="col">Status&emsp;&emsp;</th> &emsp; &emsp; &emsp; &emsp; &emsp; 
-                        <th scope="col">Actions</th>&emsp;&emsp; &emsp; &emsp; &emsp;
-                    </tr>
-                </thead>
-                <tbody id="tablebody">
-                </tbody>
-            </table>
-            <button className="issue-btn" onClick={createIssue}>+ CREATE ISSUE</button>
+            <>
+                {getIssues?.length > 0 && <div className="title-dashboard">Created Issues List here:</div>}
+
+                {getIssues?.length > 0 && 
+                    <div className="table-responsive">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th scope="col">ISSUE ID</th>
+                                    <th scope="col">TASK NAME</th>
+                                    <th scope="col">DUE ON</th>
+                                    <th scope="col">PRIORITY</th>
+                                    <th scope="col">ASSIGNEE</th>
+                                    <th scope="col">STATUS</th>
+                                    <th scope="col">DELETE</th>
+                                </tr>
+                            </thead>
+                            <tbody id="tablebody">
+                                <TableView issues={getIssues} deleteIssue={deleteIssue}/>
+                            </tbody>
+                        </table>
+                    </div>
+                }
+
+                {getIssues?.length < 1 && <div className="no-issues">No Issues are Created yet</div>}
+                <button className="issue-btn" onClick={createIssue}>+ CREATE NEW ISSUE</button>
+            </>
         </div>    
 
     )