refactor: derive isMasterDetail per-component and remove Dimensions provider

app/AppContainer.tsx

@@ -1,10 +1,11 @@
 import { useContext, memo, useEffect } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { connect } from 'react-redux';
 
 import type { SetUsernameStackParamList, StackParamList } from './definitions/navigationTypes';
 import Navigation from './lib/navigation/appNavigation';
+import { useMasterDetail } from './lib/hooks/useMasterDetail';
+import { useAppSelector } from './lib/hooks/useAppSelector';
 import { defaultHeader, getActiveRouteName, navigationTheme } from './lib/methods/helpers/navigation';
 import { RootEnum } from './definitions';
 // Stacks
@@ -33,8 +34,10 @@ const SetUsernameStack = () => (
 
 // App
 const Stack = createStackNavigator<StackParamList>();
-const App = memo(({ root, isMasterDetail }: { root: string; isMasterDetail: boolean }) => {
+const App = memo(() => {
 	const { theme } = useContext(ThemeContext);
+	const isMasterDetail = useMasterDetail();
+	const root = useAppSelector(state => state.app.root);
 
 	useEffect(() => {
 		if (root) {
@@ -87,10 +90,4 @@ const App = memo(({ root, isMasterDetail }: { root: string; isMasterDetail: bool
 		</>
 	);
 });
-const mapStateToProps = (state: any) => ({
-	root: state.app.root,
-	isMasterDetail: state.app.isMasterDetail
-});
-
-const AppContainer = connect(mapStateToProps)(App);
-export default AppContainer;
+export default App;

app/actions/actionsTypes.ts

@@ -39,7 +39,6 @@ export const APP = createRequestTypes('APP', [
 	'READY',
 	'INIT',
 	'INIT_LOCAL_SETTINGS',
-	'SET_MASTER_DETAIL',
 	'SET_NOTIFICATION_PRESENCE_CAP',
 	'SET_NET_INFO_STATE'
 ]);

app/actions/app.ts

@@ -9,10 +9,6 @@ interface IAppStart extends Action {
 	text?: string;
 }
 
-interface ISetMasterDetail extends Action {
-	isMasterDetail: boolean;
-}
-
 interface ISetNotificationPresenceCap extends Action {
 	show: boolean;
 }
@@ -21,7 +17,7 @@ interface ISetNetInfoState extends Action {
 	netInfoState: NetInfoStateType;
 }
 
-export type TActionApp = IAppStart & ISetMasterDetail & ISetNotificationPresenceCap & ISetNetInfoState;
+export type TActionApp = IAppStart & ISetNotificationPresenceCap & ISetNetInfoState;
 
 interface Params {
 	root: RootEnum;
@@ -54,13 +50,6 @@ export function appInitLocalSettings(): Action {
 	};
 }
 
-export function setMasterDetail(isMasterDetail: boolean): ISetMasterDetail {
-	return {
-		type: APP.SET_MASTER_DETAIL,
-		isMasterDetail
-	};
-}
-
 export function setNotificationPresenceCap(show: boolean): ISetNotificationPresenceCap {
 	return {
 		type: APP.SET_NOTIFICATION_PRESENCE_CAP,

app/containers/Header/index.tsx

@@ -5,7 +5,7 @@ import { type NativeStackHeaderProps } from '@react-navigation/native-stack';
 import HeaderTitle from './components/HeaderTitle';
 import HeaderContainer from './components/HeaderContainer';
 import { isAndroid } from '../../lib/methods/helpers';
-import { useAppSelector } from '../../lib/hooks/useAppSelector';
+import { useMasterDetail } from '../../lib/hooks/useMasterDetail';
 import { styles } from './styles';
 import { HeaderBackButton } from './components/HeaderBackButton';
 
@@ -16,7 +16,7 @@ const Header = ({ options, navigation, route }: IHeader) => {
 
 	const { headerLeft, headerTitle, headerRight, title } = options;
 	const [rightButtonsWidth, setRightButtonsWidth] = useState<number | null>(null);
-	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+	const isMasterDetail = useMasterDetail();
 	const { fontScale } = useWindowDimensions();
 	// It helps create an empty view to properly align the header when there is no component on the right.
 	// 32.5 is the value I found that makes it work correctly on both platforms.

app/containers/InAppNotification/IncomingCallNotification/index.tsx

@@ -7,7 +7,7 @@ import { A11y } from 'react-native-a11y-order';
 import { acceptCall, cancelCall } from '../../../actions/videoConf';
 import { type ISubscription, type SubscriptionType } from '../../../definitions';
 import i18n from '../../../i18n';
-import { useAppSelector } from '../../../lib/hooks/useAppSelector';
+import { useMasterDetail } from '../../../lib/hooks/useMasterDetail';
 import { useEndpointData } from '../../../lib/hooks/useEndpointData';
 import { hideNotification } from '../../../lib/methods/helpers/notifications';
 import { CustomIcon } from '../../CustomIcon';
@@ -39,7 +39,7 @@ const IncomingCallHeader = memo(
 		const [cam, setCam] = useState(false);
 		const [audio, setAudio] = useState(true);
 		const dispatch = useDispatch();
-		const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+		const isMasterDetail = useMasterDetail();
 		const styles = useStyle();
 		const insets = useSafeAreaInsets();
 

app/containers/InAppNotification/NotifierComponent.tsx

@@ -1,6 +1,5 @@
 import { memo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { connect } from 'react-redux';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import Avatar from '../Avatar';
@@ -9,9 +8,10 @@ import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants/colors';
 import { useTheme } from '../../theme';
 import { goRoom } from '../../lib/methods/helpers/goRoom';
-import { type IApplicationState, type ISubscription, type SubscriptionType } from '../../definitions';
+import { type ISubscription, type SubscriptionType } from '../../definitions';
 import { hideNotification } from '../../lib/methods/helpers/notifications';
 import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import { withMasterDetail } from '../../lib/hooks/useMasterDetail';
 import Touch from '../Touch';
 
 export interface INotifierComponent {
@@ -130,8 +130,4 @@ const NotifierComponent = memo(({ notification, isMasterDetail }: INotifierCompo
 	);
 });
 
-const mapStateToProps = (state: IApplicationState) => ({
-	isMasterDetail: state.app.isMasterDetail
-});
-
-export default connect(mapStateToProps)(NotifierComponent);
+export default withMasterDetail(NotifierComponent);

app/containers/List/List.stories.tsx

@@ -4,7 +4,7 @@ import * as List from '.';
 import SafeAreaView from '../SafeAreaView';
 import { longText } from '../../../.rnstorybook/utils';
 import { ThemeContext, type TSupportedThemes } from '../../theme';
-import { DimensionsContext } from '../../dimensions';
+import { ResponsiveLayoutContext } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 import { themes } from '../../lib/constants/colors';
 
 export default {
@@ -242,10 +242,10 @@ export const WithDarkTheme = () => <ThemeStory theme='dark' />;
 export const WithBlackTheme = () => <ThemeStory theme='black' />;
 
 const FontStory = ({ fontScale }: { fontScale: number }) => (
-	// @ts-ignore
-	<DimensionsContext.Provider value={{ fontScale }}>
+	// @ts-ignore - story overrides fontScale only; ListItem reads only that
+	<ResponsiveLayoutContext.Provider value={{ fontScale }}>
 		<ListFull />
-	</DimensionsContext.Provider>
+	</ResponsiveLayoutContext.Provider>
 );
 
 /**

app/containers/MediaCallHeader/components/Content.tsx

@@ -1,6 +1,6 @@
 import { Pressable, StyleSheet, View } from 'react-native';
 
-import { useAppSelector } from '../../../lib/hooks/useAppSelector';
+import { useMasterDetail } from '../../../lib/hooks/useMasterDetail';
 import { navigateToCallRoom } from '../../../lib/services/voip/navigateToCallRoom';
 import { useCallStore } from '../../../lib/services/voip/useCallStore';
 import Title from './Title';
@@ -20,7 +20,7 @@ const styles = StyleSheet.create({
 });
 
 export const Content = () => {
-	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+	const isMasterDetail = useMasterDetail();
 	const roomId = useCallStore(state => state.roomId);
 	const contentDisabled = roomId == null;
 	const pressableStyle = contentDisabled ? [styles.button, { opacity: 0.5 }] : styles.button;

app/containers/MessageActions/index.tsx

@@ -36,6 +36,7 @@
 	reportMessage
 } from '../../lib/services/restApi';
 import { createDirectMessage } from '../../lib/methods/createDirectMessage';
+import { withMasterDetail } from '../../lib/hooks/useMasterDetail';
 
 // Extra delay on top of the action sheet animation so accessibility focus is restored
 // only after the sheet is fully dismissed.
@@ -399,7 +400,7 @@
 				});
 			};
 
 			const getOptions = (message: TAnyMessageModel) => {
 				const options: TActionSheetOptionsItem[] = [];
 				const videoConfBlock = message.t === 'videoconf';
 
@@ -618,7 +619,6 @@
 	Message_AllowPinning: state.settings.Message_AllowPinning as boolean,
 	Message_AllowStarring: state.settings.Message_AllowStarring as boolean,
 	Message_Read_Receipt_Store_Users: state.settings.Message_Read_Receipt_Store_Users as boolean,
-	isMasterDetail: state.app.isMasterDetail,
 	editMessagePermission: state.permissions['edit-message'],
 	deleteMessagePermission: state.permissions['delete-message'],
 	deleteOwnMessagePermission: state.permissions['delete-own-message'],
@@ -628,4 +628,4 @@
 	createDiscussionOtherUserPermission: state.permissions['start-discussion-other-user']
 });
 
-export default connect(mapStateToProps, null, null, { forwardRef: true })(MessageActions);
+export default connect(mapStateToProps, null, null, { forwardRef: true })(withMasterDetail(MessageActions));

app/containers/MessageComposer/components/Buttons/ActionsButton.tsx

@@ -6,7 +6,7 @@ import { type TActionSheetOptionsItem, useActionSheet } from '../../../ActionShe
 import { MessageInnerContext } from '../../context';
 import I18n from '../../../../i18n';
 import Navigation from '../../../../lib/navigation/appNavigation';
-import { useAppSelector } from '../../../../lib/hooks/useAppSelector';
+import { useMasterDetail } from '../../../../lib/hooks/useMasterDetail';
 import { usePermissions } from '../../../../lib/hooks/usePermissions';
 import { useCanUploadFile, useChooseMedia } from '../../hooks';
 import { useRoomContext } from '../../../../views/RoomView/context';
@@ -24,7 +24,7 @@ export const ActionsButton = () => {
 		permissionToUpload
 	});
 	const { showActionSheet, hideActionSheet } = useActionSheet();
-	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+	const isMasterDetail = useMasterDetail();
 
 	const createDiscussion = async () => {
 		if (!rid) return;

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -37,7 +37,7 @@ import { getMessageById } from '../../../lib/database/services/Message';
 import { generateTriggerId } from '../../../lib/methods/actions';
 import { executeCommandPreview } from '../../../lib/services/restApi';
 import log from '../../../lib/methods/helpers/log';
-import { useAppSelector } from '../../../lib/hooks/useAppSelector';
+import { useMasterDetail } from '../../../lib/hooks/useMasterDetail';
 import { useAltTextSupported } from '../../../lib/hooks/useAltTextSupported';
 import { usePrevious } from '../../../lib/hooks/usePrevious';
 import { type ChatsStackParamList } from '../../../stacks/types';
@@ -58,7 +58,7 @@ export const ComposerInput = memo(
 		const firstRender = useRef(true);
 		const selectionRef = useRef<IInputSelection>(defaultSelection);
 		const dispatch = useDispatch();
-		const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+		const isMasterDetail = useMasterDetail();
 		const altTextSupported = useAltTextSupported();
 		let placeholder = tmid ? I18n.t('Add_thread_reply') : '';
 		if (room && !tmid) {

app/containers/RoomHeader/RoomHeader.tsx

@@ -13,7 +13,7 @@ import { CustomIcon } from '../CustomIcon';
 import { type TUserStatus, type IOmnichannelSource, type ISubscription } from '../../definitions';
 import { formatStatusExpiry } from '../../lib/methods/helpers/formatStatusExpiry';
 import { useTheme } from '../../theme';
-import { useAppSelector } from '../../lib/hooks/useAppSelector';
+import { useMasterDetail } from '../../lib/hooks/useMasterDetail';
 import useStatusAccessibilityLabel from '../../lib/hooks/useStatusAccessibilityLabel';
 import { type IUsersTyping } from '../../reducers/usersTyping';
 
@@ -185,7 +185,7 @@ const Header = ({
 	const { fontScale } = useWindowDimensions();
 	const portrait = height > width;
 	let scale = 1;
-	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+	const isMasterDetail = useMasterDetail();
 	// Only move focus to the header for accessibility navigation (screen reader or physical
 	// keyboard); regular touch users shouldn't have focus yanked onto the header on room open.
 	const autoFocusHeader = useIsAccessibilityNavigationEnabled();

app/containers/TwoFactor/index.tsx

@@ -18,7 +18,7 @@ import sharedStyles from '../../views/Styles';
 import styles from './styles';
 import { type ICredentials } from '../../definitions';
 import { sendEmailCode } from '../../lib/services/restApi';
-import { useAppSelector } from '../../lib/hooks/useAppSelector';
+import { useMasterDetail } from '../../lib/hooks/useMasterDetail';
 import Toast from '../Toast';
 import { showToast } from '../../lib/methods/helpers/showToast';
 import log from '../../lib/methods/helpers/log';
@@ -67,9 +67,7 @@ const TwoFactor = memo(() => {
 		code: yup.string().required(I18n.t('Code_required'))
 	});
 	const { colors } = useTheme();
-	const { isMasterDetail } = useAppSelector(state => ({
-		isMasterDetail: state.app.isMasterDetail as boolean
-	}));
+	const isMasterDetail = useMasterDetail();
 	const [visible, setVisible] = useState(false);
 	const [data, setData] = useState<EventListenerMethod>({});
 	const {

app/containers/markdown/components/mentions/Hashtag.tsx

@@ -5,7 +5,7 @@ import i18n from '../../../../i18n';
 import { themes } from '../../../../lib/constants/colors';
 import { ROOM_MENTIONS_PREFERENCES_KEY } from '../../../../lib/constants/keys';
 import { getSubscriptionByRoomId } from '../../../../lib/database/services/Subscription';
-import { useAppSelector } from '../../../../lib/hooks/useAppSelector';
+import { useMasterDetail } from '../../../../lib/hooks/useMasterDetail';
 import { useUserPreferences } from '../../../../lib/methods/userPreferences';
 import { showErrorAlert } from '../../../../lib/methods/helpers/info';
 import { goRoom } from '../../../../lib/methods/helpers/goRoom';
@@ -26,7 +26,7 @@ const Hashtag = memo(({ hashtag, channels, navToRoomInfo }: IHashtag) => {
 	const { theme } = useTheme();
 	const { textStyle } = useContext(MarkdownContext);
 	const [roomsWithHashTagSymbol] = useUserPreferences<boolean>(ROOM_MENTIONS_PREFERENCES_KEY, false);
-	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+	const isMasterDetail = useMasterDetail();
 	const preffix = roomsWithHashTagSymbol ? '#' : '';
 	const handlePress = async () => {
 		const index = channels?.findIndex(channel => channel.name === hashtag);

app/ee/omnichannel/containers/OmnichannelHeader/index.tsx

@@ -13,6 +13,7 @@ import OmnichannelQueue from './OmnichannelQueue';
 import { isOmnichannelModuleAvailable } from '../../../../lib/methods/enterpriseModules';
 import Switch from '../../../../containers/Switch';
 import { useAppSelector } from '../../../../lib/hooks/useAppSelector';
+import { useMasterDetail } from '../../../../lib/hooks/useMasterDetail';
 import { getUserSelector } from '../../../../selectors/login';
 import { events, logEvent } from '../../../../lib/methods/helpers/log';
 import { getInquiryQueueSelector } from '../../selectors/inquiry';
@@ -22,7 +23,7 @@ const OmnichannelStatus = memo(() => {
 	const { roles, statusLivechat } = useAppSelector(state => getUserSelector(state), shallowEqual);
 	const inquiryEnabled = useAppSelector(state => state.inquiry.enabled);
 	const queueSize = useAppSelector(state => getInquiryQueueSelector(state).length);
-	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+	const isMasterDetail = useMasterDetail();
 	const navigation = useNavigation<any>();
 
 	if (!(isOmnichannelModuleAvailable() && roles?.includes('livechat-agent'))) {

app/ee/omnichannel/views/QueueListView.tsx

@@ -19,6 +19,7 @@ import { type ChatsStackParamList } from '../../../stacks/types';
 import { type MasterDetailInsideStackParamList } from '../../../stacks/MasterDetailStack/types';
 import { getRoomAvatar, getRoomTitle, getUidDirectMessage, isIOS, isTablet } from '../../../lib/methods/helpers';
 import { useResponsiveLayout } from '../../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import { useMasterDetail } from '../../../lib/hooks/useMasterDetail';
 
 type TNavigation = CompositeNavigationProp<
 	NativeStackNavigationProp<ChatsStackParamList, 'QueueListView'>,
@@ -53,7 +54,7 @@ const QueueListView = memo(() => {
 		shallowEqual
 	);
 
-	const isMasterDetail = useSelector((state: IApplicationState) => state.app.isMasterDetail);
+	const isMasterDetail = useMasterDetail();
 	const useRealName = useSelector((state: IApplicationState) => state.settings.UI_Use_Real_Name);
 	const queued = useSelector((state: IApplicationState) => getInquiryQueueSelector(state));