javascript firebase_set_get.js

Posted 2021-05-04

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
import firebase from './firebase'

var faker = require('faker');

const compact = arr => arr.filter(Boolean);
var v1 = compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]);
//console.log(v1)

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});

class Material2 extends Component {

  constructor() {
    super();
    this.state = {
      data: [],
      num: null,
    }
  }

  myFetch() {
    return fetch('http://localhost:3500/api')
      .then(function (response) {
        return response.json()
      }).then(function (json) {
        return json;
      }).catch(function (ex) {
        return ex;
      })
  }

  handleClick1 = (e) => {
    console.log(e)
  }

  handleClick2 = (e, data) => {
    console.log(data);
  }


  componentDidMount() {

    // console.log(myFetch())



    // fetch('http://localhost:3500/api')
    //   .then(response => response.json())
    //   .then(result => this.onSetResult(result));

  }

  onSetResult = (result) => {
    this.setState({ data: result.data });
  }

  onClick = (e) => {
    if (e.currentTarget.getAttribute('data-name') === 'Button 1') {
      var time = (new Date).getTime();

      const itemsRef = firebase.database().ref('/react/test2/' + time);
      const item = {
        name: faker.name.findName(),
        data: faker.helpers.createCard(),
      }
      itemsRef.set(item);
      console.log('records saved!');
    }

    if (e.currentTarget.getAttribute('data-name') === 'Button 2') {
      const itemsRef = firebase.database().ref("/react/test2/1515002063439");

      // Attach an asynchronous callback to read the data at our posts reference
      itemsRef.on("value", function (snapshot) {
        console.log(snapshot.val());
      }, function (errorObject) {
        console.log("The read failed: " + errorObject.code);
      });
    }
    

    console.log(e.currentTarget.getAttribute('data-name'));
  }

  render() {

    //console.log(this.state.data);
    return (
      <div>
        
      <Button 
        raised 
        color="primary" 
        style={{margin: 2,}}
        onClick={this.onClick}
        data-name="Button 1"
      >
          Post
        </Button>

        <Button
          raised
          color="primary"
          style={{ margin: 2, }}
          onClick={this.onClick} 
          data-name="Button 2"
        >
          Get
        </Button>

      </div>
    );
  }
}

export default Material2;