Refactored Home component by moving LeadTable rendering into its own component. Also moved the LeadRow return into LeadRow component and render a leadrow when mapping over each lead in the array.
Did a minimal refactor of the fetch call in Home so that there is slightly more robust error handling and a .catch for the fetch request. For a future todo, instead of console.logging the error message, should set it in state and display a message to the user if the fetch fails.
const checkForErrors = (response) => {
if (response.status === 200) {
return response.json();
} else if (response.status === 401) {
history.push('/login');
} else {
throw new Error('Something went wrong');
}
};
useEffect(() => {
const url = `${API_HOST}/leads?page=${page}&perpage=${perpage}`;
const token = localStorage.getItem('partnerFinderToken');
if (!token) {
history.push('/login');
}
fetch(url, {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
})
.then((response) => checkForErrors(response))
.then((data) => setLeads(data.leads))
// TODO: create state for error and set state instead of just console.error
// conditional rendering if there is an error
.catch((error) => console.error(error.message));
}, [page, perpage]);
Refactored Home component by moving LeadTable rendering into its own component. Also moved the LeadRow return into LeadRow component and render a leadrow when mapping over each lead in the array.
Did a minimal refactor of the fetch call in Home so that there is slightly more robust error handling and a .catch for the fetch request. For a future todo, instead of console.logging the error message, should set it in state and display a message to the user if the fetch fails.
closes #115