DEV Community: Jean Aguilar

Render React components dynamically based on a JSON payload.

Jean Aguilar — Thu, 24 Jun 2021 04:04:44 +0000

This is my last week in my current job and even though it has been good I think is time to move on. My last two months were pretty amazing because I was working in a project where we wanted to implement dynamic rendering based on a JSON payload.

The JSON has a structure similar to this one:

{
    "type": "Container",
    "data": {
        "id": "4400936b-6158-4943-9dc8-a04c57e1af46",
        "items": [
            {
                "type": "Card",
                "data": {
                    "id": "26b3f355-2f65-4aae-b9fd-609779f24fdd",
                    "title": "A card example",
                    "subtitle": "A subtitle",
                    "items": [
                        {
                            "type": "Button",
                            "data": {
                                "id": "4400936b-6158-4943-9dc8-a04c57e1af46",
                                "title": "Button text",
                                "className": "btn-primary",
                                "action": {
                                    "type": "call",
                                    "url": "https://pokeapi.co/api/v2/"
                                },
                            }
                        },
                    ]
                }
            },
            {
                "type": "Divider",
                "data": {
                    "id": "4400936b-6158-4943-9dc8-a04c57e1af46",
                    "marginX": 3,
                }
            },
            {
                "type": "Card",
                "data": {
                    "id": "4400936b-6158-4943-9dc8-a04c57e1af46",
                    "title" : "Title",
                    "headline" : "Month ## - Month ##, ####",
                    "copy": "A really long text....",
                    "image" : {
                        "url" : "https://i.stack.imgur.com/y9DpT.jpg"
                    },
                }
            },
            {
                "type": "Container",
                "data": {
                    "id": "d76e3a5f-01ad-46f6-a45d-3ad9699ecf99",
                    "fluid": true,
                    "embeddedView": {
                        "type": "Input",
                        "data": {
                            "id": "26b3f355-2f65-4aae-b9fd-609779f24fdd",
                            "label": "Input",
                            "type": "password",
                            "placeholder": "Password",
                            "isRequired": false,
                            "minCharactersAllowed": 1,
                            "maxCharactersAllowed": 100,
                            "validations": [
                                {
                                    "regexType": "eightOrMoreCharacters",
                                    "regexErrorCopy": "Use 8 or more characters"
                                },
                            ]
                        }
                    }
                }
            }
        ]
    }
}

Now let’s look closely at the object, we have to create a custom function that checks for the component type that in this case will be the component to be rendered, also if you take a closer look you will notice that some components can have children, some in a prop called items, that is an array of children and some components have an embedded view that is also a child. The rest of the properties included in the data object are the component props and we should pass them as regular props.

With that being said, how we can achieve a dynamic rendering in our react application, The simplest way is to take advantage of the React top-level API method createElement. If you know JSX, and how it transpile to regular JS you might heard about this method, basically the function returns a new React element, it works this way:

React.createElement(
  type,
  [props],
  [...children]
)

As you can see the first argument is the element type which can be a regular html tag like a div or even a react component or a react fragment.
The second argument will be the props that we want to use for that component, it can be anything.
Finally, it also accepts React children, useful if your component is a wrapper component.

I recommend this reading if you want to learn more how does react transpiles the JSX, it is pretty interesting.

Now we need to read that JSON and call the React.createElement every time we encounter a component that is valid, while this can be done with multiple approaches, we decided to use recursion to achieve it. This was written in typescript and the first step to make things work is to define some custom types/interfaces.

// dynamic-rendering.interfaces.ts

// Here is a type to map all the components names.
type ComponentList =
    | 'Button'
    | 'Card'
    | 'Container'
    | 'Divider'
    | 'Input';

export interface IComponent {
    type: ComponentList;
    data: {
        id: string;
        embeddedView?: IComponent;
        items?: Array<IComponent>;
        [key: string]: unknown;
    };
}

Now that we have the interfaces, we can create a constants file to map the components to an object:

// dynamic-rendering.constants.ts

// All the component imports

export const Components = {
    Button,
    Card,
    Container,
    Divider,
    Input,
};

After that we can create the service that will take the json payload and return the React components in our application.

// dynamic-rendering.service.ts
import React from 'react';
import { IComponent } from './dynamic-rendering.interfaces';
import { Components } from './dynamic-rendering.constants';

export function createPage(data?: IComponent): React.ReactNode {
    // Don't render anything if the payload is falsey.
    if (!data) return null;

    function createComponent(item: IComponent): React.ReactNode {
        const { data, type } = item;
        const { items, embeddedView, id, ...rest } = data;
        return React.createElement(
            // TODO: This can be improved
            Components[type] as any,
            {
                // Pass all the props coming from the data object.
                ...rest,
                id,
                // Make each react key unique
                key: id,
            } as any,
            // Map if there are items, if not try to render the embedded view as children
            Array.isArray(items)
                ? items.map(renderer)
                : renderer(embeddedView ?? null),
        );
    }

    // Don't render anything if the payload is falsey.
    function renderer(
        config: IComponent | null,
    ): React.ReactNode {
        if (!config) return null;

        return createComponent(config);
    }

    return renderer(data);
}

This function creates all the components that we receive in the payload and recursively calls the renderer function to create all the children if available.

Final Thoughts

This is an awesome way to create youw own service, called it cms or whatever you want, to be able to create a payload that your react application can consume and create dynamic content based on it, of course there are some things that still need some thinkering, like UI interaction with buttons or inputs, but of course you can create your custom components that will handle all that functionality and just call them using the payload.

I created a sweet example in code sandbox if you want to check the result, also this is the GitHub repo if you want to download the code.

Also huge kudos to Daniel and Jose who helped doing this in the project we are working on.

(This is an article posted to my blog at loserkid.io. You can read it online by clicking here.)

Accesible modal using Bootstrap and React portals

Jean Aguilar — Wed, 10 Mar 2021 04:23:00 +0000

I know it has been a while and I haven’t post anything in a while, I’ve been busy lately, but I have been doing a lot of React development using typescript, some Prisma, NestJS fun stuff in the backend. Now let’s get started.

I’m not a huge fan of reactstrap and react bootstrap because I enjoy doing things manually by myself. So, I decided to try and build the modal core functionality(almost) by myself, excluding the styles, which will be installed using the bootstrap dependency, while creating something that is accessible and uses the latest react stuff (hooks, portals).

At first let’s create a new react project using typescript (not required, but it will be better to type our things better.

yarn create react-app react-bootstrap-modal --template typescript

After that let’s install the dependencies that will be needed:

yarn add bootstrap@next node-sass

Now let’s rename our index.css file to main.scss and remove all the content inside and just add this line:

@import '~bootstrap/scss/bootstrap.scss';

Remember to change the index.tsx import to match the new file and let’s leave our App.tsx like this:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Bootstrap Modal Example</h1>
    </div>
  );
}

export default App;

With that set up we will create a a components/Modal folder were we will have all the modal related logic.

At first we will create a React Portal that will be acting as an overlay shadow that appears when you open the modal:

// components/Modal/ModalOverlay/index.tsx
import ReactDOM from 'react-dom'

export default function ModalOverlay() {
  return ReactDOM.createPortal(
    <div className='modal-backdrop fade show' />,
    document.body,
  )
}

Now let’s create the next component that is the one that will open the modal, the ModalButton, this one will be a regular button and it will also receive a reference and this will make us to access the dom element in the parent modal component. Let’s create the interface, but first let’s create a file for all the shared types used in the modal component.

// components/Modal/shared.types.ts
import React from 'react'

export type BtnRef =
  | string
  | ((instance: HTMLButtonElement | null) => void)
  | React.RefObject<HTMLButtonElement>
  | null
  | undefined

type CallbackChildren = (close: () => void) => React.ReactNode

export type MainChildren = React.ReactNode | CallbackChildren

export type ModalSize = 'sm' | 'lg' | 'xl'

BtnRef is a prop to hold a DOM reference and we need to add those extra typings to be able to use the useRef hook.
MainChildren is type that accepts a callback function that we would use if we need the children of the modal close the modal programmatically, also it supports a regular ReactNode if you don’t need to close the modal with it’s children.
Modal size is a styling prop to match bootstrap modal sizes

With an overview of the shared types we will use, this is the code for the props that the ModalButton will receive

// components/Modal/ModalButton/ModalButton.interfaces.ts
import React from 'react'

import { BtnRef } from '../shared.types';

export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  buttonRef: BtnRef
}

As you can see the component inherits the props from a React button, so we can use the regular button tag props and also, we added a reference custom prop. Next let’s create the component.

// components/Modal/ModalButton/index.tsx
import React from 'react'

import {Props} from './ModalButton.interfaces'

export default function ModalButton({
  buttonRef,
  children,
  type = 'button',
  ...rest
}: Props) {
  return (
    <button ref={buttonRef} type={type} {...rest}>
      {children}
    </button>
  )
}

We’re basically just adding the ref to the component and then attaching the rest of regular props of the button, using the ...rest that holds all the missing props. Pretty nice uh! This pattern is pretty helpful to create custom components.

With that in mind let’s start building the modal content, this component will be the modal dialog that contains all the info related to the modal. Keeping the same approach let’s write the Props first

// components/Modal/ModalContent/ModalContent.interfaces.ts
import React from 'react'

import { BtnRef, MainChildren, ModalSize } from '../shared.types'

export interface Props {
  ariaLabel?: string
  buttonRef: BtnRef
  center: boolean
  footerChildren?: MainChildren
  open: boolean
  mainChildren: MainChildren
  modalRef: React.RefObject<HTMLDivElement>
  onClickAway: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
  onClose: () => void
  onKeyDown: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined
  size: ModalSize
  scrollable: boolean
  title?: string
}

We will not talk about all the props but some of them are handlers to close the modal and a few are for styling, the mainChildren and footerChildren can be a ReactNode or they can also be a function, which is the type we created in the shared types, it works as a function that returns a ReactNode , we also hold a BtnRef that will be used for the X that closes the modal.

For the modal content we are going to create a hook to allow focus only in the modal dialog when the dialog is open.

// hooks/useFocusTrap.ts
import React from 'react'

const KEYCODE_TAB = 9

const FOCUSABLE_ELEMENTS =
  'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'

export function useFocusTrap() {
  const ref = React.useRef<HTMLDivElement>(null)

  // Focus trap function
  function handleFocus(event: KeyboardEvent) {
    // Array of all the focusable elements in the array.
    const focusableEls = [
      ...ref.current!.querySelectorAll(FOCUSABLE_ELEMENTS),
    ].filter((el) => !el.hasAttribute('disabled')) as HTMLElement[]
    // First focusable element
    const firstFocusableEl = focusableEls[0]
    // Last focusable element
    const lastFocusableEl = focusableEls[focusableEls.length - 1]

    const isTabPressed = event.key === 'Tab' || event.keyCode === KEYCODE_TAB

    // Logic to focus only the current modal focusable items.
    if (!isTabPressed) {
      return
    }

    if (event.shiftKey) {
      if (document.activeElement === firstFocusableEl) {
        lastFocusableEl.focus()
        event.preventDefault()
      }
    } else if (document.activeElement === lastFocusableEl) {
      firstFocusableEl.focus()
      event.preventDefault()
    }
  }

  React.useEffect(() => {
    // Add event listener to focus trap
    const currentRef = ref.current!
    currentRef.addEventListener('keydown', handleFocus)

    return () => {
      // rRemove event listener to focus trap
      currentRef.removeEventListener('keydown', handleFocus)
    }
  }, [])

  return ref
}

With that hook created we need to install this kebabcase transformer utility just for displaying the aria-labelledby attribute in kebab-case

yarn add lodash.kebabcase

yarn add -D @types/lodash.kebabcase

Now let’s create the ModalContent component.

// components/Modal/ModalContent/index.tsx
import kebabCase from 'lodash.kebabcase'
import React from 'react'

import { useFocusTrap } from '../../../hooks'

import { MainChildren } from '../shared.types'

import { Props } from './ModalContent.interfaces'

const TIMEOUT_VALUE = 300

export default function ModalContent({
  ariaLabel,
  buttonRef,
  center,
  footerChildren,
  mainChildren,
  modalRef,
  onClickAway,
  onClose,
  onKeyDown,
  open,
  size,
  scrollable,
  staticBackdrop,
  title,
}: Props) {
  const [staticAnimation, setStaticAnimation] = React.useState(false)
  const [staticClass, setStaticClass] = React.useState('')
  const [openClass, setOpenClass] = React.useState('')
  const dialogRef = useFocusTrap()
  const scrollClass = scrollable ? ' modal-dialog-scrollable' : ''
  const verticalCenterClass = center ? ' modal-dialog-centered' : ''

  React.useEffect(() => {
    const timer = setTimeout(() => {
      setOpenClass(open ? ' show' : '')
    }, TIMEOUT_VALUE);
    return () => clearTimeout(timer);
  }, [open]);

  React.useEffect(() => {
    const timer = setTimeout(() => {
      setStaticClass(staticAnimation ? ' modal-static' : '')
    }, TIMEOUT_VALUE);
    return () => clearTimeout(timer);
  }, [staticAnimation]);

  const staticOnClick = () => setStaticAnimation(!staticAnimation)

  const render = (content: MainChildren) =>
    typeof content === 'function' ? content(onClose) : content

  return (
    <div
      ref={dialogRef}
      className={`modal fade${staticClass}${openClass}`}
      aria-labelledby={kebabCase(ariaLabel)}
      tabIndex={-1}
      onClick={staticBackdrop ? staticOnClick : onClickAway}
      onKeyDown={onKeyDown}
      style={{
        display: open ? 'block' : 'none',
        ...(openClass && {paddingRight: '15px'}),
        ...(staticAnimation && {overflow: 'hidden'})
      }}
      {...(open ? {'aria-modal': true, role: 'dialog'} : {'aria-hidden': true})}
    >
      <div
        className={`modal-dialog modal-${size}${scrollClass}${verticalCenterClass}`}
        ref={modalRef}
      >
        <div className='modal-content'>
          <div className='modal-header'>
            {title && <h5>{title}</h5>}
            <button
              type='button'
              className='btn-close'
              aria-label='close-modal'
              onClick={onClose}
              ref={buttonRef}
            />
          </div>
          <div className='modal-body'>{render(mainChildren)}</div>
          {footerChildren && (
            <div className='modal-footer'>{render(footerChildren)}</div>
          )}
        </div>
      </div>
    </div>
  )
}

Basically this component will always have the modal header, since we need the X button to close the modal, the X button holds a buttonRef as well because we want the parent (Modal component) to do some stuff with that element, the other important thing to mention is the render function inside the stateless ModalContent component, which basically checks if the content passed if a function and runs it, if not it will be a ReactNode element and it does not need any additional configuration. Also the useEffect try to replicate some of the animation generated by bootstrap (still missing the close animation). The other stuff is pretty basic, conditional classes depending on the open prop and the footerChildren that can be optional.

Now let’s create the modal component:

import React from 'react'

import { Props } from './Modal.interfaces'
import ModalContent from './ModalContent'
import ModalOverlay from './ModalOverlay'
import ModalButton from './ModalButton'

export default function Modal({
  ariaLabel,
  btnClassName,
  btnContent,
  center = false,
  children,
  footerChildren,
  size = 'lg',
  scrollable,
  title,
}: Props) {
  const [open, setOpen] = React.useState(false)
  const btnOpenRef = React.useRef<HTMLButtonElement>(null)
  const btnCloseRef = React.useRef<HTMLButtonElement>(null)
  const modalNode = React.useRef<HTMLDivElement>(null)
  const ESCAPE_KEY = 'Escape'

 // Effect to focus X button when open and focus button that toggles modal when closed
  React.useEffect(() => {
    if (open) {
      btnCloseRef.current!.focus()
    } else {
      btnOpenRef.current!.focus()
    }
  }, [open])

  // Lock Scroll by togglinh the modal-open class in the body
  function toggleScrollLock() {
    document.querySelector('body')!.classList.toggle('modal-open')
  }

  const onOpen = () => {
    setOpen(true)
    toggleScrollLock()
  }

  const onClose = () => {
    setOpen(false)
    toggleScrollLock()
  }

  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.key === ESCAPE_KEY) {
      onClose()
    }
  }

  // When clicking the overlay the modal will be closed.
  const onClickAway = (event: any) => {
    if (modalNode.current && !modalNode.current.contains(event.target)) {
      onClose()
    }
  }

  return (
    <>
      <ModalContent
        ariaLabel={ariaLabel}
        buttonRef={btnCloseRef}
        center={center}
        footerChildren={footerChildren}
        open={open}
        mainChildren={children}
        modalRef={modalNode}
        onClickAway={onClickAway}
        onClose={onClose}
        onKeyDown={onKeyDown}
        size={size}
        scrollable={scrollable}
        title={title}
      />
      {open && <ModalOverlay />}

      <ModalButton
        onClick={onOpen}
        className={btnClassName}
        buttonRef={btnOpenRef}
      >
        {btnContent}
      </ModalButton>
    </>
  )
}

This component is pretty basic, it just open and closes the modal with a few event handlers, it also stores the button open and button close references, to focus based on the open state. The toggleScrollLock adds a class that prevents the overflow from the body, so you can only scroll the modal if applicable.

And now you just have to use the modal like this:

import React from 'react'

import Modal from './components/Modal'

function App() {
  return (
    <div className="container">
      <h1>Bootstrap Modal Example</h1>
      <Modal
        ariaLabel='Modal Example'
        btnClassName="btn btn-primary"
        btnContent='Modal regular'
        footerChildren={(closeModal) => (
            <button
              type='button'
              className='btn btn-primary'
              onClick={closeModal}
            >
              Close it from the child
            </button>
        )}
        title='Modal Example regular'
      >
        <p>This is a regular Modal</p>
      </Modal>
      <Modal
        ariaLabel='Modal Example lg'
        btnClassName="btn btn-secondary"
        btnContent='Modal lg'
        size='lg'
        footerChildren={(closeModal) => (
            <button
              type='button'
              className='btn btn-primary'
              onClick={closeModal}
            >
              Close it from the child
            </button>
        )}
        title='Modal Example lg'
      >
        <p>This is a large Modal</p>
      </Modal>
    </div>

As you can see you can pass a ReactNode or a (closeModal: () => void) => ReactNode for your footer and the main content, this will help us to close the modal from the children content which is pretty useful when doing forms or things that require the help from the children to close it.

Hope you enjoy the post, converting this to JS should be pretty straight forward, but the idea is the same, this is pretty neat because it focus the elements tie to the modal.

Here’s the repo in case you want to check the code.

(This is an article posted to my blog at loserkid.io. You can read it online by clicking here.)

How to handle data with redux.

Jean Aguilar — Sun, 31 May 2020 11:22:25 +0000

When you start learning redux, at first taking a grasp on how it works can be confusing, maybe you come from an object oriented language and you are accustomed using mutation with classes or you just never done anything with ecmascript 6 so you’re not used on the new syntax and snippets you see on the web. In this post I’ll be doing a basic redux CRUD like (create, read, update, delete) without persisting the data that hopefully will help you understand a little bit how redux works and why it is useful in some cases.

First of lets scaffold a react app using react-create-app

yarn create react-app crud-todo

The todo example is the most straight forward thing to do, but feel free to use whatever thing you want, like movies, books etc.. This will not consume an API to keep things simple, an API basically means that we should also add an extra layer for managing side effects but for the scope of this tutorial we will omit that. Lets add the dependencies we’re going to use.

yarn add redux react-redux redux-logger react-router-dom reselect bootstrap

After that lets create our reducer, with the initial state with some data and the necessary actions that we will use.

// redux/modules/todos.js
const NEW_TODO = "crud-todo/todos/NEW_TODO";
const EDIT_TODO = "crud-todo/todos/EDIT_TODO";
const DESTROY_TODO = "crud-todo/todos/DESTROY_TODO";

const initialState = {
  todos: [
    {
      id: "1",
      text: "Take the dog for a walk",
    },
    {
      id: "2",
      text: "Finish Homework",
    }
  ]
};

export default function reducer(state = initialState, action = {}) { return state }

After that lets create the rootReducer, the store and add the Provider in the App.js file

// redux/rootReducer.js
import { combineReducers } from "redux";
import todosReducer from "./modules/todos";

const rootReducer = combineReducers({
  todosReducer,
});

export default rootReducer;

// redux/setupStore.js
import { createStore } from "redux";
import { createLogger } from "redux-logger";

import rootReducer from "./rootReducer";

export default function configureStore(initialState = {}) {
  const middlewares = [];

  if (process.env.NODE_ENV === "development") {
    const logger = createLogger({ collapsed: true });
    middlewares.push(logger);
  }

  return createStore(
    rootReducer,
    initialState,
  );
}

// App.js
import React from 'react';
import { Provider } from "react-redux";
import setupStore from "./redux/setupStore";
import './App.css';

const store = setupStore();

function App() {
  return (
    <Provider store={store}>
      <h1>Todos</h1>
    </Provider>
  );
}

export default App;

Now the boiler is setup, now we are going to create a basic router to have basic routing for the new and edit todo pages

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink
} from "react-router-dom";
import TodoList from "../components/TodoList"
import NewTodo from "../components/NewTodo"
import EditTodo from "../components/EditTodo"

export default function AppRouter() {
  return (
    <Router>
      <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <NavLink className="navbar-brand" to="/">Todo List</NavLink>
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">
              <li className="nav-item active">
                <NavLink className="nav-link" to="/new">New Todo</NavLink>
              </li>
            </ul>
          </div>
        </nav>

        <Switch>
          <Route exact path="/">
            <TodoList />
          </Route>
          <Route path="/new">
            <NewTodo />
          </Route>
          <Route path="/edit/:id">
            <EditTodo />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

I won’t dig to much deeper here but this is mostly taken from the react training example. We’re going to create the todo list component first.

// components/TodoList.js
import React from 'react';
import { connect } from "react-redux";
import { Link } from 'react-router-dom';

function TodoList({ todos }) {
  return (
    <div className="container">
      <h1>Todo List</h1>
      <table className="table">
        <thead className="thead-dark">
          <tr>
            <th scope="col">Text</th>
            <th scope="col">Created At</th>
            <th scope="col">Updated At</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
        {todos.length > 0 && todos.map(({ id, text, createdAt, updatedAt }) => {
          return (
            <tr key={id}>
              <th scope="row">{text}</th>
              <td>{createdAt.toISOString()}</td>
              <td>{updatedAt.toISOString()}</td>
              <td>
                <Link className="btn btn-link" to={`edit/${id}`}>Edit</Link>
                /
                <button className="btn btn-link" onClick={() => {}}>Delete</button>
              </td>
            </tr>
          )
        })}
        </tbody>
      </table>
    </div>
  );
}
const mapStateToProps = state => ({ todos: state.todosReducer.todos,});
export default connect(mapStateToProps)(TodoList);

This component is connected to the store and we are grabbing the todos from redux and just iterating them if the todos length is more than 0. Also we added a link to edit the existing todo. Let’s create the todo form, which will be a reusable component between the edit and new actions.

// components/TodoForm.js
import React, { useState } from 'react';

function TodoForm(props) {
  const { todo, action } = props;
  const [text, setText] = useState( todo.text ? todo.text : "");

  const onSubmit = (event) => {
    event.preventDefault();
    action(todo.id ? { id: todo.id, text } : { text })
  }
  return (
    <form onSubmit={onSubmit}>
      <div className="form-group">
        <input className="form-control"
          type="text"
          value={text}
          onChange={(event) => setText(event.target.value)}
        />
      </div>
      <input
        type="submit"
        className="btn btn-success"
      />
    </form>
  );
}

export default TodoForm;

This dummy component receives a todo if applicable (edit action) and an action creator that will be the one who will dispatch the action to redux.

Lets add the new todo component.

import React from 'react';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import TodoForm from './TodoForm';
import { newTodo } from '../redux/modules/todos';

function NewTodo({ newAction }) {
  return (
    <div className="container">
      <h1>New Todo</h1>
      <TodoForm action={newAction} todo={{}} />
    </div>
  );
}

const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    {
      newAction: newTodo,
    },
    dispatch,
  );
};

export default connect(null, mapDispatchToProps)(NewTodo);

As you can see the component is pretty simple, it connects to redux to have the action creator that will dispatch the newAction method with the new todo.

Let’s edit our todos duck to add the new action.

// New required import to generate unique ids
import { v4 as uuidv4 } from 'uuid';
// rest of the code untouched

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case NEW_TODO:
      const newTodo = { id: uuidv4(), text: action.text, createdAt: new Date(), updatedAt: new Date() }
      return {
        ...state,
        todos: [...state.todos, newTodo]
      }
    default:
      return state
  }
}

export function newTodo({ text }) {
  return { type: NEW_TODO, text };
}

Ok so the idea here is simple, we are passing the newTodo function that receives an object with a text attribute, and dispatches the NEW_TODO action, that will go to the reducer to the NEW_TODO case, this will grab the text that we passed to that function and create a new todo that will be added to the current todos array in a non mutable way.

In redux we should NOT mutate the state, that means that in our reducer we need to make sure that we’re not modifying the current state object, this means that we should create copies of the current state and edit them instead, es6 provides us the spread operator and in this case what we’re doing is creating a copy of the current state.todos values and returning a new array with those values and the newTodo [...state.todos, newTodo]. Don’t use methods that modify the existing array, like Array.prototype.push this is not the right way to do it and you will encounter bugs related to it.

Now lets create our edit component, it is pretty much the same as the new todo component but this should actually pass the current todo selected.

For this we are going to use a redux selector

// components/EditTodo.js
import React from 'react';
import TodoForm from './TodoForm';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { withRouter } from 'react-router-dom';
import { getTodoById, editTodo } from '../redux/modules/todos';

function EditTodo({ todo, editAction }) {
  return (
    <div className="container">
      <h1>Edit Todo</h1>
      <TodoForm action={editAction} todo={todo} />
    </div>
  );
}

function mapStateToProps(state, ownProps) { const { params } = ownProps.match; const { id } = params; // search for the todo associated to this id. return { todo: getTodoById(state, id) }}
const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    {
      editAction: editTodo,
    },
    dispatch,
  );
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(EditTodo));

This component has the mapStateToProps function but is not the usual way that you would write a mapState. According to the redux docs, mapStateToProps, also takes an optional second argument, which we’re calling ownProps(it can be called whatever you want but that’s how the docs called it), ownProps uses the props that are passed to the component, by yourself or by using another HOC, like in this case (we’re using the withRouter wrapper). Basically this component is connected to the router and redux, thus we will have available the match prop, that comes from the router in the mapStateToProps method, this means that we can use that unique id to go to the redux state and search for the object with that id. The getTodoById is a selector that does the logic for that.

import { createSelector } from "reselect";

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    // rest of the code
    case EDIT_TODO:
      const { editedTodo } = action;
      const editedTodos = state.todos.map((todo) => {
        if (todo.id === editedTodo.id) {
          return (
            { ...todo, text: editedTodo.text, updatedAt: new Date() }
          )
        }
        return ({ ...todo })
      })
      return {
        ...state,
        todos: editedTodos
      }
    default:
      return state
  }
}

export function editTodo(editedTodo) {
  return { type: EDIT_TODO, editedTodo };
}

const getTodo = (state, id) => state.todosReducer.todos.find(todo => id === todo.id);
export const getTodoById = createSelector( [getTodo], todo => todo,);

The edit todo works pretty much the same as the new todo but instead of adding an item to the existing array it is creating a new copy of the existing array and modifying the item that matches with the editedTodo that we passed in the action. Pretty neat right. The selector is last highlighted part in the code that basically takes the state todos and finds the item that matches with the id that we are passing in, in this case is the one that we get by using the ownProps method.

The edit should be working correctly, now let’s add a component for the edit form that is going to show the current to do item.

// components/ShowTodo.js
import React from 'react';

function ShowTodo({ todo }) {
  const { id, text, createdAt, updatedAt } = todo;
  return (
    <div className="card mb-2">
      <h5 className="card-header">Todo Item {id}</h5>
      <div className="card-body">
        <h5 className="card-title">{text}</h5>
        <p>Created At: {createdAt.toISOString()}</p>
        <p>Updated At: {updatedAt.toISOString()}</p>
      </div>
    </div>
  );
}

export default ShowTodo;

Don’t forget to add this new component on the EditTodo component. Last but not least lets implement the delete functionality, this is going to be achieved by modifying our delete button that is on the TodoList component, and we’re going to pass an action creator for it.

// New imports needed
import { bindActionCreators } from "redux"
import { destroyTodo } from '../redux/modules/todos';

function TodoList({ destroyAction, todos }) {
  return (
    <div className="container">
      <h1>Todo List</h1>
      <table className="table">
        <thead className="thead-dark">
          <tr>
            <th scope="col">Text</th>
            <th scope="col">Created At</th>
            <th scope="col">Updated At</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
        {todos.length > 0 && todos.map(({ id, text, createdAt, updatedAt }) => {
          return (
            <tr key={id}>
              <th scope="row">{text}</th>
              <td>{createdAt.toISOString()}</td>
              <td>{updatedAt.toISOString()}</td>
              <td>
                <Link className="btn btn-link" to={`edit/${id}`}>Edit</Link>
                /
                <button className="btn btn-link" onClick={() => destroyAction(id)}>Delete</button> </td>
            </tr>
          )
        })}
        </tbody>
      </table>
    </div>
  );
}

const mapDispatchToProps = dispatch => { return bindActionCreators( { destroyAction: destroyTodo, }, dispatch, );};
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

And our reducer needs the new action type case in order to make it work. This is the final reducer shape.

import { createSelector } from "reselect";
import { v4 as uuidv4 } from 'uuid';

const NEW_TODO = "crud-todo/todos/NEW_TODO";
const EDIT_TODO = "crud-todo/todos/EDIT_TODO";
const DESTROY_TODO = "crud-todo/todos/DESTROY_TODO";

const initialState = {
  todos: [
    {
      id: "1",
      text: "Take the dog for a walk",
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: "2",
      text: "Finish Homework",
      createdAt: new Date(),
      updatedAt: new Date(),
    }
  ]
};

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case NEW_TODO:
      const newTodo = { id: uuidv4(), text: action.text, createdAt: new Date(), updatedAt: new Date() }
      return {
        ...state,
        todos: [...state.todos, newTodo]
      }
    case EDIT_TODO:
      const { editedTodo } = action;
      const editedTodos = state.todos.map((todo) => {
        if (todo.id === editedTodo.id) {
          return (
            { ...todo, text: editedTodo.text, updatedAt: new Date() }
          )
        }
        return ({ ...todo })
      })
      return {
        ...state,
        todos: editedTodos
      }
    case DESTROY_TODO: const { id } = action; const newTodos = state.todos.filter(todo => todo.id !== id); return { ...state, todos: newTodos } default:
      return state
  }
}

export function newTodo({ text }) {
  return { type: NEW_TODO, text };
}

export function editTodo(editedTodo) {
  return { type: EDIT_TODO, editedTodo };
}

export function destroyTodo(id) { return { type: DESTROY_TODO, id };}
const getTodo = (state, id) =>
  state.todosReducer.todos.find(todo => id === todo.id);

export const getTodoById = createSelector(
  [getTodo],
  todo => todo,
);

Basically the destroy todo action will filter the items that match with the passed id, in this case the id is unique so it will exclude them from the new array. Filter returns a new array so you should not worry because it will not modify the existing one.

And this is it, as you can see this is not so complex, is basically dealing with data structures and returning new values every-time we dispatch an action. This is the redux way to modify a list(array), in case you want to hook this to an API, the methodology should be the same, you just need a nice middleware that can handle all your side effects(api requests) and maybe a few actions to deal with the responses received, because we can’t get status errors or maybe a wrong response, so we should also handle that. I might do a tutorial later, but I wanted this one to be pretty simple.

(This is an article posted to my blog at loserkid.io. You can read it online by clicking here.)

Useful tips for testing redux in react with jest and enzyme.

Jean Aguilar — Thu, 23 Jan 2020 11:22:25 +0000

Hi guys in this post I would like to share some useful tips I have found when testing. Having the opportunity of being working in a real project with react has taught me a thing or two. Patterns I found quite useful, I also managed to create a way to test redux as well, and how to separate concerns, when testing react-redux.

This examples are using jest as the test suite and enzyme as the testing utility.

Testing wrapped components.

First let start with the simplest, when you’re using react with other libraries, you may have come across with wrapper functions. A wrapper function is a HOC that as it name suggest it wraps your component to provide extra functionality. react-redux has the connect and react router has the withRouter function. If your project leverages the use of any of those libraries you have probably used them. Testing those functions is very easy because what they do is provide additional props to your existing component.

When I was starting writing tests for a connected Redux component, I remember seeing this failure whenever I tried to write tests for connected components:

Invariant Violation:
Could not find "store" in the context of "Connect(ComponentName)".
Either wrap the root component in a <Provider>
or pass a custom React context provider to <Provider> and the corresponding
React context consumer to Connect(ComponentName) in connect options.

This is because our test suite unlike our application, is not wrapped in a <Provider /> component, so it is not aware of the store context. To solve it without using a third party library. we can do the following; Take this component as an example:

import React from "react";
import { connect } from "react-redux";

export const Counter = ({ counter }) => { return (
    <p>
      {counter}
    </p>
  )
}

const mapStateToProps = state => ({
  counter: state.counterReducer.counter
});

export default connect(mapStateToProps)(Counter);

This is a really simple component that is connected to the redux store, in order to use a counter value. To be able to test it we need to create a named export of the component and test it instead of testing the default one that is wrapped with connect. Our test would look something like this:

import React from "react";
import { shallow } from "enzyme";

// Notice the non default export here
import { Counter } from "./Counter";
let component;

const mockProps = { counter: 0};
describe("Counter Component", () => {
  beforeAll(() => {
    component = shallow(<Counter {...mockProps} />);
  });

  it("displays the counter value", () => {
    expect(component.find("p").text()).toBe("0");
  });
});

What the connect function does, is that pass the store state to the component as props, in order to test the component we just need to mock the store state, and inject it as we do with regular props.

Same with dispatching actions, they are just part of the props, so in this example if we want to dispatch a certain action we have to do something like this:

// Rest of the imports
import { bindActionCreators } from "redux";
import {
  incrementAction,
  decrementAction
} from "redux-modules/counter/counter";

export const Counter = (props) => {
  const { counter, increment, decrement } = props;
  return (
    <div>
      <p>{counter}</p>
      <button id="increment" type="button" onClick={() => increment()}> Increment
      </button>
      <button id="decrement" type="button" onClick={() => decrement()}> Decrement
      </button>
    </div>
  );
};
const mapDispatchToProps = dispatch => { return bindActionCreators( { increment: incrementAction, decrement: decrementAction }, dispatch );};
// Rest of the code

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

For those who don’t know bindActionCreators is an utility that let us dispatch the action creator by just calling the function, without having to use the dispatch function. Is just a personal preference I like to use, so in the tests I can mock the increment function like this.

import React from "react";
import { shallow } from "enzyme";

// Notice the non default export here
import { Counter } from "./Counter";

let component;

const mockProps = {
  counter: 1,
  increment: jest.fn(() => 1),
  decrement: jest.fn(() => -1)
};

describe("Counter Component", () => {
  beforeAll(() => {
    component = shallow(<Counter {...mockProps} />);
  });

  it("displays the counter value", () => {
    expect(component.find("p").text()).toBe("0");
  });
  it("triggers the increment function", () => {
    component.find("#increment").simulate("click");
    expect(mockProps.increment.mock.results[0].value).toBe(1);
  });
});

If you see the highlights I’m mocking the function increment using jest.fn(() => 1) and it should return 1, since the component is calling that function on an onClick event of a button, I’m searching the right button by using its id and I’m simulating the click event; If a click happens on the real component, the increment function will be triggered and the action will be dispatched, in this case if a clicks happens I should be seeing my mock increment function being triggered as well, but it should return 1 instead of dispatching because that’s what I wanted to return in the test.

As you can see, here we test that a function is being called , we don’t test what the function does. You don’t need to test that the counter increments, because that is not a responsibility of the component, it’s a responsibility from the redux action.

Note: If you're using other libraries that use wrappers like withRouter from react router, you could do the named import and create an export that is not using a wrapper.

Testing the reducer:

To test the reducer I use a similar approach as the one that the redux docs use, what you’re doing is to test the reducer function, this function receives an state(which is the object containing the actual state) and an action(which is also an object) that it always has a type and sometimes it could have a payload.

Take this reducer from the same counter example.

const initialState = { counter: 0 };

// Reducer
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case "INCREMENT":
      return {
        ...state,
        counter: state.counter + 1,
      };
    case "DECREMENT":
      return {
        ...state,
        counter: state.counter - 1,
      };
    default:
      return state;
  }
}

This reducer is the one used to increment or decrement an initial counter set to 0. To test it we are going to prove that the cases asserts the expected return values, for example if the reducer receives an action with type INCREMENT, it should increase the counter of the current state by 1. so we do a test like this one:

const initialState = {
  counter: 0
};

describe("reducers", () => {
  describe("counter", () => {
    let updatedState = {};

    it("handles INCREMENT action", () => {
      updatedState = {
        counter: 1
      };
      expect(
        counterReducer(
          { ...initialState },
          { type: "INCREMENT" }
        )
      ).toEqual(updatedState);
    });
  });
});

PD: If you are wondering what the heck are incrementAction and decrementAction in the Counter.js file above , it is just this:

export function incrementAction() {
  return { type: INCREMENT };
}

A function that returns an action. Is useful to avoid having to write the entire action object everytime you want to dispatch.

As you can see we just use the reducer function and pass the arguments that it needs, to return a new state. We can pass a modified state like { counter: 3 } and the action with type DECREMENT and guess what, the updatedState should be { counter: 2 }. With payloads on the action it is pretty similar, you just have to keep in mind that when you are sending a payload, you normally want to use that to perform additional computations or validations. so the updatedState is going be updated based on that payload.

I like to separate the redux boilerplate from the react testing because I think this approach is a good way to ensure that everything works, separating concerns is the way to go, since you don’t need to test redux functionality in a component.

Testing selectors

Selectors are function that takes the state coming from redux and performs computations from them to return a new value. Imagine I have an state that has an array of user objects like this { name: "John", age 35 }, the array does not have a specific order, but is a requirement to show the list of users ordered by age. Selectors are useful to do that before the data is painted in the screen so if you have a selector like this one

const initialState = {
  users: [
    {
      name: "Bob",
      age: 27
    },
    {
      name: "Anne",
      age: 18
    },
    {
      name: "Paul",
      age: 15
    },
    {
      name: "Pam",
      age: 30
    },
  ]
};

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    default:
      return state;
  }
}

// Selectors
export const usersByAgeSelector = state => { return state.userReducer.users.sort((a, b) => a.age - b.age);}

Our test should be like this one:

describe("selectors", () => {
  const state = {
    userReducer: {
      users: [
        // Unordered List
      ],
    }
  };
  const orderedUsers = [
    {
      name: "Paul",
      age: 15
    },
    {
      name: "Anne",
      age: 18
    },
    {
      name: "Bob",
      age: 27
    },
    {
      name: "Pam",
      age: 30
    },
  ];
  describe("#usersByAgeSelector", () => {
    it("sorts the users based on the age attribute", () => {
      expect(usersByAgeSelector(state)).toEqual(orderedUsers);
    });
  });
});

Same as the reducer, we’re just testing a function that sorts a given array of objects based on their attributes, this is pure unit testing. Only thing you have to notice, is that you have to pass a state structure, so keep that in consideration, your test will fail if your root reducer structure is not the same as the one you’re passing in the selector.

That would be all for it, I’m missing side effects, but I think that should be for another post(I’m familiar testing redux-saga), but I hope you like this post, if you find this helpful, or you think you it can be improved, please let me know.

Repo with examples.

(This is an article posted to my blog at loserkid.io. You can read it online by clicking here.)

Dark theme, different ways to implement it.

Jean Aguilar — Mon, 20 Jan 2020 11:22:25 +0000

When I was first creating this blog, the first feature I wanted for it, was the ability to switch to a light or a dark theme. I remember that light and dark themes were already a thing since, even since I was installing custom ROMS in my galaxy s3 mini with android 4.1. There were some ROMS that provided the functionality to switch to a dark system ui, which was pretty awesome at the time, considering that until last year, we start seeing the feature in stock android and IOs - macOS.

So in this post I would go through on how some websites implement their themes; Most of them allow you to switch by using a toggle or button, some of them persist even if you close the browser and some of them may even choose the theme based on you OS preferences.

Google Fonts.

First I would like to talk about the easiest and straight forward way to do it, I’m going to Google Fonts as the example.

Inspecting the site, you can see that they have a class in their html tag called t-white, and if you press the select background color button and choose the dark option you’ll notice that the html class will change to t-black. The javascript code presumably changes the dom node class attribute to use the opposite t-class that is currently selected and that would change the whole UI. If we take a look a the css (we need to use a tool to beautify it), we can clearly see that they have declared the same classes for the t-black and t-white but with the respective changes to make it work for each theme.

/* Some of the black classes */
.t-black,
.t-black body,
.t-black #main {
    background: #222;
    color: #fff;
    fill: #fff
}

.t-black .fonts-page.is-bordered,
.t-black .fonts-module {
    border-top-color: rgba(255, 255, 255, .4)
}

/* Some of the white classes */
.t-white .fonts-page.is-bordered,
.t-white .fonts-module {
    border-top-color: rgba(0, 0, 0, .4)
}

.t-white,
.t-white body,
.t-white #main,
.t-white .font-preview-headers,
.t-white .font-preview-controls {
    background: #fff;
    fill: #fff
}

What I like of this approach is that you have a dark and light theme that is compatible to every major browser, they are using plain css as it best, even though they write almost the same twice, it ensures cross browser compatibility(which is something very valuable since the others methods don’t provide cross browser compatibility). The page does not persist your selection, so every time you refresh the page, the light theme will be the default one(thus this can be implemented).

Gatsby approach.

Gatsby is a library for developing static websites(this blog is using it!) and their page is pretty awesome. If you check through the project repo you’ll notice that they use a library called theme-ui to manage their styles including the light and dark theme. It is fairly easy to use, you need to a theme object, who’s going to contain colors, typography and layout values. This theme allow you to specify color modes, so you can specify different colors or settings according to your theme mode. Then you can use a custom hook useColorMode that allows you to change or retrieve the current mode value. Gatsby uses it in their DarkModeToggle component. You can see the code here.

Take a look of this example taken from the docs

import React from 'react'
import { useColorMode } from 'theme-ui'
export default props => {
  const [colorMode, setColorMode] = useColorMode()
  return (
    <header>
      <button
        onClick={e => {
          setColorMode(colorMode === 'default' ? 'dark' : 'default')
        }}>
        Toggle {colorMode === 'default' ? 'Dark' : 'Light'}
      </button>
    </header>
  )
}

This code uses the useColorMode hook, that it looks like an useState hook with steroids, which is the one that does the dirty work for you. Check the source to see how awesome it is. Offtopic, but looking through this source code is truly inspirational and gives you a lot of cool ideas.

This approach is the easiest one to setup, and it will do the dirty work for you, because it can persist the choosen theme by storing the value in the local storage, theme-ui does it for you, less things to worry means you code happily. They also provide support for the prefers-color-scheme which we’ll talk later. One of the cons found is browser compatibility, IE11 does not have support for prefers-color-scheme neither for css variables.

Loserkid

Now let’s talk about my blog :p, I wrote the theme for this blog using tutorials on the web, which were mainly focus on using css variables and I leverage overreacted.io code as the inspiration for persisting the theme.

My theme and theme-ui use css variables, they are variables that contain specific values that are defined by us and can be reused across the whole stylesheet. For example I want my button to have a different color, depending on the html class. I can do something like this:

html.light {
  --btnColor: #e66992;
}

html.dark {
  --btnColor: #ffa7c4;
}

button {
  background: var(--btnColor);
}

Every time that our html class changes to dark, the button will update its background to the color that we specify on the html.dark rule, if we change the class to light, then the color is going to change again, using the html.light rule.

The first thing you’ll notice if you have never visit my blog, is that the default theme will match your OS theme, so for example if you have macOS Mojave or after, and you have your system theme default to dark, you’ll see my blog with the dark theme.. This is done by using a cool css property called prefers-color-scheme. According to MDN this media feature detects if the user uses a system light or dark theme.

For example if you add this variable to your browser console:

  var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');

You’ll see that you will get an object like this:

{
  media: "(prefers-color-scheme: dark)",
  matches: true,
  onchange: null
}

The object itself contains an attribute called matches, this will return a boolean if the prefers-color-scheme passed (in this case dark), matches your system specification, in my case matches attribute is true because my computer theme is dark, but if yours happens to be using a light theme, it will return true.

If you want to override those settings and let the user to choose the theme and persist it, you will have to use localStorage, because you’ll have to store the user selected value and use it every time the user access the page.

Storing and retrieving the value can be done like this:

// Sets a variable called with key theme and value dark.
localStorage.setItem('theme', "dark");

// Gets the value of the localStorage key called theme
localStorage.getItem('theme');

So your code should have a function that gets and sets the value. It is better to have this on a script that loads before the SPA(in my case react), so having that as window object attributes, makes a lot of sense, since we can call them later. Overreacted.io has an awesome anonymous function that handles every use case. I used it on this blog and I solve a bug that was since day one. The bug was that even though my theme was set to dark in the localStorage, it loaded the light theme first and then update it to the dark one.

Conclusions

Using the google fonts approach makes a lot of sense for cross browser support, we can have this working even for IE11 and you know that enterprise wise, a lot of companies are still stuck on IE11 and we have devs have to be fighting against it.
Theme UI is a brilliant tool, makes things less stressful an easy to config out of the box. Cons are, browser support, some people are not accustomed to style using jsx and well at the time is only compatible with react.
My blog approach, is pretty nice and it is more DIY, just taking the considerations on localStorage, and this property prefers-color-scheme, you’ll be dealing with browser incompatibility, since I used css variables and prefers-color-scheme won’t work.
It is important to say, that without counting theme-ui, we can implement any approach we want using plain old js and css, it is just changing a node attribute, the only thing that changes is how the event is handled.

So if I had the opportunity to start over again, I would use theme-ui even though I’m not a huge fan of styling things in the component, I think it makes the setup easier and customizable, if browser support is a huge deal to you, then I’ll guess using a more traditional approach would suit better your needs(yes… having duplicate classes with the inverse color).

(This is an article posted to my blog at loserkid.io. You can read it online by clicking here.)

Infinite scrolling using redux and sagas, Part III.

Jean Aguilar — Thu, 16 Jan 2020 11:22:25 +0000

Infinite scrolling using redux and sagas, Part II.

Jean Aguilar — Wed, 16 Oct 2019 11:22:25 +0000

More on this series: Part I ⋮ Part III

For this part we’ll be focusing on the component setup, and the srolling part and fetching data when the scroll is at the bottom.

Our component structure will be the following:

Provider (React-redux wrapper.)
- PokemonList (Component with scrolling logic and api calls)
  - PokemonListItem (Stateless component just for displaying the pokemon)

We will add the following dependencies as well, one is for having a content loader for the first time load, second it bootstrap for its awesome grid system, lodash is for the ease of validating if the redux array is empty and node sass to have the bootstrap core import in our scss file.

yarn add react-content-loader bootstrap lodash node-sass

We will rename our app.css to app.scss and we will add this import at the beginning, now with this require we will be able to use the bootstrap grid and core components.

@import "~bootstrap/scss/bootstrap";

When we have this ready lets create a new file for the PokemonList component

touch src/components/PokemonList

First we’ll start connecting redux with the component, the component will dispatch two redux actions creators loadPokemonList and loadMorePokemon also we will set an state for our component which is going to keep count of the pagination, to send the params to our endpoint

import _ from "lodash";
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { loadPokemonList, loadMorePokemon } from "../redux/modules/pokemonList";

class PokemonList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentCount: 20,
    };
  }
}

const mapStateToProps = state => ({
  isLoading: state.pokemonListReducer.isLoading,
  error: state.pokemonListReducer.error,
  pokemonList: state.pokemonListReducer.pokemonList,
});

const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    {
      fetchActionCreator: loadPokemonList,
      loadMoreActionCreator: loadMorePokemon,
    },
    dispatch,
  );
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(PokemonList);

Notice how we are adding the redux state, to handle all the use cases of our API, for example the loading and error attributes. Also we use bindActionCreators function to define the name of our action creators in the component, those will be available in the component props.

Now we are going to add the first fetch on the componentDidMount because we want to perform the fetch when our component mounts.

componentDidMount() {
    const { fetchActionCreator } = this.props;
    fetchActionCreator();
  }

As I mentioned, I rename the loadMorePokemon to fetchActionCreator and it is available in the props so we’re just calling that function inside the componentDidMount. This will trigger all the redux flow that will either bring a success response, or return an error message.

So to handle the initial load, I’m going to create a new component that is going to use the library react-content-loader so the user we’ll see a content loader on screen

touch src/components/ListItemLoader.js

Please check the docs if you have trouble reading this component

import React from "react";
import ContentLoader from "react-content-loader";

const ListItemLoader = () => {
  return (
    <ContentLoader
      height={507}
      width={900}
      speed={2}
      primaryColor="#f3f3f3"
      secondaryColor="#ecebeb"
    >
      <rect x="30" y="20" rx="0" ry="0" width="130" height="23" />
      <rect x="30" y="60" rx="0" ry="0" width="200" height="120" />
      <rect x="30" y="189" rx="0" ry="0" width="200" height="15" />
      <rect x="30" y="211" rx="0" ry="0" width="140" height="15" />
      <rect x="243" y="60" rx="0" ry="0" width="200" height="120" />
      <rect x="243" y="189" rx="0" ry="0" width="200" height="15" />
      <rect x="243" y="211" rx="0" ry="0" width="140" height="15" />
      <rect x="455" y="60" rx="0" ry="0" width="200" height="120" />
      <rect x="455" y="189" rx="0" ry="0" width="200" height="15" />
      <rect x="455" y="211" rx="0" ry="0" width="140" height="15" />
      <rect x="667" y="60" rx="0" ry="0" width="200" height="120" />
      <rect x="667" y="188" rx="0" ry="0" width="200" height="15" />
      <rect x="667" y="209" rx="0" ry="0" width="140" height="15" />
      <rect x="30" y="280" rx="0" ry="0" width="130" height="23" />
      <rect x="30" y="320" rx="0" ry="0" width="200" height="120" />
      <rect x="30" y="450" rx="0" ry="0" width="200" height="15" />
      <rect x="30" y="474" rx="0" ry="0" width="140" height="15" />
      <rect x="243" y="320" rx="0" ry="0" width="200" height="120" />
      <rect x="455" y="320" rx="0" ry="0" width="200" height="120" />
      <rect x="667" y="320" rx="0" ry="0" width="200" height="120" />
      <rect x="243" y="450" rx="0" ry="0" width="200" height="15" />
      <rect x="455" y="450" rx="0" ry="0" width="200" height="15" />
      <rect x="667" y="450" rx="0" ry="0" width="200" height="15" />
      <rect x="243" y="474" rx="0" ry="0" width="140" height="15" />
      <rect x="455" y="474" rx="0" ry="0" width="140" height="15" />
      <rect x="667" y="474" rx="0" ry="0" width="140" height="15" />
    </ContentLoader>
  );
};

export default ListItemLoader;

Now we will modify our PokemonList component to display this new component when we have do our initial load.

render() {
    const { isLoading, error, pokemonList } = this.props;
    if (_.isEmpty(pokemonList) && isLoading) return <ListItemLoader />;
    if (error) return <p>Error</p>;
    return (
      <div>
        {pokemonList.length}
      </div>
    )
  }

Here we’re using the props from redux, notice that we are going to show the ListItemLoader just on the first load, when we implement the scrolling we will use something else, we also have an error if just in case something happens and we’re just returning the array length if we get the correct response.

Now we’ll modify the App.js component to add the Provider wrapper and our newly created component.

import React from 'react';
import { Provider } from "react-redux"
import configureStore from "./redux/configureStore";
import './App.scss';
import PokemonList from './components/PokemonList';

const store = configureStore();

function App() {
  return (
    <Provider store={store}>
      <div className="container">
        <PokemonList />
      </div>
    </Provider>
  );
}

export default App;

Here we’re just wrapping our code in the Provider and using the store function that we just created.

Now we should see something like this on the initial load and our count afterwards should be 20 because that’s what we defined in the endpoint:

Pretty cool right, now let’s do the logic for our scrolling, this was taken from an example from this post a condition that checks if our scroll has reach the end of the container where it belongs.

handleScroll = event => {
    const { loadMoreActionCreator } = this.props;
    const { currentCount } = this.state;
    const element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight) {
      loadMoreActionCreator(currentCount);
      this.setState({
        currentCount: currentCount + 20,
      });
    }
  };

If we are at the end the condition is met and we will trigger the loadMoreActionCreator that will request for more pokemon and we will increment the currenCount by 20, so if we go to the bottom of the container again we will fetch for more pokemon. now that we have everything, our render method should look like this.

render() {
    const { isLoading, error, pokemonList } = this.props;
    if (_.isEmpty(pokemonList) && isLoading) return <ListItemLoader />;
    if (error) return <p>Error</p>;
    return (
      <div className="border m-5">
        <div
          className="row"
          onScroll={this.handleScroll}
          style={{ height: "500px, overflow: "auto" }}
        >
          {pokemonList.map(pokemon => {
            const { url, name } = pokemon;
            const id = getId(url);
            return (
              <div key={pokemon.url} className="col-sm-3">
                <PokemonListItem id={id} name={name} />
              </div>
            );
          })}
        </div>
        {isLoading && (
          <div className="text-center">
            <div
              className="spinner-border"
              style={{ width: "4rem", height: "4rem" }}
              role="status"
            >
              <span className="sr-only">Loading...</span>
            </div>
          </div>
        )}
        <p className="text-muted ml-3">Displaying {pokemonList.length} pokemon of 807</p>
      </div>
    )
  }

There are a few thing happening, we created a main div that has two div one is the one that contains the <PokemonListItem>which we will add later and the other one is to display a loading icon if the loading changes, which is the expected behavior if we scroll to the bottom of the div since a new request will be triggered. get id is a helper that we will add as well. Lets do that touch src/helpers/pokemonUtils.js

export const getId = url => {
  return url
    .split("/")
    .filter(el => !!el)
    .pop();
};

This just takes the url attribute from the response data and it returns the id that is associated to it. Now the PokemonListItem is a fairly easy component, it looks like this:

import _ from "lodash";
import React from "react";

const PokemonListItem = ({ id, name }) => {
  return (
    <>
      <div>
        <img
          className="d-block mx-auto"
          src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`}
          alt={name}
        />
      </div>
      <div className="text-center">
        <p>{_.capitalize(name)}</p>
      </div>
    </>
  );
};

export default PokemonListItem;

That’s why the getId method comes in handy is important because we will show the pokemon image which is available in github.

If you follow everything step by step you should see something like this:

So here it is, this is the way I figure out for fetching large datasets, 9gag uses a similar way to fetch its content and I think is a pretty awesome way to do it if you don’t want to add a paginator. This is the repo if you want to see all the implementation.

(This is an article posted to my blog at niceguysfinishlast.dev. You can read it online by clicking here.)

Infinite scrolling using redux and sagas, Part I.

Jean Aguilar — Mon, 14 Oct 2019 11:19:41 +0000

More on this series: Part II ⋮ Part III

Lately I’ve been trying to create a pokedex, using redux, to practice the core concepts and try new things from an UI perspective.

Even though I will create a simple version of the dex I’m currently building, you will have grasp on what’s the method I use to query large datasets, like for example the +700 pokemon available. Lets get started.

We’ll create a new react app, I will use the react create app, and when you have everything ready lets add the dependencies.

yarn add redux react-redux redux-logger redux-saga

Then we’ll go through all the redux setup, as usual, we’ll create a reducer for our pokemon list, and afterwards we will setup the store and wrap our app in the Provider component.

mkdir src/redux & mkdir src/redux/modules
touch src/redux/modules/pokemonList.js

We’ll start writing the actions and the default state:

// Actions types
const FETCH_POKEMON_LIST = "pokemon-frontend/pokemon/FETCH_POKEMON_LIST";
const FETCH_POKEMON_LIST_SUCCESS =
  "pokemon-frontend/pokemon/FETCH_POKEMON_LIST_SUCCESS";
const FETCH_POKEMON_LIST_FAILURE =
  "pokemon-frontend/pokemon/FETCH_POKEMON_LIST_FAILURE";
const LOAD_MORE_POKEMON = "pokemon-frontend/pokemon/LOAD_MORE_POKEMON";
const LOAD_MORE_POKEMON_SUCCEED =
  "pokemon-frontend/pokemon/LOAD_MORE_POKEMON_SUCCEED";
const LOAD_MORE_POKEMON_FAILED =
  "pokemon-frontend/pokemon/LOAD_MORE_POKEMON_FAILED";

const initialState = { pokemonList: [], isLoading: false, error: "" };

We define 6 actions, three of them are for the initial fetch, and the rest are for performing a new request every-time we hit the end of our scroll content. The initial state should be an empty array with a boolean for the loading status of the request and an error string just in case we get one exception.

After that we’ll need to write the reducer, which is going to have the state changes that the store needs to do whenever an action is triggered.

// Reducer
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case FETCH_POKEMON_LIST:
      return {
        ...state,
        isLoading: true,
      };
    case FETCH_POKEMON_LIST_SUCCESS:
      return {
        ...state,
        pokemonList: action.payload.data.results,
        isLoading: false,
      };
    case FETCH_POKEMON_LIST_FAILURE:
      return {
        ...state,
        error: action.payload,
        isLoading: false,
      };
    case LOAD_MORE_POKEMON:
      return {
        ...state,
        isLoading: true,
      };
    case LOAD_MORE_POKEMON_SUCCEED:
      const newPokemonList = action.payload.data.results;
      const { pokemonList } = state;
      return {
        ...state,
        pokemonList: [...pokemonList, ...newPokemonList],
        isLoading: false,
      };
    case LOAD_MORE_POKEMON_FAILED:
      return {
        ...state,
        error: action.payload,
        isLoading: false,
      };
    default:
      return state;
  }
}

If you’re reading this you should be familiar with redux, the most important actions are the ones ending in SUCCEED PokeAPI returns a result like this one:

You see that the data.results will give us the list of pokemon and it’s paginated as well, so that suits perfectly for our functionality, because every time we go to the end of the scroll we will ask for the next page.

Another thing to mention is that when we succeed with the LOAD_MORE_POKEMON action we will have to merge the existing array with the one received in the new response, we use the spread operator for that purpose.

Next we need to define the action creators for the actions we’ve just created:

// Action Creators
export function loadPokemonList() {
  return { type: FETCH_POKEMON_LIST };
}

export function loadPokemonListSucceed(payload) {
  return { type: FETCH_POKEMON_LIST_SUCCESS, payload };
}

export function loadPokemonListFailed(payload) {
  return { type: FETCH_POKEMON_LIST_FAILURE, payload };
}

export function loadMorePokemon(payload) {
  return { type: LOAD_MORE_POKEMON, payload };
}

export function loadMorePokemonSucceed(payload) {
  return { type: LOAD_MORE_POKEMON_SUCCEED, payload };
}

export function loadMorePokemonFailed(payload) {
  return { type: LOAD_MORE_POKEMON_FAILED, payload };
}

Most of our action creators receive a payload, only the loadPokemonList does not need a payload because request does not need any arguments to be triggered.

Last but not least we would add the sagas, we need one saga for every request and a main one which is going to be observing when an action is dispatched.

import { call, delay, put, takeEvery, takeLatest } from "redux-saga/effects";

export function* fetchPokemonListSaga() {
  try {
    const response = yield call(getPokemonList);
    yield put(loadPokemonListSucceed(response));
  } catch (error) {
    yield put(loadPokemonListFailed(error.message));
  }
}

export function* loadMorePokemonListSaga(action) {
  const { payload } = action;
  try {
    const response = yield call(loadMorePokemonList, payload);
    yield delay(1000);
    yield put(loadMorePokemonSucceed(response));
  } catch (error) {
    yield put(loadMorePokemonFailed(error.message));
  }
}

export function* pokemonListWatcherSaga() {
  yield takeLatest(FETCH_POKEMON_LIST, fetchPokemonListSaga);
  yield takeEvery(LOAD_MORE_POKEMON, loadMorePokemonListSaga);
}

Redux saga is an awesome library to handle side effects, basically here we use the call effect to execute a promise, which in our case is the request to the endpoint(we’ll define those functions later), everything is inside the try catch because given the promise result we either going to display an error message or a success response, by using the put effect; which is able to dispatch a redux action; what is cooler is that they have a delay effect which is going to add 1 second of delay, so we have time to tell the user that something is happening.

The last saga is the one which is observing when an action is dispatched and will trigger the saga associated to it, takeLatest only take the latest dispatch of the action associated and it will cancel any running sagas related to it while takeEvery does take every action associated with it, without cancelling it. This should be the expected behavior because if we’re scrolling to fast we’ don't want to cancel anything because we need to load every pokemon.

With that in mind let’s setup the mainReducer and the mainSaga

touch src/redux/mainSaga.js & touch src/redux/mainReducer.js

Lets edit the rootSaga file

// rootSaga.js
import { all } from "redux-saga/effects";
import { pokemonListWatcherSaga } from "./modules/pokemonList";

export default function* rootSaga() {
  yield all([
    pokemonListWatcherSaga(),
  ]);
}

And lets edit the rootReducer file

// rootReducer
import { combineReducers } from "redux";
import pokemonListReducer from "./modules/pokemonList";

const rootReducer = combineReducers({
  pokemonListReducer,
});

export default rootReducer;

Last but not least at least for the redux part, we will setup the store:

touch src/redux/configureStore.js

And then lets edit the file.

import { createStore, applyMiddleware } from "redux";
import { createLogger } from "redux-logger";
import createSagaMiddleware from "redux-saga";

import rootReducer from "./rootReducer";
import rootSaga from "./rootSaga";

export default function configureStore(initialState = {}) {
  const middlewares = [];

  if (process.env.NODE_ENV === "development") {
    const logger = createLogger({ collapsed: true });
    middlewares.push(logger);
  }
  const sagaMiddleware = createSagaMiddleware();

  middlewares.push(sagaMiddleware);

  const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(...middlewares),
  );

  sagaMiddleware.run(rootSaga);

  return store;
}

Here we just imported our mainReducer and add the extra middleware (redux saga and redux-logger).

Now we need to create our endpoint, I personally like to use this setup:

yarn add axios humps
mkdir src/api
touch src/api/axiosInstance.js & touch src/api/pokemonEndpoints.js

The axiosInstance.js will be the one were we will set our default instance of axios with our custom config:

import axios from "axios";
import humps from "humps";

const axiosInstance = axios.create({
  baseURL: "https://pokeapi.co/api/v2/",
  transformResponse: [
    ...axios.defaults.transformResponse,
    data => humps.camelizeKeys(data),
  ],
  transformRequest: [
    data => humps.decamelizeKeys(data),
    ...axios.defaults.transformRequest,
  ],
});

export default function api(method, url, data = {}, options = {}) {
  const httpMethod = method.toLowerCase();

  const hasData = ["post", "put", "patch"].indexOf(httpMethod) >= 0;
  const settings = hasData ? options : data;

  const request = hasData
    ? axiosInstance[httpMethod](url, data, settings)
    : axiosInstance[httpMethod](url, settings);

  return request;
}

This helper is to decamelize the response received because pokeAPI does not has the json format using camelcase. Also there’s a custom function to pass the arguments we need to do a request.

import API from "./axiosInstance";

export const getPokemonList = () => {
  return API("get", `/pokemon/?offset=0&limit=20`);
};

export const loadMorePokemonList = limit => {
  return API("get", `/pokemon/?offset=${limit}&limit=20`);
};

This two endpoints are basically the same, just that the loadMorePokemonList accepts an argument which in this case contains the amount of mon we want to load, we’ll be incrementing by 20. Don’t forget to add this export to the pokemonList module.

That’s gonna be it for this tutorial, I hope you enjoyed this one and please stay tuned for the second part which is going to be focused on the component creation.

(This is an article posted to my blog at loserkid.io. You can read it online by clicking here.)

Introduction to Redux.

Jean Aguilar — Sun, 15 Sep 2019 21:30:37 +0000

Hi guys, today is a holiday in Costa Rica, we celebrate our independence and I’ll write and article for the sake of being a free country.

When you’re learning react is possible that you find articles, tutorials and projects using redux, it a widely used library when using react(even though is not particular to it) and solves one of the react biggest questions, How can I share props to non child component?.

That’s when redux comes in handy, based on their docs Redux is a predictable state container for JavaScript apps, it helps us, to share state between the application, in react that means that we can inject that piece of global state, across the whole app, without worrying if the components are attached to each other.

Before starting to dig into the boilerplate, first I would like to talk about the principles, that you should keep in mind when using redux.

Single source of truth This means that the state of the application should be stored in an object, which we’ll call store
State is read-only State can only be changed by an action , which is an object that we would talk later on the tutorial.
Changes are made with pure functions To specify how the state is going to change using the actions , we should use reducers , reducers are pure functions that return new state objects.

For this tutorial we will talk about, actions, action creators, reducers and action types:

An action is a plain javascript object that sends data to the store. they look like this:

{
  type: "FETCH_POKEMON_SUCCESS",
  payload: ["Bulbasaur", "Squirtle", "Charmander"]
}

The action creator is a function that creates actions, they can be easily confused, but just think them as functions that return an action.

An action type normally is how do you want to name your action, remember that an action is an object and basically the action type is the reference for the reducer of the dispatched action.

A reducer describes how the app changes based on the action received, normally a reducer is a switch statement that receives the redux state and the action as the parameters, and it return the state change in a new object(never mutate the existing one).

Now that you know a little bit about the core principles and the basics, we can start talking on how to write it. At the end redux code becomes a boilerplate, once you get used to it, you start writing everything automatically.

Redux file structure is diverse, because the library itself does not specify, how should you organize your code, it has a few guidelines on how to, if you are used to use opinionated frameworks.

I like to use the ducks structure, which differs from the others implementation because it holds all the redux logic in just one file, normally most of the examples that you find are based on a folder structure, where you’re storing your reducers in one folder, your actions in another, the action types in another, and so on. While that is also a good approach as well, I believe that it makes it a little bit harder to know what is happening, specially for beginners. The structure I use(ducks) is something like this:

The rootReducer is a file that contains all the reducers used across the app, the configureStore.js file is for setting up the store, it contains the rootReducer and it could also have all the extra middleware, we might want to add. The modules folder contain al the duck modules, we wish(we’re going to talk of them later) and the tests for each of them.

How to write a duck?

Writing a duck module is fairly easy, once you get used to it, you’ll write very fast. Duck structure is the following:

We write the action types.
We write the reducer.
We write the action creators.
We write side effects if applicable.

It does not sound that hard right? but we have to keep in mind certain rules for writing a duck module:

We MUST have the reducer as the default import.
We MUST export its action creators as functions.
We MUST have action types in the form app-name/reducer/ACTION_TYPE.
We MAY export its action types as UPPER_SNAKE_CASE, if we require them somewhere else.

So now that we know how to structure them, let’s write a basic module, we’re going to start writing the action types:

// Actions types
const FETCH_POKEMON_DATA = "pokemon-frontend/pokemon/FETCH_POKEMON_DATA"
const FETCH_POKEMON_SUCCESS = "pokemon-frontend/pokemon/FETCH_POKEMON_SUCCESS"
const FETCH_POKEMON_FAILURE = "pokemon-frontend/pokemon/FETCH_POKEMON_FAILURE"
const RESET_POKEMON_DATA = "pokemon-frontend/pokemon/RESET_POKEMON_DATA"

In this case I have four action types that are named using the convention, in this case the app name is called pokemon-frontend, the module name is called pokemon and the action type is written in UPPER_SNAKE_CASE.

After that I like to add the default state for my module, which in this case will be this one:

// Initial State
const initialState = { pokemonList: [], isLoading: false, error: {} }

Now we should write a reducer for our state, remember that the reducer is in charge of changing the state by returning a new object based on the action received:

// Reducer
export default function reducer(state = initialState, action = {}) { switch (action.type) {
    case FETCH_POKEMON_DATA:
      return {
        ...state,
        isLoading: true,
      }
    case FETCH_POKEMON_SUCCESS:
      return {
        ...state,
        pokemonList: action.payload.data,
        isLoading: false,
      }
    case FETCH_POKEMON_FAILURE:
      return {
        ...state,
        error: action.payload.response.data,
        isLoading: false,
      }
    case RESET_POKEMON_DATA:
      return { ...state, ...initialState }
    default:
      return state
  }
}

Keep in mind that the reducer should be the default import, and notice that the function receives the state and the action, the reducer is going to check for the action.type attribute and according to that it will return a new state. We use the spread operator to return a new object containing the initial state object which the respective changes. For example if we dispatch the action FETCH_POKEMON_DATA the returned state should be:

store.dispatch({ type: FETCH_POKEMON_DATA })

console.log(store.getState())
/*
Output:
 {
  pokemonReducer: {
    error: {},
    isLoading: true,
    pokemonList: [],
  }
 }
*/

As you can see on this code snippet, the initialState is not the same anymore cause the loading attribute changed to true, since we called store.dispatch, this triggered the action { type: FETCH_POKEMON_DATA } and that went to look in our reducer to see if the action.type matched with the switch statement case, in this case it did match, and the returned object updated the loading attribute to true.

Pretty cool right, now we have to create the action creators, as I mentioned before, they are just functions that will return an action.

// Action Creators
export function loadPokemon() {
  return { type: FETCH_POKEMON_DATA }
}

export function loadPokemonSucceed(payload) {
  return { type: FETCH_POKEMON_SUCCESS, payload }
}

export function loadPokemonFailed(payload) {
  return { type: FETCH_POKEMON_FAILURE, payload }
}

export function resetPokemon() {
  return { type: RESET_POKEMON_DATA }
}

So why, should we use them?, since we can call the action itself in the dispatch, as the example I used above to explain the reducer change.

Helps with abstraction and reduces code, because we don’t have to type the action name every time, and we reduce the number of imports.
Understand the code better by having names on the parameters, so you know what exactly does the action needs to have in order to change the state.

A basic example on how can we use them(very similar to the one above, using the action):

const payload = { data: ["Bulbasaur", "Squirtle", "Charmander"] }
store.dispatch(loadPokemonSucceed(payload))

console.log(store.getState())
/*
Output:
 {
  pokemonReducer: {
    error: {},
    isLoading: false,
    pokemonList: ["Bulbasaur", "Squirtle", "Charmander"],
  }
 }
*/

Now if you want, you can add selectors, or side effects handling, after that, but your module is done. here’s the full snippet:

// Actions types
const FETCH_POKEMON_DATA = "pokemon-frontend/pokemon/FETCH_POKEMON_DATA"
const FETCH_POKEMON_SUCCESS = "pokemon-frontend/pokemon/FETCH_POKEMON_SUCCESS"
const FETCH_POKEMON_FAILURE = "pokemon-frontend/pokemon/FETCH_POKEMON_FAILURE"
const RESET_POKEMON_DATA = "pokemon-frontend/pokemon/RESET_POKEMON_DATA"

const initialState = { pokemonList: [], isLoading: false, error: {} }

// Reducer
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case FETCH_POKEMON_DATA:
      return {
        ...state,
        isLoading: true,
      }
    case FETCH_POKEMON_SUCCESS:
      return {
        ...state,
        pokemonList: action.payload.data,
        isLoading: false,
      }
    case FETCH_POKEMON_FAILURE:
      return {
        ...state,
        error: action.payload.response.data,
        isLoading: false,
      }
    case RESET_POKEMON_DATA:
      return { ...state, ...initialState }
    default:
      return state
  }
}

// Action Creators
export function loadPokemon() {
  return { type: FETCH_POKEMON_DATA }
}

export function loadPokemonSucceed(payload) {
  return { type: FETCH_POKEMON_SUCCESS, payload }
}

export function loadPokemonFailed(payload) {
  return { type: FETCH_POKEMON_FAILURE, payload }
}

export function resetPokemon() {
  return { type: RESET_POKEMON_DATA }
}

This is a pretty basic example on how to use redux, with ducks, I explained some of the basics of redux, you should also need to know how to combine reducers, how to setup the store and how to use them with react, maybe I will write a post for it, because I don’t want to make this so long.

I would like to highlight that scoping this through modules using ducks can make the app scalable, easier to read and most importantly, will help beginners to not get confused by other approaches, that normally have the redux boilerplate through lots of folders.

(This is an article posted to my blog at loserkid.io. You can read it online by clicking here.)

Rails API with a frontend built in React, Part IV.

Jean Aguilar — Mon, 09 Sep 2019 21:14:14 +0000

In this part of the series we will connect the frontend with our API,
recapitulating the previous chapter we allow our API to receive requests from any origin, and that will allow us to run our front in port 3001, while simultaneously run our API in port 3000.

Now let's start creating a folder to store our components.

$ mkdir src/components
$ mkdir src/components/pages
$ mkdir src/components/partials

In order to create our movie visualization, we'll need to add react router to link our components, and avoid re rendering stuff when we don't need to.

yarn add react-router-dom

And we will create a file to declare our routing.

touch src/AppRouter.js

In that file we'll add the following:

import React from "react"
import { Route, Switch } from "react-router-dom"
import HomePage from "./components/pages/HomePage"
import MoviePage from "./components/pages/MoviePage"

const AppRouter = () => {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/movies" component={MoviePage} />
      </Switch>
    </div>
  )
}

export default AppRouter

Notice that we're using two components from react-router-dom and we defined our root Route but we don't have one for that yet, so let's do one very quick

touch src/components/pages/HomePage.js

Let's add this to our HomePage:

import React from "react"

const HomePage = () => {
  return (
    <div>
      <div className="jumbotron jumbotron-fluid">
        <div className="container">
          <h1 className="display-4">Movie App</h1>
          <p className="lead">This is an App to display and create movies</p>
        </div>
      </div>
    </div>
  )
}

export default HomePage

We need to integrate our existing changes with our App.js file, so we'll have to do the following in our App.js:

// Rest of the imports
import { BrowserRouter as Router } from "react-router-dom";
import AppRouter from "./AppRouter"

const store = setupStore()

function App() {
  return (
    <Provider store={store}>
      <Router>
        <AppRouter />
      </Router>
    </Provider>
  )
}

export default App

Now the code should not compile(because we have not created the MoviePage yet), don't panic and let's create a component that will be in charge of displaying a list of movies.

$ touch src/components/pages/MoviePage.js

This component will be a table containing all the movies available in our database. It will perform a get request to our endpoint to retrieve all the movies available and display them in the table.

We will create the basic structure but first we'll need to add react bootstrap which, to use the JS functionality in bootstrap.

Lets edit our MoviePage.js and add a table in that component, we could use the Table component in react-bootstrap but it does not make much sense since we can do it by ourselves.

import React, { Component } from "react"

class MoviePage extends Component {
  render() {
    return (
      <div className="container">
        <h1>Movie List</h1>
        <table className="table">
          <thead>
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Plot</th>
              <th>Release Date</th>
              <th scope="col">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">Movie 1</th>
              <td>This is the movie description</td>
              <td>This is the relase date</td>
              <td>My action</td>
            </tr>
          </tbody>
        </table>
      </div>
    )
  }
}

export default MoviePage

Now if we go to our local server and add in the root url /movies we should see the table we've just created. This is for the moment because we need to create extract that into little components.

We need to add a movie reducer, which will contain an array of movies, and it will add, delete and edit movies. Let's create the file

touch src/redux/modules/movie.js

Lets edit this file, we're recreating our dummy module, it will be the same structure but it will contain more actions.

import { all, put, call, takeLatest } from "redux-saga/effects"
import { handleActions, createAction } from "redux-actions"

// Actions
export const FETCH_MOVIES = "movie-frontend/movie/FETCH_MOVIES"
export const FETCH_MOVIES_SUCCEEDED =
  "movie-frontend/movie/FETCH_MOVIES_SUCCEEDED"
export const FETCH_MOVIES_FAILED = "movie-frontend/movie/FETCH_MOVIES_FAILED"

In this extract of our movie module, we have defined 3 modules for fetching the list of movies, if you're familiar to rails, the actions above will be the ones in charge to handle a get request to our API to fetch all the existing movies in our database, we have the first action which will trigger the request and the other ones are for handling the response, which can either succeed or fail.

Now we have to define our initial state, in this case we will have an array of movies, which be default is an empty array, a boolean that will change if the request has finished, and an error variable which is going to display the error if there's one.

// Rest of the code

// Initial State
export const getInitialState = () => {
  return {
    fetching: false,
    movies: [],
    error: null,
  }
}

Now we need the reducer, think of the reducer as the way our state should mutate given an action, for example when we perform the FETCH_MOVIES action we should mutate our existing movie state, because this action means we're performing a get request so the fetching boolean value should switch to true, the error should keep their null value, and our movie array should be empty as well, because we have not received a response from the server. Is important to keep this in mind, as reducers can be complex the first time.

// Rest of the code

// Reducer

const movieReducer = handleActions(
  {
    [FETCH_MOVIES]: state => {
      return {
        ...state,
        fetching: true,
        error: null,
      }
    },
    [FETCH_MOVIES_SUCCEEDED]: (state, action) => {
      const { data } = action.payload
      return {
        ...state,
        fetching: false,
        movies: data,
      }
    },
    [FETCH_MOVIES_FAILED]: (state, action) => {
      const message = action.payload
      return {
        ...state,
        fetching: false,
        error: message,
      }
    },
  },
  getInitialState()
)

export default movieReducer

Notice how the initial state is mutating through the actions, and how defining error and success actions can help us to handle the request in a better way. Let's create the action creators(these will be the ones in charge to dispatch or trigger an action).

// Rest of the code

// Action Creators
export default movieReducer

export const requestMoviesFetch = createAction(FETCH_MOVIES)

export const succeededMoviesFetch = createAction(FETCH_MOVIES_SUCCEEDED)

export const failedMoviesFetch = createAction(FETCH_MOVIES_FAILED)

Last but not least we need to use redux-saga to handle the side effects( in this case the get request), redux saga acts as a middleware, so when an action is dispatched, the saga will be triggered as well. We need to define that, and create a generator function to perform that flow.

// Rest of the code
// Sagas
export function* fetchMoviesSaga() {
  try {
    const payload = yield call(fetchMoviesData)
    yield put(succeededMoviesFetch(payload))
  } catch (error) {
    yield put(failedMoviesFetch(error.message))
  }
}

// Main Saga
export function* movieSaga() {
  yield all([takeLatest(FETCH_MOVIES, fetchMoviesSaga)])
}

Our fetchMoviesSaga is a generator function that performs the get request and the function is triggered whenever we dispatch the requestMoviesFetch action creator, we try to call our api using the call effect from redux saga, we're using a function that we have not created yet fetchMoviesData and given the result of that call we are going to dispatch in our saga the succeededMoviesFetch or the failedMoviesFetch. Sounds easy right, then the last function movieSaga is a wrapper of all the sagas for that given resource, we will update it whenever we create a new saga.

We don't have the call yet so let's create it:

$ touch src/api/movie.js

And let's edit the file, remember that on the last post of this series with React, we created a file called api.js, We 're going to export the axios instance in that file.

import API from "./api"

export const fetchMoviesData = () => {
  return API.get("/movies/")
}

Here we're pointing to our rails route movies that should return the whole array of movies. Is not necessary to use the whole url, because it is already defined in the api.js file. So everything is almost set up, to modify our frontend, but first we are going to add a few things

/* src/redux/modules/movie.js */

// Don't forget to add this import
import { fetchMoviesData } from "../../api/movie"

/* src/redux/modules/rootReducer.js */
import { combineReducers } from "redux"

import dummy from "./modules/dummy"
import movie from "./modules/movie"

const rootReducer = combineReducers({
  dummy,
  movie,
})

export default rootReducer

/* src/redux/modules/rootSaga.js */

import { all } from "redux-saga/effects"
import { dummySaga } from "./modules/dummy"
import { movieSaga } from "./modules/movie"

export default function* rootSaga() {
  yield all([dummySaga(), movieSaga()])
}

We just added our new movie to our rootReducer and our new saga to our rootSaga, plus we added the missing import in the movie module.

We have everything set up, now we need to run the rails server in port 3000 and then we can run our React project in the port that you want, but the rails port should be 3000 because that is the one we specified in the axios instance. With that set up lets edit our MoviePage a little bit.

mkdir src/components/partials/movie
touch src/components/partials/movie/MovieList.js
touch src/components/partials/movie/MovieListItem.js

We're trying to make everything smaller so we will break our MoviePage component, it is going to use the ones we just created but first we are going to edit those files.

/* MoviePage.js */
import React from "react"
import MovieList from "../partials/movie/MovieList"

const MoviePage = () => (
  <div className="container">
    <h1>Movie List</h1>
    <MovieList />
  </div>
)

export default MoviePage

Then we will edit our MovieList

/* MovieList.js */
import React, { Component } from "react"
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import { requestMoviesFetch } from "../../../redux/modules/movie"
import MovieListItem from "./MovieListItem"

class MovieList extends Component {
  componentDidMount() {
    const { requestMoviesFetch } = this.props
    requestMoviesFetch()
  }

  render() {
    const { data } = this.props
    const { movies, fetching, error } = data
    return (
      <div>
        {fetching ? (
          <div className="d-flex align-items-center">
            <strong>Loading...</strong>
            <div
              className="spinner-border ml-auto"
              role="status"
              aria-hidden="true"
            />
          </div>
        ) : (
          <table className="table table-hover table-bordered table-responsive-sm">
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Plot</th>
                <th scope="col">Release Date</th>
                <th scope="col">Actions</th>
              </tr>
            </thead>
            <tbody>
              {!!movies && movies.length > 0 ? (
                movies.map(movie => {
                  return <MovieListItem key={movie.id} {...movie} />
                })
              ) : (
                <tr>
                  <th colSpan="4" className="text-center text-danger">
                    {error}
                  </th>
                </tr>
              )}
            </tbody>
          </table>
        )}
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    {
      requestMoviesFetch,
    },
    dispatch
  )
}

const mapStateToProps = state => ({
  data: state.movie,
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MovieList)

We're passing our state to the component using the mapStateToProps function and we're also passing an action creator (requestMoviesFetch) and we're invoking the method on our componentDidMount method, this is going to make the call to the API and we will be able to see the list of movies, also notice how we are using the fetching and error values that we defined on the initial state, those are useful for displaying something according the request response or even to do something when we're waiting for the response.

Now let's edit our MovieListItem component:

/* MovieListItem.js */
import React from "react"
import { Link } from "react-router-dom"
import { connect } from "react-redux"

const MovieListItem = ({ id, title, plot, releaseDate }) => {
  return (
    <tr>
      <td>
        <Link to={`/movies/${id}`}>
          <h6>{title}</h6>
        </Link>
      </td>
      <td>
        <p
          className="d-inline-block text-truncate"
          style={{ maxWidth: "500px" }}
        >
          {plot}
        </p>
      </td>
      <td>
        <p>{releaseDate}</p>
      </td>
      <td>
        <Link to={`/movies/${id}/edit`}>Edit</Link>
      </td>
    </tr>
  )
}

export default MovieListItem

This is a dumb component used for displaying the info and that's it, it does not do anything else. If everything was done correctly we should be seeing the list of movies, like this

Cool we did our first API call to our rail app and we're seeing data, now we need to be able to add a movie as well, also see a specific movie and update it. So stay tuned for more.

What should be persisted in the frontend and where?

Jean Aguilar — Wed, 21 Aug 2019 21:23:57 +0000

Hi guys I've been searching online and I could not find anything relevant. The thing is that I was wondering if you have any tips on persisting data, let's say if we perform a fetch to query something from the backend, should we persist it in the frontend even if a refresh, or a change of page is made, how do you handle that?

I know the auth credentials are normally stored in the session storage, local storage or even cookies, but is there anything relevant that we should store, let's say a request with lot's of data, is it a good idea to keep it somewhere, or is better to perform the request every time the given page is accessed?

Tag is react because is the library I'm most familiar with, but feel free to discuss if using another framework, library.

Rails API with a frontend built in React, Part III.

Jean Aguilar — Sat, 08 Jun 2019 01:34:24 +0000

In this post we will be adding a Movie resource to our API. Let's modify our routes file in config/routes.rb

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :movies
    end
  end
end

If we run rails routes we should be able to see something like this

Lets create a new controller to be the one to do our API stuff.

$ mkdir app/controllers/api
$ mkdir app/controllers/api/v1
$ touch app/controllers/api/v1/api_controller.rb

First we created two new directories for namespacing our API, it is important to do it if we are planning to version the API and also if we plan future releases. We created a new controller called ApiController which is the one we will be inheriting from, just leave it like this. Namespacing is very important in order for this to work.

class Api::V1::ApiController < ActionController::API
end

Movie model.

Now we're going to create our first model, the Movie model, our movie will have a title, a plot and a release date, at least for now.

$ rails generate model Movie title plot:string release_date:date

It should generate four new files, one containing the migration, two for our tests and the file for the model.

Now let's create our database and then apply the new migration.

$ rails db:create
$ rails db:migrate

After that we need to add some validations, the title and the date must be required fields.

class Movie < ApplicationRecord

  validates :title, :release_date, presence: true

end

Testing models with shoulda matchers.

For testing the validations we just made, we're going to be using shoulda matchers, one of the gems added in the last tutorial(one liners tests for rails), by modifying our newly generated file spec/models/movie_spec.rb

RSpec.describe Movie, type: :model do
  describe "validations" do
    it { is_expected.to validate_presence_of(:title) }
    it { is_expected.to validate_presence_of(:release_date) }
  end
end

Notice how in the it statements we added a describe block with two lines for validating the presence of our fields, that's how shoulda matchers works, it lets you write a simple readable one line to test the functionality of your rails app.

Creating our first factory.

Now that we have that, we need to modify the other test file that was generated by us when we run the rails generate model, this is a factory file, and we're going to modify it a bit. Thats when faker comes in handy, because it lets us fill the factory with dummy data in order to be used in the tests, in this way we can create tests using different data values, it is important to be careful though, because faker does not have unlimited data values, so there's a possibility to create duplicate values, and if one of our models validates the uniqueness of a certain field, the test can break because there's already a resource with that name; Anyways that's how the file should look like(There's no movie names in faker gem, so I'm using Book names instead).

FactoryBot.define do
  factory :movie do
    title { Faker::Book.title }
    plot { Faker::Lorem.paragraph }
    release_date { Faker::Date.birthday(18, 65) }
  end
end

Seeding the database.

Now that you see that faker can generate fake data, let's create some seeds for our movies in db/seeds.rb

10.times do
  Movie.create(
    title: Faker::Book.title,
    plot: Faker::Lorem.paragraph,
    release_date: Faker::Date.birthday(18, 65),
  )
end

Finally run this command to add the fake movies

$ rails db:seed

Creating the movie controller.

Great, now its time to create a controller for our Movie model, we're going to add a new file called movies_controller.rb in our api namespace.

$ touch app/controllers/api/v1/movies_controller.rb

This controller will be on charge of displaying, editing, adding and deleting movie resources, for tutorial purposes I will not explain how a regular controller works, I'm just goingt to show you the actual code.

class Api::V1::MoviesController < Api::V1::ApiController
  before_action :set_movie, only: %i[show update destroy]

  def index
    @movies = Movie.all

    render json: @movies
  end

  def show
    render json: @movie
  end

  def create
    @movie = Movie.new(movie_params)

    if @movie.save
      render json: @movie, status: :created
    else
      render json: @movie.errors, status: :unprocessable_entity
    end
  end

  def update
    if @movie.update(movie_params)
      render json: @movie
    else
      render json: @movie.errors, status: :unprocessable_entity
    end
  end

  def destroy
    @movie.destroy
  end

  private
    def set_movie
      @movie = Movie.find(params[:id])
    end

    def movie_params
      params.require(:movie).permit(:title, :plot, :release_date)
    end
end

If you're familiar with the framework this code should not surprise you, and is this your first rails API you can see that we're rendering JSON instead of a regular html view, the rest is just a regular controller logic flow.

Serializers

In order to display that we are going to use a gem called active_model_serializers, which is a gem that is going to allow us to modify which content should be displayed in our JSON responses.

# Rest of the gems
gem "active_model_serializers", "~> 0.10.0"

After bundling that new gem, we're going to create a new serializer for our Movie resource, but first lets see how a regular response looks at the moment, we can check that using postman, curl or whatever you want, just start your rails server. And try to make a get request to this URL: http://localhost:3000/api/v1/movies/1 and your output should be similar to the following:

{
  "id": 1,
  "title": "In Death Ground",
  "plot": "Maxime nulla architecto. Sit et et. Et vero reiciendis.",
  "release_date": "1979-03-29",
  "created_at": "2019-06-07T04:22:30.850Z",
  "updated_at": "2019-06-07T04:22:30.850Z"
}

Notice that we're displaying everything in the response, this is not a good idea because there can be some cases where we want to hide certain information in our response. Because of that we're using serializers, it is worth to mention that sometimes people prefer to use Jbuilder which basically is creating instead of an html.erb file one with an extension of json.jbuilder under the views folder. While this approach is also a good one, I prefer to use the serializers because I don't like the idea of creating files in the views folder. If we're making an API, sounds kind of dumb, even though it is a completely valid approach, for me it does not make sense to use the views folder in an API only application.

Lets create our serializer file.

$ mkdir app/serializers
$ touch app/serializers/movie_serializer.rb

Now lets edit our newly created file

class MovieSerializer < ActiveModel::Serializer

  attributes :id, :title, :plot, :release_date

end

Now if we try to perform the same get request we should get something like this:

{
  "id": 1,
  "title": "In Death Ground",
  "plot": "Maxime nulla architecto. Sit et et. Et vero reiciendis.",
  "release_date": "1979-03-29"
}

Notice that in our new response we're omiting the created_at and the updated_at fields, because we did not specify them in our serializer.

RSpec controller test

If you want to play with the functionality of the controller actions feel free to do so, I'll skip that part to show you how to start testing the controller in the application. Lets create the test file.

$ mkdir spec/controllers
$ mkdir spec/controllers/api
$ mkdir spec/controllers/api/v1
$ touch spec/controllers/api/v1/movies_controller_spec.rb

Now the basic tests controller structure is this one(notice the namespacing like in the controller)

require "rails_helper"

RSpec.describe Api::V1::MoviesController, type: :controller do
  # Your tests
end

This is the basic structure, normally when you test controllers you need to ensure that all the actions are tested, lets start defining attributes for our object, this will allow to test when we're performing POST or PUT actions.

RSpec.describe Api::V1::MoviesController, type: :controller do
  let(:valid_attributes) do
    {
      title: "American Pie",
      plot: "Teen Comedy",
      release_date: "09-06-1999",
    }
  end

  let(:invalid_attributes) do
    { release_date: nil }
  end
end

Here we're instantiating two variables to be available to use in the describe blocks of our actions, these are working la global variables for this file.

Now lets start writing some actions, first we're going to add the index and show actions.

RSpec.describe Api::V1::MoviesController, type: :controller do
  # Rest of the code
  describe "GET #index" do
    it "returns a success response" do
      get :index, params: {}
      expect(response).to be_successful
    end
  end

  describe "GET #show" do
    it "returns a success response" do
      movie = create(:movie)
      get :show, params: { id: movie.to_param }
      expect(response).to be_successful
    end
  end
  # Rest of the code
end

In this two describe blocks we're performing a get request to our index and show actions, the index does not require any params to work so we're not sending anything, the show action by counterpart does need one param, which we in rails by default is the :id. We're using factory bot to create a new movie and the use the new id of that movie to pass it in our params.

For our create action the code should look like this.

RSpec.describe Api::V1::MoviesController, type: :controller do
  # Rest of the code
  describe "POST #create" do
    context "with valid params" do
      it "creates a new Movie" do
        expect do
          post :create, params: { movie: valid_attributes }
        end.to change(Movie, :count).by(1)
      end

      it "returns a 201 status code" do

        post :create, params: { movie: valid_attributes }
        expect(response).to have_http_status(:created)
      end
    end

    context "with invalid params" do
      it "does not create a new Movie" do
        expect do
          post :create, params: { movie: invalid_attributes }
        end.to change(Movie, :count).by(0)
      end

      it "returns a 422 status code" do

        post :create, params: { movie: invalid_attributes }
        expect(response).to have_http_status(:unprocessable_entity)
      end
    end
  end
  # Rest of the code
end

Notice that in our describe we are using two contexts, one with valid attributes and the other with invalid attributes. The two contexts are basically testing the same, with the valid attributes we're expecting two things, one is to persist a new movie in our database, so that will change our Movie count by 1 and also we expect a 201 created response from the server, because a new movie was created. The other context is doing the opposite, it is expecting the invalid attributes to not change our Movie count, and to return an unprocessable entity response to tell users that the movie could not be created.

To continue with this test we are going to add the update action.

RSpec.describe Api::V1::MoviesController, type: :controller do
  # Rest of the code
  describe "PUT #update" do
    context "with valid params" do
      let(:new_attributes) do
        {
          title: "American Pie 2",
          release_date: "06-08-2001",
        }
      end

      it "updates the requested movie" do
        movie = create(:movie)
        put :update, params: { id: movie.to_param, movie: new_attributes }
        movie.reload
        expect(movie.attributes).to include("title" => "American Pie 2")
      end

      it "returns a 200 status code" do
        movie = create(:movie)

        put :update, params: { id: movie.to_param, movie: valid_attributes }
        expect(response).to have_http_status(:ok)
      end
    end

    context "with invalid params" do
      it "returns a 422 status code" do
        movie = create(:movie)

        put :update, params: { id: movie.to_param, movie: invalid_attributes }
        expect(response).to have_http_status(:unprocessable_entity)
      end
    end
  end
  # Rest of the code
end

The update action is different, because we're changing how the attributes look, so here we need to instance a let variable to our pass the new attributes, and then we're creating two context like in our create action to validate the two possible scenarios, if the movie updates correctly we should expect the updated attributes to be equal as the new_attributes variable and we should also expect a 200 ok response from the server to tell the user that the change was succesful. In our failure context we are testint that if we sent a nil value to one of our required fields, the update will fail, because we defined that the release_date can't be blank.

Our final action to test is called destroy

RSpec.describe Api::V1::MoviesController, type: :controller do
  # Rest of the code
  describe "DELETE #destroy" do
    it "destroys the requested movie" do
      movie = create(:movie)
      expect do
        delete :destroy, params: { id: movie.to_param }
      end.to change(Movie, :count).by(-1)
    end
  end
end

The describe works as the opposite as the create, because we're expecting the movie count to be minus one because a movie was deleted. Notice how the factory helps to avoid code duplication.

Cross-origin resource sharing.

Now that everything is tested we're done with our movie resource, now its time to allow our API to receive requests from external sources, for example our local frontend, running in another port. We need to install the gem which is commented in the gemfile.

gem "rack-cors"

After running bundle install lets modify the cors file:

# config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "*"

    resource "*",
             headers: :any,
             methods: %i[get post put patch delete options head]
  end
end

This should be configured accordingly and my example here should not be used in a real API, because basically we're allowing any origin to access and perform any request to our API.

To end this tutorial and before making any push to a remote repo we should check if rspec and rubocop are passing, let's try that.

$ rubocop -a

Which should produce something like this:

And now lets run RSpec to see if our tests are passing

$ rspec

And you should see everything passing.

Yei, that should be everything for this post, feel free to correct me or ask if something was not clear and stay tuned for the next post, which will be integrating this to the react project.