GPT

Firestore Data Management (app/Routes/Todos.tsx)

import { json } from '@remix-run/node'; import { useLoaderData, useFetcher } from '@remix-run/react'; import { adminDb } from '~/services/firebase.server'; export async function loader() { const todosSnapshot = await a

Prompt text

Original English text. Replace placeholders with your own details.

import { json } from '@remix-run/node';
import { useLoaderData, useFetcher } from '@remix-run/react';
import { adminDb } from '~/services/firebase.server';

export async function loader() {
 const todosSnapshot = await adminDb.collection('todos').orderBy('createdAt', 'desc').limit(10).get();
 const todos = todosSnapshot.docs.map(doc => ({
 id: doc.id,
 ...doc.data()
 }));
 return json({ todos });
}

export async function action({ request }) {
 const formData = await request.formData();
 const action = formData.get('action');
 const title = formData.get('title');
 const id = formData.get('id');

 switch (action) {
 case 'create':
 await adminDb.collection('todos').add({
 title,
 completed: false,
 createdAt: new Date()
 });
 break;
 case 'toggle':
 const doc = await adminDb.collection('todos').doc(id).get();
 await doc.ref.update({
 completed: !doc.data().completed
 });
 break;
 case 'delete':
 await adminDb.collection('todos').doc(id).delete();
 break;
 }

 return json({ success: true });
}

export default function Todos() {
 const { todos } = useLoaderData();
 const fetcher = useFetcher();

 return (
 <div>
 <fetcher.Form method="post">
 <input
 type="text"
 name="title"
 placeholder="New todo"
 required
 />
 <input type="hidden" name="action" value="create" />
 <button type="submit">Add</button>
 </fetcher.Form>

 <ul>
 {todos.map((todo) => (
 <li key={todo.id}>
 <fetcher.Form method="post">
 <input type="hidden" name="id" value={todo.id} />
 <input type="hidden" name="action" value="toggle" />
 <button type="submit">
 {todo.completed ? '✓' : '○'}
 </button>
 </fetcher.Form>
 <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
 {todo.title}
 </span>
 <fetcher.Form method="post">
 <input type="hidden" name="id" value={todo.id} />
 <input type="hidden" name="action" value="delete" />
 <button type="submit">Delete</button>
 </fetcher.Form>
 </li>
 ))}
 </ul>
 </div>
 );
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →