karlhadwen / todoist Goto Github PK
View Code? Open in Web Editor NEWSubscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Todoist Using React
License: MIT License
Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Todoist Using React
License: MIT License
Hi
i got little confused about the follow code
export const useProjects = () => {
const [projects, setProjects] = useState([]);
useEffect(() => {
firebase
.firestore()
.collection('projects')
.where('userId', '==', 'jlIFXIwyAL3tzHMtzRbw')
.orderBy('projectId')
.get()
.then(snapshot => {
const allProjects = snapshot.docs.map(project => ({
...project.data(),
docId: project.id,
}));
if (JSON.stringify(allProjects) !== JSON.stringify(projects)) {
setProjects(allProjects);
}
});
}, [projects]);
return { projects, setProjects };
};
i thought, if component calls setProject, the hooks will update projects, and the UI will got updated.
after that, the effect will got fired, which will update the UI again.
should that reading from firebase just get called in app mounting time, and when component calls setProject, we just need to save it to firebase.
sorry for the poor english, the about maybe seems a little rude, but i am not meaning it
Could you have a look ? THanks
Hi @karlhadwen, in the tutorial you tend to use the onKeyDown
event handler for the usage of keys to interact with the app. However, in my experience this led to confusing behavior, as I would press the tab
key to move on to the next element but instead of moving on to the next element it would toggle whatever element I was on. For example, if I was on the pizza / dark mode element, it would toggle dark mode instead of tabbing to the next element.
I imagine this isn't desired behavior? Or am I missing something?
While following along myself, I simply used onKeyPress
and matched on the Enter
key, like so:
onKeyPress={e => {
if (e.key === 'Enter') {
setDarkMode(!darkMode);
}
}}
That way I could still tab through elements as expected and then only toggle them when I wanted to with the Enter
key. Let me know if I'm thinking about this incorrectly!
Hello,
On the youtube tutorial and when you run this it looks for firebase.js ... this does not seem to exist?
Hi, could you add a license to the project? Without an explicit license it's implicitly full "all rights reserved" copyrighted so forking and expanding is a bit problematic. (Unless that's on purpose, that's ok too, but a license would clarify things.)
I encounter :Node Sass version 7.0.1 is incompatible with ^4.0.0. when i try to run this app,
I think sass 4.0 is incompatible with the newest node. can u help to fix this . much appreciated.
./src/components/AddProject.js
Module not found: Can't resolve '../firebase' in 'E:\todoist-master\src\components'
After cloning and installing all dependencies with npm i, when I npm start there is an Error that says failed to compile
@karlhadwen I would like to contribute to this project by adding Cypress tests, how can I proceed with it?
hello, please can I have access to the stylesheet used in the YouTube tutorial for this project. the one on this repo doesn't match it. I've tried debugging it but that's distracting me from learning. I've been adapting the project to use Firebase 9 and updated some other newer methods but having issues with the styles is drawing me back. Thanks
When clicked the delete button the inner modal is squished and I unable to fix is if some can fix it just pr my in my repo
./src/components/AddTask.js
Module not found: Can't resolve '../firebase' in '/home/zhengquantao/python/FaceTest/todoist/src/components'
firebase error
ERROR in ./src/firebase.js 5:23-45
export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel)
Props are not type checked.
I tried to run the application running and ran into this issue error:
Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.firebase.firestore is not a function
at index.js:11
at commitHookEffectListMount (react-dom.development.js:19607)
at commitPassiveHookEffects (react-dom.development.js:19644)
at HTMLUnknownElement.callCallback (react-dom.development.js:189)
at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
at invokeGuardedCallback (react-dom.development.js:291)
at flushPassiveEffectsImpl (react-dom.development.js:22708)
at unstable_runWithPriority (scheduler.development.js:656)
at runWithPriority$1 (react-dom.development.js:11076)
at flushPassiveEffects (react-dom.development.js:22676)
at react-dom.development.js:22555
at workLoop (scheduler.development.js:600)
at flushWork (scheduler.development.js:556)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:160)
Changing firebase.js from
export { firebaseConfig as firebase };
to
firebase.initializeApp(firebaseConfig)
export { firebase };
seems to fix it
lastRandChars previously set to empty array
Hi all.
I want to help, but I want to know if this project is active. Is this project active?
Some tests are logging out errors saying that the unit test needs to be wrapped in Act (I thought this was implemented in React Testing Library by default), but having done a few locally it seems that wrapping the unit tests does fix this. With Enzyme I normally wrap these in Act and it fixes the issue, and it seems this is the case in React Testing Library too.
Since 16.9.0: https://reactjs.org/blog/2019/08/08/react-v16.9.0.html - await act(async () => {
can now be used to fix these messages.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.