2018-05-26 23:51:12 +02:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
|
|
import Button from '@atlaskit/button';
|
|
|
|
|
import { FieldTextStateless } from '@atlaskit/field-text';
|
2018-07-30 03:55:57 +02:00
|
|
|
import { SpotlightTarget } from '@atlaskit/onboarding';
|
2018-06-08 10:51:58 +02:00
|
|
|
import Page from '@atlaskit/page';
|
|
|
|
|
import { AtlasKitThemeProvider } from '@atlaskit/theme';
|
2018-05-26 23:51:12 +02:00
|
|
|
|
|
|
|
|
import React, { Component } from 'react';
|
2018-06-03 04:36:16 +02:00
|
|
|
import type { Dispatch } from 'redux';
|
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
|
import { push } from 'react-router-redux';
|
2018-05-26 23:51:12 +02:00
|
|
|
|
2018-06-08 10:51:58 +02:00
|
|
|
import { Navbar } from '../../navbar';
|
2018-07-30 03:55:57 +02:00
|
|
|
import { Onboarding, startOnboarding } from '../../onboarding';
|
2018-07-25 13:36:55 +02:00
|
|
|
import { RecentList } from '../../recent-list';
|
2018-06-23 02:51:50 +02:00
|
|
|
import { normalizeServerURL } from '../../utils';
|
2018-06-08 10:51:58 +02:00
|
|
|
|
2018-07-25 13:36:55 +02:00
|
|
|
import { Body, Form, Header, Wrapper } from '../styled';
|
2018-05-26 23:51:12 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
|
|
|
|
|
/**
|
2018-06-03 04:36:16 +02:00
|
|
|
* Redux dispatch.
|
2018-05-26 23:51:12 +02:00
|
|
|
*/
|
2018-06-03 04:36:16 +02:00
|
|
|
dispatch: Dispatch<*>;
|
2018-07-08 08:37:31 +02:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* React Router location object.
|
|
|
|
|
*/
|
|
|
|
|
location: Object;
|
2018-05-26 23:51:12 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type State = {
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* URL of the room to join.
|
|
|
|
|
* If this is not a url it will be treated as room name for default domain.
|
|
|
|
|
*/
|
|
|
|
|
url: string;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Welcome Component.
|
|
|
|
|
*/
|
2018-06-03 04:36:16 +02:00
|
|
|
class Welcome extends Component<Props, State> {
|
2018-05-26 23:51:12 +02:00
|
|
|
/**
|
|
|
|
|
* Initializes a new {@code Welcome} instance.
|
|
|
|
|
*
|
|
|
|
|
* @inheritdoc
|
|
|
|
|
*/
|
|
|
|
|
constructor(props: Props) {
|
|
|
|
|
super(props);
|
|
|
|
|
|
2018-07-19 14:16:38 +02:00
|
|
|
// Initialize url value in state if passed using location state object.
|
2018-07-08 08:37:31 +02:00
|
|
|
let url = '';
|
|
|
|
|
|
|
|
|
|
// Check and parse url if exists in location state.
|
|
|
|
|
if (props.location.state) {
|
|
|
|
|
const { room, serverURL } = props.location.state;
|
|
|
|
|
|
|
|
|
|
if (room && serverURL) {
|
|
|
|
|
url = `${serverURL}/${room}`;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-19 14:16:38 +02:00
|
|
|
this.state = { url };
|
|
|
|
|
|
|
|
|
|
// Bind event handlers.
|
|
|
|
|
this._onURLChange = this._onURLChange.bind(this);
|
|
|
|
|
this._onFormSubmit = this._onFormSubmit.bind(this);
|
|
|
|
|
this._onJoin = this._onJoin.bind(this);
|
2018-07-08 08:37:31 +02:00
|
|
|
}
|
|
|
|
|
|
2018-07-30 03:55:57 +02:00
|
|
|
/**
|
|
|
|
|
* Start Onboarding once component is mounted.
|
|
|
|
|
*
|
|
|
|
|
* NOTE: It autonatically checks if the onboarding is shown or not.
|
|
|
|
|
*
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
this.props.dispatch(startOnboarding('welcome-page'));
|
|
|
|
|
}
|
|
|
|
|
|
2018-05-26 23:51:12 +02:00
|
|
|
/**
|
|
|
|
|
* Render function of component.
|
|
|
|
|
*
|
2018-06-07 09:47:42 +02:00
|
|
|
* @returns {ReactElement}
|
2018-05-26 23:51:12 +02:00
|
|
|
*/
|
|
|
|
|
render() {
|
2018-07-08 08:37:31 +02:00
|
|
|
const { state } = this.props.location;
|
|
|
|
|
|
2018-05-26 23:51:12 +02:00
|
|
|
return (
|
2018-06-08 10:51:58 +02:00
|
|
|
<Page navigation = { <Navbar /> }>
|
|
|
|
|
<AtlasKitThemeProvider mode = 'light'>
|
|
|
|
|
<Wrapper>
|
2018-07-25 13:36:55 +02:00
|
|
|
<Header>
|
2018-07-30 03:55:57 +02:00
|
|
|
<SpotlightTarget name = 'conference-url'>
|
|
|
|
|
<Form onSubmit = { this._onFormSubmit }>
|
|
|
|
|
<FieldTextStateless
|
|
|
|
|
autoFocus = { true }
|
|
|
|
|
isInvalid = { state && state.error }
|
|
|
|
|
isLabelHidden = { true }
|
|
|
|
|
onChange = { this._onURLChange }
|
|
|
|
|
shouldFitContainer = { true }
|
|
|
|
|
type = 'text'
|
|
|
|
|
value = { this.state.url } />
|
|
|
|
|
</Form>
|
|
|
|
|
</SpotlightTarget>
|
2018-06-08 10:51:58 +02:00
|
|
|
<Button
|
|
|
|
|
appearance = 'primary'
|
|
|
|
|
onClick = { this._onJoin }
|
|
|
|
|
type = 'button'>
|
|
|
|
|
GO
|
|
|
|
|
</Button>
|
2018-07-25 13:36:55 +02:00
|
|
|
</Header>
|
|
|
|
|
<Body>
|
|
|
|
|
<RecentList />
|
|
|
|
|
</Body>
|
2018-07-30 03:55:57 +02:00
|
|
|
<Onboarding section = 'welcome-page' />
|
2018-06-08 10:51:58 +02:00
|
|
|
</Wrapper>
|
|
|
|
|
</AtlasKitThemeProvider>
|
|
|
|
|
</Page>
|
2018-05-26 23:51:12 +02:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
_onFormSubmit: (*) => void;
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Prevents submission of the form and delegates the join logic.
|
2018-06-07 09:47:42 +02:00
|
|
|
*
|
|
|
|
|
* @param {Event} event - Event by which this function is called.
|
|
|
|
|
* @returns {void}
|
2018-05-26 23:51:12 +02:00
|
|
|
*/
|
|
|
|
|
_onFormSubmit(event: Event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
this._onJoin();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
_onJoin: (*) => void;
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Redirect and join conference.
|
2018-06-07 09:47:42 +02:00
|
|
|
*
|
|
|
|
|
* @returns {void}
|
2018-05-26 23:51:12 +02:00
|
|
|
*/
|
|
|
|
|
_onJoin() {
|
2018-06-25 10:22:15 +02:00
|
|
|
const inputURL = this.state.url;
|
|
|
|
|
const lastIndexOfSlash = inputURL.lastIndexOf('/');
|
|
|
|
|
let room;
|
|
|
|
|
let serverURL;
|
|
|
|
|
|
|
|
|
|
if (lastIndexOfSlash === -1) {
|
|
|
|
|
// This must be only the room name.
|
|
|
|
|
room = inputURL;
|
|
|
|
|
} else {
|
|
|
|
|
// Take the substring after last slash to be the room name.
|
|
|
|
|
room = inputURL.substring(lastIndexOfSlash + 1);
|
2018-05-26 23:51:12 +02:00
|
|
|
|
2018-06-25 10:22:15 +02:00
|
|
|
// Take the substring before last slash to be the Server URL.
|
|
|
|
|
serverURL = inputURL.substring(0, lastIndexOfSlash);
|
2018-05-26 23:51:12 +02:00
|
|
|
|
2018-06-23 02:51:50 +02:00
|
|
|
// Normalize the server URL.
|
|
|
|
|
serverURL = normalizeServerURL(serverURL);
|
2018-06-25 10:22:15 +02:00
|
|
|
}
|
2018-05-26 23:51:12 +02:00
|
|
|
|
2018-06-25 10:22:15 +02:00
|
|
|
// Don't navigate if no room was specified.
|
|
|
|
|
if (!room) {
|
|
|
|
|
return;
|
2018-05-26 23:51:12 +02:00
|
|
|
}
|
2018-06-25 10:22:15 +02:00
|
|
|
|
|
|
|
|
this.props.dispatch(push('/conference', {
|
|
|
|
|
room,
|
|
|
|
|
serverURL
|
|
|
|
|
}));
|
2018-05-26 23:51:12 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
_onURLChange: (*) => void;
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Keeps URL input value and URL in state in sync.
|
2018-06-07 09:47:42 +02:00
|
|
|
*
|
|
|
|
|
* @param {SyntheticInputEvent<HTMLInputElement>} event - Event by which
|
|
|
|
|
* this function is called.
|
|
|
|
|
* @returns {void}
|
2018-05-26 23:51:12 +02:00
|
|
|
*/
|
|
|
|
|
_onURLChange(event: SyntheticInputEvent<HTMLInputElement>) {
|
|
|
|
|
this.setState({
|
|
|
|
|
url: event.currentTarget.value
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-06-03 04:36:16 +02:00
|
|
|
|
|
|
|
|
export default connect()(Welcome);
|
