In this episode we import the alert component code base from the older react foundation series project. We also make a few modifications to make it work well with our new project.
Importing the Component
Let's begin by importing the javascript file into app/assets/src/components/alert/index.js
import React from 'react'
import css from 'classnames'
import styles from './index.sass'
class Alert extends React.PureComponent {
dismiss = (e) => {
e.preventDefault()
const { onDismiss } = this.props
if (onDismiss) onDismiss()
}
render() {
const { message } = this.props
if (!message) return null
return (
<div className={css('animated slideInDown', styles.alert, styles[message.type])}>
<a href='#' onClick={this.dismiss}>
// We remove the old code and replace it with the {message.body}
{message.body}
</a>
</div>
)
}
}
export default Alert
Next up let's import the SASS file into app/assets/src/components/alert/index.sass
@import 'styles/colors'
.alert
background: #eee
padding: 10px
border-bottom: 3px solid #ccc
z-index: 998
a
color: #555
text-decoration: none
.message
margin: 0
dd
margin-top: 5px
margin-bottom: 5px
margin-left: 10px
.error
background: $base-red
border-bottom: 3px solid $base-dark-red
a
color: white
.notice
background: $base-light-orange
border-bottom: 3px solid $base-dark-orange
a
color: white
Alright! We should be good to go to use this component!
Calling the Component
Let's try and call the component to see if it works. In app/assets/src/pages/auth/sign_in/index.js
// ...
class SignIn extends React.Component {
render() {
// ...
return (
<Auth title="Sign In" extras={extras}>
<Alert message={{body: t('error'), type: 'error'}} />
//..
</Auth>
)
}
}
We should now be able to see the component in the form box. However we want to show the alert at the top of the page, this means we need to make some modification to the Auth page component.
Modifying the Auth page Component
In app/assets/src/components/page/auth.js
// ...
class Auth extends React.PureComponent {
render() {
return (
<div styleName='auth_page_wrapper'>
// Let's add the 'top' prop we can pass in
{this.props.top}
// everything else should be the same
// ...
</div>
)
}
}
We add the this.props.top to the component so we can pass a 'top' prop into it.
Modifying the SignIn Component
Now we just need to pass the Alert component into the top prop of the Auth page component.
// ...
class SignIn extends React.Component {
render() {
const alert = <Alert message={{body: t('error'), type: 'error'}} />
// ...
return (
<Auth title="Sign In" extras={extras} top={alert}>
//..
</Auth>
)
}
}
We should now be able to see the Alert component at the top of our page.
Dynamically Pass in the Message
We need to make sure that the message for the Alert is coming from our auth store.
// ...
class SignIn extends React.Component {
render() {
const { message } = this.props.auth
const alert = <Alert message={message} />
// ...
return (
<Auth title="Sign In" extras={extras} top={alert}>
//..
</Auth>
)
}
}
At this point if the auth store's message changes it will automatically get passed to our Alert component, and if there is no message the Alert component will simply return null . We now need to make some changes to our server side code, take a look at the next Rails API episode on how we do that!