Firebase Firestore در React: ذخیره و بازیابی داده های کاربر

// src/firebase.js
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  // Your existing Firebase config
  apiKey: "your-api-key",
  authDomain: "your-project-id.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export default app;

Collection: "posts"
Document ID: auto-generated
Document Data: {
  title: "My First Blog Post",
  content: "This is the content of my blog post...",
  category: "Technology",
  authorId: "user-uid-from-auth",
  authorEmail: "user@example.com",
  createdAt: timestamp,
  updatedAt: timestamp
}

// src/components/CreatePost.js
import React, { useState } from 'react';
import { collection, addDoc, serverTimestamp } from 'firebase/firestore';
import { db, auth } from '../firebase';

function CreatePost({ onPostCreated }) {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [category, setCategory] = useState('General');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  const categories = ['General', 'Technology', 'Lifestyle', 'Travel', 'Food', 'Other'];

  async function handleSubmit(e) {
    e.preventDefault();

    if (!title.trim() || !content.trim()) {
      setError('Please fill in both title and content');
      return;
    }

    if (!auth.currentUser) {
      setError('You must be logged in to create a post');
      return;
    }

    try {
      setError('');
      setSuccess('');
      setLoading(true);

      // Add document to the "posts" collection
      const docRef = await addDoc(collection(db, 'posts'), {
        title: title.trim(),
        content: content.trim(),
        category: category,
        authorId: auth.currentUser.uid,
        authorEmail: auth.currentUser.email,
        createdAt: serverTimestamp(),
        updatedAt: serverTimestamp()
      });

      console.log('Document written with ID: ', docRef.id);

      // Reset form
      setTitle('');
      setContent('');
      setCategory('General');
      setSuccess('Post created successfully!');

      // Notify parent component
      if (onPostCreated) {
        onPostCreated();
      }

    } catch (error) {
      console.error('Error adding document: ', error);
      setError('Failed to create post: ' + error.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="create-post-container">
      <h3>Create New Blog Post</h3>

      {error && <div className="error-message">{error}</div>}
      {success && <div className="success-message">{success}</div>}

      <form onSubmit={handleSubmit} className="create-post-form">
        <div className="form-group">
          <label htmlFor="title">Title</label>
          <input
            type="text"
            id="title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Enter your blog post title"
            maxLength={100}
            required
          />
          <small>{title.length}/100 characterssmall>
        </div>

        <div className="form-group">
          <label htmlFor="category">Category</label>
          <select
            id="category"
            value={category}
            onChange={(e) => setCategory(e.target.value)}
          >
            {categories.map(cat => (
              <option key={cat} value={cat}>{cat}</option>
            ))}
          </select>
        </div>

        <div className="form-group">
          <label htmlFor="content">Content</label>
          <textarea
            id="content"
            value={content}
            onChange={(e) => setContent(e.target.value)}
            placeholder="Write your blog post content here..."
            rows={8}
            maxLength={2000}
            required
          />
          <small>{content.length}/2000 characterssmall>
        </div>

        <button 
          type="submit" 
          disabled={loading}
          className="submit-button"
        >
          {loading ? 'Publishing...' : 'Publish Post'}
        </button>
      </form>
    </div>
  );
}

export default CreatePost;

// src/components/PostsList.js
import React, { useState, useEffect } from 'react';
import { collection, query, where, orderBy, onSnapshot } from 'firebase/firestore';
import { db, auth } from '../firebase';

function PostsList({ refreshTrigger }) {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!auth.currentUser) {
      setLoading(false);
      return;
    }

    // Create a query to get posts for the current user, ordered by creation date
    const q = query(
      collection(db, 'posts'),
      where('authorId', '==', auth.currentUser.uid),
      orderBy('createdAt', 'desc')
    );

    // Set up real-time listener
    const unsubscribe = onSnapshot(q, 
      (querySnapshot) => {
        const postsArray = [];
        querySnapshot.forEach((doc) => {
          postsArray.push({
            id: doc.id,
            ...doc.data()
          });
        });
        setPosts(postsArray);
        setLoading(false);
        setError('');
      },
      (error) => {
        console.error('Error fetching posts:', error);
        setError('Failed to load posts: ' + error.message);
        setLoading(false);
      }
    );

    // Cleanup subscription on unmount
    return () => unsubscribe();
  }, [refreshTrigger]);

  function formatDate(timestamp) {
    if (!timestamp) return 'Unknown date';

    // Handle Firestore timestamp
    const date = timestamp.toDate ? timestamp.toDate() : new Date(timestamp);
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  }

  if (loading) {
    return <div className="loading">Loading your posts...</div>;
  }

  if (error) {
    return <div className="error-message">{error}</div>;
  }

  if (posts.length === 0) {
    return (
      <div className="no-posts">
        <h3>No Blog Posts Yet</h3>
        <p>You haven't created any blog posts yet. Create your first post above!