fluxerapp/fluxer
1
0
Fork 0
mirror of https://github.com/fluxerapp/fluxer.git synced 2026-09-03 05:10:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hampus
2026-08-24 12:49:29 +02:00
committed by GitHub
parent ef6fb4903f
commit 32d7ae3eef
1 changed files with 13 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fluxer_app/src/features/member/hooks/useMemberListVisible.ts
+13 -17
View File
@@ -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);
};