Skip to content

Instantly share code, notes, and snippets.

Avatar

Donald Pipowitch donaldpipowitch

View GitHub Profile
@donaldpipowitch
donaldpipowitch / use-location-state.ts
Created Jul 22, 2020
useLocationState: a glorified location.state for React Router as a hook
View use-location-state.ts
import { useState, useEffect } from 'react';
import { useLocation, useHistory } from 'react-router-dom';
import { useSessionStorage } from './use-storage'; // see https://gist.github.com/donaldpipowitch/7310d7b9e4b6d467134c425e8732adc6
type UseLocationStateOptions<T> = {
defaultValue?: T;
scope?: string;
filter?: (value: T) => boolean;
};
@donaldpipowitch
donaldpipowitch / mocked-storage.tsx
Last active Jul 22, 2020
useSessionStorage and useLocalStorage for easy mocking - similar to MemoryRouter in react-router, but for storage
View mocked-storage.tsx
import React, { FC, useMemo } from 'react';
import {
LocalStorageProvider,
SessionStorageProvider,
} from './use-storage';
// this is just a dumb mock of the storage interface
class MemoryStorage implements Storage {
private data: Record<string, string> = {};
@donaldpipowitch
donaldpipowitch / index.js
Created Jul 7, 2020
ESLint rule to check for round brackets in Jest `test` names. (Doesn't play nicely with --testNamePattern without escaping.)
View index.js
// @ts-check
/** @type {import("eslint").Rule.RuleModule} */
const rule = {
meta: {
docs: {
description: `If you use a Jest test name like "hello (world)" you can't run \`$ jest -t "hello (world)"\` to select this test.`,
},
fixable: 'code',
},
@donaldpipowitch
donaldpipowitch / index.js
Last active Jul 7, 2020
ESLint rule to check for duplicated exported names.
View index.js
// @ts-check
/** @type {import("eslint").Rule.RuleModule} */
const rule = {
meta: {
docs: {
description: `You can export a type and a value with the same name in the same file, but that confuses refactoring tools.`,
},
},
create(context) {
@donaldpipowitch
donaldpipowitch / README.md
Created Jul 1, 2020
Cheat Sheet for various Brackets
View README.md

Know your brackets!

  ( ) – parentheses, round brackets, first brackets
  { } – braces, curly brackets, second brackets, moustache brackets 👨🏻
  [ ] – square brackets, third brackets
  ⟨ ⟩ - angle brackets (aka. _not_ less-than/greater-than signs 👀)
  ‹ › - angle quotes (aka. _not_ less-than/greater-than signs 👀)
  < > - less-than/greater-than signs
@donaldpipowitch
donaldpipowitch / index.tsx
Created Jun 27, 2020
Example how to use 'amazon-cognito-identity-js'
View index.tsx
import {
CognitoUserPool,
CognitoUserAttribute,
CognitoUser,
AuthenticationDetails,
CognitoUserSession,
CodeDeliveryDetails,
} from 'amazon-cognito-identity-js';
import React, { FC, useState } from 'react';
@donaldpipowitch
donaldpipowitch / README.md
Last active Nov 18, 2019
React - Error Boundary strategy
View README.md

One cool feature of React which isn't highlighted that often are "error boundaries".

Error boundaries can catch errors which are thrown inside your component during a lifecycle. You can use them in very fine-granular levels wrapping very small components (but I rarely see this) or you can wrap your whole app and show some fallback content, if an error happens. But you can also wrap something in between those extrem ranges and add a proper reset. Also it's not a hidden secret how to do that I haven't see a lot of people talking about that. So here is a small example which use react-router-dom to do that. You can see the complete example here.

Let's imagine you have the following app:

import * as React from 'react';
import { render } from 'react-dom';
import { Link, BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
@donaldpipowitch
donaldpipowitch / example.tsx
Created Nov 6, 2019
Mock Upload Progress with axios-mock-adapter
View example.tsx
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
const mock = new MockAdapter(axios);
// this mocks a request which is always at 40% progress
mock.onPost('/upload-1').reply((config) => {
const total = 1024; // mocked file size
const progress = 0.4;
if (config.onUploadProgress) {
@donaldpipowitch
donaldpipowitch / README.md
Last active Jul 15, 2020
Use GitLab Pages to deploy a Storybook per branch
View README.md

It's quite straightforward to use GitLab Pages to deploy a Storybook instance per branch (and remove it whenever the branch will be removed). And yeah, it's irony to document this in a GitHub Gist 😅

You just need a .gitlab-ci.yml like this one:

stages:
  - setup
  - build-and-test
  - deployment
  - pages
@donaldpipowitch
donaldpipowitch / README.md
Last active Oct 22, 2019
Example for a codemod which can run on a TypeScript code base
View README.md

Install @codemod/cli globally:

$ npm install -g @codemod/cli
# or
$ yarn global add @codemod/cli

This package works out of the box with most code bases, because it comes bundled with @babel/preset-env and @babel/preset-typescript. If you need other presets or plugins for parsing your source code you can use a custom Babel config as well. Note that the codemod will not apply the transformations from these presets and plugins - they are only used for parsing. Therefor you keep your TypeScript types in your source code for example. Formatting will be kept the same as much as possible.

You can’t perform that action at this time.