Merge b5d14dc into 9a0ffa7

entaxy-project · Dec 17, 2018 · ace24fa · ace24fa
2 parents 9a0ffa7 + b5d14dc
commit ace24fa
Show file tree

Hide file tree

Showing 38 changed files with 1,162 additions and 203 deletions.
diff --git a/package.json b/package.json
@@ -105,6 +105,7 @@
         "react-number-format": "^4.0.0",
         "react-redux": "^5.1.0",
         "react-router-dom": "^4.3.1",
+        "react-select": "^2.1.2",
         "react-virtualized": "^9.21.0",
         "recompose": "^0.30.0",
         "redux": "^4.0.1",
@@ -194,4 +195,4 @@
     "eslintConfig": {
         "extends": "react-app"
     }
-}
+}
diff --git a/src/common/AutoComplete/__tests__/__snapshots__/index.test.jsx.snap b/src/common/AutoComplete/__tests__/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DateTimeSelect matches snapshot 1`] = `
+<div
+  className="MuiFormControl-root-2"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+>
+  <label
+    className="MuiFormLabel-root-13 MuiFormLabel-filled-17 MuiInputLabel-root-6 MuiInputLabel-formControl-7 MuiInputLabel-animated-10 MuiInputLabel-shrink-9"
+    data-shrink={true}
+  >
+    Date
+  </label>
+  <div
+    className="MuiInputBase-root-33 MuiInput-root-20 MuiInput-underline-24 MuiInputBase-formControl-34 MuiInput-formControl-21"
+    onClick={[Function]}
+  >
+    <input
+      aria-invalid={false}
+      className="MuiInputBase-input-43 MuiInput-input-28"
+      disabled={false}
+      mask={null}
+      name="createdAt"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      pipe={null}
+      readOnly={true}
+      required={false}
+      type="text"
+      value="January 1st 12:00 a.m."
+    />
+  </div>
+  
+</div>
+`;
diff --git a/src/common/AutoComplete/__tests__/index.test.jsx b/src/common/AutoComplete/__tests__/index.test.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import DateTimeSelect from '../'
+
+describe('DateTimeSelect', () => {
+  const mochOnChange = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('matches snapshot', () => {
+    const component = renderer.create((
+      <DateTimeSelect
+        label="Date"
+        name="createdAt"
+        value={new Date('1/1/2018')}
+        onChange={mochOnChange}
+      />
+    ))
+    expect(component.toJSON()).toMatchSnapshot()
+  })
+})
diff --git a/src/common/AutoComplete/index.jsx b/src/common/AutoComplete/index.jsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Select from 'react-select'
+
+const AutoComplete = ({
+  label,
+  name,
+  value,
+  options,
+  onChange
+}) => (
+  <Select
+    placeholder={label}
+    name={name}
+    value={value}
+    options={options}
+    inputProps={{ 'aria-label': label, required: true }}
+    onChange={newValue => onChange(name, newValue.label)}
+    isClearable={true}
+  />
+)
+
+AutoComplete.propTypes = {
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.object.isRequired,
+  options: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default AutoComplete
diff --git a/src/common/DateTimeSelect/index.jsx b/src/common/DateTimeSelect/index.jsx
@@ -13,7 +13,7 @@ const DateTimeSelect = ({
   <MuiPickersUtilsProvider utils={DateFnsUtils}>
     <DateTimePicker
       label={label}
-      inputProps={{ 'aria-label': 'Date', required: true }}
+      inputProps={{ 'aria-label': label, required: true }}
       value={value}
       name={name}
       onChange={newValue => onChange(name, newValue)}

diff --git a/src/common/HandleLogin/index.jsx b/src/common/HandleLogin/index.jsx
@@ -12,7 +12,7 @@ const mapDispatchToProps = (dispatch) => {
 export const HandleLoginComponent = ({ history, handlePendingSignIn }) => {
   if (isSignInPending()) {
     handlePendingSignIn().then(() => {
-      history.push('/')
+      history.push('/transactions')
     })
   }
   return null

diff --git a/src/common/Header/index.jsx b/src/common/Header/index.jsx
@@ -6,26 +6,39 @@ import { withStyles } from '@material-ui/core/styles'
 import Logo from '../Logo/index'
 import LoginButton from '../LoginButton'
 import TopNav from '../TopNav'
+import LeftDrawer from '../../common/LeftDrawer'
 
-const styles = {
+const styles = theme => ({
+  root: {
+    paddingTop: 70,
+    marginLeft: 200
+  },
+  header: {
+    zIndex: theme.zIndex.drawer + 1
+  },
   toolbar: {
     display: 'flex',
     'justify-content': 'space-between'
   }
-}
+})
 
-const Header = ({ classes }) => (
-  <AppBar position="static">
-    <Toolbar className={classes.toolbar}>
-      <Logo />
-      <TopNav />
-      <LoginButton />
-    </Toolbar>
-  </AppBar>
+const Header = ({ classes, children }) => (
+  <div className={classes.root}>
+    <AppBar position="fixed" className={classes.header}>
+      <Toolbar className={classes.toolbar}>
+        <Logo />
+        <TopNav />
+        <LoginButton />
+      </Toolbar>
+    </AppBar>
+    <LeftDrawer />
+    {children}
+  </div>
 )
 
 Header.propTypes = {
-  classes: PropTypes.object.isRequired
+  classes: PropTypes.object.isRequired,
+  children: PropTypes.object.isRequired
 }
 
 export default withStyles(styles)(Header)
diff --git a/src/common/LeftDrawer/index.jsx b/src/common/LeftDrawer/index.jsx
@@ -0,0 +1,176 @@
+/* eslint no-console: 0 */
+import React from 'react'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+import Drawer from '@material-ui/core/Drawer'
+import List from '@material-ui/core/List'
+import ListSubheader from '@material-ui/core/ListSubheader'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import Typography from '@material-ui/core/Typography'
+import Tooltip from '@material-ui/core/Tooltip'
+import DashboardIcon from '@material-ui/icons/Dashboard'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import IconButton from '@material-ui/core/IconButton'
+import AddIcon from '@material-ui/icons/Add'
+import EditIcon from '@material-ui/icons/Edit'
+import Divider from '@material-ui/core/Divider'
+import { NavLink } from 'react-router-dom'
+import grey from '@material-ui/core/colors/grey'
+import { sortedAccountsGroupedByInstitution } from '../../store/accounts/selectors'
+import { selectAccount } from '../../store/settings/actions'
+
+const styles = theme => ({
+  toolbar: theme.mixins.toolbar,
+  drawerPaper: {
+    maxWidth: 200
+  },
+  menuTitle: {
+    margin: '20px'
+  },
+  button: {
+    fontSize: 10,
+    padding: 5,
+    minHeight: 22,
+    marginLeft: 10,
+    width: 50
+  },
+  leftIcon: {
+    marginRight: theme.spacing.unit
+  },
+  iconSmall: {
+    fontSize: 12
+  },
+  noAccounts: {
+    background: grey[100],
+    margin: '0 20px 20px 25px',
+    padding: theme.spacing.unit
+  },
+  institution: {
+    padding: '4px 24px'
+  },
+  account: {
+    padding: '4px 24px 4px 40px'
+  },
+  smallButton: {
+    padding: 4,
+    marginRight: 5
+  },
+  smallIcon: {
+    fontSize: 18
+  }
+})
+
+const mapStateToProps = (state) => {
+  return {
+    groupedAccounts: sortedAccountsGroupedByInstitution(state),
+    selectedAccountId: state.settings.selectedAccountId
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    handleSelectAccount: (accountId) => { dispatch(selectAccount(accountId)) }
+  }
+}
+
+const LeftDrawer = ({
+  classes,
+  groupedAccounts,
+  selectedAccountId,
+  handleSelectAccount
+}) => (
+  <Drawer
+    elevation={3}
+    variant="permanent"
+    classes={{
+      paper: classes.drawerPaper
+    }}
+  >
+    <div className={classes.toolbar} />
+    <List>
+      <ListItem button key="Dashboard">
+        <ListItemIcon><DashboardIcon /></ListItemIcon>
+        <ListItemText primary="Dashboard" />
+      </ListItem>
+    </List>
+    <Divider />
+    <List
+      component="nav"
+      dense={true}
+      subheader={
+        <ListSubheader component="div">
+          Accounts
+          <ListItemSecondaryAction>
+            <Tooltip id="tooltip-icon" title="New account">
+              <IconButton
+                aria-label="New account"
+                className={classes.smallButton}
+                component={NavLink}
+                to="/accounts"
+              >
+                <AddIcon />
+              </IconButton>
+            </Tooltip>
+          </ListItemSecondaryAction>
+        </ListSubheader>
+      }
+    >
+      {groupedAccounts.length === 0 &&
+        <Typography variant="caption" className={classes.noAccounts}>
+          You don&apos;t have any accounts yet
+        </Typography>
+      }
+      <List dense={true}>
+        {Object.keys(groupedAccounts).map(institution => (
+          <div key={institution}>
+            <ListItem className={classes.institution}>
+              <ListItemIcon><DashboardIcon /></ListItemIcon>
+              <ListItemText primary={institution} />
+            </ListItem>
+            <List dense={true}>
+              {groupedAccounts[institution].map(account => (
+                <ListItem
+                  className={classes.account}
+                  button
+                  key={account.id}
+                  selected={account.id === selectedAccountId}
+                  onClick={() => handleSelectAccount(account.id)}
+                >
+                  <ListItemText primary={account.name} secondary="$100.00" />
+                  <ListItemSecondaryAction>
+                    <Tooltip id="tooltip-icon" title="Edit account">
+                      <IconButton aria-label="Edit account" className={classes.smallButton}>
+                        <EditIcon className={classes.smallIcon} />
+                      </IconButton>
+                    </Tooltip>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              ))}
+            </List>
+          </div>
+        ))}
+      </List>
+    </List>
+  </Drawer>
+)
+
+LeftDrawer.propTypes = {
+  classes: PropTypes.object.isRequired,
+  groupedAccounts: PropTypes.object.isRequired,
+  selectedAccountId: PropTypes.string,
+  handleSelectAccount: PropTypes.func.isRequired
+}
+
+LeftDrawer.defaultProps = {
+  selectedAccountId: null
+}
+
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withStyles(styles)
+)(LeftDrawer)
diff --git a/src/common/LoadingOverlay/index.jsx b/src/common/LoadingOverlay/index.jsx
@@ -10,7 +10,7 @@ const styles = {
     left: 0,
     right: 0,
     bottom: 0,
-    'z-index': 1000,
+    zIndex: 10000,
     padding: '1.2rem',
     display: 'flex',
     position: 'fixed',

diff --git a/src/common/LoginButton/__tests__/index.test.jsx b/src/common/LoginButton/__tests__/index.test.jsx
@@ -17,7 +17,7 @@ describe('HandleLogin', () => {
   it('matches snapshot with logged out user', () => {
     const component = renderer.create((
       <LoginButtonComponent
-        user={{ isAuthenticated: false }}
+        user={{ isAuthenticatedWith: null }}
         handleLogin={mochHandleLogin}
         handleLogout={mochHandleLogout}
       />
@@ -28,7 +28,7 @@ describe('HandleLogin', () => {
   it('matches snapshot with logged in user profile', () => {
     const component = renderer.create((
       <LoginButtonComponent
-        user={{ isAuthenticated: true, name: 'Test name', username: 'Test' }}
+        user={{ isAuthenticatedWith: 'blockstack', name: 'Test name', username: 'Test' }}
         handleLogin={mochHandleLogin}
         handleLogout={mochHandleLogout}
         classes={{ ...props }}
@@ -40,7 +40,7 @@ describe('HandleLogin', () => {
   it('handles login', () => {
     const wrapper = mount((
       <LoginButtonComponent
-        user={{ isAuthenticated: false }}
+        user={{ isAuthenticatedWith: null }}
         handleLogin={mochHandleLogin}
         handleLogout={mochHandleLogout}
       />