feat: improve application structure (wireapp#18233)

jest.config.ts

@@ -26,6 +26,7 @@ const config: Config = {
   // Must be in sync with tsconfig.json >> paths
   moduleNameMapper: {
     'Components/(.*)': '<rootDir>/src/script/components/$1',
+    'Hooks/(.*)': '<rootDir>/src/script/hooks/$1',
     'I18n/(.*)': '<rootDir>/src/i18n/$1',
     'Resource/(.*)': '<rootDir>/resource/$1',
     'Util/(.*)': '<rootDir>/src/script/util/$1',

src/script/components/Avatar/AvatarImage.tsx

@@ -23,7 +23,7 @@ import {CSSObject} from '@emotion/serialize';
 import {Transition} from 'react-transition-group';
 import {container} from 'tsyringe';
 
-import {InViewport} from 'Components/utils/InViewport';
+import {InViewport} from 'Components/InViewport';
 import {CSS_FILL_PARENT} from 'Util/CSSMixin';
 
 import {AssetRemoteData} from '../../assets/AssetRemoteData';

src/script/components/Checkbox/index.ts → src/script/components/Badge/components/UserBlockedBadge/index.ts

@@ -1,6 +1,6 @@
 /*
  * Wire
- * Copyright (C) 2022 Wire Swiss GmbH
+ * Copyright (C) 2024 Wire Swiss GmbH
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -17,4 +17,4 @@
  *
  */
 
-export * from './Checkbox';
+export * from './UserBlockedBadge';

src/script/components/VerificationBadge/VerificationBadges.tsx → src/script/components/Badge/components/VerificationBadges/VerificationBadges.tsx

@@ -171,6 +171,7 @@ type ConversationVerificationBadgeProps = {
   conversation: Conversation;
   displayTitle?: boolean;
 };
+
 export const ConversationVerificationBadges = ({conversation, displayTitle}: ConversationVerificationBadgeProps) => {
   const {MLS, proteus} = useConversationVerificationState(conversation);
 

src/script/components/Badge/index.tsx

@@ -0,0 +1,22 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export * from './components/UserStatusBadges';
+export * from './components/UserBlockedBadge';
+export * from './components/VerificationBadges';

src/script/components/input/ClassifiedBar.tsx → src/script/components/ClassifiedBar/ClassifiedBar.tsx

@@ -17,8 +17,6 @@
  *
  */
 
-import React from 'react';
-
 import {CSSObject} from '@emotion/react';
 import cx from 'classnames';
 
@@ -50,12 +48,7 @@ interface UserClassifiedBarProps extends ClassifiedBarProps {
   users: User[];
 }
 
-export const UserClassifiedBar: React.FC<UserClassifiedBarProps> = ({
-  users,
-  conversationDomain,
-  classifiedDomains,
-  style,
-}) => {
+export const UserClassifiedBar = ({users, conversationDomain, classifiedDomains, style}: UserClassifiedBarProps) => {
   if (typeof classifiedDomains === 'undefined') {
     return null;
   }
@@ -79,10 +72,7 @@ interface ConversationClassifiedBarProps extends ClassifiedBarProps {
   conversation: Conversation;
 }
 
-export const ConversationClassifiedBar: React.FC<ConversationClassifiedBarProps> = ({
-  conversation,
-  ...classifiedBarProps
-}) => {
+export const ConversationClassifiedBar = ({conversation, ...classifiedBarProps}: ConversationClassifiedBarProps) => {
   const {allUserEntities: users} = useKoSubscribableChildren(conversation, ['allUserEntities']);
   return <UserClassifiedBar users={users} conversationDomain={conversation.domain} {...classifiedBarProps} />;
 };

src/script/components/ConnectRequests/ConnectionRequests.tsx

@@ -24,7 +24,7 @@ import {container} from 'tsyringe';
 import {Button, ButtonVariant, IconButton, IconButtonVariant, useMatchMedia} from '@wireapp/react-ui-kit';
 
 import {Avatar, AVATAR_SIZE} from 'Components/Avatar';
-import {UserClassifiedBar} from 'Components/input/ClassifiedBar';
+import {UserClassifiedBar} from 'Components/ClassifiedBar/ClassifiedBar';
 import {UnverifiedUserWarning} from 'Components/Modals/UserModal';
 import {UserName} from 'Components/UserName';
 import {SidebarTabs, useSidebarStore} from 'src/script/page/LeftSidebar/panels/Conversations/useSidebarStore';

src/script/components/list/ConversationListCell.tsx → src/script/components/ConversationListCell/ConversationListCell.tsx

@@ -30,14 +30,14 @@ import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
 import cx from 'classnames';
 
 import {Avatar, AVATAR_SIZE, GroupAvatar} from 'Components/Avatar';
-import {UserBlockedBadge} from 'Components/UserBlockedBadge/UserBlockedBadge';
+import {UserBlockedBadge} from 'Components/Badge';
 import {UserInfo} from 'Components/UserInfo';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {isKey, isOneOfKeys, KEY} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 import {noop, setContextMenuPosition} from 'Util/util';
 
-import {ConversationListCellStatusIcon} from './ConversationListCellStatusIcon';
+import {StatusIcon} from './components/StatusIcon';
 
 import {generateCellState} from '../../conversation/ConversationCellState';
 import type {Conversation} from '../../entity/Conversation';
@@ -57,7 +57,7 @@ export interface ConversationListCellProps {
   resetConversationFocus: () => void;
 }
 
-const ConversationListCell = ({
+export const ConversationListCell = ({
   showJoinButton,
   conversation,
   onJoinCall,
@@ -232,7 +232,7 @@ const ConversationListCell = ({
           onKeyDown={handleContextKeyDown}
         />
 
-        {!showJoinButton && <ConversationListCellStatusIcon conversation={conversation} />}
+        {!showJoinButton && <StatusIcon conversation={conversation} />}
 
         {showJoinButton && (
           <button
@@ -248,5 +248,3 @@ const ConversationListCell = ({
     </li>
   );
 };
-
-export {ConversationListCell};

src/script/components/list/ConversationListCellStatusIcon.tsx → src/script/components/ConversationListCell/components/StatusIcon/StatusIcon.tsx

@@ -23,15 +23,15 @@ import * as Icon from 'Components/Icon';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {t} from 'Util/LocalizerUtil';
 
-import {generateCellState} from '../../conversation/ConversationCellState';
-import {ConversationStatusIcon} from '../../conversation/ConversationStatusIcon';
-import type {Conversation} from '../../entity/Conversation';
+import {generateCellState} from '../../../../conversation/ConversationCellState';
+import {ConversationStatusIcon} from '../../../../conversation/ConversationStatusIcon';
+import type {Conversation} from '../../../../entity/Conversation';
 
-export interface ConversationListCellStatusIconProps {
+export interface Props {
   conversation: Conversation;
 }
 
-const ConversationListCellStatusIcon = ({conversation}: ConversationListCellStatusIconProps) => {
+export const StatusIcon = ({conversation}: Props) => {
   const {unreadState, mutedState, isRequest} = useKoSubscribableChildren(conversation, [
     'unreadState',
     'mutedState',
@@ -115,5 +115,3 @@ const ConversationListCellStatusIcon = ({conversation}: ConversationListCellStat
     </>
   );
 };
-
-export {ConversationListCellStatusIcon};

src/script/components/ConversationListCell/components/StatusIcon/index.tsx

@@ -0,0 +1,20 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export * from './StatusIcon';

src/script/components/ConversationListCell/index.tsx

@@ -0,0 +1,20 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export * from './ConversationListCell';

src/script/components/CopyToClipboardButton.test.tsx → src/script/components/CopyToClipboardButton/CopyToClipboardButton.test.tsx

@@ -21,7 +21,7 @@ import {render, waitFor, act} from '@testing-library/react';
 
 import {CopyToClipboardButton} from './CopyToClipboardButton';
 
-import {withTheme} from '../auth/util/test/TestUtil';
+import {withTheme} from '../../auth/util/test/TestUtil';
 
 jest.mock('Util/ClipboardUtil', () => ({
   copyText: jest.fn(),