Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/18891

src/components/views/spaces/SpaceSettingsVisibilityTab.tsx

@@ -25,49 +25,20 @@ import AccessibleButton from "../elements/AccessibleButton";
 import AliasSettings from "../room_settings/AliasSettings";
 import { useStateToggle } from "../../../hooks/useStateToggle";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
-import StyledRadioGroup from "../elements/StyledRadioGroup";
+import { useLocalEcho } from "../../../hooks/useLocalEcho";
+import JoinRuleSettings from "../settings/JoinRuleSettings";
 
 interface IProps {
     matrixClient: MatrixClient;
     space: Room;
+    closeSettingsFn(): void;
 }
 
-enum SpaceVisibility {
-    Unlisted = "unlisted",
-    Private = "private",
-}
-
-const useLocalEcho = <T extends any>(
-    currentFactory: () => T,
-    setterFn: (value: T) => Promise<unknown>,
-    errorFn: (error: Error) => void,
-): [value: T, handler: (value: T) => void] => {
-    const [value, setValue] = useState(currentFactory);
-    const handler = async (value: T) => {
-        setValue(value);
-        try {
-            await setterFn(value);
-        } catch (e) {
-            setValue(currentFactory());
-            errorFn(e);
-        }
-    };
-
-    return [value, handler];
-};
-
-const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space }: IProps) => {
+const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space, closeSettingsFn }: IProps) => {
     const [error, setError] = useState("");
 
     const userId = cli.getUserId();
 
-    const [visibility, setVisibility] = useLocalEcho<SpaceVisibility>(
-        () => space.getJoinRule() === JoinRule.Invite ? SpaceVisibility.Private : SpaceVisibility.Unlisted,
-        visibility => cli.sendStateEvent(space.roomId, EventType.RoomJoinRules, {
-            join_rule: visibility === SpaceVisibility.Unlisted ? JoinRule.Public : JoinRule.Invite,
-        }, ""),
-        () => setError(_t("Failed to update the visibility of this space")),
-    );
     const [guestAccessEnabled, setGuestAccessEnabled] = useLocalEcho<boolean>(
         () => space.currentState.getStateEvents(EventType.RoomGuestAccess, "")
             ?.getContent()?.guest_access === GuestAccess.CanJoin,
@@ -87,41 +58,42 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space }: IProps) => {
 
     const [showAdvancedSection, toggleAdvancedSection] = useStateToggle();
 
-    const canSetJoinRule = space.currentState.maySendStateEvent(EventType.RoomJoinRules, userId);
     const canSetGuestAccess = space.currentState.maySendStateEvent(EventType.RoomGuestAccess, userId);
     const canSetHistoryVisibility = space.currentState.maySendStateEvent(EventType.RoomHistoryVisibility, userId);
     const canSetCanonical = space.currentState.mayClientSendStateEvent(EventType.RoomCanonicalAlias, cli);
     const canonicalAliasEv = space.currentState.getStateEvents(EventType.RoomCanonicalAlias, "");
 
     let advancedSection;
-    if (showAdvancedSection) {
-        advancedSection = <>
-            <AccessibleButton onClick={toggleAdvancedSection} kind="link" className="mx_SettingsTab_showAdvanced">
-                { _t("Hide advanced") }
-            </AccessibleButton>
+    if (visibility === SpaceVisibility.Unlisted) {
+        if (showAdvancedSection) {
+            advancedSection = <>
+                <AccessibleButton onClick={toggleAdvancedSection} kind="link" className="mx_SettingsTab_showAdvanced">
+                    { _t("Hide advanced") }
+                </AccessibleButton>
 
-            <LabelledToggleSwitch
-                value={guestAccessEnabled}
-                onChange={setGuestAccessEnabled}
-                disabled={!canSetGuestAccess}
-                label={_t("Enable guest access")}
-            />
-            <p>
-                { _t("Guests can join a space without having an account.") }
-                <br />
-                { _t("This may be useful for public spaces.") }
-            </p>
-        </>;
-    } else {
-        advancedSection = <>
-            <AccessibleButton onClick={toggleAdvancedSection} kind="link" className="mx_SettingsTab_showAdvanced">
-                { _t("Show advanced") }
-            </AccessibleButton>
-        </>;
+                <LabelledToggleSwitch
+                    value={guestAccessEnabled}
+                    onChange={setGuestAccessEnabled}
+                    disabled={!canSetGuestAccess}
+                    label={_t("Enable guest access")}
+                />
+                <p>
+                    { _t("Guests can join a space without having an account.") }
+                    <br />
+                    { _t("This may be useful for public spaces.") }
+                </p>
+            </>;
+        } else {
+            advancedSection = <>
+                <AccessibleButton onClick={toggleAdvancedSection} kind="link" className="mx_SettingsTab_showAdvanced">
+                    { _t("Show advanced") }
+                </AccessibleButton>
+            </>;
+        }
     }
 
     let addressesSection;
-    if (visibility !== SpaceVisibility.Private) {
+    if (space.getJoinRule() === JoinRule.Public) {
         addressesSection = <>
             <span className="mx_SettingsTab_subheading">{ _t("Address") }</span>
             <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
@@ -147,22 +119,10 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space }: IProps) => {
             </div>
 
             <div>
-                <StyledRadioGroup
-                    name="spaceVisibility"
-                    value={visibility}
-                    onChange={setVisibility}
-                    disabled={!canSetJoinRule}
-                    definitions={[
-                        {
-                            value: SpaceVisibility.Unlisted,
-                            label: _t("Public"),
-                            description: _t("anyone with the link can view and join"),
-                        }, {
-                            value: SpaceVisibility.Private,
-                            label: _t("Invite only"),
-                            description: _t("only invited people can view and join"),
-                        },
-                    ]}
+                <JoinRuleSettings
+                    room={space}
+                    onError={() => setError(_t("Failed to update the visibility of this space"))}
+                    closeSettingsFn={closeSettingsFn}
                 />
             </div>
 

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -261,7 +261,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
 
     render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { space, activeSpaces, isNested, isPanelCollapsed, onExpand, parents, innerRef,
+        const { space, activeSpaces, isNested, isPanelCollapsed, onExpand, parents, innerRef, dragHandleProps,
             ...otherProps } = this.props;
 
         const collapsed = this.isCollapsed;
@@ -300,7 +300,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             /> : null;
 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { tabIndex, ...dragHandleProps } = this.props.dragHandleProps || {};
+        const { tabIndex, ...restDragHandleProps } = dragHandleProps || {};
 
         return (
             <li
@@ -311,7 +311,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 role="treeitem"
             >
                 <SpaceButton
-                    {...dragHandleProps}
+                    {...restDragHandleProps}
                     space={space}
                     className={isInvite ? "mx_SpaceButton_invite" : undefined}
                     selected={activeSpaces.includes(space)}