pflevy

#include <ESP8266WiFi.h>
#include <FirebaseArduino.h>

//Firebase settings
#define FIREBASE_HOST "<YOUR_FIREBASE_PROJECT_NAME>.firebaseio.com"
#define FIREBASE_AUTH "<YOUR_FIREBASE_SECRET>"

//Wi-Fi settings
#define WIFI_SSID "<YOUR_WIFI_NETWORK_NAME>"
#define WIFI_PASSWORD "<YOUR_WIFI_NETWORK_PASSWORD>"

pflevy

// Import the firebase package downloaded to this project folder through npm
import firebase from "firebase";

// Define a variable of the project name, which is used in the config parameters for firebase
const firebaseProjectName = "<YOUR_FIREBASE_PROJECT_NAME>"

// Parameters required by the initializeApp used below
const config = {
  apiKey: "<YOUR_WEB_API_KEY>",
  authDomain: `${firebaseProjectName}.firebaseapp.com`,

pflevy

import React, { useRef, useEffect } from "react";

// The CanvasBucket component receives the distance value from it's parent component
const CanvasBucket = ({ distance }) => {
  // Define the maximum liters the tank supports, the drawing will look full
  const maximumLiters = 10;
  // Reference the canvas HTML5 object
  const canvasRef = useRef(null);

  // Use effect trigers a function every time it's depencies (speficied on []) changes,

pflevy

import React, { useState, useEffect } from "react";
import "./style.css";
import Canvas from "./canvas";
import firebase from "./firebase";

const App = () => {
  // Define the state of the component
  const [distance, setDistance] = useState(0);

  // Listen to changes on the firebase database, specifically the "distance" entry

pflevy

.litreDisplay {
  margin: 10px auto;
  border-radius: 5px;
  width: 400px;
  height: 200px;
  background-color: rgb(119, 180, 245);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  position: relative;
  padding: 5px;

pflevy

import React from "react";

const App = () => {
  // Fetching fake data from an online API for this example
  let tableContents = fetch("https://jsonplaceholder.typicode.com/todos/");
  return (
    <div>
      <table>
        <thead>
          <tr>

pflevy

import { useState } from "react";

export const useInfiniteScroll = (start = 30, pace = 10) => {
  const [limit, setLimit] = useState(start);
  window.onscroll = () => {
    if (
      window.innerHeight + document.documentElement.scrollTop ===
      document.documentElement.offsetHeight
    ) {
      setLimit(limit + pace);

pflevy

import React, { useState, useEffect } from "react";
import { useInfiniteScroll } from "./useInfiniteScroll";

const App = () => {
  // Assign the value returned by the custom hook to a variable
  let infiniteScroll = useInfiniteScroll();
  //Declaring the state
  const [tableContent, setTableConent] = useState([]);

  // useEffect with an empty dependecy array [] to run only once

pflevy

import firebase from "firebase";

const projectId = "YOUR_PROJECT_ID";
var firebaseConfig = {
  apiKey: "YOUR_WEB_API_KEY",
  authDomain: `${projectId}.firebaseapp.com`,
  databaseURL: `https://${projectId}.firebaseio.com`,
  projectId: projectId
};

pflevy

import { useEffect, useState } from "react";
import firebase from "./database";

export const useDatabaseEntry = entry => {
  const [data, setData] = useState([]);
  useEffect(() => {
    const ref = firebase.database().ref(entry);
    ref.on("value", snapshot => {
      const array = [];
      // For each data in the entry