[Functional Programming] Building a Timer UI by Composing Callbacks

Controlling when a broadcaster starts and stops gives you complete control over your broadcasters. This let's you hook multiple pieces of UI together to offer to the user and allow them to manage the behaviors of your application. This lesson walks through creating a timer using a startWhen and a stopWhen operator which are hooked into buttons.

Think of some other scenarios where have beginnings and ends controlled by events. For example, a mouse drag that starts with a mouse down and ends with a mouse up

 

import { curry, pipe } from "ramda";

document.getElementById("app").innerHTML = `
<h1>Hello Parcel!</h1>
<div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
</div>
`;

const addListener = (selector, eventType) => (listener) => {
  const element = document.querySelector(selector);
  element.addEventListener(eventType, listener);
  return () => {
    element.removeEventListener(eventType, listener);
  };
};
const createInterval = curry((time, listener) => {
  let i = 0;
  const id = setInterval(() => {
    listener(i++);
  }, time);
  return () => {
    clearInterval(id);
  };
});

let startClick = addListener("#start", "click");
let stopClick = addListener("#stop", "click");

let timer = createInterval(100);

// A event happen to trigger B event
let startWhen = (whenBroadcaster) => (mainBroadcaster) => (listener) => {
  let cancelMain;
  let cancelWhen;

  cancelWhen = whenBroadcaster((whenValue) => {
    if (cancelMain) cancelMain();
    cancelMain = mainBroadcaster((value) => {
      if (value === done) {
　　　　　　if (whenValue === done) {      　　　　
　　　　　　　　listener(done); 

　　　　　　}
 　　　　　return
　　　　}
　　　　listener(value)
    });
  });

  return () => {
    cancelMain();
    cancelWhen();
  };
};

let stopWhen = (whenBroadcaster) => (mainBroadcaster) => (listener) => {
  let cancelMain = mainBroadcaster(listener);

  let cancelWhen = whenBroadcaster((value) => {
    cancelMain();
  });

  return () => {
    cancelMain();
    cancelWhen();
  };
};

const operators = pipe(stopWhen(stopClick), startWhen(startClick));
operators(timer)(console.log);

//  startWhen(startClick)(stopWhen(stopClick)(timer)) (console.log)