Clean up

.editorconfig

@@ -4,7 +4,7 @@ end_of_line = lf
 indent_size = 4
 indent_style = space
 insert_final_newline = true
-max_line_length = 120
+max_line_length = 90
 tab_width = 4
 trim_trailing_whitespace = true
 ij_continuation_indent_size = 8

.eslintrc.cjs

@@ -103,13 +103,7 @@ module.exports = {
         },
         /* Allow devDependencies imports for tests and config files */
         {
-            files: [
-                '**/*.spec.*',
-                '**/testUtils/*.*',
-                '**/*.js',
-                '**/*.cjs',
-                '**/setupTests.ts',
-            ],
+            files: ['**/*.spec.*', '**/testUtils/*.*', '**/*.js', '**/*.cjs', '**/setupTests.ts'],
             rules: {
                 'import/no-extraneous-dependencies': [
                     'error',
@@ -139,14 +133,7 @@ module.exports = {
         },
         /* Allow devDependencies imports for tests and config files */
         {
-            files: [
-                '**/*.spec.*',
-                '**/testUtils/*.*',
-                '**/*.js',
-                '**/*.cjs',
-                'jest.config.cjs',
-                '**/setupTests.ts',
-            ],
+            files: ['**/*.spec.*', '**/testUtils/*.*', '**/*.js', '**/*.cjs', 'jest.config.cjs', '**/setupTests.ts'],
             rules: {
                 'import/no-extraneous-dependencies': [
                     'error',
@@ -159,4 +146,3 @@ module.exports = {
         },
     ],
 };
-

src/components/Random/Random.spec.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import {Provider} from 'react-redux';
 import type {Store, Action} from 'redux';
-import {render, fireEvent, waitFor, screen, waitForElementToBeRemoved} from '@testing-library/react';
+import {
+    render,
+    fireEvent,
+    waitFor,
+    screen,
+    waitForElementToBeRemoved,
+} from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 
 import {GET_RANDOM_NUMBER} from '@/src/features/random/actionTypes';

src/components/Random/Random.tsx

@@ -2,7 +2,11 @@
 
 import React from 'react';
 
-import {useGetRandomNumberQuery, useRandomNumber, useLoadingState} from '@/src/features/random';
+import {
+    useGetRandomNumberQuery,
+    useRandomNumber,
+    useLoadingState,
+} from '@/src/features/random';
 
 import classes from './Random.module.css';
 
@@ -22,7 +26,11 @@ const Random = () => {
     return (
         <div className={classes.random}>
             <h2 className={classes.header}>Async Random</h2>
-            <button disabled={isLoading} className={classes.button} type="button" onClick={getNumber}>
+            <button
+                disabled={isLoading}
+                className={classes.button}
+                type="button"
+                onClick={getNumber}>
                 Get random number
             </button>
             {isPristine && <div>Click the button to get random number</div>}

src/features/counter/index.ts

@@ -1,3 +1,6 @@
-export {default as CounterReducer, initialState as CounterInitialState} from './CounterReducer';
+export {
+    default as CounterReducer,
+    initialState as CounterInitialState,
+} from './CounterReducer';
 export {default as useCountValue} from './selectors';
 export {default as useIncrementCounter} from './useIncrementCounter';

src/features/random/RandomReducer.spec.tsx

@@ -22,15 +22,16 @@ describe('features > random > RandomReducer', () => {
      * @see https://jestjs.io/docs/en/api#testeachtablename-fn-timeout
      */
     it.each([
-        [`${Actions.GET_RANDOM_NUMBER}_FULFILLED`],
-        [`${Actions.GET_RANDOM_NUMBER}_PENDING`],
-        [`${Actions.GET_RANDOM_NUMBER}_REJECTED`],
+        [Actions.GET_RANDOM_NUMBER_FULFILLED],
+        [Actions.GET_RANDOM_NUMBER_PENDING],
+        [Actions.GET_RANDOM_NUMBER_REJECTED],
     ])(`updates state according to dispatched action`, actionType => {
         const initialState = {
             number: 0,
         };
 
-        const payload = actionType === `${Actions.GET_RANDOM_NUMBER}_FULFILLED` ? 1 : undefined;
+        const payload =
+            actionType === `${Actions.GET_RANDOM_NUMBER}_FULFILLED` ? 1 : undefined;
 
         const action = {
             type: actionType as keyof typeof Actions,

src/features/random/RandomReducer.ts

@@ -21,7 +21,7 @@ export type Action = {
 
 const reducer = (state = initialState, action: Action): State => {
     switch (action.type) {
-        case `${Actions.GET_RANDOM_NUMBER}_PENDING`:
+        case Actions.GET_RANDOM_NUMBER_PENDING:
             return {
                 ...state,
                 isFulfilled: false,
@@ -30,15 +30,15 @@ const reducer = (state = initialState, action: Action): State => {
                 number: undefined,
             };
 
-        case `${Actions.GET_RANDOM_NUMBER}_FULFILLED`:
+        case Actions.GET_RANDOM_NUMBER_FULFILLED:
             return {
                 isFulfilled: true,
                 isLoading: false,
                 hasError: false,
                 number: action?.payload,
             };
 
-        case `${Actions.GET_RANDOM_NUMBER}_REJECTED`:
+        case Actions.GET_RANDOM_NUMBER_REJECTED:
             return {
                 isFulfilled: false,
                 isLoading: false,

src/features/random/selectors.ts

@@ -8,8 +8,11 @@ import type {State} from './RandomReducer';
  * @see https://reactjs.org/docs/hooks-custom.html
  */
 export const useLoadingState = () => {
-    const {isLoading, hasError, isFulfilled} = useSelector<{random: State}, State>(state => state.random);
+    const {isLoading, hasError, isFulfilled} = useSelector<{random: State}, State>(
+        state => state.random
+    );
     return {isLoading, hasError, isFulfilled};
 };
 
-export const useRandomNumber = () => useSelector<{random: State}, number | undefined>(state => state.random.number);
+export const useRandomNumber = () =>
+    useSelector<{random: State}, number | undefined>(state => state.random.number);

src/features/random/useGetRandomNumberQuery.spec.tsx

@@ -5,7 +5,7 @@ import {waitFor, renderHook} from '@testing-library/react';
 
 import {promiseResolverMiddleware} from '@/src/state/promiseResolverMiddleware';
 
-import {GET_RANDOM_NUMBER} from './actionTypes';
+import {Actions} from './actionTypes';
 import useGetRandomNumberQuery from './useGetRandomNumberQuery';
 
 const fetchBackup = global.fetch;
@@ -80,12 +80,14 @@ describe('features > counter > useGetRandomNumberQuery', () => {
 
             /** First dispatched action should have _PENDING suffix */
             expect(store.getActions()[0]).toEqual({
-                type: `${GET_RANDOM_NUMBER}_PENDING`,
+                type: Actions.GET_RANDOM_NUMBER_PENDING,
             });
 
             await waitFor(() => {
                 /** Second dispatched action should have _FULFILLED suffix */
-                expect(store.getActions()[1].type).toEqual(`${GET_RANDOM_NUMBER}_FULFILLED`);
+                expect(store.getActions()[1].type).toEqual(
+                    Actions.GET_RANDOM_NUMBER_FULFILLED
+                );
                 /** Second dispatched action should deliver response from API */
                 expect(store.getActions()[1].payload).toEqual(response);
             });
@@ -113,12 +115,14 @@ describe('features > counter > useGetRandomNumberQuery', () => {
 
             /** First dispatched action should have _PENDING suffix */
             expect(store.getActions()[0]).toEqual({
-                type: `${GET_RANDOM_NUMBER}_PENDING`,
+                type: Actions.GET_RANDOM_NUMBER_PENDING,
             });
 
             await waitFor(() => {
                 /** Second dispatched action should have _REJECTED suffix */
-                expect(store.getActions()[1].type).toEqual(`${GET_RANDOM_NUMBER}_REJECTED`);
+                expect(store.getActions()[1].type).toEqual(
+                    Actions.GET_RANDOM_NUMBER_REJECTED
+                );
             });
         });
     });

src/layout/NavLink/NavLink.tsx

@@ -16,7 +16,11 @@ export const NavLink: FC<Props> = ({children, href, className}) => {
     return (
         <NextLink
             href={href}
-            className={classNames(classes.navLink, {[classes.active]: currentPath === href}, className)}>
+            className={classNames(
+                classes.navLink,
+                {[classes.active]: currentPath === href},
+                className
+            )}>
             {children}
         </NextLink>
     );

src/state/promiseResolverMiddleware.ts

@@ -1,25 +1,26 @@
 import type {Middleware, UnknownAction} from 'redux';
 
 // TODO: improve types
-// @ts-expect-error TS2322
-export const promiseResolverMiddleware: Middleware = store => next => (action: UnknownAction) => {
-    if (!(action.payload instanceof Promise)) {
-        return next(action);
-    }
-    action.payload.then(
-        response => {
-            return response.json().then((response: number) => {
+export const promiseResolverMiddleware: Middleware =
+    // @ts-expect-error TS2322
+    store => next => (action: UnknownAction) => {
+        if (!(action.payload instanceof Promise)) {
+            return next(action);
+        }
+        action.payload.then(
+            response => {
+                return response.json().then((response: number) => {
+                    store.dispatch({
+                        type: `${action.type}_FULFILLED`,
+                        payload: response,
+                    });
+                });
+            },
+            () => {
                 store.dispatch({
-                    type: `${action.type}_FULFILLED`,
-                    payload: response,
+                    type: `${action.type}_REJECTED`,
                 });
-            });
-        },
-        () => {
-            store.dispatch({
-                type: `${action.type}_REJECTED`,
-            });
-        }
-    );
-    return next({type: `${action.type}_PENDING`});
-};
+            }
+        );
+        return next({type: `${action.type}_PENDING`});
+    };

src/state/store.ts

@@ -22,14 +22,19 @@ export const makeStore = () => {
         // Adding the api middleware enables caching, invalidation, polling,
         // and other useful features of `rtk-query`.
         middleware: getDefaultMiddleware =>
-            getDefaultMiddleware({serializableCheck: {ignoredActionPaths: ['payload', 'payload.headers']}}).concat(
-                promiseResolverMiddleware
-            ),
+            getDefaultMiddleware({
+                serializableCheck: {ignoredActionPaths: ['payload', 'payload.headers']},
+            }).concat(promiseResolverMiddleware),
     });
 };
 
 // Infer the return type of `makeStore`
 export type AppStore = ReturnType<typeof makeStore>;
 // Infer the `AppDispatch` type from the store itself
 export type AppDispatch = AppStore['dispatch'];
-export type AppThunk<ThunkReturnType = void> = ThunkAction<ThunkReturnType, RootState, unknown, Action>;
+export type AppThunk<ThunkReturnType = void> = ThunkAction<
+    ThunkReturnType,
+    RootState,
+    unknown,
+    Action
+>;

templates/Feature/useGetTemplateNameQuery.spec.tsx

@@ -85,7 +85,9 @@ describe('features > counter > useGetTemplateNameQuery', () => {
 
             await waitFor(() => {
                 /** Second dispatched action should have _FULFILLED suffix */
-                expect(store.getActions()[1].type).toEqual(Actions.GET_TEMPLATE_NAME_FULFILLED);
+                expect(store.getActions()[1].type).toEqual(
+                    Actions.GET_TEMPLATE_NAME_FULFILLED
+                );
                 /** Second dispatched action should deliver response from API */
                 expect(store.getActions()[1].payload).toEqual(response);
             });
@@ -118,7 +120,9 @@ describe('features > counter > useGetTemplateNameQuery', () => {
 
             await waitFor(() => {
                 /** Second dispatched action should have _REJECTED suffix */
-                expect(store.getActions()[1].type).toEqual(Actions.GET_TEMPLATE_NAME_REJECTED);
+                expect(store.getActions()[1].type).toEqual(
+                    Actions.GET_TEMPLATE_NAME_REJECTED
+                );
             });
         });
     });