From 082b7d1e6fd8d05922c1cf6e4bcd58dfc26738da Mon Sep 17 00:00:00 2001 From: Zach Lamb Date: Tue, 18 Oct 2016 18:01:01 -0600 Subject: [PATCH 01/21] changed string to int matrix size input --- src/components/matrixSize.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/matrixSize.jsx b/src/components/matrixSize.jsx index 9e28637b..7f15ea14 100644 --- a/src/components/matrixSize.jsx +++ b/src/components/matrixSize.jsx @@ -17,9 +17,9 @@ export default class MatrixSize extends React.Component { this.setState({ numCols: event.target.value }); } handleClick(){ - firebase.database().ref('grids/' + this.state.gridId + '/numRows' ).set(this.state.numRows); - firebase.database().ref('grids/' + this.state.gridId + '/numCols' ).set(this.state.numCols); - + firebase.database().ref('grids/' + this.state.gridId + '/numRows' ).set(parseInt(this.state.numRows)); + firebase.database().ref('grids/' + this.state.gridId + '/numCols' ).set(parseInt(this.state.numCols)); + console.log() this.props.updateGrid(this.state.gridId); } componentDidMount(){ From dac04814c2cd83a9ac1b1d622491f635fa452096 Mon Sep 17 00:00:00 2001 From: sperry94 Date: Thu, 20 Oct 2016 14:16:53 -0600 Subject: [PATCH 02/21] setting up schema and rules to handle grid hashes instead of grid names --- firebase/gridProjectDataRules.json | 5 +++-- firebase/gridProjectSchema.json | 26 +++++++++++++------------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/firebase/gridProjectDataRules.json b/firebase/gridProjectDataRules.json index abe37553..7213b184 100644 --- a/firebase/gridProjectDataRules.json +++ b/firebase/gridProjectDataRules.json @@ -9,8 +9,8 @@ }, "grids" : { "$grid" : { - ".read" : "auth != null && data.child('users').child(auth.uid).exists()", - ".write" : "auth != null && data.child('users').child(auth.uid).exists()", + ".read" : "auth != null && (data.child('users').child(auth.uid).exists() || !data.exists())", + ".write" : "auth != null && (data.child('users').child(auth.uid).exists() || !data.exists())", ".validate" : "newData.hasChildren()", "numCols" : { ".validate" : "newData.val() > 0" @@ -18,6 +18,7 @@ "numRows" : { ".validate" : "newData.val() > 0" }, + "name" : {}, "users" : {}, "$row" : { ".validate" : "$row.matches(/^(r)[0-9]+$/) && newData.hasChildren()", diff --git a/firebase/gridProjectSchema.json b/firebase/gridProjectSchema.json index 855e0a28..85dc51a7 100644 --- a/firebase/gridProjectSchema.json +++ b/firebase/gridProjectSchema.json @@ -1,22 +1,22 @@ { - "grids" : { - "grid0" : { - "numCols" : 3, - "numRows" : 3, - "users" : { - "sa" : true - }, - "owner" : "sa", - "r0" : { - "c0" : "rgb(0, 0, 0)" - } + "grids" : [ { + "name" : "grid0", + "numCols" : 3, + "numRows" : 3, + "users" : { + "sa" : true + }, + "owner" : "sa", + "r0" : { + "c0" : "rgb(0, 0, 0)" } - }, + } ], "users" : { "sa" : { "admin" : true, "email": "test@test.com", - "grids" : [ "grid0" ] + "grids" : { + "gridHash": "grid0" } } } From 54de2b4f677f28b875a8a4674114ff9e83c52394 Mon Sep 17 00:00:00 2001 From: sperry94 Date: Thu, 20 Oct 2016 14:44:25 -0600 Subject: [PATCH 03/21] updating the app to handle the new changes --- src/components/GridSelection.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/GridSelection.jsx b/src/components/GridSelection.jsx index 78b3b76f..eba05de9 100644 --- a/src/components/GridSelection.jsx +++ b/src/components/GridSelection.jsx @@ -6,8 +6,8 @@ export default class GridSelector extends React.Component { var buttons = []; for (let gridName in this.props.possibleGrids) { buttons.push( - ) From b81b4d844766094fd24774e815a0bc481a188277 Mon Sep 17 00:00:00 2001 From: sperry94 Date: Thu, 20 Oct 2016 14:47:40 -0600 Subject: [PATCH 04/21] undoing merged changes from matrix size fix --- src/components/matrixSize.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/matrixSize.jsx b/src/components/matrixSize.jsx index 7f15ea14..9e28637b 100644 --- a/src/components/matrixSize.jsx +++ b/src/components/matrixSize.jsx @@ -17,9 +17,9 @@ export default class MatrixSize extends React.Component { this.setState({ numCols: event.target.value }); } handleClick(){ - firebase.database().ref('grids/' + this.state.gridId + '/numRows' ).set(parseInt(this.state.numRows)); - firebase.database().ref('grids/' + this.state.gridId + '/numCols' ).set(parseInt(this.state.numCols)); - console.log() + firebase.database().ref('grids/' + this.state.gridId + '/numRows' ).set(this.state.numRows); + firebase.database().ref('grids/' + this.state.gridId + '/numCols' ).set(this.state.numCols); + this.props.updateGrid(this.state.gridId); } componentDidMount(){ From 833d6229c2a71ea8b7c452ace04db4bdf73c6be7 Mon Sep 17 00:00:00 2001 From: sperry94 Date: Thu, 20 Oct 2016 17:21:03 -0600 Subject: [PATCH 05/21] fixed sharing for grid hashes --- src/components/shareComponent.jsx | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/components/shareComponent.jsx b/src/components/shareComponent.jsx index f54a8b23..56e71abc 100644 --- a/src/components/shareComponent.jsx +++ b/src/components/shareComponent.jsx @@ -18,27 +18,35 @@ export default class ShareComponent extends React.Component { handleClick() { var usersRef = firebase.database().ref('users/'); - usersRef.orderByChild('email').equalTo(this.state.userToShareWith).once("child_added", snapshot => { - if(snapshot.val() !== null) + usersRef.orderByChild('email').equalTo(this.state.userToShareWith).once("child_added", userSnapshot => { + if(userSnapshot.val() !== null) { - var gridUserRef = firebase.database().ref('grids/' + this.props.gridID + '/users'); - var newGridUserEntryRef = gridUserRef.child(snapshot.key); + var gridRef = firebase.database().ref('grids/' + this.props.gridID); + var newGridUserEntryRef = gridRef.child('users').child(userSnapshot.key); - newGridUserEntryRef.once("value", newGridUserEntrySnapshot => { - //only add if the user is not on the grid - if(newGridUserEntrySnapshot.val() === null) + gridRef.once('value', gridRefSnapshot => { + + //only add user to grid if the user is not on the grid + if(userSnapshot.child('grids').child(this.props.gridID).val() === null) { //update the grid's list of users newGridUserEntryRef.set(true); + } + else + { + console.log("The specified user already is already listed on this grid"); + } + //only add grid to user if the grid is not on the user + if(gridRefSnapshot.child('users').child(userSnapshot.key).val() === null) + { //update the user's list of grids - var userGridRef = firebase.database().ref('users/' + snapshot.key + '/grids'); - var newUserGridEntryRef = userGridRef.push(); - newUserGridEntryRef.set(this.props.gridID); + var newUserGridEntryRef = firebase.database().ref('users/' + userSnapshot.key + '/grids/' + this.props.gridID); + newUserGridEntryRef.set(gridRefSnapshot.child('name').val()); } else { - console.log("The specified user already has access to this grid"); + console.log("The specified grid already is already listed on this user"); } }); } From e7451758ae1e591813a4672207e73866ca3718c8 Mon Sep 17 00:00:00 2001 From: sperry94 Date: Thu, 20 Oct 2016 17:40:42 -0600 Subject: [PATCH 06/21] fixing sharing again --- src/components/shareComponent.jsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/shareComponent.jsx b/src/components/shareComponent.jsx index 56e71abc..31970ace 100644 --- a/src/components/shareComponent.jsx +++ b/src/components/shareComponent.jsx @@ -25,9 +25,8 @@ export default class ShareComponent extends React.Component { var newGridUserEntryRef = gridRef.child('users').child(userSnapshot.key); gridRef.once('value', gridRefSnapshot => { - //only add user to grid if the user is not on the grid - if(userSnapshot.child('grids').child(this.props.gridID).val() === null) + if(gridRefSnapshot.child('users').child(userSnapshot.key).val() === null) { //update the grid's list of users newGridUserEntryRef.set(true); @@ -38,7 +37,7 @@ export default class ShareComponent extends React.Component { } //only add grid to user if the grid is not on the user - if(gridRefSnapshot.child('users').child(userSnapshot.key).val() === null) + if(userSnapshot.child('grids').child(this.props.gridID).val() === null) { //update the user's list of grids var newUserGridEntryRef = firebase.database().ref('users/' + userSnapshot.key + '/grids/' + this.props.gridID); @@ -48,7 +47,7 @@ export default class ShareComponent extends React.Component { { console.log("The specified grid already is already listed on this user"); } - }); + }, error => { console.log(error) }); } }); } From c75f08fd2406a7a915159d3547c82bd6378d92a5 Mon Sep 17 00:00:00 2001 From: Caleb Hsu Date: Sat, 22 Oct 2016 19:57:31 -0600 Subject: [PATCH 07/21] Resets all visible cells of current grid to white --- package.json | 1 + src/components/app.jsx | 14 +++++++++----- src/components/matrix.jsx | 1 - src/components/palette.jsx | 2 +- src/components/resetGridColor.jsx | 31 +++++++++++++++++++++++++++++++ 5 files changed, 42 insertions(+), 7 deletions(-) create mode 100644 src/components/resetGridColor.jsx diff --git a/package.json b/package.json index 349ec0b9..e0520aa7 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "dependencies": { "bootstrap": "^4.0.0-alpha.3", "firebase": "^3.4.1", + "lodash": "^4.16.4", "node-sass": "^3.9.2", "react": "15.3.0", "react-dom": "15.3.0", diff --git a/src/components/app.jsx b/src/components/app.jsx index b06d8e3e..c0965d41 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -9,6 +9,7 @@ import GridSelector from './GridSelection.jsx'; import ShareComponent from './shareComponent.jsx'; import NavBar from './navbar.jsx'; import DeleteGrid from './deleteGrid.jsx'; +import ResetGridColor from './resetGridColor.jsx'; import styles from '../main.scss'; import 'bootstrap/dist/css/bootstrap.min.css'; @@ -25,7 +26,7 @@ export default class App extends React.Component { numRows: 0, numCols: 0 } - this.onUpdate = this.onUpdate.bind(this); + this.onSelectColor = this.onSelectColor.bind(this); this.changeGrid = this.changeGrid.bind(this); this.getAvailableGrids = this.getAvailableGrids.bind(this); } @@ -41,7 +42,7 @@ export default class App extends React.Component { }); } - onUpdate( val ){ + onSelectColor( val ){ this.setState({ selectedColor: val }); } changeGrid(newGrid) { @@ -74,10 +75,13 @@ export default class App extends React.Component { />
- +
- +
@@ -89,7 +93,7 @@ export default class App extends React.Component { />
- +
diff --git a/src/components/matrix.jsx b/src/components/matrix.jsx index 97e52324..8cfb3a6d 100644 --- a/src/components/matrix.jsx +++ b/src/components/matrix.jsx @@ -45,7 +45,6 @@ export default class Matrix extends React.Component {

Could not load grid!

) } - console.log(this.props); let matrix = [] for(var i = 0; i < this.state.numCols;i++){ let column = [] diff --git a/src/components/palette.jsx b/src/components/palette.jsx index 9376fd13..50bfb6f3 100644 --- a/src/components/palette.jsx +++ b/src/components/palette.jsx @@ -10,7 +10,7 @@ export default class Palette extends React.Component { handleClick( event ){ // onUpdate updates the parent with the color to pass to the matrix cell - this.props.onUpdate( event.target.style.backgroundColor ); + this.props.onSelectColor( event.target.style.backgroundColor ); } render(){ diff --git a/src/components/resetGridColor.jsx b/src/components/resetGridColor.jsx new file mode 100644 index 00000000..3b5a83a0 --- /dev/null +++ b/src/components/resetGridColor.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import * as firebase from 'firebase'; + +export default class ResetGridColor extends React.Component { + constructor(){ + super(); + this.handleClick = this.handleClick.bind(this); + } + + handleClick( event ){ + const gridRef = firebase.database().ref('grids/' this.props.gridId + '/'); + + const numRows = this.props.numRows; + const numCols = this.props.numCols; + + for( let row = 0; row < numRows; row++){ + for( let col = 0; col < numCols; col++ ){ + let rowRef = 'r' + row; + let colRef = 'c' + col; + + gridRef.child( rowRef ).child( colRef ).set( 'rgb(255, 255, 255)' ); + } + } + } + + render(){ + return( + + ) + } +} \ No newline at end of file From 4c6833ad0d3a7a9a8135b6c8276532d0e56334d9 Mon Sep 17 00:00:00 2001 From: Caleb Hsu Date: Sat, 22 Oct 2016 20:13:00 -0600 Subject: [PATCH 08/21] New color palette scheme --- src/_colors.scss | 15 +++++++++++++++ src/_variables.scss | 15 +++++++++++---- src/components/resetGridColor.jsx | 2 +- 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/src/_colors.scss b/src/_colors.scss index 0d3e927e..742524e4 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -4,12 +4,27 @@ .redPaint { background-color: $red; } +.pinkPaint { + background-color: $pink; +} +.orangePaint { + background-color: $orange; +} +.yellowPaint { + background-color: $yellow; +} .greenPaint { background-color: $green; } .bluePaint { background-color: $blue; } +.tealPaint { + background-color: $teal; +} +.purplePaint { + background-color: $purple; +} .blackPaint { background-color: $black; } diff --git a/src/_variables.scss b/src/_variables.scss index f9044f13..95d055c5 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -1,5 +1,12 @@ -$red: #FF0000; -$green: #00CC00; -$blue: #0000FF; +$red: #AD1A24; +$pink: #C83875; +$orange: #D57017; +$yellow: #EEAF29; +$green: #6AA62B; +$blue: #0075B4; +$teal: #249A9E; +$purple: #7B539C; $white: #FFFFFF; -$black: #000000; \ No newline at end of file +$black: #000000; + +/* Reference: https://brand.linkedin.com/visual-identity/color-palettes */ \ No newline at end of file diff --git a/src/components/resetGridColor.jsx b/src/components/resetGridColor.jsx index 3b5a83a0..a92f573c 100644 --- a/src/components/resetGridColor.jsx +++ b/src/components/resetGridColor.jsx @@ -8,7 +8,7 @@ export default class ResetGridColor extends React.Component { } handleClick( event ){ - const gridRef = firebase.database().ref('grids/' this.props.gridId + '/'); + const gridRef = firebase.database().ref('grids/' + this.props.gridId + '/'); const numRows = this.props.numRows; const numCols = this.props.numCols; From 5324c113431c3661279fc6f5e81af52fc5336a95 Mon Sep 17 00:00:00 2001 From: Caleb Hsu Date: Sat, 22 Oct 2016 20:52:29 -0600 Subject: [PATCH 09/21] Splits palette into two columns --- src/components/palette.jsx | 7 +++++-- src/components/resetGridColor.jsx | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/palette.jsx b/src/components/palette.jsx index 50bfb6f3..53d5228b 100644 --- a/src/components/palette.jsx +++ b/src/components/palette.jsx @@ -31,9 +31,12 @@ export default class Palette extends React.Component { ) } + const halfOfPaint = Math.ceil( paintPots.length / 2 ); + return( -
-
{ paintPots }
+
+
{ paintPots.splice( 0, halfOfPaint ) }
+
{ paintPots.splice( 0, halfOfPaint ) }
) } diff --git a/src/components/resetGridColor.jsx b/src/components/resetGridColor.jsx index a92f573c..8c63c3ff 100644 --- a/src/components/resetGridColor.jsx +++ b/src/components/resetGridColor.jsx @@ -20,7 +20,7 @@ export default class ResetGridColor extends React.Component { gridRef.child( rowRef ).child( colRef ).set( 'rgb(255, 255, 255)' ); } - } + } } render(){ From b02d6f978c4f9d380b5d852f4c473619aede45f0 Mon Sep 17 00:00:00 2001 From: Caleb Hsu Date: Sun, 23 Oct 2016 19:03:30 -0600 Subject: [PATCH 10/21] Creates basic working modal with react-bootstrap --- package.json | 1 + src/components/shareComponent.jsx | 115 +++++++++++++++++++----------- 2 files changed, 73 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index e0520aa7..8a21f664 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "lodash": "^4.16.4", "node-sass": "^3.9.2", "react": "15.3.0", + "react-bootstrap": "^0.30.5", "react-dom": "15.3.0", "sass-loader": "^4.0.1" }, diff --git a/src/components/shareComponent.jsx b/src/components/shareComponent.jsx index f54a8b23..78e212fd 100644 --- a/src/components/shareComponent.jsx +++ b/src/components/shareComponent.jsx @@ -1,56 +1,85 @@ import React from 'react'; import * as firebase from 'firebase'; +import { Modal } from 'react-bootstrap'; + import 'bootstrap/dist/css/bootstrap.min.css'; export default class ShareComponent extends React.Component { - constructor() { - super(); - this.state = { - userToShareWith: '' - } - this.handleClick = this.handleClick.bind(this); - this.onUpdate = this.onUpdate.bind(this); + constructor(){ + super(); + this.state = { + userToShareWith: '', + showModal: false } + this.handleClick = this.handleClick.bind(this); + this.onUpdate = this.onUpdate.bind(this); + this.open = this.open.bind(this); + this.close = this.close.bind(this); + } - onUpdate(event) { - this.setState({ userToShareWith: event.target.value }); - } + onUpdate(event){ + this.setState({ userToShareWith: event.target.value }); + } + + handleClick(){ + var usersRef = firebase.database().ref('users/'); + usersRef.orderByChild('email').equalTo(this.state.userToShareWith).once("child_added", snapshot => { + if(snapshot.val() !== null) + { + var gridUserRef = firebase.database().ref('grids/' + this.props.gridID + '/users'); + var newGridUserEntryRef = gridUserRef.child(snapshot.key); - handleClick() { - var usersRef = firebase.database().ref('users/'); - usersRef.orderByChild('email').equalTo(this.state.userToShareWith).once("child_added", snapshot => { - if(snapshot.val() !== null) + newGridUserEntryRef.once("value", newGridUserEntrySnapshot => { + //only add if the user is not on the grid + if(newGridUserEntrySnapshot.val() === null) + { + //update the grid's list of users + newGridUserEntryRef.set(true); + + //update the user's list of grids + var userGridRef = firebase.database().ref('users/' + snapshot.key + '/grids'); + var newUserGridEntryRef = userGridRef.push(); + newUserGridEntryRef.set(this.props.gridID); + } + else { - var gridUserRef = firebase.database().ref('grids/' + this.props.gridID + '/users'); - var newGridUserEntryRef = gridUserRef.child(snapshot.key); - - newGridUserEntryRef.once("value", newGridUserEntrySnapshot => { - //only add if the user is not on the grid - if(newGridUserEntrySnapshot.val() === null) - { - //update the grid's list of users - newGridUserEntryRef.set(true); - - //update the user's list of grids - var userGridRef = firebase.database().ref('users/' + snapshot.key + '/grids'); - var newUserGridEntryRef = userGridRef.push(); - newUserGridEntryRef.set(this.props.gridID); - } - else - { - console.log("The specified user already has access to this grid"); - } - }); + console.log("The specified user already has access to this grid"); } }); - } + } + }); + } - render() { - return ( -
- - -
- ) - } + close(){ + this.setState({ showModal: false }); + } + + open(){ + this.setState({ showModal: true }); + } + + render(){ + return ( +
+ + + + + Share this grid with other users + + +

People

+ +
+ + + +
+
+ /*
+ + +
*/ + ); + } } From beac8781976d5ba49df3557d8a8a168e094745de Mon Sep 17 00:00:00 2001 From: Caleb Hsu Date: Sun, 23 Oct 2016 19:21:36 -0600 Subject: [PATCH 11/21] Working sharing modal --- src/_base.scss | 10 ++++ src/components/shareComponent.jsx | 76 ++++++++++++++++--------------- 2 files changed, 49 insertions(+), 37 deletions(-) diff --git a/src/_base.scss b/src/_base.scss index 11da4871..1b15458c 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -37,6 +37,16 @@ width: 4.5vw; } +/* Modal Styles */ +.sharedWith { + font-size: 12px; + margin-top: 5px; +} + +.modalButton { + margin: 0 5px; +} + /* Media Queries */ @media( max-width: 970px ){ .cell { diff --git a/src/components/shareComponent.jsx b/src/components/shareComponent.jsx index 78e212fd..1c03624a 100644 --- a/src/components/shareComponent.jsx +++ b/src/components/shareComponent.jsx @@ -2,6 +2,7 @@ import React from 'react'; import * as firebase from 'firebase'; import { Modal } from 'react-bootstrap'; +import styles from '.././main.scss'; import 'bootstrap/dist/css/bootstrap.min.css'; export default class ShareComponent extends React.Component { @@ -11,68 +12,69 @@ export default class ShareComponent extends React.Component { userToShareWith: '', showModal: false } - this.handleClick = this.handleClick.bind(this); - this.onUpdate = this.onUpdate.bind(this); - this.open = this.open.bind(this); - this.close = this.close.bind(this); + + this.handleClick = this.handleClick.bind( this ); + this.onUpdate = this.onUpdate.bind( this ); + this.open = this.open.bind( this ); + this.close = this.close.bind( this ); } - onUpdate(event){ + onUpdate( event ){ this.setState({ userToShareWith: event.target.value }); } + open(){ + this.setState({ showModal: true }); + } + + close(){ + this.setState({ showModal: false }); + } + handleClick(){ - var usersRef = firebase.database().ref('users/'); - usersRef.orderByChild('email').equalTo(this.state.userToShareWith).once("child_added", snapshot => { - if(snapshot.val() !== null) - { - var gridUserRef = firebase.database().ref('grids/' + this.props.gridID + '/users'); - var newGridUserEntryRef = gridUserRef.child(snapshot.key); + var usersRef = firebase.database().ref( 'users/' ); + usersRef.orderByChild( 'email' ).equalTo( this.state.userToShareWith ).once( "child_added", snapshot => { + if( snapshot.val() !== null ){ + var gridUserRef = firebase.database().ref( 'grids/' + this.props.gridID + '/users' ); + var newGridUserEntryRef = gridUserRef.child( snapshot.key ); - newGridUserEntryRef.once("value", newGridUserEntrySnapshot => { - //only add if the user is not on the grid - if(newGridUserEntrySnapshot.val() === null) - { - //update the grid's list of users - newGridUserEntryRef.set(true); + newGridUserEntryRef.once( "value", newGridUserEntrySnapshot => { + // only add if the user is not on the grid + if( newGridUserEntrySnapshot.val() === null ){ + // update the grid's list of users + newGridUserEntryRef.set( true ); - //update the user's list of grids - var userGridRef = firebase.database().ref('users/' + snapshot.key + '/grids'); + // update the user's list of grids + var userGridRef = firebase.database().ref( 'users/' + snapshot.key + '/grids' ); var newUserGridEntryRef = userGridRef.push(); - newUserGridEntryRef.set(this.props.gridID); + newUserGridEntryRef.set( this.props.gridID ); + + this.setState({ showModal: false }); } - else - { - console.log("The specified user already has access to this grid"); + else{ + console.log( "The specified user already has access to this grid." ); } - }); + } ); } - }); - } - - close(){ - this.setState({ showModal: false }); - } - - open(){ - this.setState({ showModal: true }); + } ); } render(){ return (
- + - + Share this grid with other users -

People

+

Currently shared with

- + +
From 04c78863927ea0a611a99f6dd244df063e74968a Mon Sep 17 00:00:00 2001 From: Caleb Hsu Date: Mon, 24 Oct 2016 00:12:04 -0600 Subject: [PATCH 12/21] Working list of current users, syntax cleanup --- src/_base.scss | 4 +++ src/components/app.jsx | 51 ++++++++++++++--------------- src/components/deleteGrid.jsx | 5 +-- src/components/navbar.jsx | 3 +- src/components/resetGridColor.jsx | 6 ++-- src/components/shareComponent.jsx | 53 +++++++++++++++++++++++-------- 6 files changed, 77 insertions(+), 45 deletions(-) diff --git a/src/_base.scss b/src/_base.scss index 1b15458c..2b2f003a 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -1,3 +1,7 @@ +.button { + margin: 3px 2px; +} + .cell { border: 1px solid rgba(0, 0, 0, 0.3); display: inline-block; diff --git a/src/components/app.jsx b/src/components/app.jsx index c0965d41..00eb04f4 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -66,24 +66,19 @@ export default class App extends React.Component { return (
+
-
-
+
-
- +
-
- -
-
+
{/* row */} +
- -
-
-
- -
-
- -
-
- -
+
-
+ +
+
+ +
+
+ + +
+
+ +
+
{/* row */} + +
{/* container */}
) } diff --git a/src/components/deleteGrid.jsx b/src/components/deleteGrid.jsx index 1dfac2ca..7b8155fc 100644 --- a/src/components/deleteGrid.jsx +++ b/src/components/deleteGrid.jsx @@ -1,11 +1,12 @@ import React from 'react'; import * as firebase from 'firebase'; -import 'bootstrap/dist/css/bootstrap.min.css'; + +import styles from '../main.scss'; export default class DeleteGrid extends React.Component { render(){ return( - + ); } } \ No newline at end of file diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx index 49073cbc..766e088a 100644 --- a/src/components/navbar.jsx +++ b/src/components/navbar.jsx @@ -1,10 +1,9 @@ import React from 'react'; -import 'bootstrap/dist/css/bootstrap.min.css'; export default class NavBar extends React.Component { render(){ return( -
- /*
- - -
*/ ); } } From 31ea77bd9ff160b7c8339c574d2d8bf788d910e5 Mon Sep 17 00:00:00 2001 From: Caleb Hsu Date: Mon, 24 Oct 2016 11:46:35 -0600 Subject: [PATCH 13/21] Passes correct props into component to update users on new grid --- src/_base.scss | 9 ++++----- src/components/palette.jsx | 2 +- src/components/shareComponent.jsx | 13 +++++++++---- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/_base.scss b/src/_base.scss index 2b2f003a..2a3bded3 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -1,7 +1,6 @@ .button { margin: 3px 2px; } - .cell { border: 1px solid rgba(0, 0, 0, 0.3); display: inline-block; @@ -9,7 +8,6 @@ margin: 0 3px; width: 4vw; } - .topBuffer { margin-top: 20px; } @@ -19,7 +17,6 @@ display: inline-block; margin: 20px auto; } - .matrixColumn { display: inline-block; margin: 0; @@ -44,12 +41,14 @@ /* Modal Styles */ .sharedWith { font-size: 12px; - margin-top: 5px; + margin-top: 7px; } - .modalButton { margin: 0 5px; } +.userList { + color: $blue; +} /* Media Queries */ @media( max-width: 970px ){ diff --git a/src/components/palette.jsx b/src/components/palette.jsx index 53d5228b..6366aa00 100644 --- a/src/components/palette.jsx +++ b/src/components/palette.jsx @@ -35,7 +35,7 @@ export default class Palette extends React.Component { return(
-
{ paintPots.splice( 0, halfOfPaint ) }
+
{ paintPots.splice( 0, halfOfPaint ) }
{ paintPots.splice( 0, halfOfPaint ) }
) diff --git a/src/components/shareComponent.jsx b/src/components/shareComponent.jsx index b8891440..f3de0e7c 100644 --- a/src/components/shareComponent.jsx +++ b/src/components/shareComponent.jsx @@ -32,8 +32,8 @@ export default class ShareComponent extends React.Component { this.setState({ showModal: false }); } - componentWillReceiveProps() { - this.gridUserRef = firebase.database().ref( 'grids/' + this.props.gridID + '/users' ); + componentWillReceiveProps( nextProps ) { + this.gridUserRef = firebase.database().ref( 'grids/' + nextProps.gridID + '/users' ); this.usersRef = firebase.database().ref( 'users/' ); let currentUserArray = []; @@ -46,7 +46,7 @@ export default class ShareComponent extends React.Component { } ); } ); - // matches keys to user list to retrieve emails + // retrieve emails of grid users by matching user keys with user list this.usersRef.once( "value", snapshot => { snapshot.forEach( user => { if ( _.includes( currentUserArray, user.key ) ){ @@ -56,6 +56,9 @@ export default class ShareComponent extends React.Component { } ); this.setState({ currentUsers: currentUserEmails }); + if( this.state.currentUsers.length == 0 ){ + currentUserEmails.push( ' no one.' ); + } } handleShare(){ @@ -99,7 +102,9 @@ export default class ShareComponent extends React.Component { -

Currently shared with { this.state.currentUsers.join(', ') }

+

Currently shared with + { this.state.currentUsers.join(', ') } +

From d536ca854934b2ec09a9bdf731e617c7e1409321 Mon Sep 17 00:00:00 2001 From: Caleb Hsu Date: Mon, 24 Oct 2016 12:08:30 -0600 Subject: [PATCH 14/21] Fixes randomize bug to use color stylesheet length for index range --- src/components/randomize.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/randomize.jsx b/src/components/randomize.jsx index f9549788..811e004d 100644 --- a/src/components/randomize.jsx +++ b/src/components/randomize.jsx @@ -13,13 +13,13 @@ export default class Randomize extends React.Component { const rows = matrixID[0]; const columns = matrixID[1]; const cellsToChange = Math.floor(Math.random() * rows * columns); - const colorStyleSheet = document.styleSheets[0].cssRules; + const colorStyleSheet = document.styleSheets[1].cssRules; for( var i = 0; i < cellsToChange; i++ ){ let randomRow = 'r' + Math.floor(Math.random() * rows) + '/'; let randomColumn = 'c' + Math.floor(Math.random() * columns) + '/'; - let colorIndex = Math.floor(Math.random() * 5); + let colorIndex = Math.floor(Math.random() * colorStyleSheet.length); let randomColorStr = colorStyleSheet[colorIndex].cssText.toString(); const cellRef = firebase.database().ref('grids/' + gridId + randomRow + randomColumn); From 493a9e0bbdcaa03244411dd54d63730468126556 Mon Sep 17 00:00:00 2001 From: Caleb Hsu Date: Tue, 25 Oct 2016 23:35:25 -0600 Subject: [PATCH 15/21] Standardized gridId prop, automatic user list update on add --- src/components/app.jsx | 4 ++-- src/components/cell.jsx | 4 ++-- src/components/matrix.jsx | 8 ++++---- src/components/palette.jsx | 2 +- src/components/shareComponent.jsx | 25 +++++++++---------------- 5 files changed, 18 insertions(+), 25 deletions(-) diff --git a/src/components/app.jsx b/src/components/app.jsx index 00eb04f4..7dd9ac39 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -82,7 +82,7 @@ export default class App extends React.Component {
@@ -94,7 +94,7 @@ export default class App extends React.Component {
- +
diff --git a/src/components/cell.jsx b/src/components/cell.jsx index 704ae9f1..a6b4d631 100644 --- a/src/components/cell.jsx +++ b/src/components/cell.jsx @@ -13,7 +13,7 @@ export default class Cell extends React.Component { } componentDidMount() { - this.cellRef = firebase.database().ref('grids/' + this.props.gridID + this.cellRef = firebase.database().ref('grids/' + this.props.gridId + '/r' + this.props.row + '/c' + this.props.col); this.cellRef.on('value', snap => { @@ -48,7 +48,7 @@ export default class Cell extends React.Component { Cell.propTypes = { row: React.PropTypes.number, col: React.PropTypes.number, - gridID: React.PropTypes.string, + gridId: React.PropTypes.string, color: React.PropTypes.string } diff --git a/src/components/matrix.jsx b/src/components/matrix.jsx index 8cfb3a6d..d5d1a320 100644 --- a/src/components/matrix.jsx +++ b/src/components/matrix.jsx @@ -25,13 +25,13 @@ export default class Matrix extends React.Component { updateGridSize(nextProps) { this.setState({numRows: 0, numCols: 0}); - this.rowRef = firebase.database().ref('grids/' + nextProps.gridID + '/numRows'); + 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 = firebase.database().ref('grids/' + nextProps.gridId + '/numCols'); this.colRef.once('value', snap => { if (snap.val() !== null) { this.setState({numCols: snap.val()}); @@ -50,7 +50,7 @@ export default class Matrix extends React.Component { let column = [] for(var j = 0;j < this.state.numRows;j++){ column.push() + gridId={this.props.gridId} color={this.props.color} />) } matrix.push(
{column}
) } @@ -61,7 +61,7 @@ export default class Matrix extends React.Component { } Matrix.propTypes = { - gridID: React.PropTypes.string, + gridId: React.PropTypes.string, color: React.PropTypes.string, numCols: React.PropTypes.string, numRows: React.PropTypes.string diff --git a/src/components/palette.jsx b/src/components/palette.jsx index 6366aa00..ea175906 100644 --- a/src/components/palette.jsx +++ b/src/components/palette.jsx @@ -35,7 +35,7 @@ export default class Palette extends React.Component { return(
-
{ paintPots.splice( 0, halfOfPaint ) }
+
{ paintPots.splice( 0, halfOfPaint ) }
{ paintPots.splice( 0, halfOfPaint ) }
) diff --git a/src/components/shareComponent.jsx b/src/components/shareComponent.jsx index 1bff9aaf..dc3d9110 100644 --- a/src/components/shareComponent.jsx +++ b/src/components/shareComponent.jsx @@ -41,17 +41,17 @@ export default class ShareComponent extends React.Component { let currentUserEmails = []; // gets keys of current grid users - this.gridUserRef.once( "value", snapshot => { + this.gridUserRef.once( 'value', snapshot => { snapshot.forEach( user => { currentUserArray.push( user.key ) } ); } ); // retrieve emails of grid users by matching user keys with user list - this.usersRef.once( "value", snapshot => { + this.usersRef.once( 'value', snapshot => { snapshot.forEach( user => { if( _.includes( currentUserArray, user.key ) ){ - currentUserEmails.push( user.child("email").val() ) + currentUserEmails.push( user.child( 'email' ).val() ) } } ); } ); @@ -59,10 +59,6 @@ export default class ShareComponent extends React.Component { this.setState({ currentUsers: currentUserEmails }); } - componentDidMount() { - this.getUserEmails( this.props.gridId ); - } - componentWillReceiveProps( nextProps ){ if( this.props.gridId !== nextProps.gridId ){ this.getUserEmails( nextProps.gridId ) @@ -70,12 +66,12 @@ export default class ShareComponent extends React.Component { } handleShare(){ - let usersRef = firebase.database().ref( 'users/' ); + const usersRef = firebase.database().ref( 'users/' ); usersRef.orderByChild( 'email' ).equalTo( this.state.userToShareWith ).once( "child_added", userSnapshot => { if( userSnapshot.val() !== null ){ - let gridRef = firebase.database().ref( 'grids/' + this.props.gridId ); - let newGridUserEntryRef = gridRef.child( 'users' ).child( userSnapshot.key ); + const gridRef = firebase.database().ref( 'grids/' + this.props.gridId ); + const newGridUserEntryRef = gridRef.child( 'users' ).child( userSnapshot.key ); gridRef.once( 'value', gridRefSnapshot => { // only add user to grid if the user is not on the grid @@ -83,8 +79,9 @@ export default class ShareComponent extends React.Component { // update the grid's list of users newGridUserEntryRef.set( true ); - // closes modal window + // closes modal window & updates user list this.setState({ showModal: false }); + this.getUserEmails( this.props.gridId ); } else{ console.log( "The specified user already is already listed on this grid" ); @@ -93,7 +90,7 @@ export default class ShareComponent extends React.Component { // only add grid to user if the grid is not on the user if( userSnapshot.child( 'grids' ).child( this.props.gridId ).val() === null ){ // update the user's list of grids - var newUserGridEntryRef = firebase.database().ref( 'users/' + userSnapshot.key + '/grids/' + this.props.gridId ); + const newUserGridEntryRef = firebase.database().ref( 'users/' + userSnapshot.key + '/grids/' + this.props.gridId ); newUserGridEntryRef.set( gridRefSnapshot.child( 'name' ).val() ); } else{ @@ -127,8 +124,4 @@ export default class ShareComponent extends React.Component {
); } -} - -ShareComponent.propTypes = { - gridId: React.PropTypes.string, } \ No newline at end of file From f0b239f7347e6f35ca3c7ebe4da2b78b4c6213b1 Mon Sep 17 00:00:00 2001 From: Caleb Hsu Date: Tue, 25 Oct 2016 23:42:11 -0600 Subject: [PATCH 16/21] Minor syntax change --- src/components/shareComponent.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/shareComponent.jsx b/src/components/shareComponent.jsx index dc3d9110..be571978 100644 --- a/src/components/shareComponent.jsx +++ b/src/components/shareComponent.jsx @@ -34,22 +34,22 @@ export default class ShareComponent extends React.Component { } getUserEmails( newestGridId ){ - this.gridUserRef = firebase.database().ref( 'grids/' + newestGridId + '/users' ); - this.usersRef = firebase.database().ref( 'users/' ); + const gridRef = firebase.database().ref( 'grids/' + newestGridId + '/users' ); + const usersRef = firebase.database().ref( 'users/' ); let currentUserArray = []; let currentUserEmails = []; // gets keys of current grid users - this.gridUserRef.once( 'value', snapshot => { - snapshot.forEach( user => { + gridRef.once( 'value', gridRefSnapshot => { + gridRefSnapshot.forEach( user => { currentUserArray.push( user.key ) } ); } ); // retrieve emails of grid users by matching user keys with user list - this.usersRef.once( 'value', snapshot => { - snapshot.forEach( user => { + usersRef.once( 'value', userSnapshot => { + userSnapshot.forEach( user => { if( _.includes( currentUserArray, user.key ) ){ currentUserEmails.push( user.child( 'email' ).val() ) } From 60d66ad12dea9da32ed3684fd6b9e721405b2fc2 Mon Sep 17 00:00:00 2001 From: s h Date: Wed, 26 Oct 2016 13:25:36 -0600 Subject: [PATCH 17/21] Create new grid using input rows/cols/gridName --- src/components/app.jsx | 8 +++-- src/components/navbar.jsx | 3 +- src/components/newGrid.jsx | 70 ++++++++++++++++++++++++++++++++++++ src/components/randomize.jsx | 4 +-- 4 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 src/components/newGrid.jsx diff --git a/src/components/app.jsx b/src/components/app.jsx index c0965d41..4d756e05 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -10,6 +10,7 @@ import ShareComponent from './shareComponent.jsx'; import NavBar from './navbar.jsx'; import DeleteGrid from './deleteGrid.jsx'; import ResetGridColor from './resetGridColor.jsx'; +import NewGrid from './newGrid.jsx'; import styles from '../main.scss'; import 'bootstrap/dist/css/bootstrap.min.css'; @@ -65,7 +66,7 @@ export default class App extends React.Component { render() { return (
- +
@@ -75,7 +76,10 @@ export default class App extends React.Component { />
- + +
Dashboard (current)
  • - New Grid +
  • Login diff --git a/src/components/newGrid.jsx b/src/components/newGrid.jsx new file mode 100644 index 00000000..572cd5d2 --- /dev/null +++ b/src/components/newGrid.jsx @@ -0,0 +1,70 @@ +import React from 'react'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import * as firebase from 'firebase'; +import {manageLogin} from '../util/login.js' + +export default class NewGrid extends React.Component { + constructor(){ + super(); + this.state = {numRows: '',numCols: '', gridName: ''} + this.createGrid = this.createGrid.bind(this); + this.setRows = this.setRows.bind(this); + this.setCols = this.setCols.bind(this); + this.setName = this.setName.bind(this); + this.handleClick = this.handleClick.bind(this); + } + + setRows(event) { + this.setState({ numRows: event.target.value }); + } + + setName(event) { + this.setState({ gridName: event.target.value }); + } + + setCols(event) { + this.setState({ numCols: event.target.value }); + } + + handleClick(event){ + + manageLogin(this.createGrid); + } + + createGrid(uid) { + this.gridRef = firebase.database().ref('grids/'); + // Add new grid to the grids/ + let newGridRef = this.gridRef.push(); + let usersObj = {}; + usersObj[uid] = true; + let newGridObj = {}; + newGridObj['numCols'] = parseInt(this.state.numCols); + newGridObj['numRows'] = parseInt(this.state.numRows); + newGridObj['users'] = usersObj; + newGridRef.set(newGridObj);0 + // Add peprmission for the user who created. + let userRef = firebase.database().ref('users/' + uid + '/grids/'); + let newGridKey = newGridRef.key; + userRef.child(newGridKey).set((this.state.gridName).toString()); + this.props.changeGrid(newGridKey); + } + + render(){ + return( +
    + + Rows: + Columns: + Grid Name: +
    + ); + } +} + + + NewGrid.propTypes = { + changeGrid: React.PropTypes.func + } \ No newline at end of file diff --git a/src/components/randomize.jsx b/src/components/randomize.jsx index f9549788..8a508252 100644 --- a/src/components/randomize.jsx +++ b/src/components/randomize.jsx @@ -10,8 +10,8 @@ export default class Randomize extends React.Component { handleClick() { const gridId = this.props.gridId + '/'; - const rows = matrixID[0]; - const columns = matrixID[1]; + const rows = parseInt(this.props.numRows) + const columns = parseInt(this.props.numCols); const cellsToChange = Math.floor(Math.random() * rows * columns); const colorStyleSheet = document.styleSheets[0].cssRules; From 741057dedd365f738707ae3aacd7b740fd81ef4c Mon Sep 17 00:00:00 2001 From: Zach Lamb Date: Wed, 26 Oct 2016 13:57:42 -0600 Subject: [PATCH 18/21] fixed error messages from matrix and permission issue from matrixSize --- src/components/app.jsx | 2 +- src/components/matrix.jsx | 4 ++-- src/components/matrixSize.jsx | 5 +++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/app.jsx b/src/components/app.jsx index c0965d41..2df32dec 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -89,7 +89,7 @@ export default class App extends React.Component {
  • diff --git a/src/components/matrix.jsx b/src/components/matrix.jsx index 8cfb3a6d..6b805d73 100644 --- a/src/components/matrix.jsx +++ b/src/components/matrix.jsx @@ -63,6 +63,6 @@ export default class Matrix extends React.Component { Matrix.propTypes = { gridID: React.PropTypes.string, color: React.PropTypes.string, - numCols: React.PropTypes.string, - numRows: React.PropTypes.string + numCols: React.PropTypes.number, + numRows: React.PropTypes.number } diff --git a/src/components/matrixSize.jsx b/src/components/matrixSize.jsx index 9e28637b..bd369701 100644 --- a/src/components/matrixSize.jsx +++ b/src/components/matrixSize.jsx @@ -17,13 +17,14 @@ export default class MatrixSize extends React.Component { this.setState({ numCols: event.target.value }); } handleClick(){ - firebase.database().ref('grids/' + this.state.gridId + '/numRows' ).set(this.state.numRows); - firebase.database().ref('grids/' + this.state.gridId + '/numCols' ).set(this.state.numCols); + firebase.database().ref('grids/' + this.state.gridId + '/numRows' ).set(parseInt(this.state.numRows)); + firebase.database().ref('grids/' + this.state.gridId + '/numCols' ).set(parseInt(this.state.numCols)); this.props.updateGrid(this.state.gridId); } componentDidMount(){ this.setState({gridId: this.props.gridId}); + console.log(this) } render() { From 0a1b966f361c8075e361816decdb001463da5d1d Mon Sep 17 00:00:00 2001 From: seanhansberry Date: Wed, 26 Oct 2016 14:44:27 -0600 Subject: [PATCH 19/21] Update newGrid.jsx Removed extra spaces --- src/components/newGrid.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/newGrid.jsx b/src/components/newGrid.jsx index 572cd5d2..afe5db81 100644 --- a/src/components/newGrid.jsx +++ b/src/components/newGrid.jsx @@ -27,7 +27,6 @@ export default class NewGrid extends React.Component { } handleClick(event){ - manageLogin(this.createGrid); } @@ -64,7 +63,6 @@ export default class NewGrid extends React.Component { } } - NewGrid.propTypes = { changeGrid: React.PropTypes.func - } \ No newline at end of file + } From 3cd7b8119b352be7f24d7e7de7ac9eef21a66e9c Mon Sep 17 00:00:00 2001 From: Zachary Lamb Date: Wed, 26 Oct 2016 15:38:50 -0600 Subject: [PATCH 20/21] Update matrixSize.jsx --- src/components/matrixSize.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/matrixSize.jsx b/src/components/matrixSize.jsx index bd369701..242e9baf 100644 --- a/src/components/matrixSize.jsx +++ b/src/components/matrixSize.jsx @@ -24,7 +24,6 @@ export default class MatrixSize extends React.Component { } componentDidMount(){ this.setState({gridId: this.props.gridId}); - console.log(this) } render() { From 400d7b542216a99a7e3cfee11ed425b5fa04b97f Mon Sep 17 00:00:00 2001 From: Caleb Hsu Date: Wed, 26 Oct 2016 17:03:54 -0600 Subject: [PATCH 21/21] Makes cell size smaller, removes div padding --- src/_base.scss | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/_base.scss b/src/_base.scss index 11da4871..fade505f 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -1,11 +1,13 @@ +.button { + margin: 3px 2px; +} .cell { border: 1px solid rgba(0, 0, 0, 0.3); display: inline-block; - height: 4vw; - margin: 0 3px; - width: 4vw; + height: 2.6vw; + margin: 0; + width: 2.6vw; } - .topBuffer { margin-top: 20px; } @@ -15,11 +17,9 @@ display: inline-block; margin: 20px auto; } - .matrixColumn { display: inline-block; - margin: 0; - padding: 0; + font-size: 0; } /* Palette Styles */ @@ -37,11 +37,23 @@ width: 4.5vw; } +/* Modal Styles */ +.sharedWith { + font-size: 12px; + margin-top: 7px; +} +.modalButton { + margin: 0 5px; +} +.userList { + color: $blue; +} + /* Media Queries */ @media( max-width: 970px ){ .cell { - height: 30px; - width: 30px; + height: 20px; + width: 20px; } .palette { margin: 10px auto;