40. React 3 - Databáze firebase 2 - každý film má svou stránku

readme.md

Implementace z učebnice používá starší namespaced syntax (v8 a starší). Moje implementace používá novější modularní SDK Firebase (v9+). Funkce onSnapshot zajišťuje real time update detailu včetně odstranění dokumentu.

OneMovie.js

import { useEffect, useState } from 'react';
import { useParams } from "react-router-dom";
import { projectFirestore } from '../firebase/config';
import { doc, onSnapshot } from 'firebase/firestore';

const OneMovie = () => {
    const { id } = useParams();
    const [movie, setMovie] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        const docRef = doc(projectFirestore, 'movies', id);

        const unsubscribe = onSnapshot(docRef,
            (docSnap) => {
                if (docSnap.exists()) {
                    setMovie({ id: docSnap.id, ...docSnap.data() });
                    setError(null);
                } else {
                    setMovie(null);
                    setError("Film nebyl nalezen");
                }
            },
            (err) => {
                setMovie(null);
                setError("Chyba při načítání filmu: " + err.message);
            }
        );

        return unsubscribe;
    }, [id]);

    if (error) {
        return <div>{error}</div>;
    }

    if (!movie) {
        return <div>Načítání filmu...</div>;
    }

    return (
        <section>
            <h2>{movie.title}</h2>
            <p>Minimální věk: {movie.minage} let</p>
            <p>Délka: {movie.time} minut</p>
        </section>
    );
};

export default OneMovie;