jth0024

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

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

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

jth0024

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

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

jth0024

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();