refactor: migrate authentication reducer to ts (#514)

Author: artemmufazalov

src/containers/App/App.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import ContentWrapper, {Content} from './Content';
 import AsideNavigation from '../AsideNavigation/AsideNavigation';
 
-import {getUser} from '../../store/reducers/authentication';
+import {getUser} from '../../store/reducers/authentication/authentication';
 import {registerLanguages} from '../../utils/monaco';
 
 import './App.scss';

src/containers/AsideNavigation/AsideNavigation.tsx

@@ -18,7 +18,7 @@ import userChecked from '../../assets/icons/user-check.svg';
 import settingsIcon from '../../assets/icons/settings.svg';
 import supportIcon from '../../assets/icons/support.svg';
 
-import {logout} from '../../store/reducers/authentication';
+import {logout} from '../../store/reducers/authentication/authentication';
 import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
 import {TENANT_PAGE, TENANT_PAGES_IDS} from '../../store/reducers/tenant/constants';
 import routes, {TENANT, createHref, parseQuery} from '../../routes';

src/containers/Authentication/Authentication.tsx

@@ -5,7 +5,7 @@ import cn from 'bem-cn-lite';
 
 import {Button, TextInput, Icon, Link as ExternalLink} from '@gravity-ui/uikit';
 
-import {authenticate} from '../../store/reducers/authentication';
+import {authenticate} from '../../store/reducers/authentication/authentication';
 import {useTypedSelector} from '../../utils/hooks';
 
 import ydbLogoIcon from '../../assets/icons/ydb.svg';

src/store/reducers/authentication.js renamed to src/store/reducers/authentication/authentication.ts

@@ -1,5 +1,9 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
+import type {Reducer} from 'redux';
+
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+
+import type {AuthenticationAction, AuthenticationState} from './types';
 
 export const SET_UNAUTHENTICATED = createRequestActionTypes(
     'authentication',
@@ -11,16 +15,19 @@ export const FETCH_USER = createRequestActionTypes('authentication', 'FETCH_USER
 const initialState = {
     isAuthenticated: true,
     user: '',
-    error: '',
+    error: undefined,
 };
 
-const authentication = function (state = initialState, action) {
+const authentication: Reducer<AuthenticationState, AuthenticationAction> = (
+    state = initialState,
+    action,
+) => {
     switch (action.type) {
         case SET_UNAUTHENTICATED.SUCCESS: {
-            return {...state, isAuthenticated: false, user: '', error: ''};
+            return {...state, isAuthenticated: false, user: '', error: undefined};
         }
         case SET_AUTHENTICATED.SUCCESS: {
-            return {...state, isAuthenticated: true, error: ''};
+            return {...state, isAuthenticated: true, error: undefined};
         }
         case SET_AUTHENTICATED.FAILURE: {
             return {...state, error: action.error};
@@ -34,7 +41,7 @@ const authentication = function (state = initialState, action) {
     }
 };
 
-export const authenticate = (user, password) => {
+export const authenticate = (user: string, password: string) => {
     return createApiRequest({
         request: window.api.authenticate(user, password),
         actions: SET_AUTHENTICATED,

src/store/reducers/authentication/types.ts

@@ -0,0 +1,15 @@
+import type {AuthErrorResponse} from '../../../types/api/error';
+import type {ApiRequestAction} from '../../utils';
+
+import {FETCH_USER, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from './authentication';
+
+export interface AuthenticationState {
+    isAuthenticated: boolean;
+    user: string | undefined;
+    error: AuthErrorResponse | undefined;
+}
+
+export type AuthenticationAction =
+    | ApiRequestAction<typeof SET_UNAUTHENTICATED, unknown, unknown>
+    | ApiRequestAction<typeof SET_AUTHENTICATED, unknown, AuthErrorResponse>
+    | ApiRequestAction<typeof FETCH_USER, string | undefined, unknown>;

src/store/reducers/describe.ts

@@ -1,9 +1,7 @@
-import {createSelector, Selector} from 'reselect';
 import {Reducer} from 'redux';
 
 import '../../services/api';
-import {
-    IDescribeRootStateSlice,
+import type {
     IDescribeState,
     IDescribeAction,
     IDescribeHandledResponse,
@@ -93,19 +91,6 @@ export const setDataWasNotLoaded = () => {
     } as const;
 };
 
-// Consumers selectors
-const selectConsumersNames = (state: IDescribeRootStateSlice, path?: string) =>
-    path
-        ? state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules
-        : undefined;
-
-interface IConsumer {
-    name: string;
-}
-
-export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[], [string | undefined]> =
-    createSelector(selectConsumersNames, (names = []) => names.map((name) => ({name})));
-
 export function getDescribe({path}: {path: string}) {
     const request = window.api.getDescribe({path});
     return createApiRequest({

src/store/reducers/index.ts

@@ -30,7 +30,7 @@ import healthcheckInfo from './healthcheckInfo';
 import shardsWorkload from './shardsWorkload';
 import hotKeys from './hotKeys';
 import olapStats from './olapStats';
-import authentication from './authentication';
+import authentication from './authentication/authentication';
 import header from './header/header';
 import saveQuery from './saveQuery';
 import fullscreen from './fullscreen';

src/store/utils.ts

@@ -3,7 +3,7 @@ import {AxiosResponse} from 'axios';
 
 import createToast from '../utils/createToast';
 
-import {SET_UNAUTHENTICATED} from './reducers/authentication';
+import {SET_UNAUTHENTICATED} from './reducers/authentication/authentication';
 import type {GetState} from './reducers';
 
 export const nop = (result: any) => result;

src/types/api/error.ts

@@ -18,3 +18,7 @@ export interface NetworkError {
     number?: unknown;
     stack?: string;
 }
+
+export type AuthErrorResponse = IResponseError<{
+    error?: string;
+}>;