From 7d7f08ba6a95bb40ac2b93de2e924f5763406618 Mon Sep 17 00:00:00 2001
From: Harshith Mohan <26010946+harshithmohan@users.noreply.github.com>
Date: Mon, 4 Nov 2024 01:51:10 +0530
Subject: [PATCH] Fix react fast refresh issue in router

---
 src/components/Input/Input.tsx     | 6 +++---
 src/core/router/index.tsx          | 5 ++---
 src/hooks/useBodyVisibleContext.ts | 7 +++++++
 3 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 src/hooks/useBodyVisibleContext.ts

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 7e0eb37ae..45a012eba 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -1,10 +1,10 @@
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import type { PlacesType } from 'react-tooltip';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
 
-import { BodyVisibleContext } from '@/core/router';
 import useAutoFocusRef from '@/hooks/useAutoFocusRef';
+import useBodyVisibleContext from '@/hooks/useBodyVisibleContext';
 
 type EndIcon = {
   icon: string;
@@ -64,7 +64,7 @@ const Input = React.memo((props: Props) => {
     value,
   } = props;
 
-  const bodyVisible = useContext(BodyVisibleContext);
+  const bodyVisible = useBodyVisibleContext();
   const inputRef = useAutoFocusRef(autoFocus, bodyVisible);
   const [isShow, setIsShow] = React.useState(false);
 
diff --git a/src/core/router/index.tsx b/src/core/router/index.tsx
index eca1a33b9..0cc0a0c53 100644
--- a/src/core/router/index.tsx
+++ b/src/core/router/index.tsx
@@ -1,5 +1,5 @@
 /* global globalThis */
-import React, { createContext, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Navigate, Route } from 'react-router';
 import { RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom';
@@ -7,6 +7,7 @@ import * as Sentry from '@sentry/react';
 
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
+import { BodyVisibleContext } from '@/hooks/useBodyVisibleContext';
 import SentryErrorBoundaryWrapper from '@/pages/SentryErrorBoundaryWrapper';
 import Collection from '@/pages/collection/Collection';
 import Series from '@/pages/collection/Series';
@@ -130,8 +131,6 @@ const router = sentryCreateBrowserRouter(
   ),
 );
 
-export const BodyVisibleContext = createContext(false);
-
 const Router = () => {
   const apikey = useSelector((state: RootState) => state.apiSession.apikey);
   const webuiPreviewTheme = useSelector((state: RootState) => state.misc.webuiPreviewTheme);
diff --git a/src/hooks/useBodyVisibleContext.ts b/src/hooks/useBodyVisibleContext.ts
new file mode 100644
index 000000000..0a972c237
--- /dev/null
+++ b/src/hooks/useBodyVisibleContext.ts
@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+export const BodyVisibleContext = createContext(false);
+
+const useBodyVisibleContext = () => useContext(BodyVisibleContext);
+
+export default useBodyVisibleContext;