{"size": 1094, "ext": "js", "max_stars_repo_path": "firebase-url/src/components/links.js", "max_stars_repo_name": "fernando-mendoza/reactShortUrl", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "firebase-url/src/components/links.js", "max_issues_repo_name": "fernando-mendoza/reactShortUrl", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "firebase-url/src/components/links.js", "max_forks_repo_name": "fernando-mendoza/reactShortUrl", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.2765957447, "max_line_length": 62, "alphanum_fraction": 0.4853747715}
import React, {useEffect, useState} from 'react';
import LinkForm from "./linkForm";
import {db} from "../firebase";

const Links = () => {


    const [links, setLinks] = useState([])

    const addOrEditLink = async (linkObject) => {
        await db.collection('links').doc().set(linkObject);
        console.log('new link added')
    };

    const getLinks = async () => {
        db.collection('links').onSnapshot((querySnapshot) => {
            const docs = [];
            querySnapshot.forEach(doc => {
                docs.push({...doc.data(), id:doc.id});
            });
            setLinks(docs);
        });

    }

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

    return  (
    <div>
    <LinkForm addOrEditLink={addOrEditLink}/>
    <div className="col-md-8">
        {links.map(link => (
            <div className="card mb-1">
                <div className="card-body">
                <h4>{link.websiteName}</h4>
                <p>{link.description}</p>
                </div>
            </div>
        ))}
    </div>
    </div>
    );
};

export default Links;