In this step, you'll set up a database to store ideas in Appwrite, configure permissions, then create a context to manage ideas in your React Native app.
Create collection
In Appwrite, data is stored as a collection of documents. Create a collection in the Appwrite Console to store our ideas.
Create a new collection with the following attributes:
| Field | Type | Required |
| userId | String | Yes |
| title | String | Yes |
| description | String | No |
Configure permissions
Navigate to the Settings tab of your collection, add the role Any and check the Read box. Next, add a Users role and give them access to Create by checking those boxes. These permissions apply to all documents in your new collection.
Finally, enable Document security to allow further permissions to be set at the document level. Remember to click the Update button to apply your changes.
Ideas context
Now that you have a collection to hold ideas, we can read and write to it from our app. Like you did with the user data, we will create a React context to hold our ideas. Create a new file contexts/IdeasContext.jsx and add the following code to it.
import { ID, Permission, Role, Query } from "react-native-appwrite";
import { createContext, useContext, useEffect, useState } from "react";
import { databases } from "../lib/appwrite";
import { toast } from "../lib/toast";
export const IDEAS_DATABASE_ID = "default"; // Replace with your database ID
export const IDEAS_COLLECTION_ID = "ideas-tracker"; // Replace with your collection ID
const IdeasContext = createContext();
export function useIdeas() {
return useContext(IdeasContext);
}
export function IdeasProvider(props) {
const [ideas, setIdeas] = useState([]);
async function add(idea) {
const response = await databases.createDocument(
IDEAS_DATABASE_ID,
IDEAS_COLLECTION_ID,
ID.unique(),
idea,
[Permission.write(Role.user(idea.userId))]
);
toast('Ideas added');
setIdeas((ideas) => [response, ...ideas].slice(0, 10));
}
async function remove(id) {
await databases.deleteDocument(IDEAS_DATABASE_ID, IDEAS_COLLECTION_ID, id);
toast('Idea removed');
setIdeas((ideas) => ideas.filter((idea) => idea.$id !== id));
await init(); // Refetch ideas to ensure we have 10 items
}
async function init() {
const response = await databases.listDocuments(
IDEAS_DATABASE_ID,
IDEAS_COLLECTION_ID,
[Query.orderDesc("$createdAt"), Query.limit(10)]
);
setIdeas(response.documents);
}
useEffect(() => {
init();
}, []);
return (
<IdeasContext.Provider value={{ current: ideas, add, remove }}>
{props.children}
</IdeasContext.Provider>
);
}
Notice that new ideas have the added permission Permission.write(Role.user(idea.userId)). This permission ensures that only the user who created the idea can modify it.
Remeber to add the IdeasProvider to your App.js file.
import { StyleSheet, Text, View } from 'react-native';
import { UserProvider } from './contexts/UserContext';
import { IdeasProvider } from './contexts/IdeasContext'; // Add import
import { Router } from './lib/Router';
export default function App() {
return (
<UserProvider>
<!-- Add the Ideas Provider -->
<IdeasProvider>
<Router />
</IdeasProvider>
</UserProvider >
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});