make use of new .focus() method on formsy-material-ui

py-in-the-sky · Feb 6, 2016 · 1624e94 · 1624e94
1 parent 90a1e7f
commit 1624e94
Show file tree

Hide file tree

Showing 11 changed files with 17,119 additions and 10 deletions.
diff --git a/browser_client/src/app/actions/ActionCreators.js b/browser_client/src/app/actions/ActionCreators.js
@@ -14,6 +14,7 @@ export const subtractLastName      = createAction(T.SUBTRACT_LAST_NAME)
 export const clearServerError      = createAction(T.CLEAR_SERVER_ERROR)
 export const clearNetworkError     = createAction(T.CLEAR_NETWORK_ERROR)
 export const clearServerValidation = createAction(T.CLEAR_SERVER_VALIDATION)
+export const enteredPagePath       = createAction(T.ENTERED_PAGE_PATH)
 
 
 export const addName = createAction(

diff --git a/browser_client/src/app/actions/ActionTypes.js b/browser_client/src/app/actions/ActionTypes.js
@@ -9,4 +9,5 @@ export default {
     NETWORK_ERROR:           'NETWORK_ERROR',
     CLEAR_NETWORK_ERROR:     'CLEAR_NETWORK_ERROR',
     CLEAR_SERVER_VALIDATION: 'CLEAR_SERVER_VALIDATION',
+    ENTERED_PAGE_PATH:       'ENTERED_PAGE_PATH',
 }
diff --git a/browser_client/src/app/components/AddNameForm.js b/browser_client/src/app/components/AddNameForm.js
@@ -37,7 +37,8 @@ export default class AddNameForm extends Component {
         this.clearServerValidation = this.clearServerValidation.bind(this)
         this.setValid = () => this.setState({ isValid: true })
         this.setInvalid = () => this.setState({ isValid: false })
-        this.setNameInput = c => this.nameInput = c
+        this.refNameInput = c => this.nameInput = c
+        this.focus = () => this.nameInput.focus()
     }
 
     render () {
@@ -52,7 +53,7 @@ export default class AddNameForm extends Component {
                 <ShrinkWrap flexDirection="column">
 
                     <FormsyText
-                     ref={this.setNameInput}
+                     ref={this.refNameInput}
                      style={FormsyTextStyle}
                      name="name"
                      required

diff --git a/browser_client/src/app/components/HomePage.js b/browser_client/src/app/components/HomePage.js
@@ -14,12 +14,24 @@ const DefaultTheme   = ThemeManager.getMuiTheme(Themes.Default)
 
 
 export default class HomePage extends Component {
+    constructor (props) {
+        super(props)
+        this.refAddNameForm = c => this.addNameForm = c
+    }
+
     getChildContext () {
         return {
             muiTheme: DefaultTheme,
         }
     }
 
+    componentDidUpdate (prevProps) {
+        const { pageHasEntered } = this.props
+        if (pageHasEntered && !prevProps.pageHasEntered) {
+            this.addNameForm.focus()
+        }
+    }
+
     render () {
         const {
             names,
@@ -41,6 +53,7 @@ export default class HomePage extends Component {
                             </Container>
                             <Container>
                                 <AddNameForm
+                                 ref={this.refAddNameForm}
                                  addName={addName}
                                  serverValidation={serverValidation}
                                  clearServerValidation={clearServerValidation} />
@@ -58,6 +71,7 @@ export default class HomePage extends Component {
 
 
 HomePage.propTypes = {
+    pageHasEntered: PropTypes.bool.isRequired,
     names: ImmutablePropTypes.listOf( PropTypes.shape({
         name: PropTypes.string.isRequired,
     }) ).isRequired,

diff --git a/browser_client/src/app/components/Layout.js b/browser_client/src/app/components/Layout.js
@@ -8,7 +8,13 @@ import { imageMarkup } from 'app/utils/images'
 
 export default class Layout extends Component {
     render () {
-        const { location: { pathname }, children, windowSize } = this.props
+        const {
+            location: { pathname },
+            children,
+            windowSize,
+            enteredPagePath,
+        } = this.props
+
         const imageUrl = imageMarkup(pathname, windowSize)
         const background = imageUrl
             ? `${imageUrl} no-repeat center center fixed`
@@ -25,7 +31,7 @@ export default class Layout extends Component {
                 </ShrinkWrap>
 
                 <Flex>
-                    <PageHandler location={location}>
+                    <PageHandler location={location} enteredPagePath={enteredPagePath}>
                         {children}
                     </PageHandler>
                 </Flex>
@@ -42,4 +48,5 @@ Layout.propTypes = {
     location: PropTypes.shape({
         pathname: PropTypes.string.isRequired,
     }).isRequired,
+    enteredPagePath: PropTypes.func.isRequired,
 }
diff --git a/browser_client/src/app/components/PageHandler.js b/browser_client/src/app/components/PageHandler.js
@@ -4,13 +4,22 @@ import { VelocityTransitionGroup } from 'velocity-react'
 
 
 export default class PageHandler extends Component {
+    constructor (props) {
+        super(props)
+        const complete = () => this.props.enteredPagePath(this.props.location.pathname)
+        this.pageEnter = {
+            ...pageEnter,
+            complete
+        }
+    }
+
     render () {
         const { children, location: { pathname } } = this.props
 
         return (
             <VelocityTransitionGroup
              component="div"
-             enter={pageEnter}
+             enter={this.pageEnter}
              leave={pageLeave}>
 
                 <div key={pathname} style={pageStyle}>
@@ -28,6 +37,7 @@ PageHandler.propTypes = {
     location: PropTypes.shape({
         pathname: PropTypes.string.isRequired,
     }).isRequired,
+    enteredPagePath: PropTypes.func.isRequired,
 }
 
 

diff --git a/browser_client/src/app/containers/HomeApp.js b/browser_client/src/app/containers/HomeApp.js
@@ -6,8 +6,22 @@ import { ActionCreators } from 'app/actions'
 const { addName, clearServerValidation } = ActionCreators
 
 
-const mapStateToProps = ({ names, serverValidation, pendingRequests }) =>
-    ({ names, serverValidation, requestsPending: pendingRequests.size > 0 })
+const mapStateToProps = (state, ownProps) => {
+    const { location: { pathname } } = ownProps
+    const {
+        names,
+        serverValidation,
+        pendingRequests,
+        enteredPagePath,
+    } = state
+
+    return {
+        names,
+        serverValidation,
+        requestsPending: pendingRequests.size > 0,
+        pageHasEntered: pathname === enteredPagePath,
+    }
+}
 
 
 const createApp = () => connect(mapStateToProps, {

diff --git a/browser_client/src/app/containers/LayoutApp.js b/browser_client/src/app/containers/LayoutApp.js
@@ -1,8 +1,11 @@
 import { connect } from 'react-redux'
 import { Layout } from 'app/components'
+import { ActionCreators } from 'app/actions'
 
 
-const createApp = () => connect(({ windowSize }) => ({ windowSize }), null)(Layout)
+const { enteredPagePath } = ActionCreators
+const mapStateToProps = ({ windowSize }) => ({ windowSize })
+const createApp = () => connect(mapStateToProps, { enteredPagePath })(Layout)
 
 
 export default createApp()
diff --git a/browser_client/src/app/reducers/reducers.js b/browser_client/src/app/reducers/reducers.js
@@ -53,3 +53,8 @@ export const windowWidth = handleActions({
 export const windowSize = handleActions({
     [T.WINDOW_DATA]: (_, { payload }) => payload.windowSize,
 }, initialWindowSize)
+
+
+export const enteredPagePath = handleActions({
+    [T.ENTERED_PAGE_PATH]: (_, { payload }) => payload,
+}, null)