├── src
    ├── index.css
    ├── index.js
    ├── App.test.js
    ├── components
    │   ├── Dashboard.js
    │   ├── Home.js
    │   ├── ImageUpload.js
    │   ├── Register.js
    │   ├── ItemTeaser.js
    │   ├── FormImageUpload.js
    │   ├── FormReactSelect.js
    │   ├── Login.js
    │   ├── Create.js
    │   ├── ImageUpload.txt
    │   ├── List.js
    │   ├── Item.js
    │   ├── index.js
    │   └── CreateEdit.js
    ├── config
    │   └── constants.js
    ├── App.css
    ├── helpers
    │   └── auth.js
    └── assets
    │   └── logo.svg
├── public
    ├── favicon.ico
    └── index.html
├── .gitignore
├── package.json
├── README.md
└── LICENSE


/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 |   font-family: sans-serif;
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/verticalgrain/react-firebase-auth-crud/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './components';
 4 | import './index.css';
 5 | 
 6 | ReactDOM.render(
 7 |   <App />,
 8 |   document.getElementById('root')
 9 | );
10 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | 
5 | it('renders without crashing', () => {
6 |   const div = document.createElement('div');
7 |   ReactDOM.render(<App />, div);
8 | });
9 | 


--------------------------------------------------------------------------------
/src/components/Dashboard.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Dashboard extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div>
 7 |         This is a dashboard
 8 |       </div>
 9 |     )
10 |   }
11 | }


--------------------------------------------------------------------------------
/src/components/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Home extends Component {
 4 |   render () {
 5 |     return (
 6 |       <div>
 7 |         Home. Not Protected. Anyone can see this.
 8 |       </div>
 9 |     )
10 |   }
11 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | node_modules
 5 | 
 6 | # testing
 7 | coverage
 8 | 
 9 | # production
10 | build
11 | 
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log
16 | 
17 | # constants
18 | src/config/.gitignore


--------------------------------------------------------------------------------
/src/config/constants.js:
--------------------------------------------------------------------------------
 1 | import * as firebase from 'firebase';
 2 | import FirebaseImageUploader from 'firebase-image-uploader'
 3 | 
 4 | const config = {
 5 |   apiKey: "",
 6 |   authDomain: "",
 7 |   databaseURL: "",
 8 |   storageBucket: "",
 9 |   messagingSenderId: ""
10 | };
11 | 
12 | firebase.initializeApp(config)
13 | 
14 | export const ref = firebase.database().ref()
15 | 
16 | export const firebaseAuth = firebase.auth


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   animation: App-logo-spin infinite 20s linear;
 7 |   height: 80px;
 8 | }
 9 | 
10 | .App-header {
11 |   background-color: #222;
12 |   height: 150px;
13 |   padding: 20px;
14 |   color: white;
15 | }
16 | 
17 | .App-intro {
18 |   font-size: large;
19 | }
20 | 
21 | @keyframes App-logo-spin {
22 |   from { transform: rotate(0deg); }
23 |   to { transform: rotate(360deg); }
24 | }
25 | 
26 | .App-header ul li {
27 |   display: inline-block;
28 |   color: white;
29 |   padding: 0 20px;
30 | }
31 | 
32 | .App-header a {
33 |   color: white;
34 | }


--------------------------------------------------------------------------------
/src/components/ImageUpload.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | var Dropzone = require('react-dropzone');
 3 | 
 4 | export default class ImageUpload extends Component {
 5 |     
 6 |   onDrop(acceptedFiles, rejectedFiles) {
 7 |     console.log('Accepted files: ', acceptedFiles);
 8 |     console.log('Rejected files: ', rejectedFiles);
 9 |   }
10 | 
11 |   render() {
12 |     return (
13 |         <div>
14 |           <Dropzone onDrop={this.onDrop}>
15 |             <div>Try dropping some files here, or click to select files to upload.</div>
16 |           </Dropzone>
17 |         </div>
18 |     )
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/components/Register.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { auth } from '../helpers/auth'
 3 | 
 4 | export default class Register extends Component {
 5 |   handleSubmit = (e) => {
 6 |     e.preventDefault()
 7 |     auth(this.email.value,this.pw.value)
 8 |   }
 9 |   render() {
10 |     return (
11 |       <form onSubmit={this.handleSubmit}>
12 |         <input className="form-control" ref={(email) => this.email = email} placeholder="Email"/>
13 |         <input type="password" className="form-control" placeholder="Password" ref={(pw) => this.pw = pw} />
14 |         <button type="submit" className="btn btn-primary">Register</button>
15 |       </form>
16 |     )
17 |   }
18 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mixmeals",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "devDependencies": {
 6 |     "react-scripts": "0.8.5"
 7 |   },
 8 |   "dependencies": {
 9 |     "firebase": "^3.6.5",
10 |     "react": "^15.4.2",
11 |     "react-dom": "^15.4.2",
12 |     "react-dropzone": "^3.9.2",
13 |     "react-firebase": "^2.0.2",
14 |     "react-firebase-file-uploader": "^2.1.1",
15 |     "react-form": "^1.0.0-beta.1",
16 |     "react-router": "^4.0.0-alpha.5",
17 |     "react-select": "^1.0.0-rc.2"
18 |   },
19 |   "scripts": {
20 |     "start": "react-scripts start",
21 |     "build": "react-scripts build",
22 |     "test": "react-scripts test --env=jsdom",
23 |     "eject": "react-scripts eject"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/ItemTeaser.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { Match, BrowserRouter, Link, Miss, Redirect } from 'react-router'
 3 | 
 4 | class Item extends Component {
 5 |   constructor (props) {
 6 |     super(props);
 7 |     this.state = {
 8 |       id: props.dbkey,
 9 |       title: props.title,
10 |       text: props.text,
11 |       pathname: props.pathname
12 |     };
13 |     
14 |   }
15 | 
16 |   render(){
17 |     return (
18 |       <div className="{this.state.id}">
19 |         <pre>{JSON.stringify(this.state.id, null, 2)}</pre>
20 |         <Link to={`${this.state.pathname}/${this.state.id}`}>{this.state.title}</Link>
21 |         <div>{ this.state.title }</div>
22 |         <br/>
23 |         <div>{ this.state.text }</div>
24 |       </div>
25 |     );
26 |   }
27 | }
28 | 
29 | 
30 | export default Item;


--------------------------------------------------------------------------------
/src/components/FormImageUpload.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | var Dropzone = require('react-dropzone');
 3 | import { FormInput } from 'react-form'
 4 | 
 5 | export default class FormImageUpload extends Component {
 6 |   constructor (props) {
 7 |     super(props);
 8 |     this.state = {
 9 |       field: props.field
10 |     }
11 |   }
12 | 
13 |   onDrop(acceptedFiles, rejectedFiles) {
14 |     console.log('Accepted files: ', acceptedFiles);
15 |     console.log('Rejected files: ', rejectedFiles);
16 |   }
17 | 
18 |   render() {
19 |     return (
20 |         <div>
21 |           <FormInput field={this.state.field}>
22 |             {({ onDrop }) => {
23 |               return (
24 |                 <Dropzone onDrop={this.onDrop}>
25 |                   <div>Try dropping some files here, or click to select files to upload.</div>
26 |                 </Dropzone>
27 |               )
28 |             }}
29 |           </FormInput>
30 |         </div>
31 |     )
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/FormReactSelect.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { FormInput } from 'react-form'
 3 | import { Creatable } from 'react-select'
 4 | import 'react-select/dist/react-select.css'
 5 | 
 6 | export default class FormReactSelect extends Component {
 7 |   constructor (props) {
 8 |     super(props);
 9 |     this.state = {
10 |       field: props.field,
11 |       multi: props.multi,
12 |       options: props.options,
13 |     }
14 |   }
15 | 
16 |   render() {
17 |     return (
18 |       <div>
19 |         <FormInput field={this.state.field}>
20 |           {({ setValue, getValue, setTouched }) => {
21 |             return (
22 |               <Creatable
23 |                 field={this.state.field}
24 |                 options={this.state.options}
25 |                 multi={this.state.multi}
26 |                 value={getValue()} 
27 |                 onChange={val => setValue(val)} 
28 |                 onBlur={() => setTouched()} 
29 |               />
30 |             )
31 |           }}
32 |         </FormInput>
33 |       </div>
34 |     )
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
 2 | 
 3 | Thanks to SimonKib for [this helpful SO thread about React / Firebase CRUD](http://stackoverflow.com/questions/35493490/is-there-a-simple-crud-example-app-using-react-js-and-firebase#answer-39932105), and Tyler McGinnis for [this helpful example of Authentication and Routing](https://github.com/tylermcginnis/react-router-firebase-auth)
 4 | 
 5 | ## Setup Instructions
 6 | 
 7 | * If you don't have it already, get create-react-app:
 8 | 
 9 | ```javascript
10 | npm install -g create-react-app
11 | ```
12 | 
13 | * And create a new project:
14 | 
15 | ```
16 | create-react-app my-app
17 | ```
18 | 
19 | * Replace the src directory of your new app with this src directory
20 | * In src directory, install node modules:
21 | ```
22 | npm install
23 | ```
24 | 
25 | * Start the app on http://localhost:3000
26 | ```
27 | npm start
28 | ```
29 | 
30 | * If you don't have a Firebase account already, create one for free at https://firebase.google.com
31 | * Customize Firebase config details in src/config/constants.js


--------------------------------------------------------------------------------
/src/components/Login.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { login, loginOauth } from '../helpers/auth'
 3 | 
 4 | export default class Login extends Component {
 5 |   handleSubmit = (e) => {
 6 |     e.preventDefault();
 7 |     login(this.email.value, this.pw.value)
 8 |   }
 9 |   handleClickOauth = (e) => {
10 |     e.preventDefault();
11 |     loginOauth(e.target.id);
12 |   }
13 |   render() {
14 |     return (
15 |       <div>
16 |         <form onSubmit={this.handleSubmit}>
17 |           <input className="" ref={(email) => this.email = email} placeholder="Email"/>
18 |           <input type="password" placeholder="Password" ref={(pw) => this.pw = pw} />
19 |           <button type="submit">Login</button>
20 |         </form>
21 |         <button id="google" href="#" className="" onClick={this.handleClickOauth}>Login with Google</button>
22 |         <button id="facebook" href="#" className="" onClick={this.handleClickOauth}>Login with facebook</button>
23 |         <button id="twitter" href="#" className="" onClick={this.handleClickOauth}>Login with twitter</button>
24 | 
25 |       </div>
26 |     )
27 |   }
28 | }


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


--------------------------------------------------------------------------------
/src/components/Create.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { ref } from '../config/constants'
 3 | import { firebaseAuth } from '../config/constants'
 4 | 
 5 | export default class Create extends Component {
 6 |   constructor () {
 7 |     super();
 8 |     this.state = {
 9 |       newitemtext : ''
10 |     }
11 |     this.dbItems = ref.child('items');
12 |     this.onNewItemChange = this.onNewItemChange.bind(this);
13 |     this.handleNewItemSubmit = this.handleNewItemSubmit.bind(this);
14 |   }
15 | 
16 |   handleNewItemSubmit(e) {
17 |     e.preventDefault();
18 |     if (this.state.newitemtext && this.state.newitemtext.trim().length !== 0) {
19 |       this.dbItems.push({
20 |         title: this.state.newitemtext
21 |       });
22 |       this.setState({
23 |         newitemtext: ''
24 |       });
25 |     }
26 |   }
27 | 
28 |   onNewItemChange(e) {
29 |     this.setState({newitemtext: e.target.value});
30 |   }
31 | 
32 |   render () {
33 |     return (
34 |       <form onSubmit={ this.handleNewItemSubmit }>
35 |         <input 
36 |           onChange={ this.onNewItemChange } 
37 |           value={ this.state.newitemtext } 
38 |         />
39 |         <button>Add New</button>
40 |       </form>
41 |     )
42 |   }
43 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 7 |     <!--
 8 |       Notice the use of %PUBLIC_URL% in the tag above.
 9 |       It will be replaced with the URL of the `public` folder during the build.
10 |       Only files inside the `public` folder can be referenced from the HTML.
11 | 
12 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13 |       work correctly both with client-side routing and a non-root public URL.
14 |       Learn how to configure a non-root public URL by running `npm run build`.
15 |     -->
16 |     <title>React App</title>
17 |   </head>
18 |   <body>
19 |     <div id="root"></div>
20 |     <!--
21 |       This HTML file is a template.
22 |       If you open it directly in the browser, you will see an empty page.
23 | 
24 |       You can add webfonts, meta tags, or analytics to this file.
25 |       The build step will place the bundled scripts into the <body> tag.
26 | 
27 |       To begin the development, run `npm start`.
28 |       To create a production bundle, use `npm run build`.
29 |     -->
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/src/helpers/auth.js:
--------------------------------------------------------------------------------
 1 | import { ref, firebaseAuth } from '../config/constants'
 2 | 
 3 | export function auth (email, pw) {
 4 |   return firebaseAuth().createUserWithEmailAndPassword(email, pw)
 5 |     .then(saveUser)
 6 |     .catch((error) => console.log('Oops', error))
 7 | }
 8 | 
 9 | export function logout() {
10 |   return firebaseAuth().signOut()
11 | }
12 | 
13 | export function login (email,pw) {
14 |   return firebaseAuth().signInWithEmailAndPassword(email, pw)
15 | }
16 | 
17 | export function loginOauth(oauthId) {
18 | 
19 |   switch(oauthId) {
20 |     case 'google':
21 |       var provider = new firebaseAuth.GoogleAuthProvider();
22 |       loginPopup(provider);
23 |       break;
24 |     case 'facebook':
25 |       provider = new firebaseAuth.FacebookAuthProvider();
26 |       loginPopup(provider);
27 |       console.log('facebook')
28 |       break;
29 |     case 'twitter':
30 |       provider = new firebaseAuth.TwitterAuthProvider();
31 |       loginPopup(provider);
32 |       break;
33 |   }
34 | }
35 | 
36 | export function loginPopup(provider){
37 |   return firebaseAuth().signInWithPopup(provider).then(function(result) {
38 |     console.log('logged in')
39 |   }).catch(function(error) {
40 |     console.log(error)
41 |   });    
42 | }
43 | 
44 | export function saveUser(user) {
45 |   return ref.child('users/${user.uid}/info')
46 |     .set({
47 |       email: user.email,
48 |       uid: user.uid
49 |     }) 
50 |     .then(() => user)
51 | }


--------------------------------------------------------------------------------
/src/components/ImageUpload.txt:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import firebase from 'firebase'
 3 | import FileUploader from 'react-firebase-file-uploader'
 4 | 
 5 | class ImageUpload extends Component {
 6 |   state = {
 7 |     image: '',
 8 |     isUploading: false,
 9 |     progress: 0,
10 |     imageUrl: ''
11 |   }
12 | 
13 |   handleUploadStart = () => this.setState({isUploading: true, progress: 0});
14 |   handleProgress = (progress) => this.setState({progress});
15 |   handleUploadError = (error) => {
16 |       this.setState({isUploading: false});
17 |       console.error(error);
18 |   }
19 |   handleUploadSuccess = (filename) => {
20 |     this.setState({image: filename, progress: 100, isUploading: false});
21 |     firebase.storage().ref('images').child(filename).getDownloadURL().then(url => this.setState({imageUrl: url}));    
22 |   };
23 |  
24 |   render() {
25 |     return (
26 |       <div>
27 |         <label>Image:</label>
28 |         {this.state.isUploading &&
29 |           <p>Progress: {this.state.progress}</p>
30 |         }
31 |         {this.state.imageUrl &&
32 |           <img src={this.state.imageUrl} />
33 |         }
34 |         <FileUploader
35 |           accept="image/*"
36 |           name="image"
37 |           randomizeFilename
38 |           storageRef={firebase.storage().ref('images')}
39 |           onUploadStart={this.handleUploadStart}
40 |           onUploadError={this.handleUploadError}
41 |           onUploadSuccess={this.handleUploadSuccess}
42 |           onProgress={this.handleProgress}
43 |         />
44 |       </div>
45 |     );
46 |   }
47 | }
48 |  
49 | export default ImageUpload;


--------------------------------------------------------------------------------
/src/components/List.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { ref } from '../config/constants'
 3 | import { firebaseAuth } from '../config/constants'
 4 | import { Match, Link } from 'react-router'
 5 | import Item from './Item'
 6 | import ItemTeaser from './ItemTeaser'
 7 | 
 8 | export default class List extends Component {
 9 |   constructor (props) {
10 |     super();
11 |     this.state = {
12 |       items: [],
13 |       pathname: props.pathname
14 |     }
15 |     this.dbItems = ref.child('items');
16 |     this.removeItem = this.removeItem.bind(this);
17 |   }
18 | 
19 |   componentDidMount() {
20 |     this.dbItems.on('value', dataSnapshot => {
21 |       var items = [];
22 | 
23 |       dataSnapshot.forEach(function(childSnapshot) {
24 |         var item = childSnapshot.val();
25 |         item['.key'] = childSnapshot.key;
26 |         items.push(item);
27 |       });
28 | 
29 |       this.setState({
30 |         items: items
31 |       });
32 |     });
33 |   }
34 | 
35 |   componentWillUnmount() {
36 |     this.dbItems.off();
37 |   }
38 | 
39 |   removeItem(key){
40 |     this.dbItems.child(key).remove();
41 |   }
42 | 
43 |   render () {
44 |     var _this = this;
45 | 
46 |     return (
47 |       <div>
48 |         <ul>
49 |           {this.state.items.map(function(item) {
50 |             return (
51 |               <li key={ item['.key'] }>
52 |                 <ItemTeaser pathname={_this.state.pathname} dbkey={item['.key']} title={item.title} text={item.text}  />
53 |               </li>
54 |             );
55 |           })}
56 |         </ul>
57 |         
58 |       
59 |       </div>
60 |     )
61 |   }
62 | }


--------------------------------------------------------------------------------
/src/components/Item.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { ref } from '../config/constants'
 3 | import { firebaseAuth } from '../config/constants'
 4 | import * as firebase from 'firebase';
 5 | 
 6 | class Item extends Component {
 7 |   constructor (props) {
 8 |     super(props);
 9 |     this.state = {
10 |       id: props.params.itemid,
11 |       title: 'loading',
12 |       text: 'loading',
13 |     };
14 |     this.theItem = ref.child('items/'+this.state.id);
15 | 
16 |     this.removeItem = this.removeItem.bind(this);
17 |     this.itemChange = this.itemChange.bind(this);
18 |     this.handleUpdateItem = this.handleUpdateItem.bind(this);
19 | 
20 |   }
21 | 
22 |   itemChange(e) {
23 |     this.setState({ [e.target.name]: e.target.value })
24 |   }
25 | 
26 |   handleUpdateItem(e) {
27 |     e.preventDefault();
28 |     console.log('attempting to update')
29 |     // if (this.state.title && this.state.title.trim().length !== 0) {
30 |     this.theItem.update(this.state);
31 |     // }
32 | 
33 |   }
34 | 
35 |   removeItem(key){
36 |     this.theItem.remove();
37 |   }
38 | 
39 |   componentDidMount = () =>  {
40 |     const item = {};
41 | 
42 |     this.theItem.on('value', dataSnapshot => {
43 | 
44 |       dataSnapshot.forEach(function(childSnapshot) {
45 |         item[childSnapshot.key] = childSnapshot.val()
46 |       });
47 |       
48 |       this.setState({
49 |         title: item['title'],
50 |         text: item['text']
51 |       })
52 | 
53 |     })
54 | 
55 |   }
56 | 
57 |   render(){
58 |     var _this = this;
59 | 
60 |     return (
61 |         <div>
62 |           <form onSubmit={ this.handleUpdateItem }>
63 |             <label htmlFor={'title' + this.state.id}>Title </label>
64 |             <input
65 |               id={'title' + this.state.id}
66 |               type="text"
67 |               name="title"
68 |               value={this.state.title}
69 |               onChange={this.itemChange}
70 |             />
71 |             <br/>
72 |             <label htmlFor={'text' + this.state.id}>Text </label>
73 |             <textarea
74 |               id={'text' + this.state.id}
75 |               type="textarea"
76 |               name="text"
77 |               value={this.state.text}
78 |               onChange={this.itemChange}
79 |             />
80 |             <br/>
81 |             <button>Save</button>
82 |           </form>
83 |           <a onClick={ _this.removeItem.bind(null, this.state.id) }>Delete</a>
84 |         </div>
85 |     );
86 |   }
87 | }
88 | 
89 | export default Item;


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
  1 | // eslint-disable-next-line
  2 | import React, { Component } from 'react';
  3 | import { Match, BrowserRouter, Link, Miss, Redirect } from 'react-router'
  4 | import Login from './Login'
  5 | import Register from './Register'
  6 | import { logout } from '../helpers/auth'
  7 | import { firebaseAuth } from '../config/constants'
  8 | import logo from '../assets/logo.svg';
  9 | import Home from './Home'
 10 | import Dashboard from './Dashboard'
 11 | import List from './List'
 12 | import Create from './Create'
 13 | import Item from './Item'
 14 | import CreateEdit from './CreateEdit'
 15 | import '../App.css';
 16 | 
 17 | function MatchWhenAuthed ({component: Component, authed, ...rest}) {
 18 |   return (
 19 |     <Match
 20 |       {...rest}
 21 |       render={(props) => authed === true
 22 |         ? <Component {...props} />
 23 |         : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
 24 |     />
 25 |   )
 26 | }
 27 | 
 28 | function MatchWhenUnauthed ({component: Component, authed, ...rest}) {
 29 |   return (
 30 |     <Match
 31 |       {...rest}
 32 |       render={(props) => authed === false
 33 |         ? <Component {...props} />
 34 |         : <Redirect to='/dashboard' />}
 35 |     />
 36 |   )
 37 | }
 38 | 
 39 | export default class App extends Component {
 40 |   constructor () {
 41 |     super();
 42 |     this.state = {
 43 |       authed: false,
 44 |       loading: true,
 45 |     }
 46 |   }
 47 | 
 48 |   componentDidMount () {
 49 |     this.removeListener = firebaseAuth().onAuthStateChanged((user) => {
 50 |       if (user) {
 51 |         this.setState({
 52 |           authed: true,
 53 |           loading: false,
 54 |         })
 55 |       } else {
 56 |         this.setState({
 57 |           loading: false
 58 |         })
 59 |       }
 60 |     })
 61 |   }
 62 |   componentWillUnmount () {
 63 |     this.removeListener()
 64 |   }
 65 | 
 66 |   render() {
 67 |     const pathname = '';
 68 |     return (
 69 |       <BrowserRouter>
 70 |         {({router}) => (
 71 |           <div className="App">
 72 |             <div className="App-header">
 73 |               <img src={logo} className="App-logo" alt="logo" />
 74 |               <h2>
 75 |                 App
 76 |               </h2>
 77 |               <ul className="nav">
 78 |                 <li>
 79 |                   <Link to="/items" className="nav__item">All Items</Link>
 80 |                 </li>
 81 |                 <li>
 82 |                   <Link to="/create" className="nav__item">Create Item</Link>
 83 |                 </li>
 84 |                 <li>
 85 |                   <Link to="/dashboard" className="nav__item">Dashboard</Link>
 86 |                 </li>
 87 |                 <li>
 88 |                   {this.state.authed
 89 |                     ? <button
 90 |                         onClick={() => {
 91 |                           logout()
 92 |                           this.setState({authed: false})
 93 |                           router.transitionTo('/')
 94 |                         }}
 95 |                         className="nav__item">Logout</button>
 96 |                     : <span>
 97 |                         <Link to="/login" className="nav__item">Login</Link> /
 98 |                         <Link to="/register" className="nav__item"> Register</Link>
 99 |                       </span>}
100 |                 </li>
101 |               </ul>
102 |             </div>
103 |             <Match pattern='/' exactly component={Home} />
104 |             
105 |             <Match pattern="/items" exactly component={List} />
106 |             <Match pattern="/items/:itemid" component={Item} />
107 |             <Match authed={this.state.authed} pattern='/edit' component={CreateEdit} />
108 |             <Match authed={this.state.authed} pattern='/create' component={CreateEdit} />
109 | 
110 |             <MatchWhenUnauthed authed={this.state.authed} pattern='/login' component={Login} />
111 |             <MatchWhenUnauthed authed={this.state.authed} pattern='/register' component={Register} />
112 |             <MatchWhenAuthed authed={this.state.authed} pattern='/dashboard' component={Dashboard} />
113 | 
114 |             <Miss render={() => <h3>Oops, there doesnt seem to be a page here</h3>} />
115 |           </div>
116 |         )}
117 |       </BrowserRouter>
118 |     );
119 |   }
120 | }


--------------------------------------------------------------------------------
/src/components/CreateEdit.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { ref } from '../config/constants'
  3 | import { Form, Text, Textarea, Radio, FormError } from 'react-form';
  4 | import FormReactSelect from './FormReactSelect'
  5 | import FormImageUpload from './FormImageUpload'
  6 | 
  7 | export default class CreateEdit extends Component {
  8 |   constructor () {
  9 |     super();
 10 |     this.state = {
 11 |       newitemtext : ''
 12 |     }
 13 |     this.dbItems = ref.child('items');
 14 |     this.options = [
 15 |       { value: 'one', label: 'One' },
 16 |       { value: 'two', label: 'Two' }
 17 |     ]
 18 |   }
 19 | 
 20 | 
 21 |   render () {
 22 |     return (
 23 | 
 24 |       <Form
 25 |           onSubmit={(values) => {
 26 |             this.dbItems.push(values);
 27 |           }}
 28 |           defaultValues={{
 29 |             ingredients: [],
 30 |             instructions: []
 31 |           }}
 32 |           validate={values => {
 33 |             const { name, ingredients, instructions, tags, description, image, credit } = values
 34 |             return {
 35 |               name: !name ? 'A name is required' : undefined,
 36 |               ingredients: (!ingredients || !ingredients.length) ? 'You need at least one ingredient' : ingredients.map(ingredient => {
 37 |                 const { name } = ingredient
 38 |                 return {
 39 |                   name: !name ? 'An ingredient name is required' : undefined,
 40 |                 }
 41 |               }),
 42 |               instructions: (!instructions || !instructions.length) ? 'You must add at least 1 instruction' : false,
 43 |             }
 44 |           }}
 45 |         >
 46 | 
 47 |           {({values, submitForm, addValue, removeValue, getError}) => {
 48 |             return (
 49 |               <form onSubmit={submitForm}>
 50 |                 <Text field='name' placeholder='Recipe Name' />
 51 |                 <FormError field='ingredients' />
 52 | 
 53 |                 <div className='nested'>
 54 |                   {!values.ingredients.length ? (
 55 |                     <em>No ingredients have been added yet</em>
 56 |                   ) : values.ingredients.map((ingredients, i) => ( // Loop over the values however you'd like
 57 |                     <div key={i}>
 58 | 
 59 |                       <div>
 60 |                         <h6>Ingredient Name</h6>
 61 |                         <Text
 62 |                           field={['ingredients', i, 'name']} 
 63 |                           placeholder='Ingredient Name'
 64 |                         />
 65 |                       </div>
 66 |                       <div>
 67 |                         <h6>Ingredient Quantity</h6>
 68 |                         <Text
 69 |                           field={['ingredients', i, 'quantity']} 
 70 |                           placeholder='Ingredient Quantity'
 71 |                         />
 72 |                       </div>
 73 |                       <div>
 74 |                         <h6>Ingredient Unit</h6>
 75 |                         <FormReactSelect
 76 |                           name="tags"
 77 |                           field={`ingredients.${i}.unit`}
 78 |                           options={this.options}
 79 |                           multi={false}
 80 |                         />
 81 |                       </div>
 82 | 
 83 |                       <button 
 84 |                         type='button'
 85 |                         onClick={() => removeValue('ingredients', i)} 
 86 |                       >
 87 |                         Remove Ingredient
 88 |                       </button>
 89 | 
 90 |                     </div>
 91 |                   ))}
 92 |                 </div>
 93 | 
 94 |                 <div>
 95 |                   <button 
 96 |                     type='button'
 97 |                     onClick={() => addValue('ingredients', {})}
 98 |                   >
 99 |                     Add Ingredient
100 |                   </button>
101 |                 </div>
102 | 
103 |                 <div className='nested'>
104 |                   {!values.instructions.length ? (
105 |                     <em>No instructions have been added yet</em>
106 |                   ) : values.instructions.map((instructions, i) => ( // Loop over the values however you'd like
107 |                     <div key={i}>
108 | 
109 |                       <div>
110 |                         <h6>Instruction</h6>
111 |                         <Textarea
112 |                           field={['instructions', i, 'instruction']} 
113 |                           placeholder='Instruction'
114 |                         />
115 |                       </div>
116 | 
117 |                       <button 
118 |                         type='button'
119 |                         onClick={() => removeValue('instructions', i)} 
120 |                       >
121 |                         Remove Instruction
122 |                       </button>
123 | 
124 |                     </div>
125 |                   ))}
126 |                 </div>
127 | 
128 |                 <div>
129 |                   <button
130 |                     type='button'
131 |                     onClick={() => addValue('instructions', {})}
132 |                   >
133 |                     Add Instruction
134 |                   </button>
135 |                 </div>
136 | 
137 |                 <FormReactSelect
138 |                   name="tags"
139 |                   field="tags"
140 |                   options={this.options}
141 |                   multi={true}
142 |                 />
143 | 
144 |                 <Textarea field='description' placeholder='Recipe Description'>
145 |                 </Textarea>
146 |                 
147 |                 <FormImageUpload field="image" />
148 | 
149 |                 <button type='submit'>Submit</button>
150 | 
151 |                 <input type="hidden" name="authorid" id="authorid" value="" /> 
152 |               </form>
153 |             )
154 |           }}
155 |         </Form>
156 | 
157 |     )
158 |   }
159 | }


--------------------------------------------------------------------------------