React Intermediate: Importing the Alert Component - [010]

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!