in src/components/Timeline/useTaskListSettings.ts [142:254]
export default function useTaskListSettings(): TaskSettingsHook {
const [taskListSettings, dispatch] = useReducer(taskListSettingsReducer, {
sort: ['startTime', 'asc'],
stepFilter: [],
statusFilter: null,
group: true,
isCustomEnabled: false,
});
//
// Query parameters handling
//
const [q, sq] = useQueryParams({
group: withDefault(StringParam, 'true'),
order: StringParam,
direction: StringParam,
steps: StringParam,
status: StringParam,
});
useEffect(() => {
// Check sort direction param, only update if is valid and changed
const sortDir = validatedParameter<'asc' | 'desc'>(q.direction, taskListSettings.sort[0], ['asc', 'desc'], 'asc');
// Check sort by param, only update if is valid and changed
const sortBy = validatedParameter<'startTime' | 'endTime' | 'duration'>(
q.order,
taskListSettings.sort[1],
['startTime', 'endTime', 'duration'],
'startTime',
);
const newSort = [sortBy || taskListSettings.sort[0], sortDir || taskListSettings.sort[1]];
if (JSON.stringify(taskListSettings.sort) !== JSON.stringify(newSort)) {
dispatch({ type: 'sort', sort: [sortBy || taskListSettings.sort[0], sortDir || taskListSettings.sort[1]] });
}
// Check status param, only update if is valid and changed
if (q.status !== taskListSettings.statusFilter) {
dispatch({ type: 'setStatus', status: q.status });
}
// Check grouping param, only update if is valid and changed
const group = validatedParameter<'true' | 'false'>(
q.group,
taskListSettings.group ? 'true' : 'false',
['true', 'false'],
'true',
);
if (group) {
dispatch({ type: 'setGrouping', value: group === 'true' ? true : false });
}
// Check if we were in custom mode, if so we need to save change to localstorage as well
if (taskListSettings.isCustomEnabled) {
const { steps, ...rest } = q;
localStorage.setItem('custom-settings', JSON.stringify(rest));
} else {
// If we changed something and we now differ from default settings, we need to set
// custom mode on and start saving settingin localstorage
if (!equalsDefaultMode(q.order, q.direction, q.status, q.group)) {
const { steps, ...rest } = q;
dispatch({ type: 'setCustom', value: true });
localStorage.setItem('custom-settings', JSON.stringify(rest));
}
}
}, [
q,
dispatch,
taskListSettings.isCustomEnabled,
taskListSettings.group,
taskListSettings.statusFilter,
taskListSettings.sort,
]);
useEffect(() => {
dispatch({ type: 'setSteps', steps: q.steps });
}, [q.steps]);
// Update active settings mode for task listing.
const setMode = useCallback(
(mode: TaskListMode) => {
if (mode === 'overview') {
sq({ ...q, ...OverviewMode }, 'replace');
dispatch({ type: 'setCustom', value: false });
} else if (mode === 'monitoring') {
sq({ ...q, ...MonitoringMode }, 'replace');
dispatch({ type: 'setCustom', value: false });
} else if (mode === 'error-tracker') {
sq({ ...q, ...ErrorTrackerMode }, 'replace');
dispatch({ type: 'setCustom', value: false });
} else if (mode === 'custom') {
dispatch({ type: 'setCustom', value: true });
// Check previous settings from localstorage for custom setting
const previousSettings = localStorage.getItem('custom-settings');
if (previousSettings) {
const parsed = JSON.parse(previousSettings);
if (parsed) {
const steps = q.steps ? { steps: q.steps } : {};
sq({ ...parsed, ...steps }, 'replace');
}
}
}
},
[q, sq],
);
return useMemo(
() => ({ settings: taskListSettings, dispatch, setQueryParam: sq, params: q, setMode }),
[q, setMode, sq, taskListSettings],
);
}