Remove FeaturedProject class, replace with SafeWebview

Change-type: patch

lib/gui/app/components/featured-project/featured-project.tsx

@@ -1,63 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import * as React from 'react';
-
-import * as settings from '../../models/settings';
-import * as analytics from '../../modules/analytics';
-import { SafeWebview } from '../safe-webview/safe-webview';
-
-interface FeaturedProjectProps {
-	shouldShow: boolean;
-	onWebviewShow: (isWebviewShowing: boolean) => void;
-	style?: React.CSSProperties;
-}
-
-interface FeaturedProjectState {
-	endpoint: string | null;
-}
-
-export class FeaturedProject extends React.PureComponent<
-	FeaturedProjectProps,
-	FeaturedProjectState
-> {
-	constructor(props: FeaturedProjectProps) {
-		super(props);
-		this.state = {
-			endpoint: null,
-		};
-	}
-
-	public async componentDidMount() {
-		try {
-			const url = new URL(
-				(await settings.get('featuredProjectEndpoint')) ||
-					'https://assets.balena.io/etcher-featured/index.html',
-			);
-			url.searchParams.append('borderRight', 'false');
-			url.searchParams.append('darkBackground', 'true');
-			this.setState({ endpoint: url.toString() });
-		} catch (error) {
-			analytics.logException(error);
-		}
-	}
-
-	public render() {
-		return this.state.endpoint ? (
-			<SafeWebview src={this.state.endpoint} {...this.props} />
-		) : null;
-	}
-}

lib/gui/app/pages/main/MainPage.tsx

@@ -24,7 +24,6 @@ import * as React from 'react';
 import { Flex } from 'rendition';
 import styled from 'styled-components';
 
-import { FeaturedProject } from '../../components/featured-project/featured-project';
 import FinishPage from '../../components/finish/finish';
 import { ReducedFlashingInfos } from '../../components/reduced-flashing-infos/reduced-flashing-infos';
 import { SafeWebview } from '../../components/safe-webview/safe-webview';
@@ -114,6 +113,7 @@ interface MainPageState {
 	isWebviewShowing: boolean;
 	hideSettings: boolean;
 	source: SourceOptions;
+	featuredProjectURL?: string;
 }
 
 export class MainPage extends React.Component<
@@ -147,10 +147,21 @@ export class MainPage extends React.Component<
 		};
 	}
 
-	public componentDidMount() {
+	private async getFeaturedProjectURL() {
+		const url = new URL(
+			(await settings.get('featuredProjectEndpoint')) ||
+				'https://assets.balena.io/etcher-featured/index.html',
+		);
+		url.searchParams.append('borderRight', 'false');
+		url.searchParams.append('darkBackground', 'true');
+		return url.toString();
+	}
+
+	public async componentDidMount() {
 		observe(() => {
 			this.setState(this.stateHelper());
 		});
+		this.setState({ featuredProjectURL: await this.getFeaturedProjectURL() });
 	}
 
 	private renderMain() {
@@ -291,19 +302,21 @@ export class MainPage extends React.Component<
 									}}
 								/>
 							</Flex>
-							<FeaturedProject
+							{this.state.featuredProjectURL && (
-								shouldShow={this.state.isWebviewShowing}
+								<SafeWebview
-								onWebviewShow={(isWebviewShowing: boolean) => {
+									src={this.state.featuredProjectURL}
-									this.setState({ isWebviewShowing });
+									onWebviewShow={(isWebviewShowing: boolean) => {
-								}}
+										this.setState({ isWebviewShowing });
-								style={{
+									}}
-									position: 'absolute',
+									style={{
-									right: 0,
+										position: 'absolute',
-									bottom: 0,
+										right: 0,
-									width: '63.8vw',
+										bottom: 0,
-									height: '100vh',
+										width: '63.8vw',
-								}}
+										height: '100vh',
-							/>
+									}}
+								/>
+							)}
 						</>
 					)}