diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx index ae37671..5d7f582 100644 --- a/src/components/d3/monitoring/D3MonitoringCharts.tsx +++ b/src/components/d3/monitoring/D3MonitoringCharts.tsx @@ -5,9 +5,7 @@ import { Empty } from 'antd' import * as d3 from 'd3' import LoaderPortal from '@components/LoaderPortal' -import { invokeWebApiWrapperAsync } from '@components/factory' -import { isDev, usePartialProps } from '@utils' -import { UserSettingsService } from '@api' +import { isDev, usePartialProps, useUserSettings } from '@utils' import { ChartAxis, @@ -193,14 +191,14 @@ const _D3MonitoringCharts = >({ className = '', ...other }: D3MonitoringChartsProps) => { - const [datasets, setDatasets] = useState[][]>([]) + const [datasets, setDatasets, resetDatasets] = useUserSettings(chartName, datasetGroups) + const [regulators, setRegulators, resetRegulators] = useUserSettings(`${chartName}_regulators`, defaultRegulators) const [groups, setGroups] = useState[]>([]) const [svgRef, setSvgRef] = useState(null) const [yAxisRef, setYAxisRef] = useState(null) const [chartAreaRef, setChartAreaRef] = useState(null) const [axesAreaRef, setAxesAreaRef] = useState(null) const [settingsVisible, setSettingsVisible] = useState(false) - const [regulators, setRegulators] = useState(defaultRegulators) const offset = usePartialProps(_offset, defaultOffsets) const yTicks = usePartialProps>>(_yTicks, getDefaultYTicks) @@ -282,69 +280,19 @@ const _D3MonitoringCharts = >({ ), [chartArea]) const onGroupsChange = useCallback((settings: ExtendedChartDataset[][], regulators: TelemetryRegulators) => { - if (chartName) { - invokeWebApiWrapperAsync( - async () => { - await UserSettingsService.update(chartName, { - settings, - regulators, - }) - }, - undefined, - 'Не удалось сохранить параметры графиков' - ) - } - setDatasets(settings) - setRegulators(regulators) setSettingsVisible(false) - }, [chartName]) + setRegulators(regulators) + setDatasets(settings) + }, [setDatasets, setRegulators]) const onGroupsReset = useCallback(() => { setSettingsVisible(false) - setDatasets(datasetGroups) - setRegulators(defaultRegulators) - if (chartName) { - invokeWebApiWrapperAsync( - async () => await UserSettingsService.delete(chartName), - undefined, - 'Не удалось удалить настройки графиков' - ) - } - }, [datasetGroups, chartName]) + resetRegulators() + resetDatasets() + }, [resetDatasets, resetRegulators]) useEffect(() => methods?.({ setSettingsVisible }), [methods]) - useEffect(() => { - invokeWebApiWrapperAsync( - async () => { - let sets = chartName ? await UserSettingsService.get(chartName) : null - if (typeof sets === 'string') - sets = JSON.parse(sets) - if (sets && Array.isArray(sets.settings)) { - if (sets.regulators) - setRegulators(sets.regulators) - if (Array.isArray(sets.settings)) { - setDatasets(sets.settings) - } - } else if (Array.isArray(datasetGroups)) { - setDatasets(datasetGroups) - if (chartName) { - invokeWebApiWrapperAsync( - async () => await UserSettingsService.insert(chartName, { - settings: datasetGroups, - regulators: defaultRegulators, - }), - undefined, - 'Не удалось сохранить настройки графиков' - ) - } - } - }, - undefined, - 'Не удалось загрузить настройки графиков' - ) - }, [datasetGroups, chartName]) - useEffect(() => { if (isDev()) { datasets.forEach((sets, i) => { diff --git a/src/components/d3/monitoring/D3MonitoringLimitChart.tsx b/src/components/d3/monitoring/D3MonitoringLimitChart.tsx index 97dc80c..d58bdde 100644 --- a/src/components/d3/monitoring/D3MonitoringLimitChart.tsx +++ b/src/components/d3/monitoring/D3MonitoringLimitChart.tsx @@ -136,7 +136,7 @@ const _D3MonitoringLimitChart = ({ diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts index ac42752..60ccb57 100644 --- a/src/utils/hooks/index.ts +++ b/src/utils/hooks/index.ts @@ -4,3 +4,5 @@ export * from './functionalValue' export type { FunctionalValue } from './functionalValue' export * from './usePartialProps' + +export * from './useUserSettings' diff --git a/src/utils/hooks/useUserSettings.ts b/src/utils/hooks/useUserSettings.ts new file mode 100644 index 0000000..91196ec --- /dev/null +++ b/src/utils/hooks/useUserSettings.ts @@ -0,0 +1,51 @@ +import { useCallback, useEffect, useState } from 'react' + +import { invokeWebApiWrapperAsync } from '@components/factory' +import { UserSettingsService } from '@api' + +export function useUserSettings(): [T | undefined, (value: T) => void, () => void] +export function useUserSettings(name: string, defaultValue: T | (() => T)): [T, (value: T) => void, () => void] +export function useUserSettings(name: string | undefined, defaultValue: T | (() => T)): [T, (value: T) => void, () => void] +export function useUserSettings(name: string, defaultValue?: T | (() => T)): [T | undefined, (value: T) => void, () => void] +export function useUserSettings(name?: string, defaultValue?: T | (() => T)): [T | undefined, (value: T) => void, () => void] + +export function useUserSettings(name?: string, defaultValue?: T | (() => T)): [T | undefined, (value: T) => void, () => void] { + const [settings, setSettings] = useState(defaultValue) + + useEffect(() => { + if (!name) return + invokeWebApiWrapperAsync( + async () => { + const data = await UserSettingsService.get(name) + if (data) + setSettings(data) + }, + undefined, + `Не удалось загрузить настройки "${name}"` + ) + }, [name]) + + const onSettingChange = useCallback((value: T) => { + setSettings(value) + if (!name) return + invokeWebApiWrapperAsync( + async () => await UserSettingsService.upsert(name, value), + undefined, + `Не удалось сохранить настройки "${name}"` + ) + }, [name]) + + const onSettingsReset = useCallback(() => { + setSettings(defaultValue) + if (!name) return + invokeWebApiWrapperAsync( + async () => await UserSettingsService.delete(name), + undefined, + `Не удалось удалить настройки "${name}"` + ) + }, [name, defaultValue]) + + return [settings, onSettingChange, onSettingsReset] +} + +export default useUserSettings