Merge pull request #4 from MohamedRizwan399/develop

Master - Readme content, License and Code optmization is completed

Author: MohamedRizwan399

LICENSE

@@ -0,0 +1,7 @@
+Custom License for **Javascript CRUD with SampleTasks**
+
+This repository and all its contents are the property of **Mohamed Rizwan**. Use of any part of this repository, including code, documentation, or resources, is only permitted with prior written consent from the owner.
+
+Access to this repository is provided for the purpose of collaboration or review, as approved by the owner. Any use, modification, or distribution of the contents should be done with permission.
+
+For any inquiries regarding permissions, please contact Mohamed Rizwan at **mohamedrizwan399@gmail.com**.

README.md

@@ -1,48 +1,64 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
+# Javascript CRUD with SampleTasks
+
+A Javascript application to demonstrate the comprehensive **CRUD** app built using ReactJS and Firebase. It implement user authentication with both Google Sign-In and username/password login methods, along with other key features such as API handling, local storage CRUD operations, and managing application state using Redux.
+The app also leverages modern React hooks, lifecycle methods, and routing for smooth navigation between pages.
+
+## Features
+- **User authentication with Google Sign-In**: Users can sign in using their Google accounts using Firebase for secure authentication.
+- **Username/Password Authentication**: Custom username and password login using Firebse for added flexibility.
+- **CRUD Operations**: Ability to perform create, read, update, and delete operations with data stored in local storage.
+- **API Handling with Axios**: Handled API requests using Axios for fetching data from remote servers.
+- **Data Management with Redux**: Efficiently manage app state using Redux store to handle data across components.
+- **React Hooks and Lifecycle Methods**: Utilization of React hooks like useState, useEffect, useRef and lifecycle methods for optimal component behavior.
+- **Dynamic Routing**: Implemented navigation between pages with React Router for a dynamic user experience.
+- **Loader Implementation**: Display a loader during asynchronous operations to improve user experience.
+- **Responsive UI**: Fully responsive UI with styling using CSS and modern design principles.
+- **Header and Footer**: The header includes navigation tabs, and the footer provides links to "About Us" and "Contact Us" pages.
+
+
+## Prerequisites
+You need to install required version:
+- Node.js 16 LTS [Download Node.js](https://nodejs.org/)
+- Npm 8 >= or yarn
+
+## Steps to Installation
+**Step 1:** Clone the repo
+```bash
+ - https://github.com/MohamedRizwan399/CRUDJavaScriptSampleProject.git
+```
+
+**Step 2:** Install the dependencies using npm
+```bash
+ - npm install
+```
+
+**Step 3:** Run the application
+```bash
+ - npm start
+```
 Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
 
 The page will reload when you make changes.\
 You may also see any lint errors in the console.
 
-### `npm test`
-
+**Step 4:** Run the test suites
+```bash
+ - npm test
+```
 Launches the test runner in the interactive watch mode.\
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `npm run build`
-
+**Step 5:** To run build in Production, if needed
+```bash
+ - npm run build
+```
 Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
 
 ## Learn More
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
 To learn React, check out the [React documentation](https://reactjs.org/).
 
 ### Code Splitting
@@ -57,14 +73,7 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/a
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
 
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
 
 ### Deployment
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

package.json

@@ -10,6 +10,7 @@
     "axios": "^1.7.7",
     "cors": "^2.8.5",
     "firebase": "^11.0.1",
+    "jest": "^27.5.1",
     "jwt-decode": "^3.1.2",
     "nodemon": "^3.1.7",
     "react": "^18.2.0",

src/App.test.js

@@ -1,15 +1,28 @@
 import { render, screen } from '@testing-library/react';
-import App from './App';
-import Demo from './Demo';
+import Popup from './popup/Popup';
 
-// test('renders learn react link', () => {
-//   render(<App />);
-//   const linkElement = screen.getByText(/learn react/i);
-//   expect(linkElement).toBeInTheDocument();
-// });
+//clear local storage
+beforeEach(() => {
+    localStorage.clear();
+});
 
-
-// test('demo state test', () => {
-//   render(<Demo />);
-//   expect().toBeInTheDocument();
-// });
+describe("popup component", () => {
+    test("renders popup with image, message, and button", () => {
+        const mockSetShowPopup = jest.fn(); //mock function
+    
+        // Render the Popup component
+        render(<Popup setShowPopup={mockSetShowPopup} />);
+    
+        const popupImage = screen.getByRole('img');
+        expect(popupImage).toBeInTheDocument();
+        expect(popupImage).toHaveAttribute('src','favicon1.ico');
+    
+        const boldText1 = document.querySelector('b');
+        expect(boldText1).toBeInTheDocument();
+        expect(boldText1.textContent).toBe('myself');
+    
+        //check ok button
+        const button = screen.getByRole('button',{name:/OK/i});
+        expect(button).toBeInTheDocument();
+      });
+})

src/homePage/Card.jsx

@@ -10,11 +10,15 @@ const Card = ({post, itemArrLength, isAllCardLoaded}) => {
 
   useEffect(() => {
     counter = counter + 1;
-    if (itemArrLength === counter) {      
-      return () => {
-        setTimeout(() => { isAllCardLoaded(true) }, 1000);
-      };
-    }
+    const timer = setTimeout(() => {
+      if (itemArrLength === counter) {  
+        isAllCardLoaded(true) 
+      }
+    }, 1000);
+    return () => { 
+      clearTimeout(timer);
+      counter = 0;
+    };
   }, [itemArrLength, isAllCardLoaded]);
 
   return (

src/homePage/Footer.jsx

@@ -1,14 +1,11 @@
 import React from "react";
-import { BrowserRouter, Routes, Route} from 'react-router-dom';
 import {
   Box,
   Container,
   Row,
   Column,
   FooterLink,
-  Heading,
 } from "./Footerstyle";
-import { Outlet, Link} from "react-router-dom";
 
 function Footer() {
   return (

src/homePage/HeaderNavbarLogin.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Link, NavLink, useNavigate } from 'react-router-dom'
 import "../App.css"
 import { auth } from '../loginAuthentication/firebase/FirebaseConfig';
-import { signOut, deleteUser } from "firebase/auth";
+import { deleteUser } from "firebase/auth";
 import ClipLoader from 'react-spinners/ClipLoader';
 
 // SampleProfileUrl - https://images.pexels.com/photos/1742370/pexels-photo-1742370.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500
@@ -19,18 +19,22 @@ const HeaderNavbarLogin = (props) => {
     if(loggedInData?.loggedInType === "usernamePwd") {
       await auth.signOut();
     } else {
-      signOut(auth).then(() => {
+      try {
+        await auth.signOut();
         if (user) {
-          deleteUser(user);
+          await deleteUser(user);
           console.log("User successfully deleted from Firebase.");
         }
+          
+      } catch(exception) {
+        console.error("Sign out error-->",exception)
         setIsLoading(false);
-      }).catch((e) => {
-        console.error("Sign out error-->",e)
-      })
+        return;
+      }
     }
 
     localStorage.removeItem("loggedInData");
+    setIsLoading(false);
     setLoggedInUser(false);
     navigateToNextPage("/");
     return;

src/loginAuthentication/LoginPage.css

@@ -143,4 +143,35 @@ input:focus{
     align-items: center;
     background-color: rgba(255, 255, 255, 0.8);
     z-index: 1;
+}
+
+/* Styling for Popup*/
+.popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+  
+.popup {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+    text-align: center;
+    max-width: 500px; /* Limit the max width */
+    width: 100%;
+    box-sizing: border-box;
+    overflow-wrap: break-word;
+}
+  
+.popup button {
+    margin-top: 10px;
+    padding: 8px 16px;
+    cursor: pointer;
 }

src/loginAuthentication/LoginPage.jsx

@@ -9,6 +9,7 @@ import {auth, provider} from "./firebase/FirebaseConfig";
 import {signInWithPopup } from "firebase/auth";
 import {handleCreateUserWithEmailAndPassword, handleSignInWithEmailAndPassword} from './firebase/LoginAuthCreation';
 import ClipLoader from 'react-spinners/ClipLoader';
+import Popup from "../popup/Popup";
 
 // for each time show the google accounts in the dialog
 provider.setCustomParameters({
@@ -24,7 +25,9 @@ function LoginPage(props) {
     const navigateToNextPage = useNavigate();
     const {setLoggedInUser} = props;
     const [isLoading, setIsLoading] = useState(false);
+    const [showPopup, setShowPopup] = useState(false);
     const [isRegisterClicked, setRegisterClicked] = useState(false);
+    const isReadInfoOnce = localStorage.getItem('isInfoRead') || false;
 
     //password requirement
     const [isPwdFeedbackHint, setPwdFeedbackHint] = useState(null);
@@ -92,6 +95,16 @@ function LoginPage(props) {
     }, [input.password, handlePasswordErrorFeedback])
 
 
+    // For show the popup initially
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setShowPopup(true);
+        }, 1500)
+
+        return () => clearTimeout(timer);
+    }, [])
+
+
     // Login via username/password
     async function loginClicked(e) {
         e.preventDefault();
@@ -128,7 +141,6 @@ function LoginPage(props) {
 
     // Register via username/password
     const registerClicked = async () => {
-    
         // validate username/email and password
         const isValidated = handleValidationForUserInput(input.username, input.password);
         if (!isValidated) return;
@@ -185,11 +197,10 @@ function LoginPage(props) {
     function googleLogin() {
         //signInWithRedirect(auth, provider) // alternative for Glogin
         signInWithPopup(auth, provider).then((data) => {
-            storeLoginSuccessAndNavigate(data?.user)
+            storeLoginSuccessAndNavigate(data?.user);
         }).catch((e) => {
-            console.error("signinpopup catch--",e)
+            console.error("signinpopup catch--", e);
         })
-
     }
 
     // Stored LoginStatus in localStorage and navigate to home
@@ -202,8 +213,8 @@ function LoginPage(props) {
             loggedInPhotoUrl: user?.photoURL || ""
         }
         localStorage.setItem("loggedInData", JSON.stringify(loginObj));
-        setLoggedInUser(true)
-        navigateToNextPage('/home')
+        setLoggedInUser(true);
+        navigateToNextPage('/home');
     }
 
     // To show toast
@@ -215,10 +226,20 @@ function LoginPage(props) {
         }
         return;
     }
+
+    const closePopupInfo = (isRead = false) => {
+        if(isRead) {
+            setShowPopup(false);
+            localStorage.setItem('isInfoRead', true);
+        }
+    }
 
     return(
 
         <div className="cover">
+            {/* Popup shown initially */}
+            {showPopup && !isReadInfoOnce  && (<Popup setClosePopup={closePopupInfo}/>)}
+
             <u><h2>{isRegisterClicked ?  "Register Here " : "Login Here "}</h2></u>
             <p>{!isRegisterClicked ? "Sign in" : "Register here"} & let's get started</p>
             {errorMessageEmail.length > 0 && (<div className="error1">{errorMessageEmail}</div>)}

src/popup/Popup.jsx

@@ -0,0 +1,21 @@
+import { APP_INITIAL_POPUP_MSG } from "../utility/constants";
+
+
+const Popup = (props) => {
+    const { setClosePopup } = props;
+
+    const closePopup = () => {
+        setClosePopup(true);
+    }
+
+    return(
+        <div className="popup-overlay">
+            <div className="popup">
+                <img src="favicon1.ico" alt='' />
+                <p dangerouslySetInnerHTML={{__html: APP_INITIAL_POPUP_MSG}}></p>
+                <button onClick={closePopup}>OK</button>
+            </div>
+        </div>
+    );
+}
+export default Popup;