v2.0.0-rc.1 (#80)

* feat(core): Option added for [`material-ui` v1](https://material-ui-next.com) (will remain an option while [material-ui v1](https://material-ui-next.com) is still in pre-release) * update(deps): `redux-form-material-ui` version pointed to `next` if using `material-ui` v1 * update(deps): `redux-form` updated to `^7.2.0` * feat(test): tests moved to `test` folder * feat(test): mocha configuration/options moved to `mocha.opts` file within `test` folder * feat(test): test added for new `materialv1` option
prescottprue · Jan 2, 2018 · cb869c1 · cb869c1
1 parent 596bd85
commit cb869c1
Show file tree

Hide file tree

Showing 62 changed files with 916 additions and 548 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ npm-debug.log
 .DS_Store
 **/.DS_Store
 examples/dist
+test/tmp
diff --git a/examples/react-firebase-redux/package.json b/examples/react-firebase-redux/package.json
@@ -27,7 +27,8 @@
   "dependencies": {
     "firebase": "^4.6.0",
     "lodash": "^4.17.4",
-    "material-ui": "^0.19.4",
+    "material-ui": "next",
+    "material-ui-icons": "latest",
     "normalize.css": "^7.0.0",
     "object-assign": "^4.1.1",
     "promise": "^7.1.1",
@@ -40,12 +41,12 @@
     "react-router": "^3.0.0",
     "react-tap-event-plugin": "^2.0.1",
     "recompose": "^0.26.0",
+    "redbox-react": "^1.3.6",
     "redux": "^3.6.0",
     "redux-auth-wrapper": "^1.0.0",
-    "redux-form": "^6.6.1",
-    "redux-form-material-ui": "^4.2.0",
+    "redux-form": "^7.2.0",
+    "redux-form-material-ui": "next",
     "redux-thunk": "^2.2.0",
-    "redbox-react": "^1.3.6",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
@@ -66,6 +67,7 @@
     "chai-as-promised": "^6.0.0",
     "chai-enzyme": "^0.6.1",
     "chalk": "^1.1.3",
+    "cheerio": "0.22.0",
     "codecov": "^2.2.0",
     "compression": "^1.6.2",
     "connect-history-api-fallback": "^1.3.0",
@@ -80,8 +82,8 @@
     "eslint-plugin-babel": "^4.1.1",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-node": "^4.2.2",
-    "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-prettier": "^2.1.2",
+    "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-react": "^7.0.1",
     "eslint-plugin-standard": "^3.0.1",
     "express": "^4.14.0",

diff --git a/examples/react-firebase-redux/src/components/LoadingSpinner/LoadingSpinner.js b/examples/react-firebase-redux/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/Progress'
 import classes from './LoadingSpinner.scss'
 
 export const LoadingSpinner = ({ size }) => (

diff --git a/examples/react-firebase-redux/src/config.js b/examples/react-firebase-redux/src/config.js
@@ -21,7 +21,7 @@ export const firebase = {
 export const reduxFirebase = {
   userProfile: 'users', // root that user profiles are written to
   enableLogging: false, // enable/disable Firebase Database Logging
-  useFirestoreForProfile: true, // Save profile to Firestore instead of Real Time Database
+  useFirestoreForProfile: false, // Save profile to Firestore instead of Real Time Database
   // updateProfileOnLogin: false // enable/disable updating of profile on login
   // profileDecorator: (userData) => ({ email: userData.email }) // customize format of user profile
 }

diff --git a/examples/react-firebase-redux/src/containers/App/App.js b/examples/react-firebase-redux/src/containers/App/App.js
@@ -1,13 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { browserHistory, Router } from 'react-router'
-import { withContext } from 'recompose'
-import { Provider } from 'react-redux'
-
-// Themeing/Styling
-import Theme from 'theme'
-import getMuiTheme from 'material-ui/styles/getMuiTheme'
 
+import { Provider } from 'react-redux'
 
 const App = ({ routes, store }) => (
   <Provider store={store}>
@@ -20,9 +15,4 @@ App.propTypes = {
   store: PropTypes.object.isRequired
 }
 
-export default withContext(
-  {
-    muiTheme: PropTypes.object
-  },
-  () => ({ muiTheme: getMuiTheme(Theme) })
-)(App)
+export default App
diff --git a/examples/react-firebase-redux/src/containers/Navbar/AccountMenu.js b/examples/react-firebase-redux/src/containers/Navbar/AccountMenu.js
@@ -1,52 +1,47 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import IconMenu from 'material-ui/IconMenu'
+import Menu, { MenuItem } from 'material-ui/Menu'
 import IconButton from 'material-ui/IconButton'
-import MenuItem from 'material-ui/MenuItem'
-import DownArrow from 'material-ui/svg-icons/hardware/keyboard-arrow-down'
-import Avatar from 'material-ui/Avatar'
-import defaultUserImage from 'static/User.png'
-import classes from './Navbar.scss'
-
-const buttonStyle = { marginRight: '.5rem', width: '200px', height: '64px' }
+import AccountCircle from 'material-ui-icons/AccountCircle'
 
 export const AccountMenu = ({
   avatarUrl,
   displayName,
   goToAccount,
-  onLogoutClick
+  onLogoutClick,
+  closeAccountMenu,
+  anchorEl,
+  handleMenu
 }) => (
-  <IconMenu
-    iconButtonElement={
-      <IconButton style={buttonStyle} disableTouchRipple>
-        <div className={classes.avatar}>
-          <div className="hidden-mobile">
-            <Avatar src={avatarUrl || defaultUserImage} />
-          </div>
-          <div className={classes['avatar-text']}>
-            <span className={`${classes['avatar-text-name']} hidden-mobile`}>
-              {displayName || 'User'}
-            </span>
-            <DownArrow color="white" />
-          </div>
-        </div>
-      </IconButton>
-    }
-    targetOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-    anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
-    animated={false}>
-    <MenuItem primaryText="Account" onTouchTap={goToAccount} />
-    <MenuItem primaryText="Sign out" onTouchTap={onLogoutClick} />
-  </IconMenu>
+  <div>
+    <IconButton
+      aria-owns={anchorEl ? 'menu-appbar' : null}
+      aria-haspopup="true"
+      onClick={handleMenu}
+      color="contrast">
+      <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.muiName = 'IconMenu'
-
 AccountMenu.propTypes = {
   displayName: PropTypes.string,
   avatarUrl: PropTypes.string,
-  goToAccount: PropTypes.func,
-  onLogoutClick: PropTypes.func
+  goToAccount: PropTypes.func.isRequired,
+  onLogoutClick: PropTypes.func.isRequired,
+  anchorEl: PropTypes.object,
+  closeAccountMenu: PropTypes.func.isRequired,
+  handleMenu: PropTypes.func
 }
 
 export default AccountMenu
diff --git a/examples/react-firebase-redux/src/containers/Navbar/LoginMenu.js b/examples/react-firebase-redux/src/containers/Navbar/LoginMenu.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link } from 'react-router'
-import FlatButton from 'material-ui/FlatButton'
+import Button from 'material-ui/Button'
 import { LOGIN_PATH, SIGNUP_PATH } from 'constants'
 import classes from './Navbar.scss'
 
@@ -12,12 +12,12 @@ const buttonStyle = {
 
 export const LoginMenu = () => (
   <div className={classes.menu}>
-    <Link to={SIGNUP_PATH}>
-      <FlatButton label="Sign Up" style={buttonStyle} />
-    </Link>
-    <Link to={LOGIN_PATH}>
-      <FlatButton label="Login" style={buttonStyle} />
-    </Link>
+    <Button style={buttonStyle} component={Link} to={SIGNUP_PATH}>
+      Sign Up
+    </Button>
+    <Button style={buttonStyle} component={Link} to={LOGIN_PATH}>
+      Login
+    </Button>
   </div>
 )
 

diff --git a/examples/react-firebase-redux/src/containers/Navbar/Navbar.enhancer.js b/examples/react-firebase-redux/src/containers/Navbar/Navbar.enhancer.js
@@ -1,5 +1,11 @@
 import { connect } from 'react-redux'
-import { withHandlers, compose, withProps, flattenProp } from 'recompose'
+import {
+  withHandlers,
+  compose,
+  withProps,
+  flattenProp,
+  withStateHandlers
+} from 'recompose'
 import { withFirebase, isEmpty, isLoaded } from 'react-redux-firebase'
 import { ACCOUNT_PATH } from 'constants'
 import { withRouter, spinnerWhileLoading } from 'utils/components'
@@ -13,13 +19,31 @@ export default compose(
   withRouter,
   // Wait for auth to be loaded before going further
   spinnerWhileLoading(['profile']),
+  withStateHandlers(
+    ({ accountMenuOpenInitially = false }) => ({
+      accountMenuOpen: accountMenuOpenInitially,
+      anchorEl: null
+    }),
+    {
+      closeAccountMenu: ({ accountMenuOpen }) => () => ({
+        anchorEl: null
+      }),
+      handleMenu: () => event => ({
+        anchorEl: event.target
+      })
+    }
+  ),
   // Handlers
   withHandlers({
     handleLogout: props => () => {
       props.firebase.logout()
       props.router.push('/')
+      props.closeAccountMenu()
     },
-    goToAccount: props => () => props.router.push(ACCOUNT_PATH)
+    goToAccount: props => () => {
+      props.router.push(ACCOUNT_PATH)
+      props.closeAccountMenu()
+    }
   }),
   withProps(({ auth, profile }) => ({
     authExists: isLoaded(auth) && !isEmpty(auth)

diff --git a/examples/react-firebase-redux/src/containers/Navbar/Navbar.js b/examples/react-firebase-redux/src/containers/Navbar/Navbar.js
@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router'
 import AppBar from 'material-ui/AppBar'
+import Toolbar from 'material-ui/Toolbar'
+import Typography from 'material-ui/Typography'
 import AccountMenu from './AccountMenu'
 import LoginMenu from './LoginMenu'
 import { LIST_PATH } from 'constants'
@@ -12,38 +14,47 @@ export const Navbar = ({
   displayName,
   authExists,
   goToAccount,
-  handleLogout
+  handleLogout,
+  closeAccountMenu,
+  anchorEl,
+  handleMenu
 }) => (
-  <AppBar
-    title={
-      <Link to={authExists ? LIST_PATH : '/'} className={classes.brand}>
+  <AppBar position="static">
+    <Toolbar>
+      <Typography
+        type="title"
+        color="inherit"
+        className={classes.flex}
+        component={Link}
+        to={authExists ? LIST_PATH : '/'}>
         react-firebase-redux
-      </Link>
-    }
-    showMenuIconButton={false}
-    iconElementRight={
-      authExists ? (
+      </Typography>
+      {authExists ? (
         <AccountMenu
           avatarUrl={avatarUrl}
           displayName={displayName}
           onLogoutClick={handleLogout}
           goToAccount={goToAccount}
+          closeAccountMenu={closeAccountMenu}
+          handleMenu={handleMenu}
+          anchorEl={anchorEl}
         />
       ) : (
         <LoginMenu />
-      )
-    }
-    iconStyleRight={authExists ? { marginTop: 0 } : {}}
-    className={classes.appBar}
-  />
+      )}
+    </Toolbar>
+  </AppBar>
 )
 
 Navbar.propTypes = {
   displayName: PropTypes.string, // from enhancer (flattenProps - profile)
   avatarUrl: PropTypes.string, // from enhancer (flattenProps - profile)
   authExists: PropTypes.bool, // from enhancer (withProps - auth)
-  goToAccount: PropTypes.func, // from enhancer (withHandlers - router)
-  handleLogout: PropTypes.func // from enhancer (withHandlers - firebase)
+  goToAccount: PropTypes.func.isRequired, // from enhancer (withHandlers - router)
+  handleLogout: PropTypes.func.isRequired, // from enhancer (withHandlers - firebase)
+  closeAccountMenu: PropTypes.func.isRequired, // from enhancer (withHandlers - firebase)
+  handleMenu: PropTypes.func.isRequired, // from enhancer (withHandlers - firebase)
+  anchorEl: PropTypes.object // from enhancer (withStateHandlers - handleMenu)
 }
 
 export default Navbar
diff --git a/examples/react-firebase-redux/src/containers/Navbar/Navbar.scss b/examples/react-firebase-redux/src/containers/Navbar/Navbar.scss
@@ -68,3 +68,7 @@
     display: none;
   }
 }
+
+.flex {
+  flex: 1 !important;
+}
diff --git a/examples/react-firebase-redux/src/layouts/CoreLayout/CoreLayout.js b/examples/react-firebase-redux/src/layouts/CoreLayout/CoreLayout.js
@@ -2,14 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Navbar from 'containers/Navbar'
 import classes from './CoreLayout.scss'
+import { Notifications } from 'modules/notification'
 import 'styles/core.scss'
 
 export const CoreLayout = ({ children }) => (
   <div className={classes.container}>
     <Navbar />
-    <div className={classes.children}>
-      {children}
-    </div>
+    <div className={classes.children}>{children}</div>
+    <Notifications />
   </div>
 )
 

diff --git a/examples/react-firebase-redux/src/modules/notification/components/Notifications.js b/examples/react-firebase-redux/src/modules/notification/components/Notifications.js
@@ -4,7 +4,9 @@ import { size } from 'lodash'
 import { connect } from 'react-redux'
 import { pure, compose, renderNothing, branch } from 'recompose'
 import Snackbar from 'material-ui/Snackbar'
-import CloseIcon from 'material-ui/svg-icons/navigation/close'
+import IconButton from 'material-ui/IconButton'
+import Fade from 'material-ui/transitions/Fade'
+import CloseIcon from 'material-ui-icons/Close'
 import * as actions from '../actions'
 const closeIconStyle = { paddingTop: '5px', height: '30px' }
 
@@ -14,10 +16,12 @@ export const Notifications = ({ allIds, byId, dismissNotification }) => (
       <Snackbar
         key={id}
         open
-        contentStyle={{ color: 'white' }}
-        bodyStyle={{ paddingRight: 0 }}
-        action={<CloseIcon color="white" style={closeIconStyle} />}
-        onActionTouchTap={() => dismissNotification(id)}
+        transition={Fade}
+        action={
+          <IconButton onClick={() => dismissNotification(id)}>
+            <CloseIcon  color="contrast" style={closeIconStyle} />
+          </IconButton>
+        }
         message={byId[id].message}
       />
     ))}