Home > Blockchain >  i want do a personal todo list with react native and firebase firestore
i want do a personal todo list with react native and firebase firestore

Time:12-08

I created a todoApp using firebase firestore. Authentication with Firebase I did. But when I add a todo, all other users see that todo. I want to create a personal todo list. my codes:

export default function DailyScreen({ navigation }) {
    const [dailysTodo, setDailysTodo] = useState([]);
    const dailyRef = firebase.firestore().collection('daily');
    const [addDailyTodo, setAddDailyTodo] = useState('');

    useEffect(() => {
        async function check(){
            dailyRef.orderBy('createdAt', 'desc')
            .onSnapshot(
                querySnapShot => {
                    const dailys = []
                    querySnapShot.forEach((doc) => {
                        const { heading } = doc.data()
                        dailysTodo.push({
                            id: doc.id,
                            heading,
                        })
                    })
                    setDailysTodo(dailys)
                }
            )
        }
        check()
    }, [])

    const addDailyPlan = () => {
        if (addDailyTodo && addDailyTodo.length > 0) {
            const timeStamp = firebase.firestore.FieldValue.serverTimestamp();
            const daily = {
                heading: addDaily,
                createdAt: timeStamp
            };
            dailyRef
                .add(daily)
                .then(() => {
                    setAddDailyTodo('');
                    Keyboard.dismiss();
                })
                .catch((error) => {
                    alert(error);
                })
        }
    }
return(
<FlatList
                        data={dailysTodo}
                        renderItem={({ item }) => (
                            <View>
                                // todo items
                            </View>
                        )}
                    />
)

I want every user to see their own todo list when they enter the app. But when a user adds todo, all users see that todo

CodePudding user response:

You'll need to first associate each todo with a specific user, so that you can then load the todos for a specific user.

There are two common ways of doing that in Firestore:

  • Store the UID of the user that creates a todo in the document. If you do this, you can load the todos for a specific user with a query, e.g. dailyRef.where('uid', '==', 'theUidValueToLoad').onSnapshot...
  • Store the todos for each specific user in its own subcollection, i.e. /users/$uid/todos. With this you can then load the todos with something like firebase.firestore().collection('users').doc('theUidValueToLoad').collection('todos').onSnapshot...

CodePudding user response:

In addition to Frank's answer, note this is a database so you'll want to secure the data server side via Firebase rules. See https://firebase.google.com/docs/rules

service <<name>> {
  // Match the resource path.
  match /users/{userId} {
    // Allow the request if the following conditions are true.
    allow read, write: if request.auth.uid == userId;
  }
}

This answer was mildly assisted by artificial intelligence but I have verified this is correct, researched and added information to make this my own answer and stake my reputation on it.

  • Related