fix(app): track member list width with a media query (#1939)

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 = () => {
+		const mediaQuery = window.matchMedia(MEMBER_LIST_FIT_QUERY);
-			setCanFit(window.innerWidth >= MIN_WIDTH_FOR_MEMBERS);
+		const handleChange = (event: MediaQueryListEvent | MediaQueryList) => {
+			setCanFit(event.matches);
 		};
-		window.addEventListener('resize', checkWidth);
+		handleChange(mediaQuery);
-		return () => window.removeEventListener('resize', checkWidth);
+		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);
+};