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 Louis
parent 4bcfa84d75
commit 4f5bde4964
No known key found for this signature in database
GPG Key ID: 44FA9F4D33C37DE2
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', () => {
beforeEach(() => {
// Reset the store state before each test
act(() => {
useSmallScreenStore.getState().setIsSmallScreen(false)
})
})
it('should return small screen state and update store', () => {
it('should return small screen state', () => {
const mockMediaQueryList = {
matches: true,
addEventListener: vi.fn(),
@ -285,7 +278,6 @@ describe('useSmallScreen', () => {
const { result } = renderHook(() => useSmallScreen())
expect(result.current).toBe(true)
expect(useSmallScreenStore.getState().isSmallScreen).toBe(true)
})
it('should update when media query changes', () => {
@ -309,7 +301,6 @@ describe('useSmallScreen', () => {
})
expect(result.current).toBe(true)
expect(useSmallScreenStore.getState().isSmallScreen).toBe(true)
})
it('should use correct media query for small screen detection', () => {
@ -325,20 +316,4 @@ describe('useSmallScreen', () => {
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
}
// Specific hook for small screen detection with state management
// Specific hook for small screen detection
export const useSmallScreen = (): boolean => {
const { isSmallScreen, setIsSmallScreen } = useSmallScreenStore()
const mediaQuery = useMediaQuery('(max-width: 768px)')
useEffect(() => {
setIsSmallScreen(mediaQuery)
}, [mediaQuery, setIsSmallScreen])
return isSmallScreen
return useMediaQuery('(max-width: 768px)')
}