refactor: derive isMasterDetail per-component and remove Dimensions provider (#7422)

Author: diegolmello

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 @@ import {
 	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.
@@ -618,7 +619,6 @@ const mapStateToProps = (state: IApplicationState) => ({
 	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 @@ const mapStateToProps = (state: IApplicationState) => ({
 	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;