Merge pull request #28 from ZachLamb/deleteGrid

Delete grid

README.md

@@ -1,27 +1,11 @@
-# react-webpack-babel
-Simple React Webpack Babel Starter Kit
+# react-color
+Simple React grid-coloring application
 
-Tired of complicated starters with 200MB of dependencies which are hard to understand and modify?
+### Usage
 
-Try this is a simple [React](https://facebook.github.io/react/), [Webpack](http://webpack.github.io/) and [Babel](https://babeljs.io/) application with nothing else in it.
+* Requires [node](https://nodejs.org/en/) installed in your system.
 
-### What's in it?
-
-* Simple src/index.jsx and src/index.css (local module css).
-* Webpack configuration for development (with hot reloading) and production (with minification).
-* CSS module loading, so you can include your css by ```import styles from './path/to.css';```.
-* Both js(x) and css hot loaded during development.
-
-### To run
-
-* You'll need to have [git](https://git-scm.com/) and [node](https://nodejs.org/en/) installed in your system.
-* Fork and clone the project:
-
-```
-> $ git clone THIS_REPO_URL
-```
-
-* Then install the dependencies:
+* Install the dependencies
 
 ```
 > $ npm install
@@ -33,54 +17,4 @@ Try this is a simple [React](https://facebook.github.io/react/), [Webpack](http:
 > $ npm start
 ```
 
-Open the web browser to `http://localhost:8888/`
-
-### To build production package
-
-```
-> $ npm run build
-```
-
-### Nginx Config
-
-Here is the suggested Nginx config:
-```
-server {
-	# ... root and other options
-
-	gzip on;
-	gzip_http_version 1.1;
-	gzip_types text/plain text/css text/xml application/javascript image/svg+xml;
-
-	location ~ \.html?$ {
-		expires 1d;
-	}
-
-	location ~ \.(svg|ttf|js|css|svgz|eot|otf|woff|jpg|jpeg|gif|png|ico)$ {
-		access_log off;
-		log_not_found off;
-		expires max;
-	}
-}
-```
-
-### Eslint
-There is a .eslint.yaml config for eslint ready with React plugin.
-To use it, you need to install additional dependencies though:
-
-```
-> npm install --save-dev eslint eslint-plugin-react
-```
-
-To do the actual linting, run:
-
-```
-> npm run lint
-```
-
-### Notes on importing css styles
-* styles having /src/ in their absolute path are considered part of the application and exported as local css modules.
-* styles having /node_modules|global/ in their absolute path are considered global styles used by many components and are included in the css bundle directly.
-
-### Contribute
-Please contribute to the project if you think this can be done better in anyway even for this README :)
+Open the web browser to `http://localhost:8888/`

src/components/app.jsx

@@ -99,7 +99,7 @@ export default class App extends React.Component {
               <ShareComponent gridId={ this.state.gridId }/>
             </div>
             <div className="cols-md-offset-3 col-md-2 col-sm-4">
-              <DeleteGrid/>
+              <DeleteGrid gridId={this.state.gridId} gridRemoval={this.changeGrid}/>
               <ResetGridColor gridId={ this.state.gridId }
                               numCols={ this.state.numCols }
                               numRows={ this.state.numRows }

src/components/deleteGrid.jsx

@@ -1,12 +1,43 @@
 import React from 'react';
 import * as firebase from 'firebase';
-
 import styles from '../main.scss';
 
+import {manageLogin} from '../util/login.js'
+
 export default class DeleteGrid extends React.Component {
-  render(){
+  constructor(){
+    super();
+    this.handleClick = this.handleClick.bind( this );
+    this.deleteUserGrid = this.deleteUserGrid.bind( this );
+  }
+
+  handleClick(){
+    manageLogin(this.deleteUserGrid);
+  }
+
+  deleteUserGrid(uid){
+    this.gridRef = firebase.database().ref('grids/' + this.props.gridId
+            + "/users/" + uid);
+    this.userRef = firebase.database().ref('users/' + uid + '/grids/'
+            + this.props.gridId);
+
+    this.gridRef.remove();
+    this.userRef.remove();
+    this.props.gridRemoval(null);
+  }
+
+  render() {
     return(
-      <button type="button" className={ "btn btn-danger " + styles.button }>Delete Grid</button>
+      <button type="button"
+            className="btn btn-danger"
+            onClick={ this.handleClick }>
+        Delete Grid
+      </button>
     );
-  } 
-}
+  }
+}
+
+DeleteGrid.propTypes = {
+    gridId: React.PropTypes.string,
+    gridRemoval: React.PropTypes.func
+}

src/components/matrix.jsx

@@ -18,25 +18,31 @@ export default class Matrix extends React.Component {
  }
 
   componentWillReceiveProps(nextProps) {
-      if (this.props.numCols !== nextProps.numCols) {
+      if (this.props.gridId !== nextProps.gridId
+          || this.props.numCols !== nextProps.numCols
+          || this.props.numRows !== nextProps.numRows) {
           this.updateGridSize(nextProps);
       }
   }
 
   updateGridSize(nextProps) {
      this.setState({numRows: 0, numCols: 0});
      this.rowRef = firebase.database().ref('grids/' + nextProps.gridId + '/numRows');
-     this.rowRef.once('value', snap => {
-         if (snap.val() !== null) {
-             this.setState({numRows: snap.val()});
-         }
-     });
      this.colRef = firebase.database().ref('grids/' + nextProps.gridId + '/numCols');
-     this.colRef.once('value', snap => {
-         if (snap.val() !== null) {
-             this.setState({numCols: snap.val()});
-         }
-     });
+     try {
+        this.rowRef.once('value', snap => {
+            if (snap.val() !== null) {
+                this.setState({numRows: snap.val()});
+            }
+        });
+        this.colRef.once('value', snap => {
+            if (snap.val() !== null) {
+                this.setState({numCols: snap.val()});
+            }
+        });
+     } catch (err) {
+         console.log(err);
+     }
   }
 
   render() {

src/components/palette.jsx

@@ -5,7 +5,7 @@ import colors from '.././_colors.scss';
 export default class Palette extends React.Component {
   constructor(){
     super();
-    this.handleClick = this.handleClick.bind(this);
+    this.handleClick = this.handleClick.bind( this );
   }
 
   handleClick( event ){

src/util/login.js

@@ -2,7 +2,7 @@ import * as firebase from 'firebase';
 
 function promptForLogin(uidCallback) {
     var provider = new firebase.auth.GoogleAuthProvider();
-    firebase.auth().signInWithPopup(provider).then(function(result) {
+    firebase.auth().signInWithPopup(provider).then(result => {
         var user = result.user;
         var uid = user.uid;
         var user_email = user.email;
@@ -33,7 +33,7 @@ function promptForLogin(uidCallback) {
  *  uidCallback: Callback to be executed with parameter of user id.
  */
 export function manageLogin(uidCallback) {
-    firebase.auth().onAuthStateChanged(function(user) {
+    firebase.auth().onAuthStateChanged(user => {
         if (user) {
             uidCallback(user.uid);
         } else {