Intermediate React Tutorial - Todoist Clone (with Firebase, Custom Hooks, SCSS, React Testing)
video description
Date: 2022-03-14
Related videos
Comments and reviews: 10
Error
can anyone help me why I getting a different JSON schema every time for allProjects, causing my (useproject hook) to loop infinitely?
firebase
.firestore()
.collection('projects')
.where('userid', '==', 'G3fWPE0hEeTtTiR88DWQ')
.orderBy('projectid')
.get()
.then((snapshot) => -
const allProjects = snapshot.docs.map((project) => (-
...project.data(),
docId: -t,
-));
1st TIME when LOG data to console :
0: -name: -Music-, projectid: -1-, userid: -G3fWPE0hEeTtTiR88DWQ-, docId: -Mmhm9c2D4CkhzmN56wCG--
1: -projectid: -2-, name: --THE OFFICE-, userid: -G3fWPE0hEeTtTiR88DWQ-, docId: -Kkpp373JV68YMVzUd1W3--
2: -userid: -G3fWPE0hEeTtTiR88DWQ-, projectid: -3-, name: --DAILY-, docId: -IbarIIsmjFe3NtoqaIlR--
2st TIME when LOG data to console :
0: -userid: -G3fWPE0hEeTtTiR88DWQ-, name: -Music-, projectid: -1-, docId: -Mmhm9c2D4CkhzmN56wCG--
1: -userid: -G3fWPE0hEeTtTiR88DWQ-, projectid: -2-, name: --THE OFFICE-, docId: -Kkpp373JV68YMVzUd1W3--
2: -userid: -G3fWPE0hEeTtTiR88DWQ-, projectid: -3-, name: --DAILY-, docId: -IbarIIsmjFe3NtoqaIlR-
reply
can anyone help me why I getting a different JSON schema every time for allProjects, causing my (useproject hook) to loop infinitely?
firebase
.firestore()
.collection('projects')
.where('userid', '==', 'G3fWPE0hEeTtTiR88DWQ')
.orderBy('projectid')
.get()
.then((snapshot) => -
const allProjects = snapshot.docs.map((project) => (-
...project.data(),
docId: -t,
-));
1st TIME when LOG data to console :
0: -name: -Music-, projectid: -1-, userid: -G3fWPE0hEeTtTiR88DWQ-, docId: -Mmhm9c2D4CkhzmN56wCG--
1: -projectid: -2-, name: --THE OFFICE-, userid: -G3fWPE0hEeTtTiR88DWQ-, docId: -Kkpp373JV68YMVzUd1W3--
2: -userid: -G3fWPE0hEeTtTiR88DWQ-, projectid: -3-, name: --DAILY-, docId: -IbarIIsmjFe3NtoqaIlR--
2st TIME when LOG data to console :
0: -userid: -G3fWPE0hEeTtTiR88DWQ-, name: -Music-, projectid: -1-, docId: -Mmhm9c2D4CkhzmN56wCG--
1: -userid: -G3fWPE0hEeTtTiR88DWQ-, projectid: -2-, name: --THE OFFICE-, docId: -Kkpp373JV68YMVzUd1W3--
2: -userid: -G3fWPE0hEeTtTiR88DWQ-, projectid: -3-, name: --DAILY-, docId: -IbarIIsmjFe3NtoqaIlR-
reply
Vincent
Thanks for the tutorial. Any one else having issues with the read quotas on Firebase ? It seems to me that the custom hooks are not the most effective way of fetching the documents from firebase and I run through the 50K daily reads fairly quickly. It looks like I'm getting a few re render of my components because the props are changing, thus triggering the useEffect multiple times... Is there something I'm missing or is this the nature of useEffect ?
reply
Thanks for the tutorial. Any one else having issues with the read quotas on Firebase ? It seems to me that the custom hooks are not the most effective way of fetching the documents from firebase and I run through the 50K daily reads fairly quickly. It looks like I'm getting a few re render of my components because the props are changing, thus triggering the useEffect multiple times... Is there something I'm missing or is this the nature of useEffect ?
reply
Xavier
I see some one else also got a firebase quota exceeded, they fixed it by removing , hooks from the useEffect hook on the useProjects hook. However, when adding Projects that custom hook wont trigger and the component won rerender. The Project is added tho, by refreshing it shows up again. I thought using memo would be a solution but not sure how to use it. So pretty much has some one fixed the firebase quota exceeded error?
reply
I see some one else also got a firebase quota exceeded, they fixed it by removing , hooks from the useEffect hook on the useProjects hook. However, when adding Projects that custom hook wont trigger and the component won rerender. The Project is added tho, by refreshing it shows up again. I thought using memo would be a solution but not sure how to use it. So pretty much has some one fixed the firebase quota exceeded error?
reply
DarkSoldier
Hello pal , i am interesting in that those dots in the left of a row , in this exact second 0:21 , how can we share on internet about that components ? i review all the video but can;t find where you code that. Thanks go ahead. Hello community help me to find that to practice that and implement that.
reply
Hello pal , i am interesting in that those dots in the left of a row , in this exact second 0:21 , how can we share on internet about that components ? i review all the video but can;t find where you code that. Thanks go ahead. Hello community help me to find that to practice that and implement that.
reply
Matt
Help (experienced vscoders): Every time I install something (npm install -) I get a message like this:
_-found x low severity vulnerabilities run npm audit fix to fix them, or npm audit for details.-_ And when I do _-npm audit fix-,_ it never works. What do you do when this happens?
reply
Help (experienced vscoders): Every time I install something (npm install -) I get a message like this:
_-found x low severity vulnerabilities run npm audit fix to fix them, or npm audit for details.-_ And when I do _-npm audit fix-,_ it never works. What do you do when this happens?
reply
itech
I was looking for a tutorial on creating a journal app but this is close enough. Although it's a clone, it'll be a nice to create an app that's not owned by a third party - and gratifying. This tut will probably take me weeks, but it'll worth it. Thanks in advance, fcc!
reply
I was looking for a tutorial on creating a journal app but this is close enough. Although it's a clone, it'll be a nice to create an app that's not owned by a third party - and gratifying. This tut will probably take me weeks, but it'll worth it. Thanks in advance, fcc!
reply
Awekening
Good effort but i am confident i don't find this video helpful for me, you go on and on writing, not showing what is actually happening and that nesting of ternaries took a while to wrap your head around. Maybe i am just not compatible with your way of teaching.
reply
Good effort but i am confident i don't find this video helpful for me, you go on and on writing, not showing what is actually happening and that nesting of ternaries took a while to wrap your head around. Maybe i am just not compatible with your way of teaching.
reply
Bogdan
Thanks for the tutorial. I have a question about useTasks hook and rendering. Why do we get the tasks log (and re-render) exactly 3 times? Seems like setTasks from useEffect after initial mount triggers one of these. But what about the last one?
reply
Thanks for the tutorial. I have a question about useTasks hook and rendering. Why do we get the tasks log (and re-render) exactly 3 times? Seems like setTasks from useEffect after initial mount triggers one of these. But what about the last one?
reply
Mohammad
Hey -karl Hadwen
There is a thing you've missed
if you use -- useTasks('next_7')
you will not only get tasks of next 7 days but also previous days
because moment(task.date).diff(moment(), ''days') = 0
Thanks
reply
Hey -karl Hadwen
There is a thing you've missed
if you use -- useTasks('next_7')
you will not only get tasks of next 7 days but also previous days
because moment(task.date).diff(moment(), ''days') = 0
Thanks
reply
Stones
The build was good but it kind of fell short because there was a lot of things being written without the background of how it connects and why its being done, I fell like this was especially done with the CSS.
reply
The build was good but it kind of fell short because there was a lot of things being written without the background of how it connects and why its being done, I fell like this was especially done with the CSS.
reply
Add a review, comment
Other channel videos
7:38:39
2:10:19
