diff --git a/src/components/TaskFilter.tsx b/src/components/TaskFilter.tsx index 3557ef9..2c94af2 100644 --- a/src/components/TaskFilter.tsx +++ b/src/components/TaskFilter.tsx @@ -3,21 +3,21 @@ import Select, { Theme } from 'react-select'; import { useRecoilState, useRecoilValue } from 'recoil'; import { CircleOff } from 'tabler-icons-react'; import { taskMarkersState } from '../state/user-configs'; -import { TaskPriority } from '../models/TaskEntity'; -import { DEFAULT_OPTION, markerState, priorityState } from '../state/filter'; +import { + DEFAULT_OPTION, + markerState, + priorityState, + PRIORITY_OPTIONS, + sortState, + SortType, +} from '../state/filter'; import { themeStyleState } from '../state/theme'; import { settingsState } from '../state/settings'; -const PRIORITY_OPTIONS = [ - TaskPriority.HIGH, - TaskPriority.MEDIUM, - TaskPriority.LOW, - TaskPriority.NONE, -]; - const TaskFilter: React.FC = () => { const [marker, setMarker] = useRecoilState(markerState); const [priority, setPriority] = useRecoilState(priorityState); + const [sort, setSort] = useRecoilState(sortState); const taskMarkers = useRecoilValue(taskMarkersState); const themeStyle = useRecoilValue(themeStyleState); const settings = useRecoilValue(settingsState); @@ -43,8 +43,7 @@ const TaskFilter: React.FC = () => { const selectClassNames = React.useMemo( () => ({ container: () => 'text-xs', - control: () => - '!h-6 !min-h-6 w-16 !border-none !shadow-none !bg-transparent ', + control: () => '!h-6 !min-h-6 w-12 !border-none !shadow-none !bg-transparent ', valueContainer: () => '!py-0 !px-1 cursor-pointer bg-transparent', singleValue: () => `!text-gray-500 !dark:text-gray-300`, indicatorsContainer: () => '!hidden', @@ -68,9 +67,7 @@ const TaskFilter: React.FC = () => { ); React.useEffect(() => { - const marker = markerOptions.find( - (marker) => marker.value === settings.defaultMarker, - ); + const marker = markerOptions.find((marker) => marker.value === settings.defaultMarker); if (marker) { setMarker(marker); } @@ -90,12 +87,12 @@ const TaskFilter: React.FC = () => { return (