chore: add a redux settings slice, currently outdated banner inc
Audric Ackermann
2 years ago
parent
0080254286
commit
0e286142f1
@ -1,5 +1,4 @@
|
||||
export type StorageItem = {
|
||||
id: string;
|
||||
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