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 table
In Appwrite, data is stored as a table of rows. Create a table in the Appwrite Console to store our ideas.
Create a new table with the following columns:
| Field | Type | Required |
userId | String | Yes |
title | String | Yes |
description | String | No |
Configure permissions
Navigate to the Settings tab of your table, 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 rows in your new table.
Finally, enable Row security to allow further permissions to be set at the row level. Remember to click the Update button to apply your changes.
Ideas context
Now that you have a table 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_TABLE_ID = "ideas-tracker"; // Replace with your table 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 tablesDB.createRow(
IDEAS_DATABASE_ID,
IDEAS_TABLE_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 tablesDB.deleteRow(IDEAS_DATABASE_ID, IDEAS_TABLE_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 tablesDB.listRows(
IDEAS_DATABASE_ID,
IDEAS_TABLE_ID,
[Query.orderDesc("$createdAt"), Query.limit(10)]
);
setIdeas(response.rows);
}
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',
},
});