From 639848e9101bd5bafcaace0b087b9cf426ce567f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <s@saghul.net>
Date: Mon, 20 Aug 2018 09:19:46 +0200
Subject: [PATCH] Add placeholder for conference field
Also, create a couple of auxiliary functions so we save some indentation
in the main render function.
---
app/features/welcome/components/Welcome.js | 74 ++++++++++++++--------
1 file changed, 49 insertions(+), 25 deletions(-)
diff --git a/app/features/welcome/components/Welcome.js b/app/features/welcome/components/Welcome.js
index c9a35f8..c7759e2 100644
--- a/app/features/welcome/components/Welcome.js
+++ b/app/features/welcome/components/Welcome.js
@@ -90,35 +90,12 @@ class Welcome extends Component<Props, State> {
* @returns {ReactElement}
*/
render() {
- const { state } = this.props.location;
-
return (
<Page navigation = { <Navbar /> }>
<AtlasKitThemeProvider mode = 'light'>
<Wrapper>
- <Header>
- <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>
- <Button
- appearance = 'primary'
- onClick = { this._onJoin }
- type = 'button'>
- GO
- </Button>
- </Header>
- <Body>
- <RecentList />
- </Body>
+ { this._renderHeader() }
+ { this._renderBody() }
<Onboarding section = 'welcome-page' />
</Wrapper>
</AtlasKitThemeProvider>
@@ -191,6 +168,53 @@ class Welcome extends Component<Props, State> {
url: event.currentTarget.value
});
}
+
+ /**
+ * Renders the body for the welcome page.
+ *
+ * @returns {ReactElement}
+ */
+ _renderBody() {
+ return (
+ <Body>
+ <RecentList />
+ </Body>
+ );
+ }
+
+ /**
+ * Renders the header for the welcome page.
+ *
+ * @returns {ReactElement}
+ */
+ _renderHeader() {
+ const locationState = this.props.location.state;
+ const locationError = locationState && locationState.error;
+
+ return (
+ <Header>
+ <SpotlightTarget name = 'conference-url'>
+ <Form onSubmit = { this._onFormSubmit }>
+ <FieldTextStateless
+ autoFocus = { true }
+ isInvalid = { locationError }
+ isLabelHidden = { true }
+ onChange = { this._onURLChange }
+ placeholder = 'Enter a name for your conference'
+ shouldFitContainer = { true }
+ type = 'text'
+ value = { this.state.url } />
+ </Form>
+ </SpotlightTarget>
+ <Button
+ appearance = 'primary'
+ onClick = { this._onJoin }
+ type = 'button'>
+ GO
+ </Button>
+ </Header>
+ );
+ }
}
export default connect()(Welcome);
--
GitLab