DEV Community

Discussion on: Learn how to build a fast & responsive markdown editor with React, Firebase, & SWR

View post
Collapse
 
subwaymatch profile image
Ye Joo Park • • Edited

Thanks for a great tutorial! 👍🔥 Two suggestions:

1. In your rules, you've used some_collection as the collection name. I believe that the collection name should be users. Beginners who aren't familiar with Firebase rules may get lost there.

rules_version = '2';
service cloud.firestore {
    match /databases/{database}/documents {
        // Allow only authenticated content owners access
        // Previously: match /some_collection/{userId}/{documents=**} {
        match /users/{userId}/{documents=**} {
            allow read, write: if request.auth.uid == userId
        }
    }
}

2. In your Github repo's Editor.js file (github.com/kartiknair/TypeMD/blob/...), your file size check in uploadImage() is converting all non-zero file sizes into zero in !file.size.

# Change this
if (!file.size >= 1000000) {}

# To this
if (!(file.size >= 1000000)) {}

# Or to this
if (file.size < 1000000) {}

I was able to create a working clone of TypeMD with these changes!
github.com/subwaymatch/typemd-tuto...

Collapse
 
kartiknair profile image
Kartik Nair • • Edited

Thanks so much for the observations. I tend to miss these things very often so I really appreciate it!

I've made the change to the rules in the post, & will push the file size change to GitHub soon.

Looking back at this post I'm realizing that using firebase in react like this may not be the best pattern, instead opting for a context-based solution would result in some cleaner & more readable code.

Thanks for your help!

Collapse
 
subwaymatch profile image
Ye Joo Park •

Again, thanks for the awesome tutorial 🚀.