Skip to content

Instantly share code, notes, and snippets.

Avatar

Elie Rotenberg elierotenberg

View GitHub Profile
@elierotenberg
elierotenberg / ComplexClass-0.js
Created Dec 14, 2015
babel-transform-legacy-decorators v1.3.0 bug
View ComplexClass-0.js
import autobind from './autobind';
class Base {
constructor(v) {
this.v = v;
}
}
function multiply(by) {
return function $multiply(target, name, descriptor) {
View throttle-debounce-props-update.js
@stores({
...
})
@debouncePropsUpdate({
x: 1000,
})
@throttlePropsUpdate({
y: 1000,
})
class MyComponent extends React.Component {
@elierotenberg
elierotenberg / task.json
Created Feb 2, 2018
task.json file to run currently opened .m (octave/matlab) file with Ctrl+Shift+B
View task.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Run",
"type": "shell",
"windows": {
"command": "C:\\Octave\\Octave-4.2.1\\bin\\octave-gui.exe",
View gist:687c44f035f136d092edcbf9d2078a7c
const state = {
counter: 0
};
const randomInt = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min;
const sleep = (min, max = min) =>
new Promise(resolve => {
setTimeout(resolve, randomInt(min, max));
View concurrency.js
const state = {
counter: 0
};
const randomInt = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min;
const sleep = (min, max = min) =>
new Promise(resolve => {
setTimeout(resolve, randomInt(min, max));
@elierotenberg
elierotenberg / async-assign.js
Created Feb 22, 2019
Evaluation order vs. concurrency
View async-assign.js
(async () => {
// small function that resolves after t ms
const sleep = t => new Promise(resolve => setTimeout(resolve, t));
let state = {
counter: 0,
running: true
};
const setCounter = v => {
@elierotenberg
elierotenberg / IMyProtocol.d.ts
Last active Mar 5, 2019
Statically typechecked serializable protocol
View IMyProtocol.d.ts
import { IProtocol, IRequestResponseMap, IEventMap } from "./IProtocol";
import { ISerializable } from "./ISerializable";
type RequestResponseMap = {
ping: {
RequestParams: {};
ResponseParams: {};
};
echo: {
RequestParams: ISerializable;
@elierotenberg
elierotenberg / prototype.js
Last active May 16, 2019
Get text within rectangle
View prototype.js
(() => {
const MAX_BASENAME_LENGTH = 64;
const clicks = [];
const getNodesInRectangle = (topLeft, bottomRight) =>
Array.from(document.querySelectorAll("*").values()).filter(node => {
const { x, y, width, height } = node.getBoundingClientRect();
return (
x >= topLeft.x &&
x + width <= bottomRight.x &&
y >= topLeft.y &&
@elierotenberg
elierotenberg / DockerCompose.ts
Created Aug 15, 2019
Docker Compose TestUtils
View DockerCompose.ts
interface IDockerComposeProps {
cwd?: string;
dockerComposeFile: string;
}
class DockerCompose {
private readonly props: IDockerComposeProps;
private state: "unknown" | "pending-up" | "up" | "pending-down" | "down";
public constructor(props: IDockerComposeProps) {
@elierotenberg
elierotenberg / BLOG.md
Last active Mar 8, 2021
Idiomatic Data Fetching using React Hooks
View BLOG.md

Idiomatic Data Fetching using React Hooks

This post has been written in collaboration with @klervicn

Virtually all web apps and websites need to pull data from a server, usually through a JSON-returning API. When it comes to integrating data fetching in React component, the "impedence mismatch" between the React components, which are declarative and synchronous, and the HTTP requests, which are imperative and asynchronous, is often problematic.

Many apps use third-party libraries such as Redux or Apollo Client to abstract it away. This requires extra dependencies, and couple your app with a specific library to perform data fetching. In most cases, what we want is a direct way to integrate plain HTTP requests (e.g. using native fetch) for usage in React components.

Here we will discuss how we can use React Hooks to do this in an elegant, scalable manner.