#TRAPWLS-19 loader added and code optimized

MohamedRizwan399 · MohamedRizwan399 · commit 385446e531be · 2024-11-05T17:07:35.000+05:30
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "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",
diff --git a/src/App.css b/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;
@@ -339,4 +340,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;
 }
diff --git a/src/fetchApiData/FetchApi.jsx b/src/fetchApiData/FetchApi.jsx
@@ -1,51 +1,66 @@
 import React ,{useEffect, useState} from 'react'
 import axios from 'axios'
+import { toast } from 'react-toastify'
+import ClipLoader from 'react-spinners/ClipLoader';
 
 function FetchApi() {
-    const [data, setData] = useState([])
+    const [data, setData] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
 
-    const fetchData = () => {
-        console.log("Button clicked")
+    const fetchData = async () => {
         //sample get api
-        axios.get("https://newsapi.org/v2/top-headlines?country=us&apiKey=6004b8fcb1604003b4ead57854e8d2c2")
-        .then((response) => {
-            console.log(response);
-            setData(response.data.articles)
-
-        })
+        try {
+            setIsLoading(true);
+            await axios.get("https://newsapi.org/v2/top-headlines?country=us&apiKey=6004b8fcb1604003b4ead57854e8d2c2")
+            .then((response) => {
+                setData(response?.data?.articles);
+            })
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setIsLoading(false);
+        }
     }
 
-    useEffect(() => {  
-        document.body.style.backgroundColor = 'silver';
+    useEffect(() => {
+        if (!isLoading) document.body.style.backgroundColor = 'silver';
         return () => {
             document.body.style.backgroundColor = '';
         }
-    }, []);
+    }, [isLoading]);
+
+    const showToast = () => {
+        toast.info("Data Already Fetched!!")
+    }
 
     return (
         <>
             <div className="btn-fetchContainer">
-                <button className='btn-fetch' onClick={fetchData}>Click here to Fetch Api Data!!</button>
+                <button className='btn-fetch' onClick={data.length > 0 ? showToast : fetchData}>Click here to Fetch Api Data!!</button>
             </div>
 
             <div className="ui-fetched">
                 {
                     data.map((value, index) => {
-                        const imageUrl = value?.urlToImage
-                        console.log("imageUrl--",imageUrl)
+                        const imageUrl = value?.urlToImage;
                         return(
-                            <div className='card' style={{width: "20rem"}} key={index}>
-                                <img src={value?.urlToImage} className="card-img-top" width={300} alt={value?.title}/>
-                                <div className="card-body">
-                                    <h5 className="card-title">{value?.title}</h5>
-                                    <p className="card-desc">{value?.description}</p><br></br>
-                                    Want to Read more, <a href={value?.url || "/notfound"} className="btn-primary"> <span style={{fontWeight: "bold"}}>Click here</span></a>
+                                <div className='card' style={{width: "20rem"}} key={index}>
+                                    <img src={(imageUrl && imageUrl !== null) ? imageUrl : "favicon1.ico"} className="card-img-top" width={300} alt={value?.title}/>
+                                    <div className="card-body">
+                                        <h5 className="card-title">{value?.title}</h5>
+                                        <p className="card-desc">{value?.description}</p><br></br>
+                                        Want to Read more, <a href={value?.url || "/notfound"} target='_blank' rel='noopener noreferrer' className="btn-primary"> <span style={{fontWeight: "bold"}}>Click here</span></a>
+                                    </div>
                                 </div>
-                            </div>
                         );
                     })
                 }
             </div>
+
+            {/* Loader */}
+            {isLoading && <div className="loader" style={{backgroundColor: "none"}}>
+                <ClipLoader color="#09f" loading={isLoading} size={50} /></div>
+            }
         </>
     )
 }
diff --git a/src/homePage/Card.jsx b/src/homePage/Card.jsx
@@ -1,20 +1,34 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
+let counter = 0;
+
+const Card = ({post, itemArrLength, isAllCardLoaded}) => {
+  const [imageSrc, setImageSrc] = useState("favicon1.ico");
+  const handleImageLoad = () => {
+    setImageSrc(post?.img || "logo512.png");
+  }
+
+  useEffect(() => {
+    counter = counter + 1;
+    if (itemArrLength === counter) {      
+      return () => {
+        setTimeout(() => { isAllCardLoaded(true) }, 1000);
+      };
+    }
+  }, [itemArrLength, isAllCardLoaded]);
 
-const Card = ({post}) => {
   return (
-    <div className='home-card'>
+      <div className='home-card'>
         <Link className='link' to={`/post/${post?.id}`}>
-        <span className='title'>{post?.title}</span>
+          <span className='title'>{post?.title}</span>
         </Link>
         <Link className='imgLink' to={'/dashboard'}>
-        <img src={post?.img} alt="" className="img" />
-        <p className='desc'>{post?.desc}</p>
-        <button className='cardButton'>Read more</button>
+          <img src={imageSrc} alt="" className="img" onLoad={handleImageLoad}/>
+          <p className='desc'>{post?.desc}</p>
+          <button className='cardButton'>Read more</button>
         </Link>
-
-        </div>
+      </div>
   )
 }
 
-export default Card
+export default Card;
diff --git a/src/homePage/HeaderNavbarLogin.jsx b/src/homePage/HeaderNavbarLogin.jsx
@@ -2,24 +2,29 @@ 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 } from "firebase/auth";
-// import { useAuth } from "./../loginAuthentication/firebase/FirebaseAuth"
+import { signOut, 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
 const HeaderNavbarLogin = (props) => {
   const [menuOpen, setMenuOpen] = useState(false);
   const navigateToNextPage = useNavigate();
   const {isLoggedinUser, setLoggedInUser} = props;
-  // const useAuthData = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
+  const loggedInData = JSON.parse(localStorage.getItem("loggedInData") || "{}");
 
-
-  function logoutOnclick(isClick = false) {
-    isClick = true
-    if(isClick) {
-      auth.signOut();
+  async function logoutOnclick() {
+    setIsLoading(true);
+    const user = auth?.currentUser;
+    if(loggedInData?.loggedInType === "usernamePwd") {
+      await auth.signOut();
     } else {
       signOut(auth).then(() => {
-        console.log("GLogin Successfully loggedOut")
+        if (user) {
+          deleteUser(user);
+          console.log("User successfully deleted from Firebase.");
+        }
+        setIsLoading(false);
       }).catch((e) => {
         console.error("Sign out error-->",e)
       })
@@ -32,7 +37,6 @@ const HeaderNavbarLogin = (props) => {
   }
 
   useEffect(() => {
-    // console.log("header screen--useAuthData--",useAuthData)
     const checkScreenSize = () => {
       if (window.innerWidth > 480) {
         setMenuOpen(false)
@@ -65,13 +69,18 @@ const HeaderNavbarLogin = (props) => {
               <li><NavLink to={"/fetch-api"}>FetchApi</NavLink></li>
               <li><NavLink to={"/demo-tasks"}>Other tasks</NavLink></li>
               <li className='header-listItem'>
-                  <img alt='' className='header-avatar' src={isLoggedinUser?.loggedInPhotoUrl || "favicon1.ico"}/>
+                  <img src={isLoggedinUser?.loggedInPhotoUrl || "favicon1.ico"} className='header-avatar' alt='' />
               </li>
               <li className='listItemUserTitle'>Welcome! <b>{isLoggedinUser?.loggedInUsername}</b></li>
               <button className='listItemLogout' onClick={logoutOnclick}>Logout</button>
             </ul>
           </nav>
         ) : (<Link className='header-loginhere' to="/">Login Here</Link>)}
+
+        {/* Loader */}
+        {isLoading && <div className="loader">
+          <ClipLoader color="#09f" loading={isLoading} size={50} /></div>
+        }
     </div>
   )
 }
diff --git a/src/homePage/Home.jsx b/src/homePage/Home.jsx
@@ -1,15 +1,32 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {posts} from "./data"
 import Card from './Card'
+import ClipLoader from 'react-spinners/ClipLoader';
 
 const Home = () => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const isAllCardLoaded = async (isAllLoaded = false) => {
+    if(isAllLoaded) { setIsLoading(false); }
+  }
+  
   return (
     <div className='home'>
-        {posts.map(post=>(
-        <Card key={post.id} post={post}/>
+        {posts.map((post, index) => (
+          <Card 
+            key={post?.id} 
+            post={post} 
+            itemArrLength={posts.length}
+            isAllCardLoaded={isAllCardLoaded}
+          />
         ))}
-        </div>
+
+        {/* Loader */}
+        {isLoading && <div className="loader">
+          <ClipLoader color="#09f" loading={isLoading} size={50} /></div>
+        }
+    </div>
   )
 }
 
-export default Home
+export default Home;
diff --git a/src/loginAuthentication/LoginPage.css b/src/loginAuthentication/LoginPage.css
@@ -131,4 +131,16 @@ input:focus{
     cursor: pointer;
     font-weight: bold;
     font-size: 20px;
+}
+
+/* Styling for loader*/
+.loader {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.8);
+    z-index: 1;
 }
diff --git a/src/loginAuthentication/LoginPage.jsx b/src/loginAuthentication/LoginPage.jsx
@@ -8,6 +8,7 @@ import { toast } from 'react-toastify';
 import {auth, provider} from "./firebase/FirebaseConfig";
 import {signInWithPopup } from "firebase/auth";
 import {handleCreateUserWithEmailAndPassword, handleSignInWithEmailAndPassword} from './firebase/LoginAuthCreation';
+import ClipLoader from 'react-spinners/ClipLoader';
 
 // for each time show the google accounts in the dialog
 provider.setCustomParameters({
@@ -22,6 +23,7 @@ function LoginPage(props) {
     //for navigate
     const navigateToNextPage = useNavigate();
     const {setLoggedInUser} = props;
+    const [isLoading, setIsLoading] = useState(false);
     const [isRegisterClicked, setRegisterClicked] = useState(false);
 
     //password requirement
@@ -101,9 +103,11 @@ function LoginPage(props) {
         if (!isValidated) return;
 
         try {
+            setIsLoading(true);
             const signInwithUsername = await handleSignInWithEmailAndPassword(input.username, input.password);
             if(signInwithUsername?.success) {
                 const userObj = {
+                    loginUsernamePwdSuccess: signInwithUsername?.success,
                     displayName: input.username.slice(0,7) + "...",
                     email: input.username
                 }
@@ -118,6 +122,7 @@ function LoginPage(props) {
         } catch(e) {
             console.log("catch error login--",e)
         } finally {
+            setIsLoading(false);
         }
     }
 
@@ -134,6 +139,7 @@ function LoginPage(props) {
         }
 
         try {
+            setIsLoading(true);
             const registerWithUsername = await handleCreateUserWithEmailAndPassword(input.username, input.password);
             if (registerWithUsername?.success) {
                 notifyToast({
@@ -146,6 +152,8 @@ function LoginPage(props) {
             navigateToRegister_Login();
         } catch(e) {
             console.log("catch error register--",e)
+        } finally {
+            setIsLoading(false);
         }
     }
 
@@ -188,6 +196,7 @@ function LoginPage(props) {
     const storeLoginSuccessAndNavigate = (user) => {
         const loginObj = {
             loginSuccess: true,
+            loggedInType: user?.loginUsernamePwdSuccess ? "usernamePwd" : "socialLogin", 
             loggedInUsername: user?.displayName || "",
             loggedInEmail: user?.email || input?.username || "",
             loggedInPhotoUrl: user?.photoURL || ""
@@ -266,6 +275,11 @@ function LoginPage(props) {
 
             {/* Password hint feedback dialog */}
             {isPwdFeedbackHint}
+
+            {/* Loader */}
+            {isLoading && <div className="loader">
+                <ClipLoader color="#09f" loading={isLoading} size={50} /></div>
+            }
         </div>
         
     )
