PR Changes

src/js/components/ResponsiveContext.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 
 import { DeviceBreakpoints } from '@/constants/deviceBreakpoints';
 
@@ -15,18 +15,21 @@ const DefaultResponsiveContext: ResponsiveContextType = {
 
 const ResponsiveContext = createContext<ResponsiveContextType>(DefaultResponsiveContext);
 
+const isMobileLogic = (width: number) => width <= DeviceBreakpoints.MOBILE;
+const isTabletLogic = (width: number) => width > DeviceBreakpoints.MOBILE && width <= DeviceBreakpoints.TABLET;
+
 interface ResponsiveProviderProps {
   children: ReactNode;
 }
 
 export const ResponsiveProvider = ({ children }: ResponsiveProviderProps) => {
-  const [isMobile, setIsMobile] = useState<boolean>(false);
-  const [isTablet, setIsTablet] = useState<boolean>(false);
+  const [isMobile, setIsMobile] = useState<boolean>(isMobileLogic(window.innerWidth));
+  const [isTablet, setIsTablet] = useState<boolean>(isTabletLogic(window.innerWidth));
 
   useEffect(() => {
     const handleResize = () => {
-      setIsMobile(window.innerWidth <= DeviceBreakpoints.MOBILE);
-      setIsTablet(window.innerWidth > DeviceBreakpoints.MOBILE && window.innerWidth <= DeviceBreakpoints.TABLET);
+      setIsMobile(isMobileLogic(window.innerWidth));
+      setIsTablet(isTabletLogic(window.innerWidth));
     };
     handleResize();
     window.addEventListener('resize', handleResize);
@@ -45,5 +48,6 @@ export const useResponsiveTabletContext = (): boolean => {
 };
 
 export const useSmallScreen = (): boolean => {
-  return useContext(ResponsiveContext).isMobile || useContext(ResponsiveContext).isTablet;
+  const { isMobile, isTablet } = useContext(ResponsiveContext);
+  return isMobile || isTablet;
 };

src/js/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 
 // Redux and routing imports
 import { Provider } from 'react-redux';
-import { Routes, Route, BrowserRouter, Navigate } from 'react-router-dom';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 
 // i18n and constants imports
 import { useTranslation } from 'react-i18next';
@@ -17,20 +17,20 @@ import Loader from '@/components/Loader';
 import BentoAppRouter from '@/components/BentoAppRouter';
 import LanguageHandler from '@/components/Util/LanguageHandler';
 import AuthOutlet from '@/components/Util/AuthOutlet';
+import { ResponsiveProvider } from '@/components/ResponsiveContext';
 
 // Hooks and utilities imports
 import { BentoAuthContextProvider } from 'bento-auth-js';
 
 // Store and configuration imports
 import { store } from './store';
-import { PUBLIC_URL_NO_TRAILING_SLASH, CLIENT_ID, OPENID_CONFIG_URL, AUTH_CALLBACK_URL } from './config';
+import { AUTH_CALLBACK_URL, CLIENT_ID, OPENID_CONFIG_URL, PUBLIC_URL_NO_TRAILING_SLASH } from './config';
 
 // Styles imports
 import 'leaflet/dist/leaflet.css';
 import 'bento-charts/src/styles.css';
 import './i18n';
 import '../styles.css';
-import { ResponsiveProvider } from '@/components/ResponsiveContext';
 
 const BaseRoutes = () => {
   return (