import React from 'react';
import * as firebase from 'firebase';
import { config } from '../../config';
import Note from './Note';
import './Layout.scss';

export default class Layout extends React.Component {
  constructor() {
    super();
    this.state = {
      notes: [],
    };
  }

  componentDidMount() {
    firebase.initializeApp(config);
    const notesRef = firebase.database().ref().child('notes');
    notesRef.on('child_added', snapshot => {
      const { key } = snapshot;
      const value = snapshot.val();
      const note = {};

      // name object key after note title, assign note body to keyvalue
      note[key] = value;
      this.state.notes.unshift(note);
    });
  }

  render() {
    return (
      <div className="notes">
        {this.state.notes.map((note, index) => {
          const [title] = Object.keys(note);
          return (
            <Note key={`note${index}`} title={title} content={note[title]} />
          );
        })}
      </div>
    );
  }
}

@@ -391,16 +391,8 @@
 ref(
-).child(
 'not
@@ -452,51 +452,107 @@
     
-const %7B key %7D = snapshot;%0A      const value
+// name object key after note title, assign note content to keyvalue%0A      const %7B content, title %7D
  = s
@@ -593,143 +593,160 @@
 %7B%7D;%0A
-%0A
       
-// name object key after note title, assign note body to keyvalue%0A      note%5Bkey%5D = value;%0A      this.state.notes.unshift(note);
+note%5Btitle%5D = content;%0A%0A      // update state%0A      const newState = this.state.notes;%0A      newState.unshift(note);%0A      this.setState(newState)
 %0A   

Restructure database note layout