Skip to content

Commit 2995223

Browse files
MohamedRizwan399MohamedRizwan399
authored
Merge pull request #22 from MohamedRizwan399/develop
Master - #TRAPWLS-19 code optmized and performance improved
2 parents cd68c64 + 3cd2f71 commit 2995223

File tree

8 files changed

+53
-30
lines changed

8 files changed

+53
-30
lines changed

‎src/App.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import './App.css';
2-
import { Routes, Route, BrowserRouter, Navigate} from 'react-router-dom';
2+
import { Routes, Route, Navigate, HashRouter} from 'react-router-dom';
33
import { useState } from 'react';
44
import Aboutus from './homePage/Aboutus';
55
import Contactus from './homePage/Contactus';
@@ -20,7 +20,8 @@ export function App() {
2020
const [isLoggedinUser, setLoggedInUser] = useState(loginData?.loginSuccess === true);
2121

2222
return(
23-
<BrowserRouter>
23+
//we use HashRouter instead of BrowserRouter to avoid 404 error in production build when page refreshed
24+
<HashRouter>
2425
<div>
2526
<ToastContainer/>
2627
{isLoggedinUser &&
@@ -53,7 +54,7 @@ export function App() {
5354
</Routes>
5455
{isLoggedinUser && <Footer/>}
5556
</div>
56-
</BrowserRouter>
57+
</HashRouter>
5758
);
5859
}
5960

‎src/fetchApiData/FetchApi.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ClipLoader from 'react-spinners/ClipLoader';
66
function FetchApi() {
77
const [data, setData] = useState([]);
88
const [isLoading, setIsLoading] = useState(false);
9+
const thumbImage = `${process.env.PUBLIC_URL}/favicon1.ico`;
910

1011
const fetchData = async () => {
1112
//sample get api
@@ -44,13 +45,13 @@ function FetchApi() {
4445
data.map((value, index) => {
4546
const imageUrl = value?.urlToImage;
4647
return(
47-
<div className='card' style={{width: "20rem"}} key={index}>
48-
<img src={(imageUrl && imageUrl !== null) ? imageUrl : "favicon1.ico"} className="card-img-top" width={300} alt={value?.title}/>
49-
<div className="card-body">
48+
<div className='card' style={{width: "20rem"}} key={index}>
49+
<img src={(imageUrl && imageUrl !== null) ? imageUrl : thumbImage} className="card-img-top" width={300} alt={value?.title}/>
50+
{imageUrl !== null && <div className="card-body">
5051
<h5 className="card-title">{value?.title}</h5>
5152
<p className="card-desc">{value?.description}</p><br></br>
5253
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>
53-
</div>
54+
</div>}
5455
</div>
5556
);
5657
})

‎src/homePage/Card.jsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,13 @@ import { Link } from 'react-router-dom'
33
let counter = 0;
44

55
const Card = ({post, itemArrLength, isAllCardLoaded}) => {
6-
const [imageSrc, setImageSrc] = useState("favicon1.ico");
7-
const handleImageLoad = () => {
8-
setImageSrc(post?.img || "logo512.png");
9-
}
6+
const [imageSrc, setImageSrc] = useState(`${process.env.PUBLIC_URL}/favicon1.ico`);
107

118
useEffect(() => {
129
counter = counter + 1;
1310
const timer = setTimeout(() => {
1411
if (itemArrLength === counter) {
15-
isAllCardLoaded(true)
12+
isAllCardLoaded(true);
1613
}
1714
}, 1000);
1815
return () => {
@@ -21,13 +18,26 @@ const Card = ({post, itemArrLength, isAllCardLoaded}) => {
2118
};
2219
}, [itemArrLength, isAllCardLoaded]);
2320

21+
const handleImageLoad = () => {
22+
if (post?.img && post?.img !== "") {
23+
setImageSrc(post?.img);
24+
} else {
25+
setImageSrc(`${process.env.PUBLIC_URL}/logo512.png`);
26+
}
27+
}
28+
29+
const handleImageError = () => {
30+
console.error("Error loading image.");
31+
setImageSrc(`${process.env.PUBLIC_URL}/logo512.png`);
32+
};
33+
2434
return (
2535
<div className='home-card'>
2636
<Link className='link' to={`/post/${post?.id}`}>
2737
<span className='title'>{post?.title}</span>
2838
</Link>
2939
<Link className='imgLink' to={'/dashboard'}>
30-
<img src={imageSrc} alt="" className="img" onLoad={handleImageLoad}/>
40+
<img src={imageSrc} alt="" className="img" onLoad={handleImageLoad} onError={handleImageError}/>
3141
<p className='desc'>{post?.desc}</p>
3242
<button className='cardButton'>Read more</button>
3343
</Link>

‎src/homePage/Demo.jsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ class Demo extends React.Component{
77
super(props);
88
this.state = {
99
name: "",
10-
age:""
10+
age:"",
11+
isApiFunctionCompLoaded: true,
1112
}
1213
}
1314

@@ -17,19 +18,27 @@ class Demo extends React.Component{
1718
})
1819
}
1920

21+
componentDidMount() {
22+
this.state.isApiFunctionCompLoaded && this.setState({isApiFunctionCompLoaded: false});
23+
}
24+
25+
componentDidUpdate(prevProps, prevState) {
26+
}
27+
2028
render() {
21-
let {name, age} = this.state;
29+
const {name, age, isApiFunctionCompLoaded} = this.state;
2230
return (
2331
<div className="othertask-container">
2432
<div className="instantChange-container">
25-
Enter your Name: <input type="text" onChange={e=>this.inputchange(e, "name")} />
26-
Enter your Age: <input type="number" onChange={e=>this.inputchange(e, "age")} />
33+
Enter your Name: <input type="text" onChange={e => this.inputchange(e, "name")} />
34+
Enter your Age: <input type="number" onChange={e => this.inputchange(e, "age")} />
2735

2836
<h1>Name: {name}<br/> Your Age: {age}</h1>
2937
</div>
3038
{/* This is Counter ClassComponent to do increment/decrement operation*/}
3139
<hr className="headerline1" style={{ borderTop: "1px solid lightgrey" }}></hr>
32-
<Counter/>
40+
<Counter isApiCalled={isApiFunctionCompLoaded}/>
41+
3342

3443
{/* This is Counter functional Component to show Api data fetched from Counter component */}
3544
<hr className="headerline2" style={{ borderTop: "1px solid lightgrey" }}></hr>

‎src/homePage/HeaderNavbarLogin.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const HeaderNavbarLogin = (props) => {
1212
const {isLoggedinUser, setLoggedInUser} = props;
1313
const [isLoading, setIsLoading] = useState(false);
1414
const loggedInData = JSON.parse(localStorage.getItem("loggedInData") || "{}");
15+
const thumbImage = `${process.env.PUBLIC_URL}/favicon1.ico`;
1516

1617
async function logoutOnclick() {
1718
setIsLoading(true);
@@ -73,7 +74,7 @@ const HeaderNavbarLogin = (props) => {
7374
<li><NavLink to={"/fetch-api"}>FetchApi</NavLink></li>
7475
<li><NavLink to={"/demo-tasks"}>Other tasks</NavLink></li>
7576
<li className='header-listItem'>
76-
<img src={isLoggedinUser?.loggedInPhotoUrl || "favicon1.ico"} className='header-avatar' alt='' />
77+
<img src={isLoggedinUser?.loggedInPhotoUrl || thumbImage} className='header-avatar' alt='' />
7778
</li>
7879
<li className='listItemUserTitle'>Welcome! <b>{isLoggedinUser?.loggedInUsername}</b></li>
7980
<button className='listItemLogout' onClick={logoutOnclick}>Logout</button>

‎src/popup/Popup.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ const Popup = (props) => {
1111
return(
1212
<div className="popup-overlay">
1313
<div className="popup">
14-
<img src="favicon1.ico" alt='' />
15-
<p dangerouslySetInnerHTML={{__html: APP_INITIAL_POPUP_MSG}}></p>
14+
<img src={`${process.env.PUBLIC_URL}/favicon1.ico`} alt="" />
15+
<p dangerouslySetInnerHTML={{__html: APP_INITIAL_POPUP_MSG}}></p>
1616
<button onClick={closePopup}>OK</button>
1717
</div>
1818
</div>

‎src/reduxCounter/Counter.jsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,17 @@ class Counter extends Component {
1414
}
1515

1616
componentDidMount() {
17+
const {isApiCalled} = this.props;
1718
//sample get api
18-
axios.get("https://jsonplaceholder.typicode.com/posts")
19-
.then((response)=>{
20-
const responseData = response?.data
21-
const filteredItems = responseData.filter((item) => item?.userId === 2);
22-
store.dispatch(storeApiDataAction(filteredItems));
23-
//this.props.apiDataAction(filteredItems)
24-
})
25-
19+
if(isApiCalled) {
20+
axios.get("https://jsonplaceholder.typicode.com/posts")
21+
.then((response)=>{
22+
const responseData = response?.data
23+
const filteredItems = responseData.filter((item) => item?.userId === 2);
24+
store.dispatch(storeApiDataAction(filteredItems));
25+
//this.props.apiDataAction(filteredItems)
26+
})
27+
}
2628
}
2729

2830
triggerAction = (param) => {

‎src/reduxCounter/CounterFunction.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux';
33

44
const CounterFunction = () => {
55
const getApiStoreData = useSelector((state) => state.apiReducer);
6-
console.log("CounterFunction--getApiData---",getApiStoreData?.apiData)
76
const dataItems = getApiStoreData?.apiData
87

98

0 commit comments

Comments
 (0)