import papa from 'papaparse'
import { features } from '../data/countris.json'
const url = 'https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/vaccinations/vaccinations.csv'
export const load = async () => {
papa.parse(url, {
download: true,
header: true,
complete: async function (results) {
return (await processVaccineData(results.data))
},
})
}
const processVaccineData = async (covidCountries) => {
const newarr = []
covidCountries.sort((a, b) => parseInt(b.total_vaccinations) - parseInt(a.total_vaccinations))
for await (let num of features) {
const mapCountry = num
const vaccineCountry = covidCountries.find((vaccineCountry) => vaccineCountry.location === mapCountry.properties.admin)
mapCountry.properties.total_vaccinations = 0
mapCountry.properties.total_vaccinations_text = "0"
if (vaccineCountry !== undefined) {
const vaccine = Number(vaccineCountry.total_vaccinations)
mapCountry.properties.total_vaccinations = vaccine
mapCountry.properties.total_vaccinations_text = vaccine
newarr.push(mapCountry)
}
}
return newarr}
console.log(load())
See my new project, and help me develop it
https://adoring-jackson-5eecfc.netlify.app/
Hello everyone! Hope you are doing well!
I have one basic question for React router.
Requirement
- When the modal shows, the url should be changed without redirecting. (e.x. - https://url/{id}/modalshow)
- When the modal hides, the url should be changed without redirecting. So the
modalshowrouter should be removed. (e.x. - https://url/{id}/)
How can I do like this? Hope you will help me for that. Thank you!
onBlur={() => {
onBlur;
setShow(false);
setFocused(false);
}}Expected an assignment or function call and instead saw an expression.eslintno-unused-expressions Linter error. Is there a convenient way of doing this without having to surpress the warning?
Hey guys, I am doing a fetch data from firebase (real-time database) but the my application does not render the new data added to the database. I have to reload my app for it to appear. I am guessing that it is in my useEffect. How do I solve it?
Currently I have this:
useEffect(() => {
var appointmentsRef = firebase
.database()
.ref('/client_appointments/' + PROJECT_CODE.projectCode);
appointmentsRef
.orderByChild('createrID')
.equalTo(currentUserId)
.once('value', (snapshot) => {
var upcomingAppointments = [];
...setUpcomingDb([upcomingAppointments]);
});
}
});
}, []);
Hey guys, I am doing a fetch data from firebase (real-time database) but the my application does not render the new data added to the database. I have to reload my app for it to appear. I am guessing that it is in my useEffect. How do I solve it?
Currently I have this:`
useEffect(() => {
var appointmentsRef = firebase
.database()
.ref('/client_appointments/' + PROJECT_CODE.projectCode);
appointmentsRef
.orderByChild('createrID')
.equalTo(currentUserId)
.once('value', (snapshot) => {
var upcomingAppointments = [];
... setUpcomingDb([upcomingAppointments]);
});
}
});
}, []);`
Request failed with status code 500
client.js check this and create some mock 500 mock error object in return. This way, the frontend services and the components "using" these (SWR) will respond properly
https://www.npmjs.com/package/store-me
I really hope it'll be useful to you!
If you have any suggestions or you liked it or want to contribute then checkout the GitHub repo here - https://github.com/gauravgupta98/whatsapp-clone
Don't be lazy to give a star ;)
Hey guys, I have a question. I have a component that is rendering 6 objects from Firebase. And when I click on the object, it renders multiple checkbox items and they have a price attached to it. But the problem is I want to get the total price of the checkboxes for each of the 6 objects.
The problem is because the rendered component (with checkboxes) is dynamic, how do I set the state for the total price for each of the 6 components?
Okay, so what I have is a parent component called A and a child component called B. What A does is list a list of Products Categories (retrieved from Firebase) which are each clickable. Then I have child component B. It is shown when one of the product category is clicked. So component B appears over component A when a product category is clicked.
When you click on a product category in component A, a list of of product for that category is listed (from Firebase) along with checkboxes next to them. When I click on the checkboxes, it should sum the prices of the products and display the sum on top of the component B and A. So I want each product category to have the total price displayed next to them.
The issue I am having is how do I display the total price for each product category based on the checkboxes in component B? What is the best approach to this?
PS: I am using functional component
Hi Everyone,
Error: Couldn't find a style target. How to fix it?
I had a CSR app and now implemented Server-Side Rendering (SSR) with React, and get this error
Error: Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid
Get this error when I run the server and try to access the page.
Tech sack in use: nodejs, reactjs, antdesign, babel and webpack.
I already tried a lot of solutions from StackOverflow and other sources, nothing helped! Please, help me to solve it.
Thank you!
1 reply
I have an application where I have a form where the input are stored in a state. So let's say const [firstName, setFirstName] = useState(''). But I want to store the input of the user in Firebase and when user refreshes the website, I want the state to not go back to it's initial state.
What I did at the moment is:
useEffect(() => {
var firstNameRef = firebase.database().ref(...);
firstNameRef.update(
{firstName: firstName;
})
}, [firstName])
However, this will reset the data back to empty if I refresh the page. I just want it to stay to the input the user and not remove anything. My goal to this is that I want persist the state from the database. So if a user want to put their name in the input and they refresh the page, I want the input to still be there. I cannot use the web localStorage because I have lots of users and it would be too much for the localStorage.
If you have any suggestions or you liked it or want to contribute then checkout the GitHub repo here - https://github.com/gauravgupta98/instagram-clone
Don't be lazy to give a star on the repo ;)