diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js index 237a4fe04c20c6ab3509c1b86869310ecece4a39..aad8e0b0e1bbc0a7d58bccbce034ba882359b143 100644 --- a/src/react-components/hub-create-panel.js +++ b/src/react-components/hub-create-panel.js @@ -21,15 +21,16 @@ class HubCreatePanel extends Component { this.state = { name: generateHubName(), environmentIndex: Math.floor(Math.random() * props.environments.length), - expanded: true + expanded: false }; } createHub = async e => { e.preventDefault(); + const environment = this.props.environments[this.state.environmentIndex]; const payload = { - hub: { name: this.state.name, default_environment_gltf_bundle_url: this.state.environmentBundleUrl } + hub: { name: this.state.name, default_environment_gltf_bundle_url: environment.bundle_url } }; const res = await fetch("/api/v1/hubs", { @@ -47,6 +48,31 @@ class HubCreatePanel extends Component { return new RegExp(HUB_NAME_PATTERN).test(this.state.name) && new RegExp(hubAlphaPattern).test(this.state.name); }; + setToEnvironmentOffset = offset => { + const numEnvs = this.props.environments.length; + + this.setState(state => ({ + environmentIndex: ((state.environmentIndex + offset) % this.props.environments.length + numEnvs) % numEnvs + })); + }; + + setToNextEnvironment = e => { + e.preventDefault(); + this.setToEnvironmentOffset(1); + }; + + setToPreviousEnvironment = e => { + e.preventDefault(); + this.setToEnvironmentOffset(-1); + }; + + shuffle = () => { + this.setState({ + name: generateHubName(), + environmentIndex: Math.floor(Math.random() * this.props.environments.length) + }); + }; + render() { const { formatMessage } = this.props.intl; @@ -54,12 +80,6 @@ class HubCreatePanel extends Component { return <div />; } - const environmentChoices = this.props.environments.map(e => ( - <option key={e.bundle_url} value={e.bundle_url}> - {e.meta.title} - </option> - )); - const environment = this.props.environments[this.state.environmentIndex]; const environmentImageSrcSet = environment.meta.images.find(i => i.type === "preview-thumbnail").srcset; @@ -85,7 +105,7 @@ class HubCreatePanel extends Component { e.preventDefault(); if (this.state.expanded) { - this.setState({ name: generateHubName() }); + this.shuffle(); } else { this.setState({ expanded: true }); }