Giter VIP home page Giter VIP logo

firebase-restaurant-application's Introduction

Connect to Firebase

import firebase from "firebase/app";
import { config } from "./config";

firebase.initializeApp(config);
export default firebase;
code;

Use Firestore

firebase / index.js;
import "firebase/firestore";
export const firestore = firebase.firestore();

// get collection (all restaurants)
firestore.collection("restaurants").get();
// returns a promise
// snapshot
// docs property - collection array
// data() method - returns all properties of document

// get document reference
const singleRef = firestore.doc(`restaurants/${id}`);

// get single document/returns a promise - grab all properties using data method.
singleRef.get().then(snapshot => {....snapshot.data()})

// two ways of getting document refernce
firestore.doc(`restaurants/${id}`);
firestore.collection("restaurants").doc(id)

//update document
 firestore.collection("restaurants").doc(id).update({ stars: stars + 1 });

//delete/remove document
await firestore
      .doc(`restaurants/${id}`)
      .delete()
      .catch(error => console.log(error));
// subscribe to changes and cleanup
useEffect(() => {
    let unsubscribe = firestore
      .collection("restaurants")
      .onSnapshot(snapshot => {
        const restaurants = snapshot.docs.map(item => {
          return { id: item.id, ...item.data() };
        });
        setRestaurants(restaurants);
      });
    // console.log(unsubscribe);
    return () => {
      unsubscribe();
    };
  }, []);
// add new item/restaurant
await firestore
      .collection("restaurants")
      .add(restaurant)
      .catch(error => console.log(error));

Authentication

import "firebase/auth";
// setup authentication
export const auth = firebase.auth();
export const provider = new firebase.auth.GoogleAuthProvider();
export const googleSignIn = auth.signInWithPopup(provider);
export const singOut = () => auth.signOut();

firebase-restaurant-application's People

Contributors

john-smilga avatar rickswordfire2032 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.