GPT

Usage Examples

'use client'; import { useEffect, useState } from 'react'; import { DatabaseService } from '@/services/database'; interface Document { $id: string; title: string; content: string; } export default function Document

Prompt text

Original English text. Replace placeholders with your own details.

'use client';

import { useEffect, useState } from 'react';
import { DatabaseService } from '@/services/database';

interface Document {
 $id: string;
 title: string;
 content: string;
}

export default function DocumentList({
 databaseId,
 collectionId,
}: {
 databaseId: string;
 collectionId: string;
}) {
 const [documents, setDocuments] = useState<Document[]>([]);
 const [isLoading, setIsLoading] = useState(true);
 const [error, setError] = useState('');

 useEffect(() => {
 loadDocuments();
 }, []);

 const loadDocuments = async () => {
 try {
 const response = await DatabaseService.listDocuments(databaseId, collectionId);
 setDocuments(response.documents);
 } catch (err: any) {
 setError(err.message);
 } finally {
 setIsLoading(false);
 }
 };

 const handleCreate = async (e: React.FormEvent<HTMLFormElement>) => {
 e.preventDefault();
 const formData = new FormData(e.currentTarget);
 const title = formData.get('title') as string;
 const content = formData.get('content') as string;

 try {
 const newDoc = await DatabaseService.createDocument(databaseId, collectionId, {
 title,
 content,
 });
 setDocuments([newDoc, ...documents]);
 (e.target as HTMLFormElement).reset();
 } catch (err: any) {
 setError(err.message);
 }
 };

 const handleDelete = async (documentId: string) => {
 try {
 await DatabaseService.deleteDocument(databaseId, collectionId, documentId);
 setDocuments(documents.filter(doc => doc.$id !== documentId));
 } catch (err: any) {
 setError(err.message);
 }
 };

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

 return (
 <div className="documents-container">
 <form onSubmit={handleCreate}>
 <div>
 <label htmlFor="title">Title</label>
 <input id="title" name="title" required />
 </div>
 <div>
 <label htmlFor="content">Content</label>
 <textarea id="content" name="content" required />
 </div>
 <button type="submit">Create Document</button>
 </form>

 <div className="documents-list">
 {documents.map(doc => (
 <div key={doc.$id} className="document-item">
 <h3>{doc.title}</h3>
 <p>{doc.content}</p>
 <button onClick={() => handleDelete(doc.$id)}>Delete</button>
 </div>
 ))}
 </div>
 </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 →