GPT

Firestore Component Example

import React, { useEffect, useState } from 'react'; import { useFirestore } from '../hooks/useFirestore'; import { orderBy, limit, where } from 'firebase/firestore'; interface Todo { id: string; title: string; comple

Prompt text

Original English text. Replace placeholders with your own details.

import React, { useEffect, useState } from 'react';
import { useFirestore } from '../hooks/useFirestore';
import { orderBy, limit, where } from 'firebase/firestore';

interface Todo {
 id: string;
 title: string;
 completed: boolean;
 createdAt: Date;
}

export function TodoList() {
 const {
 documents: todos,
 loading,
 error,
 subscribeToCollection,
 addDocument,
 updateDocument,
 deleteDocument
 } = useFirestore<Todo>('todos');

 const [newTodo, setNewTodo] = useState('');

 useEffect(() => {
 const unsubscribe = subscribeToCollection([
 orderBy('createdAt', 'desc'),
 limit(10)
 ]);
 
 return () => unsubscribe();
 }, []);

 const handleSubmit = async (e: React.FormEvent) => {
 e.preventDefault();
 
 if (!newTodo.trim()) return;
 
 try {
 await addDocument({
 title: newTodo,
 completed: false,
 createdAt: new Date()
 });
 setNewTodo('');
 } catch (err) {
 console.error('Failed to add todo:', err);
 }
 };

 const toggleTodo = async (todo: Todo) => {
 try {
 await updateDocument(todo.id, {
 completed: !todo.completed
 });
 } catch (err) {
 console.error('Failed to toggle todo:', err);
 }
 };

 if (loading) return <div>Loading...</div>;
 if (error) return <div>Error: {error}</div>;

 return (
 <div>
 <form onSubmit={handleSubmit}>
 <input
 value={newTodo}
 onChange={(e) => setNewTodo(e.target.value)}
 placeholder="Add new todo"
 />
 <button type="submit">Add</button>
 </form>

 <ul>
 {todos.map((todo) => (
 <li key={todo.id}>
 <input
 type="checkbox"
 checked={todo.completed}
 onChange={() => toggleTodo(todo)}
 />
 <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
 {todo.title}
 </span>
 <button onClick={() => deleteDocument(todo.id)}>Delete</button>
 </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 →