Skip to content

Instantly share code, notes, and snippets.

@LevPewPew
LevPewPew / gist:82edf84808f54788c1401d3034e2b951
Created August 17, 2022 07:30
async tester with dummy setTimeout. for creating a promise that resolves. a mock async function.
function onSubmit(values) {
return new Promise((resolve) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
resolve();
}, 3000);
});
}
@LevPewPew
LevPewPew / keys-unions.ts
Last active March 20, 2022 22:57
KeysUnion custom utility type. create a union of strings out of keys in an interface where the value type match the given generic
// create union out of properties in an interface who'se value type match then given value types (can be given a union of types to match) #codesnippet
// Stack Overflow explanation https://stackoverflow.com/questions/54520676/in-typescript-how-to-get-the-keys-of-an-object-type-whose-values-are-of-a-given/66144780
export type KeysUnion<T, V> = { [K in keyof T]-?: T[K] extends V ? K : never }[keyof T];
// Playground
interface Cool {
@LevPewPew
LevPewPew / advanced-utility-types.ts
Last active March 20, 2022 22:55
RequireAtLeastOne and RequireOnlyOne custom utility types
type RequireAtLeastOne<T, Keys extends keyof T = keyof T> =
Pick<T, Exclude<keyof T, Keys>>
& {
[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
}[Keys]
// ************************************************************
interface MenuItem {
title: string;
@LevPewPew
LevPewPew / fake-product-data.ts
Last active January 17, 2022 23:46
simplest way to create fake data in typescript using faker package and a iterable array helper method
import faker from "faker";
function createIterable(length: number) {
return Array.from(Array(length));
}
function createFakeData<T>(datumCreator: any, length: number): T[] {
return createIterable(length).map(() => datumCreator());
}
@LevPewPew
LevPewPew / formWithFaker.test.jsx
Last active November 25, 2021 07:18
two form tests using fake data and a data builder utility method. one using faker, another with test-data-bot which provides more utility.
import * as React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Login from '../../components/login';
// https://github.com/marak/Faker.js/
import faker from 'faker';
function buildLoginFormFakeData(overrides) {
return {
username: faker.internet.userName(),
@LevPewPew
LevPewPew / .eslintignore
Last active February 16, 2022 07:37
starter config for TS CRA on Github
# Ignore everything:
/*
# Except src:
!/src
@LevPewPew
LevPewPew / style.css
Created November 23, 2020 03:11
easiest way to do ellipses after x number of lines
// e.g. 2 lines:
some-class {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@LevPewPew
LevPewPew / example.jsx
Created August 26, 2020 23:23
a better way of running conditional useEffect hooks
// return first, instead of wrapping the task itself in an if condition.
// this is better because it prevents the clearTimeout being run
function App() {
const [varA, setVarA] = useState(0);
useEffect(() => {
if (varA >= 5) return;
const timeout = setTimeout(() => setVarA(varA + 1), 1000);
@LevPewPew
LevPewPew / SomeComponent.jsx
Last active August 26, 2020 22:54
responsive "mixins" breakpoints for style components
import { COLORS, respondTo } from 'styles';
const SideBarOffset = styled.div`
background-color: ${COLORS.MAIN};;
height: 100%;
width: ${(props) => props.offset + 'px'};
flex-basis: auto;
${respondTo.tablet`
width: 0px;
@LevPewPew
LevPewPew / settings.json
Last active August 24, 2020 11:44
vs code setting to exclude certain folders from returning results in global search ctrl/cmd + shift + f
"search.exclude": {
"**/.gitignore": true,
"**/.netlify": true,
"**/*?config*?": true,
"**/build": true,
"**/node_modules": true,
"**/package-lock.json": true,
"**/package.json": true,
"**/README.md": true
}