Refactoring

Author: k.golikov

src/hooks/useStateProducer.ts

@@ -1,25 +1,9 @@
 import { Dispatch, SetStateAction, useCallback } from 'react';
-import produce, { Draft } from 'immer';
-import { Nothing } from 'immer/src/internal';
-
-type ValidRecipeReturnType<State> = State | void | undefined | (State extends undefined ? Nothing : never);
-
-type RecipeReturnType<State> = ValidRecipeReturnType<State> | Promise<ValidRecipeReturnType<State>>;
-
-type Recipe<S> = (draft: Draft<S>) => RecipeReturnType<Draft<S>>;
-
-export const produceState = <S extends object>(
-    setState: Dispatch<SetStateAction<S>>,
-    recipe: Recipe<S>
-): void | Promise<void> => {
-    setState((state) => {
-        return produce(state, recipe as any);
-    });
-};
+import produceState, { StateProducerRecipe } from '../utils/produceState';
 
 const useStateProducer = <S extends object>(setState: Dispatch<SetStateAction<S>>) => {
     return useCallback(
-        (recipe: Recipe<S>) => {
+        (recipe: StateProducerRecipe<S>) => {
             produceState(setState, recipe);
         },
         [setState]

src/pages/dataUrlViewPage/DataUrlViewPage.tsx

@@ -4,6 +4,7 @@ import styles from './DataUrlViewPage.module.scss';
 import { Navigate } from 'react-router-dom';
 import { routes } from '../../constants/router/routes';
 import useRouteContextEffect from '../../hooks/useRouteContextEffect';
+import produceState from '../../utils/produceState';
 
 export interface DataUrlViewPageQueryParams {
     data?: string;
@@ -19,12 +20,9 @@ const DataUrlViewPage: FunctionComponent = () => {
 
     useRouteContextEffect(
         (setRouteContentState) => {
-            const newTitle = title ?? routes.dataUrlView.title;
-
-            setRouteContentState((context) => ({
-                ...context,
-                title: newTitle
-            }));
+            produceState(setRouteContentState, (context) => {
+                context.title = title ?? routes.dataUrlView.title;
+            });
         },
         [title]
     );

src/utils/produceState.ts

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction } from 'react';
+import produce, { Draft } from 'immer';
+import { Nothing } from 'immer/src/internal';
+
+type ValidRecipeReturnType<State> = State | void | undefined | (State extends undefined ? Nothing : never);
+
+type RecipeReturnType<State> = ValidRecipeReturnType<State> | Promise<ValidRecipeReturnType<State>>;
+
+export type StateProducerRecipe<S> = (draft: Draft<S>) => RecipeReturnType<Draft<S>>;
+
+const produceState = <S extends object>(
+    setState: Dispatch<SetStateAction<S>>,
+    recipe: StateProducerRecipe<S>
+): void | Promise<void> => {
+    setState((state) => {
+        return produce(state, recipe as any);
+    });
+};
+
+export default produceState;