Skip to content

Instantly share code, notes, and snippets.

View granmoe's full-sized avatar
🔔
Maximizing the frame rate, resolution, and screen size of my mind 😑

Matt Granmoe granmoe

🔔
Maximizing the frame rate, resolution, and screen size of my mind 😑
View GitHub Profile
/**
* Given an array of Person objects, returns the root PersonTreeNode (the CEO).
* @param {Person[]} employees - An array of Person objects representing all the employees of the company.
* @returns {PersonTreeNode} The CEO of the organization.
*/
function generateTree(employees) {
let ceo = null
const visitedById = new Map()
const visitedByManagerId = new Map()
@granmoe
granmoe / int-to-roman-numeral.js
Created February 6, 2019 02:11
Convert an integer of 9,999 or less to a roman numeral with JS (just a terrible JS interview question that got stuck in my head)
const convertToRomanNumerals = int => {
const romanNumerals = ['I', 'V', 'X', 'L', 'C', 'D', 'M']
const createRomanNumeralRange = (I, V, X) => [
'',
I,
`${I}${I}`,
`${I}${I}${I}`,
`${I}${V}`,
V,
`${V}${I}`,
@granmoe
granmoe / hook-test.js
Created November 10, 2018 21:12
A way to test React hooks
import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import useValidation from '..'
describe('use-validation', () => {
const Test = ({ mockFunc, handleSubmit }) => {
const { fields } = useValidation({
fields: {
foo: '',
bar: '',
@granmoe
granmoe / example.js
Last active November 10, 2018 21:21
A weird way of testing react hooks. It's interesting that it's possible, but you should do this instead: https://gist.github.com/granmoe/1316210dd63fc09bb012acfbcd0e28a8
// I like how this approach lets me test my hook as if it's a pure function,
// but something about this feels weird 🤔 🤫
test('use-validation', () => {
let counter = 0
render(
<Test>
{fields => {
const fooFuncs = {
onChange: fields.foo.onChange,
@granmoe
granmoe / gitconfig
Last active May 16, 2018 18:19
temp-vscode-settings
[alias]
s = status
d = diff
c = checkout
co = commit
ps = push
l = log
p = pull
b = branch
[user]
@granmoe
granmoe / __responsive styled components
Last active January 6, 2021 02:22
Programmatically create responsive styled components with react and styled-components
// this file is just here to change the name of the gist
import React from 'react'
import styled from 'styled-components'
const makeResponsiveComponent = (rulesets, tagName = 'div') =>
styled(tagName)`${buildStyles(rulesets)}`
const buildStyles = rulesets =>
rulesets.reduce(
(cssString, { constraint, width, rules }) =>
@granmoe
granmoe / get-time-of-day.js
Created May 9, 2017 01:36
Returns a message describing the time of day given a start and end hour. A small and humble chunk of code, but I thought my approach was kind of nifty.
function getTimeOfDay (start, end) {
if (start < 12 && end > 16) { return null } // not specific enough
// we don't care about the window from 22:00 - 06:00
const timesOfDay = Array(24)
.fill('Morning', 6, 12)
.fill('Afternoon', 12, 16)
.fill('Evening', 16, 22)
return Array.from(new Set(timesOfDay.slice(start, end)))
@granmoe
granmoe / make-reducer.js
Last active May 9, 2017 01:50
A simple pattern for having a reducer as a map of functions instead of a switch statement. One benefit is being able to grab any of the reducer's functions independently for testing.
export default function (reducerMap = {}, initialState) =>
(state = initialState, { type = '', ...payload }) =>
(reducerMap[type] || (() => state))(state, payload) // if type isn't found in the reducer, just use a noop
@granmoe
granmoe / React Join Children
Last active December 7, 2022 14:50
Ever wanted to join react children like you join an array?
This file is only here to provide the title of the gist
@granmoe
granmoe / classnames.js
Last active May 9, 2017 01:43
I saw this super simple, useful idea floating around in some projects and decided to implement the API myself instead of installing yet another "micro dependency." Plus, I can be more opinionated (assuming BEM, for example) when I use my own code.
export default function () {
let className = ''
let options = {}
const classNames = []
if (arguments.length > 1) {
className = arguments[0]
options = arguments[1]
classNames.push(className)
} else {