From e59be1982915dfe3854786e5f77cfd3ac4b8a4e3 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Thu, 11 Apr 2024 11:38:54 +0700
Subject: [PATCH] Refactor layout of WorkspaceListRow

---
 src/pages/workspace/WorkspacesListRow.tsx | 197 ++++++++++------------
 1 file changed, 93 insertions(+), 104 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
index 54717b032ebe..1a6ef8c20577 100644
--- a/src/pages/workspace/WorkspacesListRow.tsx
+++ b/src/pages/workspace/WorkspacesListRow.tsx
@@ -21,6 +21,7 @@ import type {AnchorPosition} from '@styles/index';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 
 type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     /** Name of the workspace */
@@ -108,6 +109,7 @@ function WorkspacesListRow({
     const {translate} = useLocalize();
     const [threeDotsMenuPosition, setThreeDotsMenuPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0});
     const threeDotsMenuContainerRef = useRef<View>(null);
+    const {isSmallScreenWidth} = useWindowDimensions();
 
     const ownerDetails = ownerAccountID && PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID)[0];
 
@@ -136,124 +138,111 @@ function WorkspacesListRow({
     const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false;
 
     return (
-        <View style={[isWide ? styles.flexRow : styles.flexColumn, isWide && styles.gap5, styles.highlightBG, styles.br3, styles.pv5, styles.pl5, rowStyles, style]}>
-            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap3, isNarrow && [styles.mb3, styles.mr5], styles.alignItemsCenter]}>
-                <Avatar
-                    imageStyles={[styles.alignSelfCenter]}
-                    size={CONST.AVATAR_SIZE.DEFAULT}
-                    source={workspaceIcon}
-                    fallbackIcon={fallbackWorkspaceIcon}
-                    name={title}
-                    type={CONST.ICON_TYPE_WORKSPACE}
-                />
-                <Text
-                    numberOfLines={1}
-                    style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
-                >
-                    {title}
-                </Text>
-                {isNarrow &&
-                    (!isJoinRequestPending ? (
+        <View style={[styles.flexRow, styles.highlightBG, rowStyles, style, isWide && styles.gap5, styles.br3, styles.pv5, styles.pl5]}>
+            <View style={[isWide ? styles.flexRow : styles.flexColumn, styles.flex1, isWide && styles.gap5]}>
+                <View style={[styles.flexRow, isWide && styles.flex1, styles.gap3, isNarrow && styles.mb3, styles.alignItemsCenter]}>
+                    <Avatar
+                        imageStyles={[styles.alignSelfCenter]}
+                        size={CONST.AVATAR_SIZE.DEFAULT}
+                        source={workspaceIcon}
+                        fallbackIcon={fallbackWorkspaceIcon}
+                        name={title}
+                        type={CONST.ICON_TYPE_WORKSPACE}
+                    />
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
+                    >
+                        {title}
+                    </Text>
+                </View>
+                <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
+                    {!!ownerDetails && (
                         <>
-                            <BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
-                            <ThreeDotsMenu
-                                menuItems={menuItems}
-                                anchorPosition={{horizontal: 0, vertical: 0}}
-                                disabled={shouldDisableThreeDotsMenu}
+                            <Avatar
+                                source={ownerDetails.avatar}
+                                size={CONST.AVATAR_SIZE.SMALL}
+                                containerStyles={styles.workspaceOwnerAvatarWrapper}
                             />
+                            <View style={styles.flex1}>
+                                <Text
+                                    numberOfLines={1}
+                                    style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
+                                >
+                                    {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails)}
+                                </Text>
+                                <Text
+                                    numberOfLines={1}
+                                    style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedback.deleted : {}]}
+                                >
+                                    {ownerDetails.login}
+                                </Text>
+                            </View>
                         </>
-                    ) : (
+                    )}
+                </View>
+                <View style={[styles.flexRow, isWide && !isJoinRequestPending && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
+                    <Icon
+                        src={workspaceTypeIcon(workspaceType)}
+                        width={variables.workspaceTypeIconWidth}
+                        height={variables.workspaceTypeIconWidth}
+                        additionalStyles={styles.workspaceTypeWrapper}
+                    />
+                    <View>
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
+                        >
+                            {userFriendlyWorkspaceType}
+                        </Text>
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedback.deleted : {}]}
+                        >
+                            {translate('workspace.common.plan')}
+                        </Text>
+                    </View>
+                </View>
+            </View>
+            <View style={[isNarrow && styles.mr5]}>
+                {isJoinRequestPending && (
+                    <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.flex1, styles.justifyContentEnd, styles.mln6, styles.pr4]}>
                         <Badge
                             text={translate('workspace.common.requested')}
                             textStyles={styles.textStrong}
                             badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
                             icon={Expensicons.Hourglass}
                         />
-                    ))}
-            </View>
-            <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
-                {!!ownerDetails && (
+                    </View>
+                )}
+                {!isJoinRequestPending && (
                     <>
-                        <Avatar
-                            source={ownerDetails.avatar}
-                            size={CONST.AVATAR_SIZE.SMALL}
-                            containerStyles={styles.workspaceOwnerAvatarWrapper}
-                        />
-                        <View style={styles.flex1}>
-                            <Text
-                                numberOfLines={1}
-                                style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
-                            >
-                                {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails)}
-                            </Text>
-                            <Text
-                                numberOfLines={1}
-                                style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedback.deleted : {}]}
-                            >
-                                {ownerDetails.login}
-                            </Text>
+                        <View style={[styles.flexRow, styles.flex0, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
+                            <BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
+                        </View>
+                        <View ref={threeDotsMenuContainerRef}>
+                            <ThreeDotsMenu
+                                onIconPress={() => {
+                                    if (isSmallScreenWidth) {
+                                        return;
+                                    }
+                                    threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
+                                        setThreeDotsMenuPosition({
+                                            horizontal: x + width,
+                                            vertical: y + height,
+                                        });
+                                    });
+                                }}
+                                menuItems={menuItems}
+                                anchorPosition={threeDotsMenuPosition}
+                                anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
+                                shouldOverlay
+                                disabled={shouldDisableThreeDotsMenu}
+                            />
                         </View>
                     </>
                 )}
             </View>
-            <View style={[styles.flexRow, isWide && !isJoinRequestPending && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
-                <Icon
-                    src={workspaceTypeIcon(workspaceType)}
-                    width={variables.workspaceTypeIconWidth}
-                    height={variables.workspaceTypeIconWidth}
-                    additionalStyles={styles.workspaceTypeWrapper}
-                />
-                <View>
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
-                    >
-                        {userFriendlyWorkspaceType}
-                    </Text>
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedback.deleted : {}]}
-                    >
-                        {translate('workspace.common.plan')}
-                    </Text>
-                </View>
-            </View>
-            {isJoinRequestPending && !isNarrow && (
-                <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.flex1, styles.justifyContentEnd, styles.mln6, styles.pr4]}>
-                    <Badge
-                        text={translate('workspace.common.requested')}
-                        textStyles={styles.textStrong}
-                        badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
-                        icon={Expensicons.Hourglass}
-                    />
-                </View>
-            )}
-
-            {isWide && !isJoinRequestPending && (
-                <>
-                    <View style={[styles.flexRow, styles.flex0, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
-                        <BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
-                    </View>
-                    <View ref={threeDotsMenuContainerRef}>
-                        <ThreeDotsMenu
-                            onIconPress={() => {
-                                threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
-                                    setThreeDotsMenuPosition({
-                                        horizontal: x + width,
-                                        vertical: y + height,
-                                    });
-                                });
-                            }}
-                            menuItems={menuItems}
-                            anchorPosition={threeDotsMenuPosition}
-                            anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
-                            iconStyles={[styles.mr2]}
-                            shouldOverlay
-                            disabled={shouldDisableThreeDotsMenu}
-                        />
-                    </View>
-                </>
-            )}
         </View>
     );
 }