Review and NoteHerder

Wednesday, May 31, 2017

Lecture Videos

Morning:

Afternoon:

Topics

Homework Showcase

Morning

Afternoon

Noteherder

Noteherder is a note-taking app built with a React front-end. It utilizes Firebase as back-end for authentication and data storage. Much of the basic functionality is similar to ThingList - it renders a list of notes (aka things), with the ability to create, read, update, and delete notes. Also, like ThingList, it uses Github OAuth authentication for user sign-in and allowing for scoping of notes to users.

However, there are many new concepts as well. We’ll go over some of those here.

Private and Public Routes

We are already familiar with the <Route /> component provided by React Router, but what if we want to create specialized routes that only allow access based on the presence of an authorized user? We can use the concept of composition to create specialized versions of <Route /> that we’ll call <PrivateRoute /> and <PublicRoute />.

RouteHelpers.js



export function PrivateRoute({component: Component, render, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed
        ? (render && render()) || <Component {...props} />
        : <Redirect to={{pathname: '/sign-in', state: {from: props.location}}} />}
    />
  )
}

export function PublicRoute({component: Component, render, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => !authed
        ? (render && render()) || <Component {...props} />
        : <Redirect to='/notes' />}
    />
  )
}

Let’s talk through the code for PrivateRoute. As you can see, it is essentially a stateless functional component that is a wrapper around a Route component. In the Route’s render method is a ternary statement that checks whether there is a valid user passed to it (the authed prop).

If there is an authed user, the Route does one of two things - run the render method passed in as a prop (if there is one), or render a Component passed in as a prop.

If there is not an authed user, the Route renders a <Redirect /> component (part of React Router) that redirects the user to the '/sign-in' path.

PublicRoute is very similar, except it checks to make sure that there is not an authed user. If there is not a user, it runs the render method or renders a Component. If there is an authed user, it redirects to '/notes'.

Rich Text Editor

In ThingList, we used contenteditable to allow us to input new text into a Thing, but the user has no control over how the text looks. For a more fully-featured app, wouldn’t it be nice to have the ability to do bold text, italics, change font size, etc…? Well good news, you can totally do that thing. There are a variety of WYSIWYG editors that can be added to your application to give the user far more formatting options for their text input. The editor used in Noteherder is called, appropriately, React Rich Text Editor.

user@localhost ~
  
yarn add react-rte                # install using yarn

npm install --save react-rte      # install using npm

Once the package is added to your project, we can import and use the <RichTextEditor /> component anywhere we need a rich text editor.

NoteForm.js (simplified)



import RichTextEditor from 'react-rte'

class NoteForm extends Component {
  state = {
    editorValue: RichTextEditor.createEmptyValue()
    note: {
      title: '',
      body: ''
    }
  }

  handleEditorChange = (editorValue) => {
    const note = {...this.state.note}
    note.body = editorValue.toString('html')
    this.setState({ note, editorValue })
  }

  render() {
    return (
      <form>
        <RichTextEditor
          name="body"
          value={this.state.editorValue}
          onChange={this.handleEditorChange}
        />
      </form>
    )
  }
}

Projects

Noteherder - source code

Homework

Read through the code for Noteherder and make sure you understand how the app works. Reading other people’s code is an extremely valuable skill to have.

Finish your API-party homework if it is not yet complete and functional.