gbenavid · gbenavid · Aug 12, 2017 · Aug 12, 2017 · Aug 12, 2017 · Aug 12, 2017
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,54 @@
 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 });
+
+      this.shoppingListsRef = database.ref('shopping_list');
+      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}
+                />
+                {
+                  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/NewShoppingList.js b/src/NewShoppingList.js
@@ -0,0 +1,45 @@
+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.push({name: this.state.name });
+  }
+
+  render() {
+    const { name } = this.state;
+
+    return (
+      <form>
+        <input
+          type="text"
+          value={ name }
+          placeholder="Name of List"
+          onChange={(event) => this.setState({ name: event.target.value })}
+        />
+        <button
+          onClick={this.handleSubmit}
+          disabled={!name}
+        >
+          Submit
+        </button>
+      </form>
+    );
+  }
+}
+
+NewShoppingList.propTypes = {
+  restaurantsRef: PropTypes.object
+};
+
+export default NewShoppingList;
diff --git a/src/ShoppingList.js b/src/ShoppingList.js
@@ -0,0 +1,22 @@
+import React, { Component, PropTypes } from 'react';
+
+class ShoppingList extends Component {
+  render () {
+    const { name, user, handleDelete } = this.props;
+    return ( 
+      <article>
+        <h3>{ name }</h3>
+        <button onClick={handleDelete} >Delete</button>
+        <button>Select</button>
+      </article>
+    );
+  }
+}
+
+ShoppingList.propTypes = {
+  name: PropTypes.string.isRequired,
+  user: PropTypes.object,
+  handleDelete: PropTypes.func.isRequired
+};
+
+export default ShoppingList;
diff --git a/src/ShoppingLists.js b/src/ShoppingLists.js
@@ -0,0 +1,40 @@
+import React, { Component, PropTypes } from 'react';
+import { database } from './firebase';
+import ShoppingList from './ShoppingList';
+import map from 'lodash/map';
+
+class ShoppingLists extends Component {
+    constructor(props) {
+        super(props);
+
+        this.handleDelete = this.handleDelete.bind(this);
+      }
+
+
+  handleDelete(key) {
+    const { shoppingListsRef, user } = this.props;
+
+      shoppingListsRef.child(key).remove();
+  }
+
+    render () {
+    const { shoppingLists, user } = this.props;
+    return (
+      <section>
+          { map(shoppingLists, (shoppingList, key) => (
+          <ShoppingList key={key}  user={user} {...shoppingList}      
+            handleDelete={ () => this.handleDelete(key)}
+          />
+          )) }
+      </section>
+    );
+  }
+}
+
+ShoppingLists.propTypes = {
+  user: PropTypes.object,
+  shoppingListsRef: PropTypes.object.isRequired,
+  shoppingLists: PropTypes.object
+};
+
+export default ShoppingLists;
diff --git a/src/Signin.js b/src/Signin.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { auth, googleAuthProvider, githubAuthProvider} from './firebase';
+
+class SignIn extends Component {
+    render() {
+        return (
+            <div className="SignIn">
+                <button onClick={()=> auth.signInWithRedirect(githubAuthProvider)}>
+                    Sign In with Github
+                </button>
+                <button onClick={()=> auth.signInAnonymously() }>
+                    Sign In as a guest
+                </button>
+                <button onClick={()=> auth.signInWithRedirect(googleAuthProvider)}>
+                    Sign In with Google
+                </button>
+            </div>
+        )
+    }
+}
+
+export default SignIn;
diff --git a/src/firebase.js b/src/firebase.js
@@ -0,0 +1,19 @@
+import firebase from 'firebase';
+
+const config = {
+    apiKey: "AIzaSyAJDuGvzzynalAwH23Lxh8F9tYBZnFjXu0",
+    authDomain: "bag-it-up-49697.firebaseapp.com",
+    databaseURL: "https://bag-it-up-49697.firebaseio.com",
+    projectId: "bag-it-up-49697",
+    storageBucket: "",
+    messagingSenderId: "484536466087"
+};
+firebase.initializeApp(config);
+
+export default firebase;
+
+export const database = firebase.database();
+export const auth = firebase.auth();
+export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
+export const githubAuthProvider = new firebase.auth.GithubAuthProvider();
+