From 39fb4d6238bc70f940ea78c9385ebe534288c397 Mon Sep 17 00:00:00 2001 From: Mohamed Rizwan Date: Mon, 11 Nov 2024 02:34:31 +0530 Subject: [PATCH] #TRAPWLS-19 code optmized and performance improved --- src/App.js | 7 ++++--- src/fetchApiData/FetchApi.jsx | 9 +++++---- src/homePage/Card.jsx | 22 ++++++++++++++++------ src/homePage/Demo.jsx | 19 ++++++++++++++----- src/homePage/HeaderNavbarLogin.jsx | 3 ++- src/popup/Popup.jsx | 4 ++-- src/reduxCounter/Counter.jsx | 18 ++++++++++-------- src/reduxCounter/CounterFunction.jsx | 1 - 8 files changed, 53 insertions(+), 30 deletions(-) diff --git a/src/App.js b/src/App.js index 1ef802a..332f08c 100644 --- 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( - + //we use HashRouter instead of BrowserRouter to avoid 404 error in production build when page refreshed +
{isLoggedinUser && @@ -53,7 +54,7 @@ export function App() { {isLoggedinUser &&
}
- + ); } diff --git a/src/fetchApiData/FetchApi.jsx b/src/fetchApiData/FetchApi.jsx index 197df73..b955fd3 100644 --- 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( -
- {value?.title}/ -
+
+ {value?.title}/ + {imageUrl !== null &&
{value?.title}

{value?.description}



Want to Read more, Click here -
+
}
); }) diff --git a/src/homePage/Card.jsx b/src/homePage/Card.jsx index 2e3d628..165a38a 100644 --- 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 (
{post?.title} - +

{post?.desc}

diff --git a/src/homePage/Demo.jsx b/src/homePage/Demo.jsx index b8c127b..8e0adda 100644 --- 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 (
- Enter your Name: this.inputchange(e, "name")} /> - Enter your Age: this.inputchange(e, "age")} /> + Enter your Name: this.inputchange(e, "name")} /> + Enter your Age: this.inputchange(e, "age")} />

Name: {name}
Your Age: {age}

{/* This is Counter ClassComponent to do increment/decrement operation*/}
- + + {/* This is Counter functional Component to show Api data fetched from Counter component */}
diff --git a/src/homePage/HeaderNavbarLogin.jsx b/src/homePage/HeaderNavbarLogin.jsx index 030abeb..04f1084 100644 --- 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) => {
  • FetchApi
  • Other tasks
  • - +
  • Welcome! {isLoggedinUser?.loggedInUsername}
    • diff --git a/src/popup/Popup.jsx b/src/popup/Popup.jsx index 29bf175..b041257 100644 --- a/src/popup/Popup.jsx +++ b/src/popup/Popup.jsx @@ -11,8 +11,8 @@ const Popup = (props) => { return(
    - -

    + +

    diff --git a/src/reduxCounter/Counter.jsx b/src/reduxCounter/Counter.jsx index 0f684b5..f7210a0 100644 --- 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 index a0749d3..eed6a0d 100644 --- 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