Jordan Hurt jth0024

Sr. Lead Software Engineer @ Chick-fil-A

jth0024 / CharacterListV3.tsx

Created May 17, 2022 18:42


	import React from 'react';
	import { charactersApi } from '../apis';
	import { useCharacterList } from './useCharacterList';
	import { useCharacterForm } from './useCharacterForm';
	import { CharacterCreateModal } from '../CharacterCreateModal';
	import {
	Button,
	Wrapper,
	List,

jth0024 / CharacterListV2.stories.tsx

Created May 17, 2022 15:29

A Story using mock dependencies

	import { characterData, delay } from '../fixtures';
	import { CharacterList } from './CharacterList';

	const mockCharactersApi = {
	async listSuccess() {
	return characterData
	},
	async listError() {
	throw new Error("Couldn't find a result")
	},

jth0024 / CharacterListV2.tsx

Created May 17, 2022 15:22

A component that accepts dependencies as a prop to pass to its "component hook"

	import React from 'react';
	import { charactersApi } from '../apis';
	import { useCharacterList, UseCharacterListDeps } from './useCharacterList';
	import {
	Button,
	Wrapper,
	List,
	ListItem,
	ListItemInfo,
	NameWrapper,

jth0024 / useCharacterListV2.ts

Created May 17, 2022 15:17

A "component hook" that is designed for dependency injection

	import { useCallback } from 'react';
	import { useQuery } from 'react-query';
	import type { CharactersApi } from '../apis';

	interface UseCharacterListDeps {
	charactersApi: CharactersApi,
	}

	export function useCharacterList(deps: UseCharacterListDeps) {
	const { charactersApi } = deps

jth0024 / CharacterList.tsx

Last active May 17, 2022 14:49

A component using its "Component Hook"

	import React from 'react';
	import { useCharacterList } from './useCharacterList';
	import {
	Button,
	Wrapper,
	List,
	ListItem,
	ListItemInfo,
	NameWrapper,
	IsJediWrapper,

jth0024 / useCharacterList.ts

Last active May 17, 2022 14:49

A "Component Hook" example

	import { useCallback, useEffect } from 'react';
	import { useDispatch, useSelector } from 'react-redux';

	export function useCharacterList() {
	const characters = useSelector(characterListSelector);
	const loading = useSelector(characterListLoadingSelector);
	const dispatch = useDispatch();

	const fetchCharacters = useCallback(() => {
	dispatch(actions.fetchCharacters();