Typescript Timer Number

2017 Oct 23

It appears that in a recent updates to either type definitions in my project, or some library, that a few of my timeouts and intervals might be causing issues:

ERROR in [at-loader] ./src/pages/ExamplePage.tsx:41:23
    TS2345: Argument of type '{ intervalId: Timer; }' is not assignable to parameter of type 'Pick<IState, "intervalId">'.
  Types of property 'intervalId' are incompatible.
    Type 'Timer' is not assignable to type 'number'.

After a little digging, I was able to find that using window.setTimout or window.setInterval should return the correct type of number – it looks like NodeJS uses Timer.

Hope this helps!

SublimeText Multiple Cursors or Carets

2017 Oct 12

I’ve been using MacVim forever, and finally switched to using SublimeText with the vintage mode enabled. It’s scratching many of the itches I’ve had, but one of the main things I liked to do in vim was stuff like prepending content to multiple lines by selecting multiple lines and then typing:

:norm!Iprefix content

After a little digging, I found that you can add the following keybindings:

[
    { "keys": ["super+up"], "command": "select_lines", "args": {"forward": false} },
    { "keys": ["super+down"], "command": "select_lines", "args": {"forward": true} }
]

Now you can hit your command key and an up/down arrow to get multiple cursors, and then perform the insert to all the lines.

React State-Transform Pattern

2017 Oct 11

The Problem

When working with React, one issue I’ve run into is the reusability of certain functionalities in my React Components, but I’ve found that something feels a little weird to be:

class StateMicroChangeComponent extends React.Component {
    ...
    handleSelectCategory(selectedCategory) {
        let allResults = this.state.allResults;

        let filteredResults = this.filterResults(allResults, selectedCategory);
        filteredResults = this.sortResults(filteredResults);

        this.setState({
            filteredResults,
            selectedCategory,
        });
    }
    ...
}

In the above example, I’m happy if there’s only one instance where we perform the filtering/sorting, but if our Component performs these tasks multiple times, it might be difficult to maintain. If the implementation of the filter and sort change, we would need to update all the instances.

What I’ve Started Doing

With the amount of Redux I’ve been using recently, I’ve gotten used to the idea of transforming state as a whole, and applying reducers to it, resulting in more of a state-as-a-whole approach:

class StateTransformComponent extends React.Component {
    ...
    handleSelectCategory(selectedCategory) {
        let state = { ...this.state, selectedCategory };

        state = this.applyResultFilter(state);
        state = this.applyResultSort(state);

        this.setState(state);
    }
    ...
}

Now, if filtering or sorting need a tweak, the applyResultFilter and applyResultSort can contain the specifics, while the components interfaces with the transform function.

This has helped me a few times to simplify my code’s logic, even to the point of defining further functions that I would reuse like applyResultFilterAndSort which does both, for added reusability.