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
|