So I'm currently brushing up my react skills and learning firebase. I found it simple enough to configure and now I have been successfully making fetch requests from my realtime database.
I am currently building some sort of a birthday app that would show monthly and daily celebrants, and have generated mock data that I imported into my database. Currently, the first names are being fetched successfully and displaying on the screen, however the images (that are hosted on another site and fetched as a string from the db) are not loading properly and I'm getting 500 error in my console. If I keep refreshing though, they eventually load.
I'm thinking it must be with the way I make my fetch request. I basically fetch all users and then make a filter (have not explored fetching with queries yet) so I thought it would work.
This is the code for the fetch requests.
export const getUsers = () => {
const usersDb = ref(database);
return get(child(usersDb, `/users`)).then((snapshot) => {
return snapshot.val();
});
};
export const getMonthlyCelebrants = async () => {
const users = await getUsers();
const monthlyCelebs = [];
for (let user in users) {
const userMonth = +users[user]["birth_date"].split("/")[1];
userMonth === getMonthNum() && monthlyCelebs.push(users[user]);
}
return monthlyCelebs;
};And this is the Monthly Celebrants component I use them in:
export default function Monthly() {
const [monthlyCelebs, setMonthlyCelebs] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
async function loadPage() {
setIsLoading(true);
const users = await getMonthlyCelebrants();
setIsLoading(false);
setMonthlyCelebs(users);
}
loadPage();
}, []);
return (
<div>
<h2>{getMonthAndYear()} Celebrants</h2>
{isLoading ? (
<p>Celebrants loading...</p>
) : (
sortBirthdays(monthlyCelebs).map((monthlyCeleb) => {
return (
<SingleMonthlyCelebrant
monthlyCeleb={monthlyCeleb}
key={`${monthlyCeleb.birth_date}${monthlyCeleb.first_name}`}
/>
);
})
)}
</div>
);
}Any tips or advice would be greatly appreciated. Thank you!