App.js

import React, { useRef, useEffect, useState } from 'react';
import './App.css';
import GoogleMap from './components/google-map/GoogleMap';
import Header from './components/header/header';
import MapContainer from './components/map-container/MapContainer';
import Sidebar from './components/sidebar/Sidebar';
import HomeContainer from './components/home-container/HomeContainer';
import firebase, {initFirebase} from "./components/firebase/firebase.js";

const App = () => {

  const [mapDoneLoading, setMapDone] = useState(false);
  const [markersDoneLoading, setMarkersDone] = useState(false);

  const mapRef = useRef(null);
  const markersRef = useRef(null);

  const loadMap = async map => {
    mapRef.current = map;
    setMapDone(true);
  }

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

  useEffect(() => {
    if (mapDoneLoading && markersDoneLoading) {
      markersRef.current = markersRef.current.map(marker => {
        return new window.google.maps.Marker({
          position: {
            lat: marker.geometry.location.lat,
            lng: marker.geometry.location.lng
          },
          map: mapRef.current,
          icon: `${process.env.PUBLIC_URL}/images/pizza.svg`,
          title: 'Hello World!'
        });
      })
    }
  }, [mapDoneLoading, markersDoneLoading]);

  useEffect(() => {
    firebase
      .firestore().collection("locations")
      .onSnapshot(querySnapshot => {
        let data = querySnapshot.docs.map(doc => {
          let out = doc.data();
          out.id = doc.id;
          return out;
        });
        markersRef.current = data;
        setMarkersDone(true);
        return true;
      });
  }, [firebase]);

  return (
    <div className="App">
      <Header>

      </Header>
      <HomeContainer>
        <MapContainer>
          <GoogleMap
              apiKey={process.env.REACT_APP_GMAPS_API_KEY}
              mapID="google-map"
              onMapLoad={loadMap}
              mapLibraries={['places']}
              mapOptions={{
                zoom: 12,
                center: {
                  lat: 40.712775,
                  lng: -74.005973
                }
              }}
          />
        </MapContainer>
        <Sidebar>
       
        </Sidebar>
      </HomeContainer>
    </div>
  );
}

export default App;