Skip to content

Instantly share code, notes, and snippets.

@schabluk
schabluk / Service.js
Last active May 30, 2018 18:37
Service dependency for MobX State Tree
import axios, { get, CancelToken } from 'axios'
import faker from 'faker'
//
// Only data property will be returned from the reuquest. This will simplify
// data processing, as it won't be neccesary to call .then() each time
// to return the request.data.
// See: https://github.com/axios/axios#response-schema
//
// The status codes validation, if needed, should be done in 'validateStatus'
const COLORS = {
info: ['#1E88E5', '#90CAF9'],
success: ['#388E3C', '#A5D6A7'],
error: ['#E53935', '#EF9A9A'],
warning: ['#F4511E', '#FFAB91'],
}
const print = Object.entries(COLORS).reduce(
(api, [name, colors]) => ({
[name]: (shortLabel, longerMessage, optionalSuffix = '') =>
@schabluk
schabluk / index.js
Created September 10, 2018 19:36 — forked from benoitv-code/index.js
d3, jsdom, node.js: server-side rendering
// Instructions:
// npm install --save d3 jsdom
const fs = require('fs');
const d3 = require('d3');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const fakeDom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
@schabluk
schabluk / useRefTypeScript.js
Created February 6, 2019 18:58
useRef on HTML element with TypeScript
function DraftEditor({ metaData, readOnly = false, decorators = [] }: IDraftEditor) {
const editorRef = useRef<HTMLDivElement>(null)
const handleFocusClick = () => {
const { current: editor } = editorRef
if (editor) { editor.focus() }
}
return (
<div ref={editorRef} onClick={handleFocusClick} />
@schabluk
schabluk / alnumseq.js
Created February 9, 2019 14:05
Alphanumeric Sequences
const f = (a, b) => [].concat(...a.map(d => b.map(e => [].concat(d, e))))
const cartesian = (a, b, ...c) => (b ? cartesian(f(a, b), ...c) : a)
const letters = Array.from({ length: 26 }, (k, v) => String.fromCharCode(v + 65))
const numbers = Array.from({ length: 9 }, (k, v) => v)
console.log(cartesian(letters, numbers))
@schabluk
schabluk / StorageEstimate.js
Created March 21, 2019 18:05
Estimate Browser Storage capacity
import { types } from 'mobx-state-tree'
import bytes from 'bytes'
/*
* See: https://developers.google.com/web/updates/2016/06/persistent-storage
* See: https://developers.google.com/web/updates/2017/08/estimating-available-storage-space
*/
const StorageEstimate = types
.model('StorageEstimate', {
usage: types.maybe(types.number),
@schabluk
schabluk / useLocalStorage.js
Created March 23, 2019 07:25
useLocalStorage hook
const useLocalStorage = (key, initial) => {
let local;
try {
local = JSON.parse(localStorage.getItem(key));
} catch (err) {
//
}
if (!local) {
localStorage.setItem(key, JSON.stringify(initial));
local = initial;
@schabluk
schabluk / GridSpace.js
Created March 25, 2019 19:42
Collapsible CSS Grid
const GridSpace = styled.section`
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto fit-content(100%);
grid-template-areas:
'c c c c'
't t t t';
`
@schabluk
schabluk / PandasMSTModel.js
Created March 28, 2019 15:36
MST Model to handle JSON data returned from Pandas
const DataModel = types
.model('DataModel', {
columns: types.optional(types.array(types.string), ['columnA', 'columnB']),
data: types.optional(types.array(types.array(types.string)), []),
})
.views(self => ({
get mergedData() {
const [keyA, keyB] = self.columns
return self.data.map(([valA, valB]) => ({ [keyA]: valA, [keyB]: valB }))
@schabluk
schabluk / Promises.js
Last active May 20, 2021 10:56
Array / Object Tools
// Delaying response
let delay = time => result => new Promise(resolve => setTimeout(() => resolve(result), time))
const result = await fetch(endpoint).then(delay(1000)).then(data => data.json())
// Mocking Fetch
window.fetch = function () {
const body = { hello: "world" }
const blob = new Blob([JSON.stringify(body, null, 2)], { type : 'application/json' })