Rework ServerTypeSelector to only emit changes after initial setup

`ServerTypeSelector` would call its `onChange` prop both at construction
(because it computed the default selected type and consumers might want to know)
as well as on actual user change. This ended up complicating consumer code, as
they want to differentiate between initial state and changes made by the user.

To simplify things, `ServerTypeSelector` now exports a function to compute the
server type from HS URL, which can be useful for setting its initially selected
type. The consumer now provides that type via a prop, and `onChange` is now only
called for actual user changes, simplifying the logic in `Registration` which
uses `ServerTypeSelector`.

In addition, some usages of `customHsUrl` vs. `defaultHsUrl` in `Registration`
are simplified to be `customHsUrl` only (since it already includes a fallback to
the default URL in `MatrixChat`).
This commit is contained in:
J. Ryan Stinnett 2019-02-20 11:23:36 +00:00
parent 9292a46db0
commit b846ac5800
2 changed files with 17 additions and 33 deletions

View file

@ -94,7 +94,7 @@ module.exports = React.createClass({
// If we've been given a session ID, we're resuming // If we've been given a session ID, we're resuming
// straight back into UI auth // straight back into UI auth
doingUIAuth: Boolean(this.props.sessionId), doingUIAuth: Boolean(this.props.sessionId),
serverType: null, serverType: ServerType.getTypeFromHsUrl(this.props.customHsUrl),
hsUrl: this.props.customHsUrl, hsUrl: this.props.customHsUrl,
isUrl: this.props.customIsUrl, isUrl: this.props.customIsUrl,
// Phase of the overall registration dialog. // Phase of the overall registration dialog.
@ -122,7 +122,7 @@ module.exports = React.createClass({
}); });
}, },
onServerTypeChange(type, initial) { onServerTypeChange(type) {
this.setState({ this.setState({
serverType: type, serverType: type,
}); });
@ -148,15 +148,10 @@ module.exports = React.createClass({
hsUrl: this.props.defaultHsUrl, hsUrl: this.props.defaultHsUrl,
isUrl: this.props.defaultIsUrl, isUrl: this.props.defaultIsUrl,
}); });
// if this is the initial value from the control and we're // Reset back to server details on type change.
// already in the registration phase, don't go back to the this.setState({
// server details phase (but do if it's actually a change resulting phase: PHASE_SERVER_DETAILS,
// from user interaction). });
if (!initial || !this.state.phase === PHASE_REGISTRATION) {
this.setState({
phase: PHASE_SERVER_DETAILS,
});
}
break; break;
} }
}, },
@ -389,12 +384,9 @@ module.exports = React.createClass({
// If we're on a different phase, we only show the server type selector, // If we're on a different phase, we only show the server type selector,
// which is always shown if we allow custom URLs at all. // which is always shown if we allow custom URLs at all.
if (PHASES_ENABLED && this.state.phase !== PHASE_SERVER_DETAILS) { if (PHASES_ENABLED && this.state.phase !== PHASE_SERVER_DETAILS) {
// if we've been given a custom HS URL we should actually pass that, so
// that the appropriate section is selected at the start to match the
// homeserver URL we're using
return <div> return <div>
<ServerTypeSelector <ServerTypeSelector
defaultHsUrl={this.props.customHsUrl || this.props.defaultHsUrl} selected={this.state.serverType}
onChange={this.onServerTypeChange} onChange={this.onServerTypeChange}
/> />
</div>; </div>;
@ -436,7 +428,7 @@ module.exports = React.createClass({
return <div> return <div>
<ServerTypeSelector <ServerTypeSelector
defaultHsUrl={this.props.defaultHsUrl} selected={this.state.serverType}
onChange={this.onServerTypeChange} onChange={this.onServerTypeChange}
/> />
{serverDetails} {serverDetails}

View file

@ -56,12 +56,12 @@ export const TYPES = {
}, },
}; };
function getDefaultType(defaultHsUrl) { export function getTypeFromHsUrl(hsUrl) {
if (!defaultHsUrl) { if (!hsUrl) {
return null; return null;
} else if (defaultHsUrl === TYPES.FREE.hsUrl) { } else if (hsUrl === TYPES.FREE.hsUrl) {
return FREE; return FREE;
} else if (new URL(defaultHsUrl).hostname.endsWith('.modular.im')) { } else if (new URL(hsUrl).hostname.endsWith('.modular.im')) {
// This is an unlikely case to reach, as Modular defaults to hiding the // This is an unlikely case to reach, as Modular defaults to hiding the
// server type selector. // server type selector.
return PREMIUM; return PREMIUM;
@ -72,8 +72,8 @@ function getDefaultType(defaultHsUrl) {
export default class ServerTypeSelector extends React.PureComponent { export default class ServerTypeSelector extends React.PureComponent {
static propTypes = { static propTypes = {
// The default HS URL as another way to set the initially selected type. // The default selected type.
defaultHsUrl: PropTypes.string, selected: PropTypes.string,
// Handler called when the selected type changes. // Handler called when the selected type changes.
onChange: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired,
} }
@ -82,20 +82,12 @@ export default class ServerTypeSelector extends React.PureComponent {
super(props); super(props);
const { const {
defaultHsUrl, selected,
onChange,
} = props; } = props;
const type = getDefaultType(defaultHsUrl);
this.state = { this.state = {
selected: type, selected,
}; };
if (onChange) {
// FIXME: Supply a second 'initial' param here to flag that this is
// initialising the value rather than from user interaction
// (which sometimes we'll want to ignore). Must be a better way
// to do this.
onChange(type, true);
}
} }
updateSelectedType(type) { updateSelectedType(type) {