day 48

.eslintrc.js

@@ -48,6 +48,7 @@ module.exports = {
     'react-hooks/exhaustive-deps': 'error',
     'no-param-reassign': 'off',
     'no-autofocus': 'off',
+    'no-undef': 'off',
   },
   settings: {
     react: {

src/app/providers/StoreProvider/config/StateSchema.ts

@@ -9,6 +9,7 @@ import { CounterSchema } from 'entities/Counter';
 import { ProfileSchema } from 'entities/Profile';
 import { UserSchema } from 'entities/User';
 import { LoginSchema } from 'features/AuthByUsername';
+import { Dispatch } from 'redux';
 import { NavigateOptions, To } from 'react-router-dom';
 
 export interface StateSchema {
@@ -35,9 +36,10 @@ export interface ReduxStoreWithManager extends EnhancedStore<StateSchema> {
 
 export interface ThunkExtraArg {
   api: AxiosInstance,
-  navigate: (to: To, options?: NavigateOptions) => void,
+  navigate?: (to: To, options?: NavigateOptions) => void,
 }
 export interface ThunkConfig<T> {
   rejectValue: T,
   extra: ThunkExtraArg,
+  dispatch?: Dispatch,
 }

src/app/providers/StoreProvider/config/store.ts

@@ -1,4 +1,5 @@
 import {
+  CombinedState,
   configureStore,
   getDefaultMiddleware,
   ReducersMapObject,
@@ -7,7 +8,8 @@ import { counterReducer } from 'entities/Counter';
 import { userReducer } from 'entities/User';
 import { $api } from 'shared/api/api';
 import { NavigateOptions, To } from 'react-router-dom';
-import { StateSchema } from './StateSchema';
+import { Reducer } from 'redux';
+import { StateSchema, ThunkExtraArg } from './StateSchema';
 import { createReducerManager } from './reducerManager';
 
 export const createReduxStore = (
@@ -23,16 +25,18 @@ export const createReduxStore = (
 
   const reducerManager = createReducerManager(rootReducer);
 
+  const extraArgs: ThunkExtraArg = {
+    api: $api,
+    navigate,
+  };
+
   const store = configureStore({
-    reducer: reducerManager.reduce,
+    reducer: reducerManager.reduce as Reducer<CombinedState<StateSchema>>,
     devTools: __IS_DEV__,
     preloadedState: initialState,
     middleware: (getDefaultMiddleware) => getDefaultMiddleware({
       thunk: {
-        extraArgument: {
-          api: $api,
-          navigate,
-        },
+        extraArgument: extraArgs,
       },
     }),
   });

src/app/providers/StoreProvider/ui/StoreProvider.tsx

@@ -1,4 +1,4 @@
-import { DeepPartial, ReducersMapObject } from '@reduxjs/toolkit';
+import { ReducersMapObject } from '@reduxjs/toolkit';
 import { ReactNode } from 'react';
 import { Provider } from 'react-redux';
 import { useNavigate } from 'react-router-dom';

src/app/providers/ThemeProvider/lib/useTheme.ts

@@ -10,19 +10,19 @@ export const useTheme = (): useThemeResult => {
   const { theme, setTheme } = useContext(ThemeContext);
 
   useEffect(() => {
-    document.body.className = theme;
+    if (theme) document.body.className = theme;
   }, [theme]);
 
   const toggleTheme = () => {
     const newTheme = theme === Theme.DARK ? Theme.LIGHT : Theme.DARK;
     console.log(newTheme);
     localStorage.setItem(LOCAL_STORAGE_THEME_KEY, newTheme);
-    setTheme(newTheme);
+    setTheme?.(newTheme);
     document.body.className = newTheme;
   };
 
   return {
-    theme,
+    theme: theme || Theme.LIGHT,
     toggleTheme,
   };
 };

src/app/types/global.d.ts

@@ -19,3 +19,7 @@ declare module '*.svg' {
 
 declare const __IS_DEV__: boolean;
 declare const __API__: string;
+
+type DeepPartial<T> = T extends object ? {
+  [P in keyof T]?: DeepPartial<T[P]>;
+} : T;

src/entities/Counter/model/selectors/getCounter/getCounter.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
 import { getCounter } from './getCounter';
 

src/entities/Counter/model/selectors/getCounterValue/getCounterValue.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
 import { getCounterValue } from './getCounterValue';
 

src/entities/Profile/model/selectors/getProfileIsLoading/getProfileIsLoading.ts

@@ -1,3 +1,3 @@
-import { StateSchema } from "app/providers/StoreProvider";
+import { StateSchema } from 'app/providers/StoreProvider';
 
 export const getProfileIsLoading = (state: StateSchema) => state.profile?.isLoading;

src/features/AuthByUsername/model/selectors/getLoginError/getLoginError.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
 import { getLoginError } from './getLoginError';
 

src/features/AuthByUsername/model/selectors/getLoginIsLoading/getLoginIsLoading.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
 import { getLoginIsLoading } from './getLoginIsLoading';
 

src/features/AuthByUsername/model/selectors/getLoginPassword/getLoginPassword.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
 import { getLoginPassword } from './getLoginPassword';
 

src/features/AuthByUsername/model/selectors/getLoginUsername/getLoginUsername.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
 import { getLoginUsername } from './getLoginUsername';
 

src/features/AuthByUsername/model/services/loginByUsername/loginByUsername.test.ts

@@ -1,12 +1,7 @@
-import axios from 'axios';
 import { userActions } from 'entities/User';
 import { TestAsyncThunk } from 'shared/lib/tests/TestAsyncThunk/TestAsyncThunk';
 import { loginByUsername } from './loginByUsername';
 
-jest.mock('axios');
-
-const mockedAxios = jest.mocked(axios, true);
-
 // describe('loginByUsername.test', () => {
 //   let dispatch: Dispatch;
 //   let getState: () => StateSchema;
@@ -44,26 +39,26 @@ const mockedAxios = jest.mocked(axios, true);
 describe('loginByUsername.test', () => {
   test('test success login', async () => {
     const userValue = { username: '123', id: '1' };
-    mockedAxios.post.mockReturnValue(Promise.resolve({ data: userValue }));
-
     const thunk = new TestAsyncThunk(loginByUsername);
+
+    thunk.api.post.mockReturnValue(Promise.resolve({ data: userValue }));
     const result = await thunk.callThunk({ username: '123', password: '123' });
 
     expect(thunk.dispatch).toHaveBeenCalledWith(
       userActions.setAuthData(userValue),
     );
     expect(thunk.dispatch).toHaveBeenCalledTimes(3);
-    expect(mockedAxios.post).toHaveBeenCalled();
+    expect(thunk.api.post).toHaveBeenCalled();
     expect(result.meta.requestStatus).toBe('fulfilled');
     expect(result.payload).toEqual(userValue);
   });
 
   test('test wrong data, 403 error', async () => {
-    mockedAxios.post.mockReturnValue(Promise.resolve({ status: 403 }));
     const thunk = new TestAsyncThunk(loginByUsername);
+    thunk.api.post.mockReturnValue(Promise.resolve({ status: 403 }));
     const result = await thunk.callThunk({ username: '123', password: '123' });
     expect(thunk.dispatch).toHaveBeenCalledTimes(2);
-    expect(mockedAxios.post).toHaveBeenCalled();
+    expect(thunk.api.post).toHaveBeenCalled();
     expect(result.meta.requestStatus).toBe('rejected');
     expect(result.payload).toBe('error');
   });

src/features/AuthByUsername/model/services/loginByUsername/loginByUsername.ts

@@ -23,7 +23,7 @@ export const loginByUsername = createAsyncThunk<
 
     localStorage.setItem(USER_LOCALSTORAGE_KEY, JSON.stringify(response.data));
     dispatch(userActions.setAuthData(response.data));
-    extra.navigate('/about');
+    extra?.navigate?.('/about');
     return response.data;
   } catch (e) {
     console.log(e);

src/features/AuthByUsername/model/slice/loginSlice.test.ts

@@ -1,4 +1,3 @@
-import { DeepPartial } from '@reduxjs/toolkit';
 import { LoginSchema } from '../types/loginSchema';
 import { loginActions, loginReducer } from './loginSlice';
 

src/shared/api/api.ts

@@ -4,6 +4,6 @@ import { USER_LOCALSTORAGE_KEY } from 'shared/const/localStorage';
 export const $api = axios.create({
   baseURL: __API__,
   headers: {
-    authorization: localStorage.getItem(USER_LOCALSTORAGE_KEY),
+    authorization: localStorage.getItem(USER_LOCALSTORAGE_KEY) || '',
   },
 });

src/shared/config/storybook/StoreDecorator/StoreDecorator.tsx

@@ -1,15 +1,15 @@
-import { DeepPartial, ReducersMapObject } from '@reduxjs/toolkit';
 import { StoryFn } from '@storybook/react';
 import { StateSchema, StoreProvider } from 'app/providers/StoreProvider';
 import { loginReducer } from 'features/AuthByUsername/model/slice/loginSlice';
+import { ReducersList } from 'shared/lib/components/DynamicModuleLoader/DynamicModuleLoader';
 
-const defaultAsyncReducers: DeepPartial<ReducersMapObject<StateSchema>> = {
+const defaultAsyncReducers: ReducersList = {
   loginForm: loginReducer,
 };
 
 export const StoreDecorator = (
   state: DeepPartial<StateSchema>,
-  asyncReducers?: DeepPartial<ReducersMapObject<StateSchema>>,
+  asyncReducers?: ReducersList,
 ) => (StoreComponent: StoryFn) => (
   <StoreProvider initialState={state} asyncReducers={{ ...defaultAsyncReducers, ...asyncReducers }}>
     <StoreComponent />

src/shared/lib/classNames/classNames.ts

@@ -1,4 +1,4 @@
-type Mods = Record<string, boolean | string>;
+export type Mods = Record<string, boolean | string | undefined>;
 
 export const classNames = (
   cls: string,

src/shared/lib/components/DynamicModuleLoader/DynamicModuleLoader.tsx

@@ -8,8 +8,6 @@ export type ReducersList = {
   [name in StateSchemaKey]?: Reducer;
 }
 
-type ReducersListEntry = [StateSchemaKey, Reducer]
-
 interface DynamicModuleLoaderProps {
   reducers: ReducersList;
   removeAfterUnmount?: boolean;
@@ -26,15 +24,15 @@ export const DynamicModuleLoader: FC<DynamicModuleLoaderProps> = (props): ReactE
   const dispatch = useDispatch();
 
   useEffect(() => {
-    Object.entries(reducers).forEach(([name, reducer]: ReducersListEntry) => {
-      store.reducerManager.add(name, reducer);
+    Object.entries(reducers).forEach(([name, reducer]) => {
+      store.reducerManager.add(name as StateSchemaKey, reducer);
       dispatch({ type: `@INIT ${name} reducer` });
     });
 
     return () => {
       if (removeAfterUnmount) {
-        Object.entries(reducers).forEach(([name, reducer]: ReducersListEntry) => {
-          store.reducerManager.remove(name);
+        Object.entries(reducers).forEach(([name, reducer]) => {
+          store.reducerManager.remove(name as StateSchemaKey);
           dispatch({ type: `@DESTROY ${name} reducer` });
         });
       }

src/shared/lib/tests/TestAsyncThunk/TestAsyncThunk.ts

@@ -1,26 +1,44 @@
 import { AsyncThunkAction } from '@reduxjs/toolkit';
 import { StateSchema } from 'app/providers/StoreProvider';
+import axios, { AxiosStatic } from 'axios';
 
 type ActionCreatorType<Return, Arg, RejectedValue> = (
   arg: Arg
 ) => AsyncThunkAction<Return, Arg, { rejectValue: string }>;
 
+jest.mock('axios');
+
+const mockedAxios = jest.mocked(axios, true);
+
 export class TestAsyncThunk<Return, Arg, RejectedValue> {
   dispatch: jest.MockedFn<any>;
 
   getState: () => StateSchema;
 
   actionCreator: ActionCreatorType<Return, Arg, RejectedValue>;
 
+  api: jest.MockedFunctionDeep<AxiosStatic>;
+
+  navigate: jest.MockedFn<any>;
+
   constructor(actionCreator: ActionCreatorType<Return, Arg, RejectedValue>) {
     this.actionCreator = actionCreator;
     this.dispatch = jest.fn();
     this.getState = jest.fn();
+    this.api = mockedAxios;
+    this.navigate = jest.fn();
   }
 
   async callThunk(arg: Arg) {
     const action = this.actionCreator(arg);
-    const result = await action(this.dispatch, this.getState, undefined);
+    const result = await action(
+      this.dispatch,
+      this.getState,
+      {
+        api: this.api,
+        navigate: this.navigate,
+      },
+    );
 
     return result;
   }

src/shared/lib/tests/renderComponent/renderComponent.tsx

@@ -1,9 +1,8 @@
 import { render } from '@testing-library/react';
 import { ReactNode } from 'react';
 import { I18nextProvider } from 'react-i18next';
-import { BrowserRouter, MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import i18nForTest from 'shared/config/i18n/i18nForTest';
-import { DeepPartial } from '@reduxjs/toolkit';
 import { StateSchema, StoreProvider } from 'app/providers/StoreProvider';
 
 interface renderComponentOptions {

src/shared/ui/Button/Button.tsx

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, memo, ReactNode } from 'react';
-import { classNames } from 'shared/lib/classNames/classNames';
+import { classNames, Mods } from 'shared/lib/classNames/classNames';
 
 import cls from './Button.module.scss';
 
@@ -30,14 +30,14 @@ export const Button = memo((props: ButtonProps) => {
   const {
     className,
     children,
-    theme,
+    theme = ButtonTheme.OUTLINE,
     square,
     size = ButtonSize.M,
     disabled,
     ...otherProps
   } = props;
 
-  const mods: Record<string, boolean> = {
+  const mods: Mods = {
     [cls[theme]]: true,
     [cls.square]: square,
     [cls[size]]: true,

src/shared/ui/Input/Input.tsx

@@ -41,7 +41,7 @@ export const Input = memo((props: InputProps) => {
   useEffect(() => {
     if (autofocus) {
       setIsFocused(true);
-      ref.current.focus();
+      ref.current?.focus();
     }
   }, [autofocus]);
 
@@ -72,7 +72,7 @@ export const Input = memo((props: InputProps) => {
           onFocus={onFocus}
           onBlur={onBlur}
           onSelect={onSelect}
-          ref={ref}
+          ref={ref as React.RefObject<HTMLInputElement>}
           {...otherProps}
         />
         {isFocused && (

src/shared/ui/Modal/ui/Modal.tsx

@@ -6,8 +6,9 @@ import {
   useState,
   MouseEvent,
   useCallback,
+  MutableRefObject,
 } from 'react';
-import { classNames } from 'shared/lib/classNames/classNames';
+import { classNames, Mods } from 'shared/lib/classNames/classNames';
 import { Portal } from 'shared/ui/Portal/Portal';
 import cls from './Modal.module.scss';
 
@@ -32,7 +33,7 @@ export const Modal = (props: ModalProps) => {
   const [isMounted, setIsMounted] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
   const [isOpening, setIsOpening] = useState(false);
-  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+  const timerRef = useRef() as MutableRefObject<ReturnType<typeof setTimeout>>;
   const { theme } = useTheme();
 
   const closeHandler = useCallback(() => {
@@ -75,7 +76,7 @@ export const Modal = (props: ModalProps) => {
 
   const onContentClick = (e: MouseEvent) => e.stopPropagation();
 
-  const mods: Record<string, boolean> = {
+  const mods: Mods = {
     [cls.opened]: isOpen,
     [cls.opened]: isOpening,
     [cls.isClosing]: isClosing,