gbenavid · gbenavid · Aug 12, 2017 · Aug 12, 2017 · Aug 12, 2017 · Aug 12, 2017
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "editor.wordWrap": "on",
+    "files.autoSave" : "onWindowChange",
+    "editor.fontSize": "15"
+}
diff --git a/README.md b/README.md
@@ -1,26 +1,35 @@
 # Bag-It-Up!
 
+#### Stage: Development
+
 ## Overview/ Summary
-This is a web-based application. It's main functionality is to help users track their shopping needs.
+This is a web-based application. It's main functionality is to help users track their shopping needs. 
 
 # Features
-  * *Oauth*: Github, Gmail/ Google, Email, Anonymous/ Guest user login is supported by this app.
-  * *Create a list* to help you track your shopping needs!
-  * *Add items* to your list
-  * *Remove items* from your list
-  * See the *price* (USD)
-  * View the *grand total* of all your items combined
-  * *Buy your items in bulk!* (Want more than one? ⏤we got you 🍫🍪🍰🍟🍦🍕🍮🎂🍭🌮)
+  * __Oauth__: Github, Gmail/ Google, Anonymous/ Guest user login is supported by this app.
+  * __Create a list__ to help you track your shopping needs!
+  * __Remove a list from your account__
+  * __Add items__ to your list
+  * __Remove items__ from your list
+  * See the __prices listed__ (USD)
+  * View the __grand total__ of all your items combined
+  * __Buy your items in bulk!__ (Want more than one? ⏤we got you 🍫🍪🍰🍟🍦🍕🍮🎂🍭🌮)
+
 
 # Prerequisites
 You must have [node installed](https://nodejs.org/en/) in your machine.
 
 To begin [fork the repository](https://help.github.com/articles/fork-a-repo/#platform-linux). 
 
+Next navigate into the folder and run npm install. This will install all the dependencies that you will need for this project.
+```
+cd bag-it-up
+npm install
+```
 # Languages/ Stack
-  * Javascript
-  * React.js
-  * Firebase
+  * ☕️ Javascript ☕️
+  * 💥 React.js 💥
+  * 🔥 Firebase 🔥
 
 
 This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
   "dependencies": {
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
-    "react-scripts": "1.0.11"
+    "react-scripts": "1.0.11",
+    "firebase": "^3.6.10"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>BagItUp</title>
   </head>
   <body>
     <noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,18 +1,55 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { auth, database } from './firebase';
+import CurrentUser from './CurrentUser';
+import SignIn from './Signin';
+import NewShoppingList from './NewShoppingList';
+import ShoppingLists from './ShoppingLists'
 
 class App extends Component {
+  constructor(props){
+    super(props);
+    this.shoppingListsRef = null;
+    this.state = {
+      user: null
+    };
+  }
+
+  componentDidMount() {
+    auth.onAuthStateChanged((user) => { 
+      this.setState({ user });
+       if (user) {
+        this.shoppingListsRef = database.ref('/shopping_list').child(user.uid);
+        this.shoppingListsRef.on('value', (snapshot) => {
+          this.setState({ shoppingLists: snapshot.val() })
+        })}
+
+    })
+  }
+
   render() {
+    const { user, shoppingLists } = this.state;
     return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
+      <div>
+        <div>
+          <h2>Bag It Up!</h2>
         </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+          <div>
+          { user
+            ? <div>
+                <NewShoppingList
+                  shoppingListsRef={this.shoppingListsRef} user={user}
+                  placeholderAttribute={"List name"}
+                />
+                {
+                  shoppingLists &&
+                  <ShoppingLists shoppingLists={shoppingLists} user={user} shoppingListsRef={this.shoppingListsRef}/>
+                }
+                <CurrentUser user={user} />
+              </div>
+            : <SignIn />
+          }
+
+          </div>
       </div>
     );
   }

diff --git a/src/CurrentUser.js b/src/CurrentUser.js
@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+import { auth } from './firebase';
+
+const CurrentUser = ({ user }) => {
+    return (
+        <div>
+            { user.displayName } <br/>
+            <button onClick={ () => auth.signOut() }>
+                Sign Out
+            </button>
+        </div>
+    );
+}
+
+CurrentUser.propTypes = {
+    user: PropTypes.shape({
+        displayName: PropTypes.string,
+        email: PropTypes.string,
+        photoURL: PropTypes.string,
+        uid: PropTypes.string.isRequired
+    })
+}
+
+export default CurrentUser;
diff --git a/src/Item.js b/src/Item.js
@@ -0,0 +1,16 @@
+import React, { Component, PropTypes } from 'react';
+
+class Item extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render () {
+    return (
+      <section>          
+          "Hello, World".
+      </section>
+    );
+  }
+}
+
+export default Item;
diff --git a/src/NewListItem.js b/src/NewListItem.js
@@ -0,0 +1,44 @@
+import React, { Component, PropTypes } from 'react';
+import { database } from './firebase';
+
+class NewListItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      itemName: this.props.itemName
+    };
+    this.listItemRef = database.ref('/shopping_list').child(this.props.user.uid).child(this.props.appendTo);
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+    if (!this.props.content.includes(this.state.itemName)) {
+      this.listItemRef.push({ itemName: this.state.itemName });
+    }
+  }
+
+  render() {
+    const { itemName } = this.state;
+    return (
+      <form>
+        <input 
+          type="text"
+          onChange={ (event)=> this.setState({ itemName: event.target.value })}
+        />
+        <button
+          onClick={(e) => this.handleSubmit(e)} disabled={!itemName}
+        >
+          Submit
+        </button>
+      </form>
+    );
+  }
+}
+
+NewListItem.propTypes = {
+  shoppingListRef: PropTypes.object
+};
+
+export default NewListItem;
diff --git a/src/NewShoppingList.js b/src/NewShoppingList.js
@@ -0,0 +1,44 @@
+import React, { Component, PropTypes } from 'react';
+import { database } from './firebase';
+
+class NewShoppingList extends Component {
+  constructor() {
+    super();
+    this.state = {
+      name: ''
+    };
+    this.shoppingListRef = database.ref('/shopping_list');
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+    this.shoppingListRef.child(this.props.user.uid).push({name: this.state.name });
+  }
+
+  render() {
+    const { name } = this.state;
+    return (
+      <form>
+        <input
+          type="text"
+          value={ name }
+          placeholder={this.props.placeholderAttribute}
+          onChange={(event) => this.setState({ name: event.target.value })}
+        />
+        <button
+          onClick={this.handleSubmit}
+          disabled={!name}
+        >
+          Submit
+        </button>
+      </form>
+    );
+  }
+}
+
+NewShoppingList.propTypes = {
+  shoppingListRef: PropTypes.object
+};
+
+export default NewShoppingList;
diff --git a/src/ShoppingList.js b/src/ShoppingList.js
@@ -0,0 +1,63 @@
+import React, { Component, PropTypes } from 'react';
+import ShowItems from './ShowItems';
+import { database } from './firebase';
+
+class ShoppingList extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      childVisible: false,
+      newlyAppendedListItems: [],
+      currentListName: ""
+    }
+    this.clicked = this.clicked.bind(this);
+  }
+  display(storeItemsArray, ref){
+    var itemsToBeAdded = [];
+    ref.on("value", function(snapshot){
+      for(var i=0; i<snapshot.length-1;i+=1){
+        var childData = snapshot[i].val().itemName;
+        console.log(snapshot);
+        itemsToBeAdded.push(childData);
+      }
+    })
+  }
+
+  clicked(key, marketName){
+    this.setState({childVisible: !this.state.childVisible});
+    this.setState({currentListName: marketName});
+    this.props.toggleItems(key, marketName); // sets state of this.props.content
+    var listRef = database.ref('/shopping_list').child(this.props.user.uid).child(key);
+    this.display(this.props.content, listRef);
+  }
+
+  render () {
+    const { name, user, handleDelete, appendTo } = this.props;
+    const { ref } = database.ref('/shopping_list').child(user.uid).child(appendTo);
+    return ( 
+      <article>
+        <h3>{ name }</h3>
+            <button onClick={ handleDelete }> Delete </button>
+            <button onClick={()=> this.clicked(appendTo, name)}> Select </button> 
+        {
+          this.state.childVisible ?
+            <ShowItems  user={user} 
+                        appendTo={appendTo}
+                        content={this.props.content}
+                        listName={name}
+            />
+          : <span></span>
+        }
+      </article>
+    );
+  }
+}
+
+ShoppingList.propTypes = {
+  name: PropTypes.string.isRequired,
+  user: PropTypes.object,
+  appendTo: PropTypes.string.isRequired,
+  handleDelete: PropTypes.func.isRequired
+};
+
+export default ShoppingList;