Week One.

.gitignore

@@ -0,0 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+build
+coverage

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
+}

.travis.yml

@@ -0,0 +1,23 @@
+language: node_js
+
+node_js:
+  - "7"
+  - "8"
+  - "9"
+
+cache:
+  yarn: true
+  directories:
+    - node_modules
+
+sudo: false
+
+notifications:
+  email: false
+
+script:
+  - yarn test
+  - yarn build
+
+after_success:
+  - yarn run test:coveralls

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Damian Mullins
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,16 @@
+<div align="center">
+<h1>coinage</h1>
+
+<a href="https://www.emojione.com/emoji/1f45b">
+<img height="80" width="80" alt="purse" src="https://raw.githubusercontent.com/damianmullins/coinage/master/purse.png" />
+</a>
+
+<p>Keep track of your coin collection.</p>
+</div>
+
+---
+
+[![Build Status](https://travis-ci.org/DamianMullins/coinage.svg)](https://travis-ci.org/DamianMullins/coinage)
+[![Coverage Status](https://coveralls.io/repos/github/DamianMullins/coinage/badge.svg)](https://coveralls.io/github/DamianMullins/coinage)
+[![Dependency Status](https://gemnasium.com/badges/github.com/DamianMullins/coinage.svg)](https://gemnasium.com/github.com/DamianMullins/coinage)
+

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "coinage",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.js",
+  "keywords": ["coins", "collecting"],
+  "homepage": "https://github.com/DamianMullins/coinage",
+  "repository": "[email protected]:DamianMullins/coinage.git",
+  "author": "Damian Mullins <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "coveralls": "3.0.0",
+    "firebase": "4.12.0",
+    "react": "16.2.0",
+    "react-dom": "16.2.0",
+    "react-scripts": "1.1.1",
+    "react-testing-library": "1.6.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test":
+      "react-scripts test --env=jsdom --testMatch=\"**/?(*.)(spec|test).js?(x)\" --coverage",
+    "test:coveralls": "cat coverage/lcov.info | coveralls",
+    "eject": "react-scripts eject"
+  }
+}

public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      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>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

sandbox.config.json

@@ -0,0 +1,4 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false
+}

src/FirebaseApp.js

@@ -0,0 +1,172 @@
+import React, { Component } from 'react';
+import firebase, { auth, provider } from './config/firebase';
+
+class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      currentItem: '',
+      username: '',
+      items: [],
+      user: null,
+      isLoading: false
+    };
+  }
+
+  componentDidMount() {
+    auth.onAuthStateChanged(user => {
+      if (user) {
+        this.setState({
+          user
+        });
+      }
+    });
+
+    const itemsRef = firebase.database().ref('items');
+
+    itemsRef.on('value', snapshot => {
+      let items = snapshot.val();
+      let newState = [];
+
+      for (let item in items) {
+        newState.push({
+          id: item,
+          title: items[item].title,
+          user: items[item].user
+        });
+      }
+
+      this.setState({
+        items: newState
+      });
+    });
+  }
+
+  logout = () => {
+    this.setState({
+      isLoading: true
+    });
+
+    auth.signOut().then(() => {
+      this.setState({
+        user: null,
+        isLoading: false
+      });
+    });
+  };
+
+  login = () => {
+    this.setState({
+      isLoading: true
+    });
+
+    auth.signInWithPopup(provider).then(result => {
+      const user = result.user;
+      console.log(user);
+      this.setState({
+        user,
+        isLoading: false
+      });
+    });
+  };
+
+  handleChange = e => {
+    this.setState({
+      [e.target.name]: e.target.value
+    });
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+
+    const itemsRef = firebase.database().ref('items');
+    const item = {
+      title: this.state.currentItem,
+      user: this.state.user.displayName || this.state.user.email
+    };
+
+    itemsRef.push(item);
+
+    this.setState({
+      currentItem: '',
+      username: ''
+    });
+  };
+
+  removeItem(itemId) {
+    const itemRef = firebase.database().ref(`/items/${itemId}`);
+
+    itemRef.remove();
+  }
+
+  render() {
+    return (
+      <div className="app">
+        <header>
+          <div className="wrapper">
+            <h1>F {this.state.isLoading ? 'Loading...' : ''}</h1>
+            {this.state.user ? (
+              <button onClick={this.logout}>Log Out</button>
+            ) : (
+              <button onClick={this.login}>Log In</button>
+            )}
+          </div>
+        </header>
+        {this.state.user ? (
+          <div>
+            <div className="user-profile">
+              <img src={this.state.user.photoURL} alt="" />
+            </div>
+
+            <div className="container">
+              <section className="add-item">
+                <form onSubmit={this.handleSubmit}>
+                  <input
+                    type="text"
+                    name="username"
+                    placeholder="What's your name?"
+                    value={this.state.user.displayName || this.state.user.email}
+                  />
+                  <input
+                    type="text"
+                    name="currentItem"
+                    placeholder="What are you bringing?"
+                    onChange={this.handleChange}
+                    value={this.state.currentItem}
+                  />
+                  <button>Add Item</button>
+                </form>
+              </section>
+
+              <section className="display-item">
+                <div className="wrapper">
+                  <ul>
+                    {this.state.items.map(item => {
+                      return (
+                        <li key={item.id}>
+                          <h3>{item.title}</h3>
+                          <p>
+                            brought by: {item.user}
+                            {item.user === this.state.user.displayName ||
+                            item.user === this.state.user.email ? (
+                              <button onClick={() => this.removeItem(item.id)}>
+                                Remove Item
+                              </button>
+                            ) : null}
+                          </p>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              </section>
+            </div>
+          </div>
+        ) : (
+          <p>You must be logged in to see the potluck list and submit to it.</p>
+        )}
+      </div>
+    );
+  }
+}
+export default App;