Update material example to use material-ui v1, react 16.3, and firebase 5.0.0

Author: Scott Prue

examples/complete/material/.eslintignore

@@ -1,4 +1,4 @@
-coverage/**
+**/coverage/**
 **/node_modules/**
 dist/**
 src/index.html

examples/complete/material/.eslintrc

@@ -25,7 +25,7 @@ rules:
   jsx-quotes: ['error', 'prefer-double']
   prettier/prettier: ['error', {
     singleQuote: true,
-    trailingComma: 'es6',
+    trailingComma: 'none',
     semi: false,
     bracketSpacing: true,
     jsxBracketSameLine: true,

examples/complete/material/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 David Zukowski
+Copyright (c) 2017 testuser
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

examples/complete/material/build/scripts/start.js

@@ -1,6 +1,7 @@
 const logger = require('../lib/logger')
+const config = require('../../project.config')
 
 logger.info('Starting server...')
-require('../../server/main').listen(3000, () => {
-  logger.success('Server is running at http://localhost:3000')
+require('../../server/main').listen(config.port, () => {
+  logger.success(`Server is running at http://localhost:${config.port}`)
 })

examples/complete/material/build/webpack.config.js

@@ -59,22 +59,23 @@ config.module.rules.push({
   test: /\.(js|jsx)$/,
   exclude: [
     /node_modules/,
-    /react-redux-firebase\/es/,
     /redux-firestore\/es/,
+    /react-redux-firebase\/es/
+    // Add other packages that you are npm linking here
   ],
   use: [
     {
       loader: 'babel-loader',
       query: {
         cacheDirectory: true,
-        // Ignore .babelrc file (prevents issue with global babelrc)
+        // ignore root .babelrc (Check issue #59 for more details)
         babelrc: false,
         plugins: [
           'lodash',
           'transform-decorators-legacy',
-          'transform-export-extensions',
           'babel-plugin-transform-class-properties',
           'babel-plugin-syntax-dynamic-import',
+          'babel-plugin-transform-export-extensions',
           [
             'babel-plugin-transform-runtime',
             {
@@ -159,13 +160,22 @@ config.plugins.push(extractStyles)
 
 // Images
 // ------------------------------------
-config.module.rules.push({
-  test: /\.(png|jpg|gif)$/,
-  loader: 'url-loader',
-  options: {
-    limit: 8192
+config.module.rules.push(
+  {
+    test: /\.(png|jpg|gif)$/,
+    loader: 'url-loader',
+    options: {
+      limit: 8192
+    }
+  },
+  {
+    test: /octicons\.css$/,
+    loader: 'url-loader',
+    options: {
+      limit: 8192
+    }
   }
-})
+)
 
 // Fonts
 // ------------------------------------
@@ -207,8 +217,9 @@ config.plugins.push(
 // ------------------------------------
 if (__DEV__) {
   config.entry.main.push(
-    `webpack-hot-middleware/client.js?path=${config.output
-      .publicPath}__webpack_hmr`
+    `webpack-hot-middleware/client.js?path=${
+      config.output.publicPath
+    }__webpack_hmr`
   )
   config.plugins.push(
     new webpack.HotModuleReplacementPlugin(),

examples/complete/material/config/webpack.config.js

@@ -29,7 +29,9 @@ const APP_ENTRY = project.paths.client('main.js')
 webpackConfig.entry = {
   app: __DEV__
     ? [APP_ENTRY].concat(
-        `webpack-hot-middleware/client?path=${project.compiler_public_path}__webpack_hmr`
+        `webpack-hot-middleware/client?path=${
+          project.compiler_public_path
+        }__webpack_hmr`
       )
     : [APP_ENTRY],
   vendor: project.compiler_vendors

examples/complete/material/database.rules.json

@@ -6,6 +6,9 @@
       "$uid": {
         ".write": "auth !== null && $uid === auth.uid"
       }
+    },
+    "projects": {
+      ".indexOn": ["createdBy"]
     }
   }
 }

examples/complete/material/firebase.json

@@ -13,5 +13,10 @@
         "destination": "/index.html"
       }
     ]
+  },
+  "functions": {
+    "predeploy": [
+      "npm --prefix \"$RESOURCE_DIR\" run build"
+    ]
   }
 }

examples/complete/material/package.json

@@ -12,35 +12,40 @@
     "start:simple": "cross-env NODE_ENV=development node build/scripts/start",
     "lint": "eslint .",
     "lint:fix": "npm run lint -- --fix",
-    "format": "prettier --single-quote --no-semi --trailing-comma none --write \"src/**/*.js\""
+    "format": "prettier --single-quote --no-semi --trailing-comma none --write \"src/**/*.js\"",
+    "prepush": "npm run lint"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/testuser/material.git"
   },
+  "engines": {
+    "node": ">=6.11.5"
+  },
   "author": "testuser (https://github.com/testuser)",
   "license": "MIT",
   "dependencies": {
-    "firebase": "^5.0.1",
-    "lodash": "^4.17.4",
-    "material-ui": "^0.19.1",
+    "@material-ui/core": "1.0.0",
+    "@material-ui/icons": "1.0.0",
+    "firebase": "^5.0.3",
+    "lodash": "^4.17.10",
+    "material-ui": "next",
     "normalize.css": "^7.0.0",
     "object-assign": "^4.1.1",
     "promise": "^7.1.1",
-    "prop-types": "^15.6.1",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
+    "prop-types": "^15.5.10",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
     "react-google-button": "^0.3.0",
-    "react-redux": "^5.0.4",
+    "react-redux": "^5.0.7",
     "react-redux-firebase": "*",
     "react-router": "^3.0.0",
-    "react-tap-event-plugin": "^2.0.1",
-    "recompose": "^0.26.0",
+    "recompose": "^0.27.1",
     "redbox-react": "^1.3.6",
-    "redux": "^3.6.0",
+    "redux": "^4.0.0",
     "redux-auth-wrapper": "^1.0.0",
-    "redux-form": "^6.6.1",
-    "redux-form-material-ui": "^4.2.0",
+    "redux-form": "^7.3.0",
+    "redux-form-material-ui": "next",
     "redux-thunk": "^2.2.0",
     "whatwg-fetch": "^2.0.3"
   },
@@ -75,20 +80,20 @@
     "eslint-plugin-react": "^7.0.1",
     "eslint-plugin-standard": "^3.0.1",
     "express": "^4.14.0",
-    "extract-text-webpack-plugin": "^2.1.0",
+    "extract-text-webpack-plugin": "^3.0.0",
     "figures": "^2.0.0",
     "file-loader": "^0.11.1",
     "fs-extra": "^3.0.1",
     "html-webpack-plugin": "^2.29.0",
     "husky": "^0.14.3",
     "ip": "^1.1.5",
     "node-sass": "^4.5.3",
-    "prettier": "^1.5.3",
+    "prettier": "^1.12.1",
     "rimraf": "^2.6.1",
     "sass-loader": "^6.0.5",
     "style-loader": "^0.17.0",
     "url-loader": "^0.5.8",
-    "webpack": "^2.5.1",
+    "webpack": "^3.6.0",
     "webpack-dashboard": "^0.4.0",
     "webpack-dev-middleware": "^1.11.0",
     "webpack-hot-middleware": "^2.13.2",

examples/complete/material/project.config.js

@@ -1,9 +1,12 @@
 const ip = require('ip')
 const NODE_ENV = process.env.NODE_ENV || 'development'
+const PORT = 3000
 
 module.exports = {
   /** The environment to use when building the project */
   env: NODE_ENV,
+  /** The port that is used for local development */
+  port: PORT,
   /** The full path to the project's root directory */
   basePath: __dirname,
   /** The name of the directory containing the application source code */
@@ -13,7 +16,8 @@ module.exports = {
   /** The name of the directory in which to emit compiled assets */
   outDir: 'dist',
   /** The base path for all projects assets (relative to the website root) */
-  publicPath: NODE_ENV === 'development' ? `http://${ip.address()}:3000/` : '/',
+  publicPath:
+    NODE_ENV === 'development' ? `http://${ip.address()}:${PORT}/` : '/',
   /** Whether to generate sourcemaps */
   sourcemaps: true,
   /** A hash map of keys that the compiler should treat as external to the project */
@@ -32,37 +36,5 @@ module.exports = {
     'react-router',
     'react-redux-firebase',
     'material-ui'
-  ],
-  /**
-   * Settings used to create src/config.js using firebase-ci
-   * in ci environment. If you are running locally, go to src/config.js.
-   */
-  ci: {
-    development: {
-      firebase: {
-        apiKey: 'AIzaSyCTUERDM-Pchn_UDTsfhVPiwM4TtNIxots',
-        authDomain: 'redux-firebasev3.firebaseapp.com',
-        databaseURL: 'https://redux-firebasev3.firebaseio.com',
-        storageBucket: 'redux-firebasev3.appspot.com'
-      },
-      reduxFirebase: {
-        userProfile: 'users', // root that user profiles are written to
-        enableLogging: false, // enable/disable Firebase Database Logging
-        updateProfileOnLogin: false // enable/disable updating of profile on login
-      }
-    },
-    production: {
-      firebase: {
-        apiKey: 'AIzaSyCTUERDM-Pchn_UDTsfhVPiwM4TtNIxots',
-        authDomain: 'redux-firebasev3.firebaseapp.com',
-        databaseURL: 'https://redux-firebasev3.firebaseio.com',
-        storageBucket: 'redux-firebasev3.appspot.com'
-      },
-      reduxFirebase: {
-        userProfile: 'users',
-        enableLogging: false,
-        updateProfileOnLogin: false
-      }
-    }
-  }
+  ]
 }

examples/complete/material/src/components/LoadingSpinner/LoadingSpinner.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import CircularProgress from 'material-ui/CircularProgress'
+import CircularProgress from '@material-ui/core/CircularProgress'
 import classes from './LoadingSpinner.scss'
 
 export const LoadingSpinner = ({ size }) => (

examples/complete/material/src/containers/App/App.js

@@ -1,36 +1,23 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { browserHistory, Router } from 'react-router'
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
 import { Provider } from 'react-redux'
-import { Notifications } from 'modules/notification'
+import ThemeSettings from 'theme'
 
-// Themeing/Styling
-import Theme from 'theme'
-import getMuiTheme from 'material-ui/styles/getMuiTheme'
+const theme = createMuiTheme(ThemeSettings)
 
-export default class AppContainer extends Component {
-  static childContextTypes = {
-    muiTheme: PropTypes.object
-  }
+const App = ({ routes, store }) => (
+  <MuiThemeProvider theme={theme}>
+    <Provider store={store}>
+      <Router history={browserHistory}>{routes}</Router>
+    </Provider>
+  </MuiThemeProvider>
+)
 
-  static propTypes = {
-    routes: PropTypes.object.isRequired,
-    store: PropTypes.object.isRequired
-  }
-
-  getChildContext = () => ({
-    muiTheme: getMuiTheme(Theme)
-  })
-
-  render() {
-    const { routes, store } = this.props
-    return (
-      <Provider store={store}>
-        <div>
-          <Router history={browserHistory}>{routes}</Router>
-          <Notifications />
-        </div>
-      </Provider>
-    )
-  }
+App.propTypes = {
+  routes: PropTypes.object.isRequired,
+  store: PropTypes.object.isRequired
 }
+
+export default App

examples/complete/material/src/containers/Navbar/AccountMenu.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Menu from '@material-ui/core/Menu'
+import MenuItem from '@material-ui/core/MenuItem'
+import IconButton from '@material-ui/core/IconButton'
+import AccountCircle from '@material-ui/icons/AccountCircle'
+import { withStyles } from '@material-ui/core/styles'
+
+const styles = {
+  buttonRoot: {
+    color: 'white'
+  }
+}
+
+export const AccountMenu = ({
+  avatarUrl,
+  displayName,
+  goToAccount,
+  onLogoutClick,
+  closeAccountMenu,
+  anchorEl,
+  handleMenu,
+  classes
+}) => (
+  <div>
+    <IconButton
+      aria-owns={anchorEl ? 'menu-appbar' : null}
+      aria-haspopup="true"
+      onClick={handleMenu}
+      classes={{ root: classes.buttonRoot }}>
+      <AccountCircle />
+    </IconButton>
+    <Menu
+      id="menu-appbar"
+      anchorEl={anchorEl}
+      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      open={Boolean(anchorEl)}
+      onClose={closeAccountMenu}>
+      <MenuItem onClick={goToAccount}>Account</MenuItem>
+      <MenuItem onClick={onLogoutClick}>Sign Out</MenuItem>
+    </Menu>
+  </div>
+)
+
+AccountMenu.propTypes = {
+  displayName: PropTypes.string,
+  avatarUrl: PropTypes.string,
+  goToAccount: PropTypes.func.isRequired,
+  onLogoutClick: PropTypes.func.isRequired,
+  anchorEl: PropTypes.object,
+  closeAccountMenu: PropTypes.func.isRequired,
+  handleMenu: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired // from withStyles
+}
+
+export default withStyles(styles)(AccountMenu)