Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: react state loop from hooks useMediaQuery (#6031)

Browse Source 
* fix: react state loop from hooks useMediaQuerry

* chore: update test cases hooks media query
This commit is contained in:
Faisal Amir 2025-08-02 21:48:40 +07:00 committed by GitHub
parent 6603460c39
commit 3acb61b5ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 3 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web-app/src/hooks/__tests__/useMediaQuery.test.ts
View File

@ -266,14 +266,7 @@ describe('useSmallScreenStore', () => {
}) })
describe('useSmallScreen', () => { describe('useSmallScreen', () => {
beforeEach(() => { it('should return small screen state', () => {
// Reset the store state before each test
act(() => {
useSmallScreenStore.getState().setIsSmallScreen(false)
})
})
it('should return small screen state and update store', () => {
const mockMediaQueryList = { const mockMediaQueryList = {
matches: true, matches: true,
addEventListener: vi.fn(), addEventListener: vi.fn(),
@ -285,7 +278,6 @@ describe('useSmallScreen', () => {
const { result } = renderHook(() => useSmallScreen()) const { result } = renderHook(() => useSmallScreen())
expect(result.current).toBe(true) expect(result.current).toBe(true)
expect(useSmallScreenStore.getState().isSmallScreen).toBe(true)
}) })
it('should update when media query changes', () => { it('should update when media query changes', () => {
@ -309,7 +301,6 @@ describe('useSmallScreen', () => {
}) })
expect(result.current).toBe(true) expect(result.current).toBe(true)
expect(useSmallScreenStore.getState().isSmallScreen).toBe(true)
}) })
it('should use correct media query for small screen detection', () => { it('should use correct media query for small screen detection', () => {
@ -325,20 +316,4 @@ describe('useSmallScreen', () => {
expect(mockMatchMedia).toHaveBeenCalledWith('(max-width: 768px)') expect(mockMatchMedia).toHaveBeenCalledWith('(max-width: 768px)')
}) })
it('should persist state across multiple hook instances', () => {
const mockMediaQueryList = {
matches: true,
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
}
mockMatchMedia.mockReturnValue(mockMediaQueryList)
const { result: result1 } = renderHook(() => useSmallScreen())
const { result: result2 } = renderHook(() => useSmallScreen())
expect(result1.current).toBe(true)
expect(result2.current).toBe(true)
})
}) })

11
web-app/src/hooks/useMediaQuery.ts
View File

@ -77,14 +77,7 @@ export function useMediaQuery(
return matches || false return matches || false
} }
// Specific hook for small screen detection with state management // Specific hook for small screen detection
export const useSmallScreen = (): boolean => { export const useSmallScreen = (): boolean => {
const { isSmallScreen, setIsSmallScreen } = useSmallScreenStore() return useMediaQuery('(max-width: 768px)')
const mediaQuery = useMediaQuery('(max-width: 768px)')
useEffect(() => {
setIsSmallScreen(mediaQuery)
}, [mediaQuery, setIsSmallScreen])
return isSmallScreen
} }