Skip to content

Instantly share code, notes, and snippets.

View jasonleehodges's full-sized avatar

jasonleehodges

View GitHub Profile
@jasonleehodges
jasonleehodges / testableReducer.ts
Last active December 11, 2021 18:55
Testable Redux Reducer
import {
PayloadAction,
createReducer,
} from "@reduxjs/toolkit";
import { increment, decrement, incrementByAmount, incrementAsync } from "./actions";
export interface CounterState {
value: number;
status: "idle" | "loading" | "failed";
}
@jasonleehodges
jasonleehodges / createProspect.tsx
Last active August 4, 2021 04:00
CreateProspect composed from UserForm
import { Contact, UserForm } from '../user-form/userForm';
import React, {FC, useState} from 'react';
export const CreateProspect: FC = () => {
const [user, setUser] = useState<Contact>({
name: '',
email: '',
phoneNumber: '',
referredBy: ''
});
@jasonleehodges
jasonleehodges / userForm.tsx
Created August 4, 2021 03:40
Composable User Form
import React, { FC } from 'react';
export interface Contact {
name: string,
email: string,
phoneNumber: string,
referredBy?: string,
role?: string,
}
@jasonleehodges
jasonleehodges / createUser.tsx
Last active July 30, 2021 03:44
Entanglement Example with Context Flag :(
import React, { FC } from 'react';
import styles from './createUser.module.css';
import { useParams } from 'react-router-dom'
export interface Contact {
name: string,
email: string,
phoneNumber: string,
referredBy?: string,
@jasonleehodges
jasonleehodges / createUser.tsx
Last active July 30, 2021 03:15
Entanglement Example
import React, { FC } from 'react';
import styles from './createUser.module.css';
export interface Contact {
name: string,
email: string,
phoneNumber: string,
}
import React from 'react';
export const Grid = (props) => {
const renderRow = (rowData) => (
<div className="row">
<div className="col">
{rowData.title}
</div>
<div className="col">
{rowData.description}
import React from 'react';
import { status, labels } from './status';
export const Badge = (props) => {
return (
<div style={
{backgroundColor: props.status === status.active ? 'green' : 'red'}
}>
{labels.statusPrompt[props.language]}: {props.status}
</div>
export const status = {
active: 'Ready',
inactive: 'Inactive'
}
import React from 'react';
export const Badge = (props) => {
return (
<div style={
{backgroundColor: props.status === 'active' ? 'green' : 'red'}
}>
Status: {props.status}
</div>
);
@jasonleehodges
jasonleehodges / debounce.ts
Last active December 23, 2020 17:33
React based debounce hook
import { MutableRefObject, useMemo, useRef } from 'react';
export const useDebounce = (milliseconds: number) => {
const clearable: MutableRefObject<number | undefined> = useRef();
const debounce = useMemo(
() => (fn: () => Promise<void>) => {
if (clearable.current !== undefined) {
clearTimeout(clearable.current);
}