Fetch Requests in different pages with React Hooks - reactjs

Question

I'm building a website using React Hooks and I've got two different pages (Workshops.js and Shows.js) fetching data from the same API, just with different parameters (?type=0 and ?type=1).
Once the data is fetched I'm mapping the results (It would be nice to have a reusable component there..see the comments in the code below). When the user click either on a show or a workshop he will be redirected to the same page.
Now singularly the code works.
Is there a more elegant way to avoid repeating the same code? ...something like Services in Angular?
Thank you!
Here is Workshop.js.
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'
import api from '../../maps/Api'
const Workshops = () => {
const [ workshops, setWorkshop ] = useState([])
const [ isLoading, setIsLoading ] = useState(false)
const [ error, setError ] = useState(null)
const GET_URL = api.get.workshops /* http://someapi/workshops?type=0 */
useEffect(() => {
setIsLoading(true)
fetch(GET_URL, {headers: {
"Accept": "application/json",
"Access-Control-Allow-Origin": "*"
}})
.then(res => {
return (res.ok) ? res.json() : new Error("Mistake!")
})
.then(workshops => {
if(workshops.upcoming) {
setWorkshop(workshops.upcoming);
}
setIsLoading(false);
})
.catch(error => {
setError(error)
})
}, [GET_URL])
if ( error ){ return <p>{ error.message }</p> }
if ( isLoading ){
return <p>Loading workshops...</p>
}
return(
<main>
<div className='content'>
<div className='contentCol'>
<ul id='workshopBox'>
{
workshops.map( (workshop, i) => (
<li> // FROM HERE...
<div
className='workshop-active'>
<h2>{ workshop.title }</h2>
<p>{ workshop.description }</p>
<p>{ workshop.place }</p>
<p>{ (new Date(workshop.date).toLocaleDateString("it-IT", {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
}))}</p>
<p>{ (new Date(workshop.date).toLocaleTimeString("it-IT", {
hour: '2-digit',
minute: '2-digit',
hour12: true
}))}</p>
<p> Full price { workshop.price_full + ', 00'} € </p>
<p> Early bird price { workshop.price_earlybirds + ', 00'} € </p>
<p>
<Link to={`/workshops/${ workshop.id}`}>
<button>Details</button>
</Link>
</p>
<br/>
</div>
</li> //..to HERE I WOULD LIKE TO USE A REUSABLE COMPONENT
))
}
</ul>
</div>
</div>
</main>
)
}
export default Workshops
and here's Shows.js
import React, { useState, useEffect } from 'react';
//import { Link } from 'react-router-dom'
import api from '../maps/Api'
const Spettacoli = () => {
const [ shows, setShows ] = useState([])
const [ isLoading, setIsLoading ] = useState(false)
const [ error, setError ] = useState(null)
const GET_URL = api.get.shows /* http://someapi/workshops?type=1 */
useEffect(() => {
setIsLoading(true)
fetch(GET_URL, {headers: {
"Accept": "application/json",
"Access-Control-Allow-Origin": "*"
}})
.then(res => {
return (res.ok) ? res.json() : new Error("Mistake!")
})
.then(shows => {
setShows(shows)
setIsLoading(false)
})
.catch(error => {
setError(error)
})
}, [GET_URL])
return(
<main>
<div className='content'>
<div className='contentCol'>
/* SAME INTERFACE AS WORKSHOP */
</div>
</div>
</main>
)
}
export default Shows

Answer 1

So you may create your custom hook:
function useMyDataFetch(GET_URL) {
const [ data, setData ] = useState([])
const [ isLoading, setIsLoading ] = useState(true)
const [ error, setError ] = useState(null)
useEffect(() => {
let hasBeenAborted = false; // added
setIsLoading(true)
fetch(GET_URL, {headers: {
"Accept": "application/json",
"Access-Control-Allow-Origin": "*"
}})
.then(res => {
return (res.ok) ? res.json() : new Error("Mistake!")
})
.then(data => {
if (hasBeenAborted) return; // added
if(data.upcoming) {
setData(data.upcoming);
}
setIsLoading(false);
})
.catch(error => {
if (hasBeenAborted) return; // added
setIsLoading(false); // added
setError(error)
});
return () => { hasBeenAborted = true; } // added
}, [GET_URL]);
return { data, error, isLoading };
}
and use that in your components.
Notice lines I've marked with // added.
hasBeenAborted allows us react in case GET_URL has been updated for any reason for the same component. Cleanup in useEffect is really important so we avoid race conditions.
Instead of hasBeenAborted flag we could use AbortController but with that we would still fall into catch branch and need additional if to distinguish if request has been cancelled or actually failed. So just matter of taste to me.
As for your components they will use hook like that:
const Workshops = () => {
const {isLoading, error, data: workshops} = useMyDataFetch(api.get.workshops);
if ( error ){ return <p>{ error.message }</p> }
if ( isLoading ){
return <p>Loading workshops...</p>
}
return(
// the same here
);
}
export default Workshops