Skip to content

Instantly share code, notes, and snippets.

@jth0024

jth0024/CharacterListV3.tsx

Created May 17, 2022 18:42
Show Gist options
  • Save jth0024/3a42cf80e11c167a81d40b23cb862a84 to your computer and use it in GitHub Desktop.
Save jth0024/3a42cf80e11c167a81d40b23cb862a84 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CharacterListV3.tsx
import React from 'react';
import { charactersApi } from '../apis';
import { useCharacterList } from './useCharacterList';
import { useCharacterForm } from './useCharacterForm';
import { CharacterCreateModal } from '../CharacterCreateModal';
import {
Button,
Wrapper,
List,
ListItem,
ListItemInfo,
NameWrapper,
IsJediWrapper,
HeaderTypography,
Spinner,
} from './styles';
export const CharacterList = () => {
const [listData, listHandlers] = useCharacterList();
const { characters, loading } = listData;
const { onRefresh } = listHandlers;
const [formData, formHandlers] = useCharacterForm()
const { isFormOpen } = formData;
const { onFormToggled } = formHandlers;
return (
<Wrapper>
Star Wars Characters
<Button onClick={onRefresh}>Refresh List</Button>
<Button onClick={onFormToggled}>Create Character</Button>
{isFormOpen && <CharacterCreateModal />}
{loading ? <Spinner /> : (
<List>
<ListItem>
<NameWrapper>
<HeaderTypography>
Name
</HeaderTypography>
</NameWrapper>
<ListItemInfo>
<HeaderTypography>
Age
</HeaderTypography>
</ListItemInfo>
<IsJediWrapper>
<HeaderTypography>
isJedi
</HeaderTypography>
</IsJediWrapper>
</ListItem>
{characters.map((c) => (
<ListItem key={c.name}>
<NameWrapper>
{c.name}
</NameWrapper>
<ListItemInfo>
{c.age}
</ListItemInfo>
<IsJediWrapper>
{c.isJedi ? 'True' : 'False'}
</IsJediWrapper>
</ListItem>
))}
</List>
)}
</Wrapper>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment