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 (
-
+
Marker: setSort(option!)} + /> +
{(marker.value || priority.value) && ( ( @@ -101,6 +101,7 @@ export const filterdTasksState = selectorFamily({ const tasks = get(tasksState(query)); const marker = get(markerState); const priority = get(priorityState); + const sort = get(sortState); return tasks.filter((task: TaskEntityObject) => { if (marker.value && task.marker !== marker.value) { @@ -112,6 +113,14 @@ export const filterdTasksState = selectorFamily({ } return true; + }).sort((a, b) => { + if (a.scheduled === undefined || b.scheduled === undefined) { + return 0; + } + if (sort.value === SortType.Asc) { + return a.scheduled - b.scheduled; + } + return b.scheduled - a.scheduled; }); }, });