refactor: migrate settings reducer to ts (#400)

artemmufazalov · web-flow · commit d5b7ac1035ab · 2023-05-26T14:25:34.000+03:00
diff --git a/src/components/ProblemFilter/ProblemFilter.tsx b/src/components/ProblemFilter/ProblemFilter.tsx
@@ -1,18 +1,23 @@
 import {RadioButton} from '@gravity-ui/uikit';
 
-import {ALL, PROBLEMS, IProblemFilterValues} from '../../utils/constants';
+import type {ValueOf} from '../../types/common';
+import {ProblemFilterValues} from '../../store/reducers/settings/settings';
 
 interface ProblemFilterProps {
-    value: IProblemFilterValues;
+    value: ValueOf<typeof ProblemFilterValues>;
     onChange: (value: string) => void;
     className?: string;
 }
 
 export const ProblemFilter = ({value, onChange, className}: ProblemFilterProps) => {
     return (
         <RadioButton value={value} onUpdate={onChange} className={className}>
-            <RadioButton.Option value={ALL}>{ALL}</RadioButton.Option>
-            <RadioButton.Option value={PROBLEMS}>{PROBLEMS}</RadioButton.Option>
+            <RadioButton.Option value={ProblemFilterValues.ALL}>
+                {ProblemFilterValues.ALL}
+            </RadioButton.Option>
+            <RadioButton.Option value={ProblemFilterValues.PROBLEMS}>
+                {ProblemFilterValues.PROBLEMS}
+            </RadioButton.Option>
         </RadioButton>
     );
 };
diff --git a/src/containers/App/Content.js b/src/containers/App/Content.js
@@ -16,7 +16,7 @@ import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import Header from '../Header/Header';
 import AppIcons from '../AppIcons/AppIcons';
 
-import {getParsedSettingValue} from '../../store/reducers/settings';
+import {getParsedSettingValue} from '../../store/reducers/settings/settings';
 import {THEME_KEY} from '../../utils/constants';
 
 import './App.scss';
diff --git a/src/containers/AsideNavigation/AsideNavigation.tsx b/src/containers/AsideNavigation/AsideNavigation.tsx
@@ -24,7 +24,7 @@ import {UserSettings} from '../UserSettings/UserSettings';
 import routes, {createHref, CLUSTER_PAGES} from '../../routes';
 
 import {logout} from '../../store/reducers/authentication';
-import {getSettingValue, setSettingValue} from '../../store/reducers/settings';
+import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
 
 import {ASIDE_HEADER_COMPACT_KEY} from '../../utils/constants';
 
@@ -273,7 +273,7 @@ const mapStateToProps = (state: any) => {
 
     return {
         ydbUser,
-        compact: JSON.parse(getSettingValue(state, ASIDE_HEADER_COMPACT_KEY)),
+        compact: getParsedSettingValue(state, ASIDE_HEADER_COMPACT_KEY),
     };
 };
 
diff --git a/src/containers/Nodes/Nodes.tsx b/src/containers/Nodes/Nodes.tsx
@@ -5,6 +5,7 @@ import {useDispatch} from 'react-redux';
 import DataTable from '@gravity-ui/react-data-table';
 
 import type {EPathType} from '../../types/api/schema';
+import type {ValueOf} from '../../types/common';
 
 import {AccessDenied} from '../../components/Errors/403';
 import {Illustration} from '../../components/Illustration';
@@ -16,11 +17,7 @@ import {EntitiesCount} from '../../components/EntitiesCount';
 
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 
-import {
-    ALL,
-    DEFAULT_TABLE_SETTINGS,
-    USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-} from '../../utils/constants';
+import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants';
 import {useAutofetcher, useSetting, useTypedSelector} from '../../utils/hooks';
 import {AdditionalNodesInfo, isUnavailableNode, NodesUptimeFilterValues} from '../../utils/nodes';
 
@@ -33,7 +30,7 @@ import {
     resetNodesState,
     getComputeNodes,
 } from '../../store/reducers/nodes';
-import {changeFilter} from '../../store/reducers/settings';
+import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 
 import {isDatabaseEntityType} from '../Tenant/utils/schema';
@@ -104,7 +101,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
     };
 
     const handleProblemFilterChange = (value: string) => {
-        dispatch(changeFilter(value));
+        dispatch(changeFilter(value as ValueOf<typeof ProblemFilterValues>));
     };
 
     const handleUptimeFilterChange = (value: string) => {
@@ -148,7 +145,10 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
         });
 
         if (nodes && nodes.length === 0) {
-            if (problemFilter !== ALL || nodesUptimeFilter !== NodesUptimeFilterValues.All) {
+            if (
+                problemFilter !== ProblemFilterValues.ALL ||
+                nodesUptimeFilter !== NodesUptimeFilterValues.All
+            ) {
                 return <Illustration name="thumbsUp" width="200" />;
             }
         }
diff --git a/src/containers/Tenant/Diagnostics/Network/Network.js b/src/containers/Tenant/Diagnostics/Network/Network.js
@@ -14,8 +14,7 @@ import {Illustration} from '../../../../components/Illustration';
 
 import {getNetworkInfo, setDataWasNotLoaded} from '../../../../store/reducers/network';
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
-import {ALL, PROBLEMS} from '../../../../utils/constants';
-import {changeFilter} from '../../../../store/reducers/settings';
+import {changeFilter, ProblemFilterValues} from '../../../../store/reducers/settings/settings';
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getDefaultNodePath} from '../../../Node/NodePages';
 
@@ -178,8 +177,9 @@ class Network extends React.Component {
                                           }
 
                                           if (
-                                              (filter === PROBLEMS && capacity !== connected) ||
-                                              filter === ALL ||
+                                              (filter === ProblemFilterValues.PROBLEMS &&
+                                                  capacity !== connected) ||
+                                              filter === ProblemFilterValues.ALL ||
                                               isRight
                                           ) {
                                               problemNodesCount++;
@@ -218,8 +218,9 @@ class Network extends React.Component {
                                   }
 
                                   if (
-                                      (filter === PROBLEMS && capacity !== connected) ||
-                                      filter === ALL ||
+                                      (filter === ProblemFilterValues.PROBLEMS &&
+                                          capacity !== connected) ||
+                                      filter === ProblemFilterValues.ALL ||
                                       isRight
                                   ) {
                                       problemNodesCount++;
@@ -254,7 +255,7 @@ class Network extends React.Component {
             );
         });
 
-        if (filter === PROBLEMS && problemNodesCount === 0) {
+        if (filter === ProblemFilterValues.PROBLEMS && problemNodesCount === 0) {
             return <Illustration name="thumbsUp" width="200" />;
         } else {
             return result;
diff --git a/src/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.tsx b/src/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.tsx
@@ -8,7 +8,7 @@ import {Tabs} from '@gravity-ui/uikit';
 
 import routes, {createHref} from '../../../routes';
 import {TENANT_INITIAL_TAB_KEY} from '../../../utils/constants';
-import {setSettingValue} from '../../../store/reducers/settings';
+import {setSettingValue} from '../../../store/reducers/settings/settings';
 
 import {TenantTabsGroups, TENANT_GENERAL_TABS} from '../TenantPages';
 
diff --git a/src/containers/Tenant/QueryEditor/QueryEditor.js b/src/containers/Tenant/QueryEditor/QueryEditor.js
@@ -24,7 +24,7 @@ import {
     setMonacoHotKey,
 } from '../../../store/reducers/executeQuery';
 import {getExplainQuery, getExplainQueryAst} from '../../../store/reducers/explainQuery';
-import {getParsedSettingValue, setSettingValue} from '../../../store/reducers/settings';
+import {getParsedSettingValue, setSettingValue} from '../../../store/reducers/settings/settings';
 import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,
diff --git a/src/containers/Tenants/Tenants.js b/src/containers/Tenants/Tenants.js
@@ -19,9 +19,13 @@ import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
-import {ALL, DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
+import {DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
 import {getTenantsInfo} from '../../store/reducers/tenants/tenants';
-import {changeFilter, getSettingValue} from '../../store/reducers/settings';
+import {
+    changeFilter,
+    getSettingValue,
+    ProblemFilterValues,
+} from '../../store/reducers/settings/settings';
 import {setHeader} from '../../store/reducers/header';
 
 import {clusterName} from '../../store';
@@ -63,7 +67,7 @@ class Tenants extends React.Component {
     };
 
     static filterTenants(tenants, filter) {
-        if (filter === ALL) {
+        if (filter === ProblemFilterValues.ALL) {
             return tenants;
         }
 
@@ -311,7 +315,7 @@ class Tenants extends React.Component {
             },
         ];
 
-        if (filteredTenants.length === 0 && filter !== ALL) {
+        if (filteredTenants.length === 0 && filter !== ProblemFilterValues.ALL) {
             return <Illustration name="thumbsUp" width="200" />;
         }
 
diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts
@@ -19,7 +19,7 @@ import partitions from './partitions/partitions';
 import executeQuery from './executeQuery';
 import explainQuery from './explainQuery';
 import tabletsFilters from './tabletsFilters';
-import settings from './settings';
+import settings from './settings/settings';
 import preview from './preview';
 import nodesList from './nodesList';
 import describe from './describe';
diff --git a/src/store/reducers/nodes.ts b/src/store/reducers/nodes.ts
@@ -3,7 +3,7 @@ import {createSelector, Selector} from 'reselect';
 import {escapeRegExp} from 'lodash/fp';
 
 import '../../services/api';
-import {ALL, HOUR_IN_SECONDS, IProblemFilterValues} from '../../utils/constants';
+import {HOUR_IN_SECONDS} from '../../utils/constants';
 import {calcUptime, calcUptimeInSeconds} from '../../utils';
 import {NodesUptimeFilterValues} from '../../utils/nodes';
 import type {
@@ -14,9 +14,11 @@ import type {
     INodesRootStateSlice,
     INodesState,
 } from '../../types/store/nodes';
+import type {ValueOf} from '../../types/common';
 import {EFlag} from '../../types/api/enums';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
+import {ProblemFilterValues} from './settings/settings';
 
 export const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
 
@@ -178,9 +180,9 @@ const getNodesList = (state: INodesRootStateSlice) => state.nodes.data;
 
 const filterNodesByProblemsStatus = (
     nodesList: INodesPreparedEntity[] = [],
-    problemFilter: IProblemFilterValues,
+    problemFilter: ValueOf<typeof ProblemFilterValues>,
 ) => {
-    if (problemFilter === ALL) {
+    if (problemFilter === ProblemFilterValues.ALL) {
         return nodesList;
     }
 
diff --git a/src/store/reducers/settings/settings.ts b/src/store/reducers/settings/settings.ts
@@ -1,5 +1,8 @@
+import type {Reducer} from 'redux';
+import type {ThunkAction} from 'redux-thunk';
+
+import type {ValueOf} from '../../../types/common';
 import {
-    ALL,
     SAVED_QUERIES_KEY,
     THEME_KEY,
     TENANT_INITIAL_TAB_KEY,
@@ -9,25 +12,38 @@ import {
     PARTITIONS_HIDDEN_COLUMNS_KEY,
     QUERY_INITIAL_MODE_KEY,
     ENABLE_QUERY_MODES_FOR_EXPLAIN,
-} from '../../utils/constants';
-import '../../services/api';
-import {getValueFromLS, parseJson} from '../../utils/utils';
-import {QueryModes} from '../../types/store/query';
+} from '../../../utils/constants';
+import '../../../services/api';
+import {getValueFromLS, parseJson} from '../../../utils/utils';
+import {QueryModes} from '../../../types/store/query';
+
+import type {RootState} from '..';
+import type {
+    SetSettingValueAction,
+    SettingsAction,
+    SettingsRootStateSlice,
+    SettingsState,
+} from './types';
 
 const CHANGE_PROBLEM_FILTER = 'settings/CHANGE_PROBLEM_FILTER';
-const SET_SETTING_VALUE = 'settings/SET_VALUE';
+export const SET_SETTING_VALUE = 'settings/SET_VALUE';
+
+export const ProblemFilterValues = {
+    ALL: 'All',
+    PROBLEMS: 'With problems',
+} as const;
 
 const userSettings = window.userSettings || {};
 const systemSettings = window.systemSettings || {};
 
-export function readSavedSettingsValue(key, defaultValue) {
+export function readSavedSettingsValue(key: string, defaultValue?: string) {
     const savedValue = window.web_version ? userSettings[key] : getValueFromLS(key);
 
     return savedValue ?? defaultValue;
 }
 
 export const initialState = {
-    problemFilter: ALL,
+    problemFilter: ProblemFilterValues.ALL,
     userSettings: {
         ...userSettings,
         [THEME_KEY]: readSavedSettingsValue(THEME_KEY, 'system'),
@@ -49,7 +65,7 @@ export const initialState = {
     systemSettings,
 };
 
-const settings = (state = initialState, action) => {
+const settings: Reducer<SettingsState, SettingsAction> = (state = initialState, action) => {
     switch (action.type) {
         case CHANGE_PROBLEM_FILTER:
             return {
@@ -74,7 +90,10 @@ const settings = (state = initialState, action) => {
     }
 };
 
-export const setSettingValue = (name, value) => {
+export const setSettingValue = (
+    name: string,
+    value: string,
+): ThunkAction<void, RootState, unknown, SetSettingValueAction> => {
     return (dispatch, getState) => {
         dispatch({type: SET_SETTING_VALUE, data: {name, value}});
         const {singleClusterMode} = getState();
@@ -86,24 +105,24 @@ export const setSettingValue = (name, value) => {
     };
 };
 
-export const getSettingValue = (state, name) => {
+export const getSettingValue = (state: SettingsRootStateSlice, name: string) => {
     return state.settings.userSettings[name];
 };
 
 /**
  * Returns parsed settings value.
  * If value cannot be parsed, returns initially stored string
  */
-export const getParsedSettingValue = (state, name) => {
+export const getParsedSettingValue = (state: SettingsRootStateSlice, name: string) => {
     const value = state.settings.userSettings[name];
     return parseJson(value);
 };
 
-export const changeFilter = (filter) => {
+export const changeFilter = (filter: ValueOf<typeof ProblemFilterValues>) => {
     return {
         type: CHANGE_PROBLEM_FILTER,
         data: filter,
-    };
+    } as const;
 };
 
 export default settings;
diff --git a/src/store/reducers/settings/types.ts b/src/store/reducers/settings/types.ts
@@ -0,0 +1,19 @@
+import type {ValueOf} from '../../../types/common';
+import {changeFilter, ProblemFilterValues, SET_SETTING_VALUE} from './settings';
+
+export interface SettingsState {
+    problemFilter: ValueOf<typeof ProblemFilterValues>;
+    userSettings: Record<string, string | undefined>;
+    systemSettings: Record<string, string | undefined>;
+}
+
+export type SetSettingValueAction = {
+    type: typeof SET_SETTING_VALUE;
+    data: {name: string; value: string};
+};
+
+export type SettingsAction = ReturnType<typeof changeFilter> | SetSettingValueAction;
+
+export interface SettingsRootStateSlice {
+    settings: SettingsState;
+}
diff --git a/src/store/state-url-mapping.js b/src/store/state-url-mapping.js
@@ -6,7 +6,7 @@ import {parseQuery} from 'redux-location-state/lib/parseQuery';
 import {LOCATION_PUSH, LOCATION_POP} from 'redux-location-state/lib/constants';
 import {getMatchingDeclaredPath} from 'redux-location-state/lib/helpers';
 
-import {initialState as initialSettingsState} from './reducers/settings';
+import {initialState as initialSettingsState} from './reducers/settings/settings';
 import {initialState as initialHeatmapState} from './reducers/heatmap';
 
 const paramSetup = {
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -75,11 +75,6 @@ export const COLORS_PRIORITY = {
     grey: 1,
 };
 
-export const ALL = 'All';
-export const PROBLEMS = 'With problems';
-
-export type IProblemFilterValues = typeof ALL | typeof PROBLEMS;
-
 export const THEME_KEY = 'theme';
 export const INVERTED_DISKS_KEY = 'invertedDisks';
 export const USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY = 'useNodesEndpointInDiagnostics';
diff --git a/src/utils/hooks/useSetting.ts b/src/utils/hooks/useSetting.ts
@@ -1,7 +1,7 @@
 import {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 
-import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings';
+import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
 
 import {useTypedSelector} from './useTypedSelector';
 
