chore: add a redux settings slice, currently outdated banner inc
Audric Ackermann
3 years ago
parent
0080254286
commit
0e286142f1
@ -1,5 +1,4 @@
|
|||||||
export type StorageItem = {
|
export type StorageItem = {
|
||||||
id: string;
|
id: string;
|
||||||
value: any;
|
value: any;
|
||||||
timestamp?: number;
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -0,0 +1,73 @@
|
|||||||
|
import { PayloadAction, createSlice } from '@reduxjs/toolkit';
|
||||||
|
import { SettingsKey } from '../../data/settings-key';
|
||||||
|
import { isBoolean } from 'lodash';
|
||||||
|
import { Storage } from '../../util/storage';
|
||||||
|
|
||||||
|
const SettingsBoolsKeyTrackedInRedux = [
|
||||||
|
SettingsKey.someDeviceOutdatedSyncing,
|
||||||
|
SettingsKey.settingsLinkPreview,
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export type SettingsState = {
|
||||||
|
settingsBools: Record<typeof SettingsBoolsKeyTrackedInRedux[number], boolean>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function getSettingsInitialState() {
|
||||||
|
return {
|
||||||
|
settingsBools: {
|
||||||
|
someDeviceOutdatedSyncing: false,
|
||||||
|
'link-preview-setting': false, // this is the value of SettingsKey.settingsLinkPreview
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function isTrackedBoolean(key: string): key is typeof SettingsBoolsKeyTrackedInRedux[number] {
|
||||||
|
return SettingsBoolsKeyTrackedInRedux.indexOf(key as any) !== -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This slice is the one holding the settings of the currently logged in user in redux.
|
||||||
|
* This is in addition to the settings stored in the Storage class but is a memory only representation of them.
|
||||||
|
* You should not try to make changes here, but instead through the Storage class.
|
||||||
|
* What you can do with this slice, is to create selectors and hooks to keep your UI in sync with the state in whatever is Storage.
|
||||||
|
*/
|
||||||
|
const settingsSlice = createSlice({
|
||||||
|
name: 'settings',
|
||||||
|
// when this createSlice gets invoke, the storage is not ready, but redux still wants a state so we just avoid hitting the storage.
|
||||||
|
// Once the storage is ready,
|
||||||
|
initialState: getSettingsInitialState(),
|
||||||
|
reducers: {
|
||||||
|
updateAllOnStorageReady(state) {
|
||||||
|
const linkPreview = Storage.get(SettingsKey.settingsLinkPreview, false);
|
||||||
|
const outdatedSync = Storage.get(SettingsKey.someDeviceOutdatedSyncing, false);
|
||||||
|
state.settingsBools.someDeviceOutdatedSyncing = isBoolean(outdatedSync)
|
||||||
|
? outdatedSync
|
||||||
|
: false;
|
||||||
|
state.settingsBools['link-preview-setting'] = isBoolean(linkPreview) ? linkPreview : false; // this is the value of SettingsKey.settingsLinkPreview
|
||||||
|
return state;
|
||||||
|
},
|
||||||
|
updateSettingsBoolValue(state, action: PayloadAction<{ id: string; value: boolean }>) {
|
||||||
|
const { id, value } = action.payload;
|
||||||
|
|
||||||
|
if (!isTrackedBoolean(id) || !isBoolean(value)) return state;
|
||||||
|
|
||||||
|
state.settingsBools[id] = value;
|
||||||
|
|
||||||
|
return state;
|
||||||
|
},
|
||||||
|
deleteSettingsBoolValue(state, action: PayloadAction<string>) {
|
||||||
|
if (!isTrackedBoolean(action.payload)) return state;
|
||||||
|
|
||||||
|
delete state.settingsBools[action.payload];
|
||||||
|
return state;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { actions, reducer } = settingsSlice;
|
||||||
|
export const {
|
||||||
|
updateSettingsBoolValue,
|
||||||
|
deleteSettingsBoolValue,
|
||||||
|
updateAllOnStorageReady,
|
||||||
|
} = actions;
|
||||||
|
export const settingsReducer = reducer;
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { useSelector } from 'react-redux';
|
||||||
|
import { SettingsKey } from '../../data/settings-key';
|
||||||
|
import { StateType } from '../reducer';
|
||||||
|
|
||||||
|
const getLinkPreviewEnabled = (state: StateType) =>
|
||||||
|
state.settings.settingsBools[SettingsKey.settingsLinkPreview];
|
||||||
|
|
||||||
|
const getHasDeviceOutdatedSyncing = (state: StateType) =>
|
||||||
|
state.settings.settingsBools[SettingsKey.someDeviceOutdatedSyncing];
|
||||||
|
|
||||||
|
export const useHasLinkPreviewEnabled = () => {
|
||||||
|
const value = useSelector(getLinkPreviewEnabled);
|
||||||
|
return Boolean(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useHasDeviceOutdatedSyncing = () => {
|
||||||
|
const value = useSelector(getHasDeviceOutdatedSyncing);
|
||||||
|
return Boolean(value);
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue