Commit a39fc60d authored by Ondrej Bazala's avatar Ondrej Bazala
Browse files

Added filters for encyklopedia

parent c0602245
import { ChangeEvent, FC, useEffect, useState } from 'react';
import { Checkbox, Col, Divider, Input, Row, Select, Typography } from 'antd';
import { Pokemon } from '../../utils/pokemonFetcher';
import { useLoggedInUser } from '../../hooks/useLoggedInUser';
const { Option } = Select;
type Props = {
pokemons: Pokemon[];
updateVisiblePokemons: (pokemons: Pokemon[]) => void;
};
const Filter: FC<Props> = ({ pokemons, updateVisiblePokemons }) => {
const [name, setName] = useState('');
const [onlyCatched, setOnlyCatched] = useState(false);
const catchedPokemons = useLoggedInUser().userData?.catchedPokemonIds ?? [];
const [types, setTypes] = useState<string[]>([]);
const onNameChange = (e: ChangeEvent<HTMLInputElement>) => {
setName(e.target.value);
};
const filterPokemons = () => {
let result = pokemons;
result = result.filter(p => p.name.includes(name));
if (onlyCatched) {
result = result.filter(p => catchedPokemons.includes(p.id));
}
if (types) {
for (const type of types) {
result = result.filter(p => p.types.includes(type));
}
}
return result;
};
const getOptions = () => {
const options = [
'normal',
'fire',
'water',
'grass',
'flying',
'fighting',
'poison',
'electric',
'ground',
'rock',
'psychic',
'ice',
'bug',
'ghost',
'steel',
'dragon',
'dark',
'fairy'
];
return options.map(o => (
<Option key={o.toString()} value={o.toString()}>
{o}
</Option>
));
};
const handleTypes = (values: string[]) => {
setTypes(values);
};
useEffect(() => {
const updateFilteredPokemons = async () => {
const filteredPokemons = filterPokemons();
updateVisiblePokemons(filteredPokemons);
};
updateFilteredPokemons();
}, [name, onlyCatched, types]);
return (
<Row justify="space-between">
<Col xs={24} md={8} style={{ display: 'flex', justifyContent: 'center' }}>
<Typography
style={{
marginTop: '45px',
marginBottom: '20px'
}}
>
Show only catched pokemons:
<Checkbox
style={{ paddingLeft: 5 }}
onChange={e => setOnlyCatched(e.target.checked)}
/>
</Typography>
</Col>
<Col xs={24} md={8} style={{ display: 'flex', justifyContent: 'center' }}>
<Input.Search
onChange={onNameChange}
placeholder="Insert name of pokemon"
style={{
minWidth: '150px',
maxWidth: '300px',
width: '70%',
marginTop: '45px',
marginBottom: '20px'
}}
/>
</Col>
<Col xs={24} md={8} style={{ display: 'flex', justifyContent: 'center' }}>
<Select
mode="multiple"
style={{
minWidth: '150px',
maxWidth: '300px',
width: '70%',
marginTop: '45px',
marginBottom: '20px'
}}
placeholder="Choose types of pokemon"
onChange={handleTypes}
>
{getOptions()}
</Select>
</Col>
<Divider style={{ borderTop: '1px solid rgba(0, 0, 0, 0.3)' }} />
</Row>
);
};
export default Filter;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment