Consolidate AddExistingToSpace between Dialog and Just Me integrated flow

Author: t3chguy

res/css/views/dialogs/_AddExistingToSpaceDialog.scss

@@ -105,6 +105,90 @@ limitations under the License.
             mask-position: center;
         }
     }
+
+    .mx_AddExistingToSpace_footer {
+        display: flex;
+        margin-top: 20px;
+
+        > span {
+            flex-grow: 1;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-fg-color;
+
+            .mx_ProgressBar {
+                height: 8px;
+                width: 100%;
+
+                @mixin ProgressBarBorderRadius 8px;
+            }
+
+            .mx_AddExistingToSpace_progressText {
+                margin-top: 8px;
+                font-size: $font-15px;
+                line-height: $font-24px;
+                color: $primary-fg-color;
+            }
+
+            > * {
+                vertical-align: middle;
+            }
+        }
+
+        .mx_AddExistingToSpace_error {
+            padding-left: 12px;
+
+            > img {
+                align-self: center;
+            }
+
+            .mx_AddExistingToSpace_errorHeading {
+                font-weight: $font-semi-bold;
+                font-size: $font-15px;
+                line-height: $font-18px;
+                color: $notice-primary-color;
+            }
+
+            .mx_AddExistingToSpace_errorCaption {
+                margin-top: 4px;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $primary-fg-color;
+            }
+        }
+
+        .mx_AccessibleButton {
+            display: inline-block;
+            align-self: center;
+        }
+
+        .mx_AccessibleButton_kind_primary {
+            padding: 8px 36px;
+        }
+
+        .mx_AddExistingToSpace_retryButton {
+            margin-left: 12px;
+            padding-left: 24px;
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                background-color: $primary-fg-color;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                mask-image: url('$(res)/img/element-icons/retry.svg');
+                width: 18px;
+                height: 18px;
+                left: 0;
+            }
+        }
+
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+        }
+    }
 }
 
 .mx_AddExistingToSpaceDialog {
@@ -189,88 +273,4 @@ limitations under the License.
     .mx_AddExistingToSpace {
         display: contents;
     }
-
-    .mx_AddExistingToSpaceDialog_footer {
-        display: flex;
-        margin-top: 20px;
-
-        > span {
-            flex-grow: 1;
-            font-size: $font-12px;
-            line-height: $font-15px;
-            color: $secondary-fg-color;
-
-            .mx_ProgressBar {
-                height: 8px;
-                width: 100%;
-
-                @mixin ProgressBarBorderRadius 8px;
-            }
-
-            .mx_AddExistingToSpaceDialog_progressText {
-                margin-top: 8px;
-                font-size: $font-15px;
-                line-height: $font-24px;
-                color: $primary-fg-color;
-            }
-
-            > * {
-                vertical-align: middle;
-            }
-        }
-
-        .mx_AddExistingToSpaceDialog_error {
-            padding-left: 12px;
-
-            > img {
-                align-self: center;
-            }
-
-            .mx_AddExistingToSpaceDialog_errorHeading {
-                font-weight: $font-semi-bold;
-                font-size: $font-15px;
-                line-height: $font-18px;
-                color: $notice-primary-color;
-            }
-
-            .mx_AddExistingToSpaceDialog_errorCaption {
-                margin-top: 4px;
-                font-size: $font-12px;
-                line-height: $font-15px;
-                color: $primary-fg-color;
-            }
-        }
-
-        .mx_AccessibleButton {
-            display: inline-block;
-            align-self: center;
-        }
-
-        .mx_AccessibleButton_kind_primary {
-            padding: 8px 36px;
-        }
-
-        .mx_AddExistingToSpaceDialog_retryButton {
-            margin-left: 12px;
-            padding-left: 24px;
-            position: relative;
-
-            &::before {
-                content: '';
-                position: absolute;
-                background-color: $primary-fg-color;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: contain;
-                mask-image: url('$(res)/img/element-icons/retry.svg');
-                width: 18px;
-                height: 18px;
-                left: 0;
-            }
-        }
-
-        .mx_AccessibleButton_kind_link {
-            padding: 0;
-        }
-    }
 }

src/components/structures/SpaceRoomView.tsx

@@ -517,70 +517,25 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
 };
 
 const SpaceAddExistingRooms = ({ space, onFinished }) => {
-    const [selectedToAdd, setSelectedToAdd] = useState(new Set<Room>());
-
-    const [busy, setBusy] = useState(false);
-    const [error, setError] = useState("");
-
-    let onClick = onFinished;
-    let buttonLabel = _t("Skip for now");
-    if (selectedToAdd.size > 0) {
-        onClick = async () => {
-            setBusy(true);
-
-            for (const room of selectedToAdd) {
-                const via = calculateRoomVia(room);
-                try {
-                    await SpaceStore.instance.addRoomToSpace(space, room.roomId, via).catch(async e => {
-                        if (e.errcode === "M_LIMIT_EXCEEDED") {
-                            await sleep(e.data.retry_after_ms);
-                            return SpaceStore.instance.addRoomToSpace(space, room.roomId, via); // retry
-                        }
-
-                        throw e;
-                    });
-                } catch (e) {
-                    console.error("Failed to add rooms to space", e);
-                    setError(_t("Failed to add rooms to space"));
-                    break;
-                }
-            }
-            setBusy(false);
-            onFinished();
-        };
-        buttonLabel = busy ? _t("Adding...") : _t("Add");
-    }
-
     return <div>
         <h1>{ _t("What do you want to organise?") }</h1>
         <div className="mx_SpaceRoomView_description">
             { _t("Pick rooms or conversations to add. This is just a space for you, " +
                 "no one will be informed. You can add more later.") }
         </div>
 
-        { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
-
         <AddExistingToSpace
             space={space}
-            selected={selectedToAdd}
-            onChange={(checked, room) => {
-                if (checked) {
-                    selectedToAdd.add(room);
-                } else {
-                    selectedToAdd.delete(room);
-                }
-                setSelectedToAdd(new Set(selectedToAdd));
-            }}
+            emptySelectionButton={
+                <AccessibleButton kind="primary" onClick={onFinished}>
+                    { _t("Skip for now") }
+                </AccessibleButton>
+            }
+            onFinished={onFinished}
         />
 
         <div className="mx_SpaceRoomView_buttons">
-            <AccessibleButton
-                kind="primary"
-                disabled={busy}
-                onClick={onClick}
-            >
-                { buttonLabel }
-            </AccessibleButton>
+
         </div>
         <SpaceFeedbackPrompt />
     </div>;