71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { useRouter } from "next/router";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { skillGroups } from "~utils/skillGroups";
|
|
|
|
import "./index.scss";
|
|
|
|
interface Props {
|
|
sendFilters: (filters: { [key: string]: number }) => void;
|
|
}
|
|
|
|
const JobSkillSearchFilterBar = (props: Props) => {
|
|
// Set up translation
|
|
const { t } = useTranslation("common");
|
|
|
|
const [currentGroup, setCurrentGroup] = useState(-1);
|
|
|
|
function onChange(event: React.ChangeEvent<HTMLSelectElement>) {
|
|
setCurrentGroup(parseInt(event.target.value));
|
|
}
|
|
|
|
function onBlur(event: React.ChangeEvent<HTMLSelectElement>) {}
|
|
|
|
function sendFilters() {
|
|
const filters = {
|
|
group: currentGroup,
|
|
};
|
|
|
|
props.sendFilters(filters);
|
|
}
|
|
|
|
useEffect(() => {
|
|
sendFilters();
|
|
}, [currentGroup]);
|
|
|
|
return (
|
|
<div className="SearchFilterBar">
|
|
<select
|
|
key="job-skill-groups"
|
|
value={currentGroup}
|
|
onBlur={onBlur}
|
|
onChange={onChange}
|
|
>
|
|
<option key="all" value={-1}>
|
|
{t(`job_skills.all`)}
|
|
</option>
|
|
<option key="damaging" value={2}>
|
|
{t(`job_skills.damaging`)}
|
|
</option>
|
|
<option key="buffing" value={0}>
|
|
{t(`job_skills.buffing`)}
|
|
</option>
|
|
<option key="debuffing" value={1}>
|
|
{t(`job_skills.debuffing`)}
|
|
</option>
|
|
<option key="healing" value={3}>
|
|
{t(`job_skills.healing`)}
|
|
</option>
|
|
<option key="emp" value={4}>
|
|
{t(`job_skills.emp`)}
|
|
</option>
|
|
<option key="base" value={5}>
|
|
{t(`job_skills.base`)}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default JobSkillSearchFilterBar;
|