-
Sync notes with localStorage : App.jsx
DOCS
-
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
-
Interact with localStorage window.localStorage.getItem( "key" )
window.localStorage.setItem( "key", String: value ) -
string conversion and vise-versa Object to String: JSON.stringify() String to Object: JSON.parse()
-
-
Add note summary titles : Sidebar.jsx
-
Move modified notes to the top of the list : App.jsx
-
delete notes : App.jsx
- Setup firebase config and initialise the app
- Create a instance of database and
- setup a collection
Use firestore function - onSnapshot to add a listner for database to sync with local states
Firestore databse overwrite ID for each document
onSnapshot - listener
addDoc - create a document with a parameters : instance of collection, new document {promise}
doc - gets a specific document, parameters : instance of database, collection name, document id {return document ref}
deleteDoc - deletes a document in the firestore database, parameter : document ref {promise}
setDoc - updates a document in the firestore database, parameter: document ref, {updated object}, {merge : true/false} either you can update/overwrite the complete document or merge it with old document {promise}
Problem: currently we are making request to firestore on every single keystroke, therefore need to reduce request for read and write from firestore
Solution: Debouncing
- delay the request for specified amount of time (let 500ms).
- if another request happens within the specified delay time, then cancel the prev request and set up a new delay for the new request.
Implementation:
- remove connection of updating database between editor and app - for making request to firestore
- setup a useState state of keeping track of body of note
- using setTimeout with useEffect to handle debouncing