Crank: Shared functionality across event listeners

[thisjeremiah]

In the spirit of DRY, would this be an appropriate pattern for sharing functionality between event listeners (e.g. writing to local storage, triggering a component refresh)?

function* App() {
    // ...
    const onEvent = ev => {
        switch (ev.type) {
          case "todo.create":
            todos.push({
              id: nextTodoId++,
              title: ev.detail.title,
              completed: false
            });
            break;
          case "todo.destroy":
            todos = todos.filter(todo => todo.id !== ev.detail.id);
            break;
        }
        this.refresh();
        save(todos);
    };

    this.addEventListener("todo.create", onEvent);
    this.addEventListener("todo.destroy", onEvent);
    // ...
}

TODO MVC Sandbox Example:
https://codesandbox.io/s/epic-tu-pnckp?file=/src/index.js

I realize this may be a JS question, not a crank question...

[brainkim]

This looks interesting! It almost looks like a Redux reducer, which is kinda cool. I also like that it encapsulates the refresh/save logic for each event. My only worry is that the type of ev is kinda complicated. It’s a union of all the events that are available in TodoMVC. Dunno if this is good or bad but something to think about!

[lukejagodzinski]

I like it, you could actually externalize it into separate file for only dealing with events:

// reducer.js
export function reducer() {
  const onEvent = (ev) => {
    switch (ev.type) {
      case "todo.create":
        todos.push({
          id: nextTodoId++,
          title: ev.detail.title,
          completed: false,
        });
        break;
      case "todo.destroy":
        todos = todos.filter((todo) => todo.id !== ev.detail.id);
        break;
    }
    this.refresh();
    save(todos);
  };

  this.addEventListener("todo.create", onEvent);
  this.addEventListener("todo.destroy", onEvent);
}

and later kinda use it as hooks in the component and even reuse it:

function* App() {
  reducer.call(this);

  /* ... */
}

[brainkim]

These are cool ideas, but I think I’m going to keep the TodoMVC with separate event listener callbacks, just cuz that feels crankier to me. But I encourage you to experiment! Closing the issue for housekeeping purposes, but feel free to continue the discussion!