A simple spinner HOC

withSpinner.jsx

// Her er en enkel spinner - en div med no css på
const Spinner = () => (
  <div className="spinner" />
);

// Her er en liste med todos - den rendrer ut listen med todos.
const TodoList = props => (
  <ul classList="todos">
    {props.todos.map(todo => <li className="todo" key={todo.id}>{todo.text}</li>)}
  </ul>
);

// withLoader er en funksjon som tar `loadingProp` som argument 
// - navnet på en prop som indikerer om man skal vise en loader eller ikke
// Eksempler kan f.eks. være 'todos' i dette tilfellet.
function withLoader(loadingProp) {
  // withLoader-funksjonen returnerer en funksjon som tar en komponent som 
  // argument, og som returnerer en ny komponent igjen. Dette mønsteret der 
  // man tar en komponent som argument og returnerer en ny komponent som 
  // igjen rendrer argument-komponenten - det er hva man kaller en høyere-
  // ordens-komponent.
  return function(TargetComponent) {
    return class WithLoadingComponent extends Component {
      
      // isEmpty er en convenience-funksjon som lar oss finne ut om 
      // propertyen man spesifiserte er "tom". Det kan hende på tre 
      // forskjellige måter:
      isEmpty(prop) {
        // Hvis propertyen er et array, er den tom om den ikke har noen elementer
        return (Array.isArray(prop) && prop.length === 0)
          // Hvis propertyen er et objekt, er den tom om den ikke har noen properties (keys)
          || (typeof(prop) === 'object' && Object.keys(prop).length === 0)
          // Hvis propertyen ikke er hverken et objekt eller et array, er den tom om den er falsy (null, undefined etc)
          || !prop;
      }
      render() {
        if (this.isEmpty(this.props[loadingProp])) {
          // Hvis propertyen vi spesifiserte er tom, så rendrer vi en spinner.
          return <Spinner />;
        } else {
          // Hvis propertyen ikke er tom, rendrer vi komponenten vi dekorerte.
          return <TargetComponent {...this.props} />;
        }
      }
    }
  }
}

// Først kaller vi funksjonen withSpinner, som returnerer en ny funksjon (se over)
const decorated = withSpinner('todos');
  
// Så kaller vi denne metoden, som tar vår komponent som argument, og returnerer den dekorerte komponenten igjen.
const TodoListWithSpinner = decorated(TodoList);