Skip to content

Instantly share code, notes, and snippets.

Avatar

Jordan Carroll jcarroll2007

View GitHub Profile
@jcarroll2007
jcarroll2007 / bug.jsx
Last active Feb 4, 2022
JavaScript Bug Example
View bug.jsx
function filterAnimals(animals) {
if (!FeatureFlag.releaseTheLions) {
return animals.filter(maybeLeo => maybeLeo.id !== 'lion');
}
}
const AnimalsList: React.VFC = () => {
const animals = [
{
name: 'Leo',
@jcarroll2007
jcarroll2007 / Tests.jsx
Created Nov 10, 2021
Creating scalable, testable, and readable React apps: Part 3 Test examples
View Tests.jsx
/**
* Component Test
*/
describe('CharacterCreateForm', () => {
it('should not submit form and show error message if name is null', async () => {
const onSubmitMock = jest.fn()
const { getByTestId, queryByTestId } = render(
<CharacterCreateForm onSubmit={onSubmitMock} />
)
const submitButton = getByTestId('form-submit-button')
@jcarroll2007
jcarroll2007 / CharacterList.tsx
Last active Mar 23, 2021
React Architecture Blog Post: Character List component
View CharacterList.tsx
import React from 'react';
import { Character } from '../../api/types';
import {
Wrapper,
List,
ListItem,
ListItemInfo,
NameWrapper,
IsJediWrapper,
HeaderTypography
@jcarroll2007
jcarroll2007 / CharactersList.tsx
Created Mar 23, 2021
React Architecture Blog Post: Character List Container
View CharactersList.tsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { CharacterList } from '../../components/CharacterList'
import { ActionList } from '../../components/ActionList';
import { characterListLoadingSelector, characterListSelector } from '../../redux/selectors';
import { actions } from '../../redux/actions';
interface CharacterListContainerProps {
createCharacterPath: string
}
@jcarroll2007
jcarroll2007 / Characters.tsx
Last active Mar 23, 2021
React Architecture Blog Post: Create a Character Modal
View Characters.tsx
import React from 'react';
import { Route } from 'react-router-dom';
import { Page } from '../../components/Page';
import { CharacterListContainer } from '../../containers/CharacterList';
import { CHARACTERS_CREATE } from '../../routes';
import { CharactersCreateView } from '../CharactersCreate';
export const CharactersView: React.FunctionComponent = () => {
return (
<Page>
@jcarroll2007
jcarroll2007 / createRoute.js
Last active Jun 30, 2020
A util for creating route paths. It would be great to add types to this.
View createRoute.js
import invariant from 'invariant'
import { matchPath } from 'react-router'
import { pathToRegexp, compile } from 'path-to-regexp'
import map from 'lodash/map'
import trim from 'lodash/trim'
import flow from 'lodash/flow'
import partialRight from 'lodash/partialRight'
import isString from 'lodash/isString'
import isEmpty from 'lodash/isEmpty'
import { createSymbol } from '../../utils'
@jcarroll2007
jcarroll2007 / Views.tsx
Last active Sep 30, 2020
React App Structure
View Views.tsx
<Switch>
<Route path="/users" exact component={UsersView} />
<Route path="/home" exact component={HomeView} />
<Route path="/settings" exact component={SettingsView} />
</Switch>
<Switch>
<Route path="/users" component={UsersList} />
<Route path="/users/create" exact component={CreateUserView} />
<Route path="/users/:id" exact component={EditUserView} />
View table.jsx
const TitleSubtitleCell => ({ title, subtitle }) => (
<div>
<Title>{title}</Title>
<SubTitle>{subtitle}</SubTitle>
</div>
)
const columns = [{
header:
width: 'grow', // A width props supports custom column sizing
@jcarroll2007
jcarroll2007 / example.js
Last active Jan 20, 2020
React Intersection Observer Hook: `useIsElementInView`
View example.js
import React from 'react'
import useIsElementInView from './useIsElementInView'
export function Example() {
const { ref, isInView } = useIsElementInView()
return (
<div ref={ref}>
{isInView ? 'It is in the view!' : 'Not in view (so you cant really even tell if it works I guess...)'}
</div>
@jcarroll2007
jcarroll2007 / README.md
Last active Jul 11, 2019
A codemod to transform styled-components attrs first argument into a function from an object.
View README.md