diff --git a/fluxer_app/src/features/member/hooks/useMemberListVisible.ts b/fluxer_app/src/features/member/hooks/useMemberListVisible.ts index ff04be8cc..1af9a6861 100644 --- a/fluxer_app/src/features/member/hooks/useMemberListVisible.ts +++ b/fluxer_app/src/features/member/hooks/useMemberListVisible.ts @@ -3,32 +3,28 @@ import MemberList from '@app/features/member/state/MemberList'; import {useEffect, useState} from 'react'; -const MIN_WIDTH_FOR_MEMBERS = 1024; +const MEMBER_LIST_FIT_QUERY = '(min-width: 1024px)'; interface UseMemberListVisibleOptions { channelId?: string | null; defaultHiddenForChannel?: boolean; } -export const useMemberListVisible = (options: UseMemberListVisibleOptions = {}): boolean => { - const [canFit, setCanFit] = useState(() => window.innerWidth >= MIN_WIDTH_FOR_MEMBERS); - useEffect(() => { - const checkWidth = () => { - setCanFit(window.innerWidth >= MIN_WIDTH_FOR_MEMBERS); - }; - window.addEventListener('resize', checkWidth); - return () => window.removeEventListener('resize', checkWidth); - }, []); - return canFit && MemberList.isMembersVisible(options); -}; export const useCanFitMemberList = (): boolean => { - const [canFit, setCanFit] = useState(() => window.innerWidth >= MIN_WIDTH_FOR_MEMBERS); + const [canFit, setCanFit] = useState(() => window.matchMedia(MEMBER_LIST_FIT_QUERY).matches); useEffect(() => { - const checkWidth = () => { - setCanFit(window.innerWidth >= MIN_WIDTH_FOR_MEMBERS); + const mediaQuery = window.matchMedia(MEMBER_LIST_FIT_QUERY); + const handleChange = (event: MediaQueryListEvent | MediaQueryList) => { + setCanFit(event.matches); }; - window.addEventListener('resize', checkWidth); - return () => window.removeEventListener('resize', checkWidth); + handleChange(mediaQuery); + mediaQuery.addEventListener('change', handleChange); + return () => mediaQuery.removeEventListener('change', handleChange); }, []); return canFit; }; + +export const useMemberListVisible = (options: UseMemberListVisibleOptions = {}): boolean => { + const canFit = useCanFitMemberList(); + return canFit && MemberList.isMembersVisible(options); +};