Replace local settings UI with the one from shlink-web-component

This commit is contained in:
Alejandro Celaya
2024-05-20 20:03:50 +02:00
parent d4bc9dd62a
commit 202a69bdf5
27 changed files with 88 additions and 1096 deletions

View File

@@ -1,15 +1,8 @@
import type { PayloadAction, PrepareAction } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import { mergeDeepRight } from '@shlinkio/data-manipulation';
import type { Theme } from '@shlinkio/shlink-frontend-kit';
import { getSystemPreferredTheme } from '@shlinkio/shlink-frontend-kit';
import type {
Settings,
ShortUrlCreationSettings,
ShortUrlsListSettings,
TagsSettings,
VisitsSettings,
} from '@shlinkio/shlink-web-component';
import type { Settings, ShortUrlsListSettings } from '@shlinkio/shlink-web-component/settings';
import type { Defined } from '../../utils/types';
type ShortUrlsOrder = Defined<ShortUrlsListSettings['defaultOrdering']>;
@@ -19,15 +12,9 @@ export const DEFAULT_SHORT_URLS_ORDERING: ShortUrlsOrder = {
dir: 'DESC',
};
export type UiSettings = {
theme: Theme;
};
type SettingsAction = PayloadAction<Settings>;
export type AppSettings = Settings & {
ui?: UiSettings;
};
const initialState: AppSettings = {
const initialState: Settings = {
realTimeUpdates: {
enabled: true,
},
@@ -45,39 +32,14 @@ const initialState: AppSettings = {
},
};
type SettingsAction = PayloadAction<AppSettings>;
type SettingsPrepareAction = PrepareAction<AppSettings>;
const commonReducer = (state: AppSettings, { payload }: SettingsAction) => mergeDeepRight(state, payload);
const toReducer = (prepare: SettingsPrepareAction) => ({ reducer: commonReducer, prepare });
const toPreparedAction: SettingsPrepareAction = (payload: AppSettings) => ({ payload });
const { reducer, actions } = createSlice({
name: 'shlink/settings',
initialState,
reducers: {
toggleRealTimeUpdates: toReducer((enabled: boolean) => toPreparedAction({ realTimeUpdates: { enabled } })),
setRealTimeUpdatesInterval: toReducer((interval: number) => toPreparedAction({ realTimeUpdates: { interval } })),
setShortUrlCreationSettings: toReducer(
(shortUrlCreation: ShortUrlCreationSettings) => toPreparedAction({ shortUrlCreation }),
),
setShortUrlsListSettings: toReducer(
(shortUrlsList: ShortUrlsListSettings) => toPreparedAction({ shortUrlsList }),
),
setUiSettings: toReducer((ui: UiSettings) => toPreparedAction({ ui })),
setVisitsSettings: toReducer((visits: VisitsSettings) => toPreparedAction({ visits })),
setTagsSettings: toReducer((tags: TagsSettings) => toPreparedAction({ tags })),
setSettings: (state: Settings, { payload }: SettingsAction) => mergeDeepRight(state, payload),
},
});
export const {
toggleRealTimeUpdates,
setRealTimeUpdatesInterval,
setShortUrlCreationSettings,
setShortUrlsListSettings,
setUiSettings,
setVisitsSettings,
setTagsSettings,
} = actions;
export const { setSettings } = actions;
export const settingsReducer = reducer;