Make FlashStep a PureComponent

Change-type: patch

lib/gui/app/modules/progress-status.ts

@@ -48,7 +48,7 @@ export function fromFlashState({
 	type,
 	percentage,
 	position,
-}: FlashState): string {
+}: Pick<FlashState, 'type' | 'percentage' | 'position'>): string {
 	if (type === undefined) {
 		return 'Starting...';
 	} else if (type === 'decompressing') {

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

@@ -77,6 +77,7 @@ const getErrorMessageFromCode = (errorCode: string) => {
 };
 
 async function flashImageToDrive(
+	isFlashing: boolean,
 	goToSuccess: () => void,
 	sourceOptions: SourceOptions,
 ): Promise<string> {
@@ -86,7 +87,7 @@ async function flashImageToDrive(
 		return _.includes(devices, drive.device);
 	});
 
-	if (drives.length === 0 || flashState.isFlashing()) {
+	if (drives.length === 0 || isFlashing) {
 		return '';
 	}
 
@@ -132,11 +133,18 @@ async function flashImageToDrive(
 	return '';
 }
 
-const getProgressButtonLabel = () => {
-	if (!flashState.isFlashing()) {
+const getProgressButtonLabel = (
+	isFlashing: boolean,
+	// TODO: factorize
+	type: 'decompressing' | 'flashing' | 'verifying',
+	position: number,
+	percentage?: number,
+) => {
+	// TODO
+	if (!isFlashing) {
 		return 'Flash!';
 	}
-	return progressStatus.fromFlashState(flashState.getFlashState());
+	return progressStatus.fromFlashState({ type, position, percentage });
 };
 
 const formatSeconds = (totalSeconds: number) => {
@@ -159,6 +167,14 @@ interface FlashStepProps {
 	shouldFlashStepBeDisabled: boolean;
 	goToSuccess: () => void;
 	source: SourceOptions;
+	isFlashing: boolean;
+	// TODO: factorize
+	step: 'decompressing' | 'flashing' | 'verifying';
+	percentage: number;
+	position: number;
+	failed: number;
+	speed?: number;
+	eta?: number;
 }
 
 interface FlashStepState {
@@ -167,7 +183,10 @@ interface FlashStepState {
 	showDriveSelectorModal: boolean;
 }
 
-export class FlashStep extends React.Component<FlashStepProps, FlashStepState> {
+export class FlashStep extends React.PureComponent<
+	FlashStepProps,
+	FlashStepState
+> {
 	constructor(props: FlashStepProps) {
 		super(props);
 		this.state = {
@@ -185,6 +204,7 @@ export class FlashStep extends React.Component<FlashStepProps, FlashStepState> {
 		}
 		this.setState({
 			errorMessage: await flashImageToDrive(
+				this.props.isFlashing,
 				this.props.goToSuccess,
 				this.props.source,
 			),
@@ -210,7 +230,7 @@ export class FlashStep extends React.Component<FlashStepProps, FlashStepState> {
 				return _.includes(devices, drive.device);
 			},
 		);
-		if (drives.length === 0 || flashState.isFlashing()) {
+		if (drives.length === 0 || this.props.isFlashing) {
 			return;
 		}
 		const hasDangerStatus = constraints.hasListDriveImageCompatibilityStatus(
@@ -223,6 +243,7 @@ export class FlashStep extends React.Component<FlashStepProps, FlashStepState> {
 		}
 		this.setState({
 			errorMessage: await flashImageToDrive(
+				this.props.isFlashing,
 				this.props.goToSuccess,
 				this.props.source,
 			),
@@ -230,9 +251,6 @@ export class FlashStep extends React.Component<FlashStepProps, FlashStepState> {
 	}
 
 	public render() {
-		const state = flashState.getFlashState();
-		const isFlashing = flashState.isFlashing();
-		const flashErrorCode = flashState.getLastFlashErrorCode();
 		return (
 			<>
 				<div className="box text-center">
@@ -246,49 +264,54 @@ export class FlashStep extends React.Component<FlashStepProps, FlashStepState> {
 					<div className="space-vertical-large">
 						<StepSelection>
 							<ProgressButton
-								type={state.type}
-								active={isFlashing}
-								percentage={state.percentage}
-								label={getProgressButtonLabel()}
-								disabled={
-									Boolean(flashErrorCode) ||
-									this.props.shouldFlashStepBeDisabled
-								}
+								type={this.props.step}
+								active={this.props.isFlashing}
+								percentage={this.props.percentage}
+								label={getProgressButtonLabel(
+									this.props.isFlashing,
+									this.props.step,
+									this.props.position,
+									this.props.percentage,
+								)}
+								disabled={this.props.shouldFlashStepBeDisabled}
 								callback={() => {
 									this.tryFlash();
 								}}
 							/>
-							{isFlashing && (
+							{this.props.isFlashing && (
 								<IconButton
 									icon={<FontAwesomeIcon icon={faTimes} />}
 									plain
 									onClick={imageWriter.cancel}
 									color="#fff"
+									hoverIndicator={{ dark: true }}
 								/>
 							)}
 						</StepSelection>
 
-						{!_.isNil(state.speed) &&
-							state.percentage !== COMPLETED_PERCENTAGE && (
+						{!_.isNil(this.props.speed) &&
+							this.props.percentage !== COMPLETED_PERCENTAGE && (
 								<p className="step-footer step-footer-split">
-									{Boolean(state.speed) && (
-										<span>{`${state.speed.toFixed(
+									{Boolean(this.props.speed) && (
+										<span>{`${this.props.speed.toFixed(
 											SPEED_PRECISION,
 										)} MB/s`}</span>
 									)}
-									{!_.isNil(state.eta) && (
-										<span>{`ETA: ${formatSeconds(state.eta)}`}</span>
+									{!_.isNil(this.props.eta) && (
+										<span>{`ETA: ${formatSeconds(this.props.eta)}`}</span>
 									)}
 								</p>
 							)}
 
-						{Boolean(state.failed) && (
+						{Boolean(this.props.failed) && (
 							<div className="target-status-wrap">
 								<div className="target-status-line target-status-failed">
 									<span className="target-status-dot"></span>
-									<span className="target-status-quantity">{state.failed}</span>
+									<span className="target-status-quantity">
+										{this.props.failed}
+									</span>
 									<span className="target-status-message">
-										{messages.progress.failed(state.failed)}{' '}
+										{messages.progress.failed(this.props.failed)}{' '}
 									</span>
 								</div>
 							</div>

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

@@ -131,6 +131,7 @@ export class MainPage extends React.Component<
 	}
 
 	private renderMain() {
+		const state = flashState.getFlashState();
 		const shouldDriveStepBeDisabled = !this.state.hasImage;
 		const shouldFlashStepBeDisabled =
 			!this.state.hasImage || !this.state.hasDrive;
@@ -249,6 +250,13 @@ export class MainPage extends React.Component<
 							goToSuccess={() => this.setState({ current: 'success' })}
 							shouldFlashStepBeDisabled={shouldFlashStepBeDisabled}
 							source={this.state.source}
+							isFlashing={flashState.isFlashing()}
+							step={state.type}
+							percentage={state.percentage}
+							position={state.position}
+							failed={state.failed}
+							speed={state.speed}
+							eta={state.eta}
 						/>
 					</div>
 				</Flex>