comments

Author: queerviolet

app/components/Scratchpad.jsx

@@ -3,25 +3,42 @@ import firebase from 'APP/fire'
 
 export default class extends React.Component {
   componentDidMount() {
-    console.log(this.props.fireRef)
+    // When the component mounts, start listening to the fireRef
+    // we were given.
     this.listenTo(this.props.fireRef)
   }
 
   componentWillUnmount() {
+    // When we unmount, stop listening.
     this.unsubscribe()
   }
 
   componentWillReceiveProps(incoming, outgoing) {
+    // When the props sent to us by our parent component change,
+    // start listening to the new firebase reference.
     this.listenTo(incoming.fireRef)
   }
 
   listenTo(fireRef) {
+    // If we're already listening to a ref, stop listening there.
     if (this.unsubscribe) this.unsubscribe()
-    const listener = fireRef.on('value', snapshot => this.setState({value: snapshot.val()}))
+
+    // Whenever our ref's value changes, set {value} on our state.
+    const listener = fireRef.on('value', snapshot =>
+      this.setState({value: snapshot.val()}))
+
+    // Set unsubscribe to be a function that detaches the listener.
     this.unsubscribe = () => fireRef.off('value', listener)
   }
 
-  write = (event) => this.props.fireRef &&
+  // Write is defined using the class property syntax.
+  // This is roughly equivalent to saying,
+  //
+  //    this.write = event => (etc...)
+  //
+  // in the constructor. Incidentally, this means that write
+  // is always bound to this.
+  write = event => this.props.fireRef &&
     this.props.fireRef.set(event.target.value)
 
   render() {