Send Firebase collection with props React-CodePudding

What i'm trying to do and don't know how is to get ridersDoc in parent document and then use it in 2 child documents where I need it. Using React and Firebase.

parent.js

import { db } from "../../firebase-config";
import { addDoc, collection, getDocs } from "firebase/firestore";


export default function CrewMemberCRUD() {
    const [riders, setRiders] = React.useState([]);
    const ridersDoc = collection(db, "ridersCrew");

    React.useEffect(() => {
        const getRiders = async () => {
            const data = await getDocs(ridersDoc);
            setRiders(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
        };

        getRiders();
    }, []);

    return (
        <div className="crewMemberCRUD">
            <CrewMemberSetCreate ridersDoc={ridersDoc}/>
            <CrewMemberRead ridersDoc={ridersDoc}/>
        </div>
    );

Then I try to use props.ridersDoc in:

child1.js

export default function CrewMemberSetCreate(props) {
    const createRider = async () => {
        await addDoc(props.ridersDoc, { 
            firstName: newFirstName,
            lastName: newLastName,
            age: Number(newAge),
            favTrick: newFavTrick,
            dreamTrick: newDreamTrick,
            youtube: newYoutube,
            instagram: newInstagram, 
            isShown: newIsShown,
            img: ""
        });
    };
}

But it doesn't add new rider to the base if I have it like this.

What i have now is creating riders State and ridersDoc in both childs but i think it could be done in parent.

CodePudding user response：

don't mix your UI with your DB logic, is hard to mantain and debug

you can make a new file with your db getter and setters

example of the file path: src/backend/db/riders

import { db } from "../../firebase-config";
import { addDoc, collection, getDocs } from "firebase/firestore";

const ridersCollRef = collection(db, "ridersCrew");


const createRider = async (riderData) => {
   await addDoc(ridersCollRef, riderData);
};

const getRiders = async () => {
   const data = await getDocs(ridersCollRef);
   return data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};

this way you will save repeating a lot of code, and you will be able to use it anywhere.

this should also solve your problem

CodePudding user response：

This answer is to have a better look at the code for CristianDT because in comment code does not look well.

I created RidersDB.js following your example. Now I have no idea how to save it to state in CrewMemberRead.js I left console.log which shows me that this is working but there is commented line that does not work. Any idea how to fix it? And do I need to use useEffect for this?

RidersDB.js

import { db } from "./firebase-config";
import { addDoc, collection, getDocs } from "firebase/firestore";

export class RidersDB {
    constructor() {
        this.ridersCollRef = collection(db, "ridersCrew");

        this.createRider = async (riderData) => {
            await addDoc(this.ridersCollRef, riderData);
        };

        this.getRiders = async () => {
            const data = await getDocs(this.ridersCollRef);
            return data.docs.map((doc) => ({ ...doc.data(), id: doc.id }));
        };
    }
}

CrewMemberRead.js

import React from "react";
import CrewMemberRider from "./CrewMemberRider";
import { RidersDB } from "../../Backend/DataBase/RidersDB";

const ridersDB = new RidersDB();

export default function CrewMemberRead() {
    const [riders, setRiders] = React.useState([]);
    React.useEffect(() => {
              console.log(ridersDB.getRiders());
              //setRiders(prevRiders => ({ ...prevRiders, []: ridersDB.getRiders()}));
    }, []);


    const riderElements = riders.map((rider) => {
        return (
            <CrewMemberRider
                key={rider.id}
                id={rider.id}
                firstName={rider.firstName}
                lastName={rider.lastName}
                age={rider.age}
                favTrick={rider.favTrick}
                dreamTrick={rider.dreamTrick}
                youtube={rider.youtube}
                instagram={rider.instagram}
                img={rider.img}
                isShown={rider.isShown}
            />
        );
    });

    return (
        <div className="crewMemberCRUD">
            <h2>Member List</h2>
            {riderElements}
        </div>
    );
}