MohamedRizwan399 · MohamedRizwan399 · Nov 10, 2024 · Nov 10, 2024
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 import './App.css';
-import {  Routes, Route, BrowserRouter, Navigate} from 'react-router-dom';
+import {  Routes, Route, Navigate, HashRouter} from 'react-router-dom';
 import { useState } from 'react';
 import Aboutus from './homePage/Aboutus';
 import Contactus from './homePage/Contactus';
@@ -20,7 +20,8 @@ export function App() {
   const [isLoggedinUser, setLoggedInUser] = useState(loginData?.loginSuccess === true);
 
   return(
-    <BrowserRouter>
+    //we use HashRouter instead of BrowserRouter to avoid 404 error in production build when page refreshed
+    <HashRouter>
     <div>
       <ToastContainer/>
       {isLoggedinUser && 
@@ -53,7 +54,7 @@ export function App() {
       </Routes>
       {isLoggedinUser && <Footer/>}
     </div>
-    </BrowserRouter>
+    </HashRouter>
   );
 }
 

diff --git a/src/fetchApiData/FetchApi.jsx b/src/fetchApiData/FetchApi.jsx
@@ -6,6 +6,7 @@ import ClipLoader from 'react-spinners/ClipLoader';
 function FetchApi() {
     const [data, setData] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
+    const thumbImage = `${process.env.PUBLIC_URL}/favicon1.ico`;
 
     const fetchData = async () => {
         //sample get api
@@ -44,13 +45,13 @@ function FetchApi() {
                     data.map((value, index) => {
                         const imageUrl = value?.urlToImage;
                         return(
-                                <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">
+                            <div className='card' style={{width: "20rem"}} key={index}>
+                                    <img src={(imageUrl && imageUrl !== null) ? imageUrl : thumbImage} className="card-img-top" width={300} alt={value?.title}/>
+                                    {imageUrl !== null && <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>
                         );
                     })

diff --git a/src/homePage/Card.jsx b/src/homePage/Card.jsx
@@ -3,16 +3,13 @@ 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");
-  }
+  const [imageSrc, setImageSrc] = useState(`${process.env.PUBLIC_URL}/favicon1.ico`);
 
   useEffect(() => {
     counter = counter + 1;
     const timer = setTimeout(() => {
       if (itemArrLength === counter) {  
-        isAllCardLoaded(true) 
+        isAllCardLoaded(true);
       }
     }, 1000);
     return () => { 
@@ -21,13 +18,26 @@ const Card = ({post, itemArrLength, isAllCardLoaded}) => {
     };
   }, [itemArrLength, isAllCardLoaded]);
 
+  const handleImageLoad = () => {
+    if (post?.img && post?.img !== "") {
+      setImageSrc(post?.img);
+    } else {
+      setImageSrc(`${process.env.PUBLIC_URL}/logo512.png`);
+    }
+  }
+
+  const handleImageError = () => {
+    console.error("Error loading image.");
+    setImageSrc(`${process.env.PUBLIC_URL}/logo512.png`);
+  };
+
   return (
       <div className='home-card'>
         <Link className='link' to={`/post/${post?.id}`}>
           <span className='title'>{post?.title}</span>
         </Link>
         <Link className='imgLink' to={'/dashboard'}>
-          <img src={imageSrc} alt="" className="img" onLoad={handleImageLoad}/>
+          <img src={imageSrc} alt="" className="img" onLoad={handleImageLoad} onError={handleImageError}/>
           <p className='desc'>{post?.desc}</p>
           <button className='cardButton'>Read more</button>
         </Link>

diff --git a/src/homePage/Demo.jsx b/src/homePage/Demo.jsx
@@ -7,7 +7,8 @@ class Demo extends React.Component{
         super(props);
         this.state = {
             name: "",
-            age:""
+            age:"",
+            isApiFunctionCompLoaded: true,
         }
     }
 
@@ -17,19 +18,27 @@ class Demo extends React.Component{
         })
     }
 
+    componentDidMount() {
+        this.state.isApiFunctionCompLoaded && this.setState({isApiFunctionCompLoaded: false});
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+    }
+
     render() {
-        let {name, age} = this.state;
+        const {name, age, isApiFunctionCompLoaded} = this.state;
         return (
             <div className="othertask-container">
                 <div className="instantChange-container">
-                    Enter your Name: <input type="text" onChange={e=>this.inputchange(e, "name")} />
-                    Enter your Age: <input type="number" onChange={e=>this.inputchange(e, "age")} />
+                    Enter your Name: <input type="text" onChange={e => this.inputchange(e, "name")} />
+                    Enter your Age: <input type="number" onChange={e => this.inputchange(e, "age")} />
 
                     <h1>Name: {name}<br/> Your Age: {age}</h1>
                 </div>
                     {/* This is Counter ClassComponent to do increment/decrement operation*/}
                     <hr className="headerline1" style={{ borderTop: "1px solid lightgrey" }}></hr>
-                    <Counter/>
+                    <Counter isApiCalled={isApiFunctionCompLoaded}/>
+
 
                     {/* This is Counter functional Component to show Api data fetched from Counter component */}
                     <hr className="headerline2" style={{ borderTop: "1px solid lightgrey" }}></hr>

diff --git a/src/homePage/HeaderNavbarLogin.jsx b/src/homePage/HeaderNavbarLogin.jsx
@@ -12,6 +12,7 @@ const HeaderNavbarLogin = (props) => {
   const {isLoggedinUser, setLoggedInUser} = props;
   const [isLoading, setIsLoading] = useState(false);
   const loggedInData = JSON.parse(localStorage.getItem("loggedInData") || "{}");
+  const thumbImage = `${process.env.PUBLIC_URL}/favicon1.ico`;
 
   async function logoutOnclick() {
     setIsLoading(true);
@@ -73,7 +74,7 @@ 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 src={isLoggedinUser?.loggedInPhotoUrl || "favicon1.ico"} className='header-avatar' alt='' />
+                  <img src={isLoggedinUser?.loggedInPhotoUrl || thumbImage} className='header-avatar' alt='' />
               </li>
               <li className='listItemUserTitle'>Welcome! <b>{isLoggedinUser?.loggedInUsername}</b></li>
               <button className='listItemLogout' onClick={logoutOnclick}>Logout</button>

diff --git a/src/popup/Popup.jsx b/src/popup/Popup.jsx
@@ -11,8 +11,8 @@ const Popup = (props) => {
     return(
         <div className="popup-overlay">
             <div className="popup">
-                <img src="favicon1.ico" alt='' />
-                <p dangerouslySetInnerHTML={{__html: APP_INITIAL_POPUP_MSG}}></p>
+            <img src={`${process.env.PUBLIC_URL}/favicon1.ico`} alt="" />
+            <p dangerouslySetInnerHTML={{__html: APP_INITIAL_POPUP_MSG}}></p>
                 <button onClick={closePopup}>OK</button>
             </div>
         </div>

diff --git a/src/reduxCounter/Counter.jsx b/src/reduxCounter/Counter.jsx
@@ -14,15 +14,17 @@ class Counter extends Component {
     }
 
     componentDidMount() {
+        const {isApiCalled} = this.props;
         //sample get api
-        axios.get("https://jsonplaceholder.typicode.com/posts")
-        .then((response)=>{
-            const responseData = response?.data
-            const filteredItems = responseData.filter((item) => item?.userId === 2);
-            store.dispatch(storeApiDataAction(filteredItems));
-            //this.props.apiDataAction(filteredItems)
-        })
-
+        if(isApiCalled) {
+            axios.get("https://jsonplaceholder.typicode.com/posts")
+            .then((response)=>{
+                const responseData = response?.data
+                const filteredItems = responseData.filter((item) => item?.userId === 2);
+                store.dispatch(storeApiDataAction(filteredItems));
+                //this.props.apiDataAction(filteredItems)
+            })
+        }   
     }
 
     triggerAction = (param) => {

diff --git a/src/reduxCounter/CounterFunction.jsx b/src/reduxCounter/CounterFunction.jsx
@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux';
 
 const CounterFunction = () => {
     const getApiStoreData = useSelector((state) => state.apiReducer);
-    console.log("CounterFunction--getApiData---",getApiStoreData?.apiData)
     const dataItems = getApiStoreData?.apiData