From 4cc2aee97c63e3cd59f58024a3103da9a7e00947 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Thu, 10 Sep 2026 18:00:17 -0300 Subject: [PATCH 1/5] refactor: render the empty room background when RoomView mounts without a route identity --- .../RoomView/List/components/EmptyRoom.tsx | 15 ++--------- .../{RoomGate.test.tsx => RoomView.test.tsx} | 23 ++++++++--------- .../RoomView/components/RoomBackground.tsx | 24 ++++++++++++++++++ .../RoomView/components/RoomRouteInvalid.tsx | 12 --------- app/views/RoomView/definitions.ts | 6 ++--- app/views/RoomView/index.tsx | 25 ++++++------------- app/views/RoomView/services/parseRoomRoute.ts | 16 ++++-------- 7 files changed, 52 insertions(+), 69 deletions(-) rename app/views/RoomView/__tests__/{RoomGate.test.tsx => RoomView.test.tsx} (87%) create mode 100644 app/views/RoomView/components/RoomBackground.tsx delete mode 100644 app/views/RoomView/components/RoomRouteInvalid.tsx diff --git a/app/views/RoomView/List/components/EmptyRoom.tsx b/app/views/RoomView/List/components/EmptyRoom.tsx index ae260f6b05..c6b2263b5b 100644 --- a/app/views/RoomView/List/components/EmptyRoom.tsx +++ b/app/views/RoomView/List/components/EmptyRoom.tsx @@ -1,19 +1,8 @@ -import { ImageBackground, StyleSheet } from 'react-native'; - -import { useTheme } from '../../../../theme'; - -const styles = StyleSheet.create({ - image: { - width: '100%', - height: '100%', - position: 'absolute' - } -}); +import RoomBackground from '../../components/RoomBackground'; const EmptyRoom = ({ length, rid }: { length: number; rid: string }) => { - const { theme } = useTheme(); if (length === 0 || !rid) { - return ; + return ; } return null; }; diff --git a/app/views/RoomView/__tests__/RoomGate.test.tsx b/app/views/RoomView/__tests__/RoomView.test.tsx similarity index 87% rename from app/views/RoomView/__tests__/RoomGate.test.tsx rename to app/views/RoomView/__tests__/RoomView.test.tsx index b5958f61e3..3313ec8578 100644 --- a/app/views/RoomView/__tests__/RoomGate.test.tsx +++ b/app/views/RoomView/__tests__/RoomView.test.tsx @@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react-native'; import { Provider } from 'react-redux'; import { createStore as createReduxStore } from 'redux'; -import RoomGate from '../index'; +import RoomView from '../index'; import { type IRoomViewProps } from '../definitions'; import { type TRoomOrPreview } from '../../../definitions/TRoom'; import { isInviteSubscription } from '../../../lib/methods/isInviteSubscription'; @@ -29,11 +29,6 @@ jest.mock('../components/EncryptedRoom', () => { const { View: RNView } = require('react-native'); return { EncryptedRoom: () => createElement(RNView, { testID: 'encrypted-screen' }) }; }); -jest.mock('../components/RoomRouteInvalid', () => { - const { createElement } = require('react'); - const { View: RNView } = require('react-native'); - return { RoomRouteInvalid: () => createElement(RNView, { testID: 'route-invalid-screen' }) }; -}); jest.mock('../hooks/useHeader', () => ({ useHeader: jest.fn() })); jest.mock('../hooks/useE2EEStatus', () => ({ useE2EEStatus: jest.fn(() => ({ showMissingE2EEKey: false, showE2EEDisabledRoom: false, hasE2EEWarning: false })) @@ -65,13 +60,13 @@ const renderGate = (params: Record | null = { rid: 'rid-1', t: return render( - + ); }; -describe('RoomGate', () => { +describe('RoomView', () => { beforeEach(() => { jest.clearAllMocks(); room.current = { rid: 'rid-1', t: 'c' }; @@ -85,18 +80,22 @@ describe('RoomGate', () => { expect(screen.getByTestId('room-screen')).toBeOnTheScreen(); }); - it('renders the invalid-route state instead of a room when the route has no identity', () => { + it('renders the empty-room background instead of a room when the route has no identity', () => { renderGate(null); - expect(screen.getByTestId('route-invalid-screen')).toBeOnTheScreen(); + expect(screen.getByTestId('room-view-empty')).toBeOnTheScreen(); expect(screen.queryByTestId('room-screen')).toBeNull(); + expect(screen.queryByTestId('messagebox')).toBeNull(); + expect(screen.queryByText('Back')).toBeNull(); }); - it('renders the invalid-route state when the route has a rid but no type', () => { + it('renders the empty-room background when the route has a rid but no type', () => { renderGate({ rid: 'rid-1' }); - expect(screen.getByTestId('route-invalid-screen')).toBeOnTheScreen(); + expect(screen.getByTestId('room-view-empty')).toBeOnTheScreen(); expect(screen.queryByTestId('room-screen')).toBeNull(); + expect(screen.queryByTestId('messagebox')).toBeNull(); + expect(screen.queryByText('Back')).toBeNull(); }); it('keeps the room screen unmounted while the room is an invite', () => { diff --git a/app/views/RoomView/components/RoomBackground.tsx b/app/views/RoomView/components/RoomBackground.tsx new file mode 100644 index 0000000000..9240e4b251 --- /dev/null +++ b/app/views/RoomView/components/RoomBackground.tsx @@ -0,0 +1,24 @@ +import { ImageBackground, StyleSheet } from 'react-native'; + +import { useTheme } from '../../../theme'; + +const styles = StyleSheet.create({ + image: { + width: '100%', + height: '100%', + position: 'absolute' + } +}); + +const RoomBackground = () => { + const { theme } = useTheme(); + return ( + + ); +}; + +export default RoomBackground; diff --git a/app/views/RoomView/components/RoomRouteInvalid.tsx b/app/views/RoomView/components/RoomRouteInvalid.tsx deleted file mode 100644 index cea11db4d9..0000000000 --- a/app/views/RoomView/components/RoomRouteInvalid.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { type ReactElement } from 'react'; - -import Button from '../../../containers/Button'; -import I18n from '../../../i18n'; -import { type IRoomViewProps } from '../definitions'; -import { RoomPlaceholder } from './RoomPlaceholder'; - -export const RoomRouteInvalid = ({ navigation }: Pick): ReactElement => ( - -