Added filters for encyklopedia

src/pages/encyclopedia/Filter.tsx

+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;