Add more typings & refactor code accordingly

Change-type: patch
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>

lib/gui/app/components/finish/finish.tsx

@@ -82,7 +82,7 @@ function FinishPage({ goToMain }: { goToMain: () => void }) {
 				}}
 			>
 				<FlashResults
-					image={selectionState.getImageName()}
+					image={selectionState.getImage()?.name}
 					results={results}
 					skip={skip}
 					errors={errors}

lib/gui/app/components/progress-button/progress-button.tsx

@@ -78,14 +78,14 @@ const CancelButton = styled(({ type, onClick, ...props }) => {
 
 export class ProgressButton extends React.PureComponent<ProgressButtonProps> {
 	public render() {
-		const type = this.props.type;
 		const percentage = this.props.percentage;
 		const warning = this.props.warning;
 		const { status, position } = fromFlashState({
-			type,
+			type: this.props.type,
 			percentage,
 			position: this.props.position,
 		});
+		const type = this.props.type || 'default';
 		if (this.props.active) {
 			return (
 				<>

lib/gui/app/components/source-selector/source-selector.tsx

@@ -116,10 +116,11 @@ const ModalText = styled.p`
 `;
 
 function getState() {
+	const image = selectionState.getImage();
 	return {
 		hasImage: selectionState.hasImage(),
-		imageName: selectionState.getImageName(),
+		imageName: image?.name,
-		imageSize: selectionState.getImageSize(),
+		imageSize: image?.size,
 	};
 }
 
@@ -525,7 +526,7 @@ export class SourceSelector extends React.Component<
 
 	private showSelectedImageDetails() {
 		analytics.logEvent('Show selected image tooltip', {
-			imagePath: selectionState.getImagePath(),
+			imagePath: selectionState.getImage()?.path,
 		});
 
 		this.setState({

lib/gui/app/models/selection-state.ts

@@ -72,26 +72,6 @@ export function getImage(): SourceMetadata | undefined {
 	return store.getState().toJS().selection.image;
 }
 
-export function getImagePath() {
-	return getImage()?.path;
-}
-
-export function getImageSize() {
-	return getImage()?.size;
-}
-
-export function getImageName() {
-	return getImage()?.name;
-}
-
-export function getImageLogo() {
-	return getImage()?.logo;
-}
-
-export function getImageSupportUrl() {
-	return getImage()?.supportUrl;
-}
-
 /**
  * @summary Check if there is a selected drive
  */

lib/gui/app/models/settings.ts

@@ -38,12 +38,12 @@ export const DEFAULT_HEIGHT = 480;
  * - `~/Library/Application Support/etcher` on macOS
  * See https://electronjs.org/docs/api/app#appgetpathname
  *
- * NOTE: The ternary is due to this module being loaded both,
+ * NOTE: We use the remote property when this module
- * Electron's main process and renderer process
+ * is loaded in the Electron's renderer process
  */
-const USER_DATA_DIR = electron.app
+const app = electron.app || electron.remote.app;
-	? electron.app.getPath('userData')
+
-	: electron.remote.app.getPath('userData');
+const USER_DATA_DIR = app.getPath('userData');
 
 const CONFIG_PATH = join(USER_DATA_DIR, 'config.json');
 

lib/gui/app/modules/image-writer.ts

@@ -334,7 +334,7 @@ export async function cancel(type: string) {
 	const status = type.toLowerCase();
 	const drives = selectionState.getSelectedDevices();
 	const analyticsData = {
-		image: selectionState.getImagePath(),
+		image: selectionState.getImage()?.path,
 		drives,
 		driveCount: drives.length,
 		uuid: flashState.getFlashUuid(),

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

@@ -132,12 +132,13 @@ export class MainPage extends React.Component<
 	}
 
 	private stateHelper(): MainPageStateFromStore {
+		const image = selectionState.getImage();
 		return {
 			isFlashing: flashState.isFlashing(),
 			hasImage: selectionState.hasImage(),
 			hasDrive: selectionState.hasDrive(),
-			imageLogo: selectionState.getImageLogo(),
+			imageLogo: image?.logo,
-			imageSize: selectionState.getImageSize(),
+			imageSize: image?.size,
 			imageName: getImageBasename(selectionState.getImage()),
 			driveTitle: getDrivesTitle(),
 			driveLabel: getDriveListLabel(),
@@ -310,7 +311,7 @@ export class MainPage extends React.Component<
 								icon={<QuestionCircleSvg height="1em" fill="currentColor" />}
 								onClick={() =>
 									openExternal(
-										selectionState.getImageSupportUrl() ||
+										selectionState.getImage()?.supportUrl ||
 											'https://github.com/balena-io/etcher/blob/master/SUPPORT.md',
 									)
 								}

tests/gui/models/selection-state.spec.ts

@@ -33,26 +33,6 @@ describe('Model: selectionState', function () {
 			expect(selectionState.getImage()).to.be.undefined;
 		});
 
-		it('getImagePath() should return undefined', function () {
-			expect(selectionState.getImagePath()).to.be.undefined;
-		});
-
-		it('getImageSize() should return undefined', function () {
-			expect(selectionState.getImageSize()).to.be.undefined;
-		});
-
-		it('getImageName() should return undefined', function () {
-			expect(selectionState.getImageName()).to.be.undefined;
-		});
-
-		it('getImageLogo() should return undefined', function () {
-			expect(selectionState.getImageLogo()).to.be.undefined;
-		});
-
-		it('getImageSupportUrl() should return undefined', function () {
-			expect(selectionState.getImageSupportUrl()).to.be.undefined;
-		});
-
 		it('hasDrive() should return false', function () {
 			const hasDrive = selectionState.hasDrive();
 			expect(hasDrive).to.be.false;
@@ -379,43 +359,6 @@ describe('Model: selectionState', function () {
 			});
 		});
 
-		describe('.getImagePath()', function () {
-			it('should return the image path', function () {
-				const imagePath = selectionState.getImagePath();
-				expect(imagePath).to.equal('foo.img');
-			});
-		});
-
-		describe('.getImageSize()', function () {
-			it('should return the image size', function () {
-				const imageSize = selectionState.getImageSize();
-				expect(imageSize).to.equal(999999999);
-			});
-		});
-
-		describe('.getImageName()', function () {
-			it('should return the image name', function () {
-				const imageName = selectionState.getImageName();
-				expect(imageName).to.equal('Raspbian');
-			});
-		});
-
-		describe('.getImageLogo()', function () {
-			it('should return the image logo', function () {
-				const imageLogo = selectionState.getImageLogo();
-				expect(imageLogo).to.equal(
-					'<svg><text fill="red">Raspbian</text></svg>',
-				);
-			});
-		});
-
-		describe('.getImageSupportUrl()', function () {
-			it('should return the image support url', function () {
-				const imageSupportUrl = selectionState.getImageSupportUrl();
-				expect(imageSupportUrl).to.equal('https://www.raspbian.org/forums/');
-			});
-		});
-
 		describe('.hasImage()', function () {
 			it('should return true', function () {
 				const hasImage = selectionState.hasImage();
@@ -435,9 +378,9 @@ describe('Model: selectionState', function () {
 					SourceType: File,
 				});
 
-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.equal('bar.img');
-				const imageSize = selectionState.getImageSize();
+				const imageSize = selectionState.getImage()?.size;
 				expect(imageSize).to.equal(999999999);
 			});
 		});
@@ -446,9 +389,9 @@ describe('Model: selectionState', function () {
 			it('should clear the image', function () {
 				selectionState.deselectImage();
 
-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.be.undefined;
-				const imageSize = selectionState.getImageSize();
+				const imageSize = selectionState.getImage()?.size;
 				expect(imageSize).to.be.undefined;
 			});
 		});
@@ -472,9 +415,9 @@ describe('Model: selectionState', function () {
 			it('should be able to set an image', function () {
 				selectionState.selectSource(image);
 
-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.equal('foo.img');
-				const imageSize = selectionState.getImageSize();
+				const imageSize = selectionState.getImage()?.size;
 				expect(imageSize).to.equal(999999999);
 			});
 
@@ -485,7 +428,7 @@ describe('Model: selectionState', function () {
 					archiveExtension: 'zip',
 				});
 
-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.equal('foo.zip');
 			});
 
@@ -496,7 +439,7 @@ describe('Model: selectionState', function () {
 					archiveExtension: 'xz',
 				});
 
-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.equal('foo.xz');
 			});
 
@@ -507,7 +450,7 @@ describe('Model: selectionState', function () {
 					archiveExtension: 'gz',
 				});
 
-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.equal('something.linux-x86-64.gz');
 			});
 
@@ -675,12 +618,12 @@ describe('Model: selectionState', function () {
 			});
 
 			it('getImagePath() should return undefined', function () {
-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.be.undefined;
 			});
 
 			it('getImageSize() should return undefined', function () {
-				const imageSize = selectionState.getImageSize();
+				const imageSize = selectionState.getImage()?.size;
 				expect(imageSize).to.be.undefined;
 			});
 
@@ -700,12 +643,12 @@ describe('Model: selectionState', function () {
 			});
 
 			it('getImagePath() should return the image path', function () {
-				const imagePath = selectionState.getImagePath();
+				const imagePath = selectionState.getImage()?.path;
 				expect(imagePath).to.equal('foo.img');
 			});
 
 			it('getImageSize() should return the image size', function () {
-				const imageSize = selectionState.getImageSize();
+				const imageSize = selectionState.getImage()?.size;
 				expect(imageSize).to.equal(999999999);
 			});