Refactor import statements and improve code formatting in ModernPromotedLinks components

src/declarations.d.ts

@@ -1,4 +1,4 @@
 declare module '*.module.scss' {
   const styles: { [className: string]: string };
-  export = styles;
+  export default styles;
 }

src/webparts/modernPromotedLinks/ModernPromotedLinksWebPart.ts

@@ -15,7 +15,7 @@ import { PromotedLinksDataService } from './PromotedLinksDataService';
 import { IPromotedLinkItem, IPromotedLinksListOption } from './PromotedLinkTypes';
 import ModernPromotedLinks from './components/ModernPromotedLinks';
 import { IModernPromotedLinksProps } from './components/IModernPromotedLinksProps';
-import styles = require('./components/ModernPromotedLinks.module.scss');
+import styles from './components/ModernPromotedLinks.module.scss';
 
 export interface IModernPromotedLinksWebPartProps {
   listId: string;
@@ -31,11 +31,6 @@ export default class ModernPromotedLinksWebPart extends BaseClientSideWebPart<IM
   private requestVersion: number = 0;
   private disposed: boolean = false;
 
-  protected onInit(): Promise<void> {
-    this.service = new PromotedLinksDataService(this.context);
-    return super.onInit().then((): Promise<void> => this.loadLists());
-  }
-
   public render(): void {
     const version: number = ++this.requestVersion;
     if (!this.properties.listId) { this.renderStatus(strings.ConfigureMessage, false); return; }
@@ -58,6 +53,11 @@ export default class ModernPromotedLinksWebPart extends BaseClientSideWebPart<IM
     });
   }
 
+  protected onInit(): Promise<void> {
+    this.service = new PromotedLinksDataService(this.context);
+    return super.onInit().then((): Promise<void> => this.loadLists());
+  }
+
   protected onDispose(): void {
     this.disposed = true;
     this.requestVersion++;

src/webparts/modernPromotedLinks/PromotedLinksDataService.ts

@@ -34,7 +34,9 @@ export class PromotedLinksDataService {
   }
 
   private get webUrl(): string { return this.context.pageContext.web.absoluteUrl.replace(/\/$/, ''); }
-  private get headers(): any { return { 'Accept': 'application/json;odata=verbose', 'OData-Version': '3.0' }; } // tslint:disable-line:no-any
+  private get headers(): any { // tslint:disable-line:no-any
+    return { 'Accept': 'application/json;odata=verbose', 'OData-Version': '3.0' };
+  }
 
   private getJson(url: string): Promise<any> { // tslint:disable-line:no-any
     return this.context.spHttpClient.get(url, SPHttpClient.configurations.v1, { headers: this.headers })

src/webparts/modernPromotedLinks/components/ModernPromotedLinks.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { isDialogLaunch, isNewTabLaunch } from '../PromotedLinkCore';
 import { IPromotedLinkItem } from '../PromotedLinkTypes';
-import styles = require('./ModernPromotedLinks.module.scss');
+import styles from './ModernPromotedLinks.module.scss';
 import { IModernPromotedLinksProps } from './IModernPromotedLinksProps';
 
 export default class ModernPromotedLinks extends React.Component<IModernPromotedLinksProps, {}> {
@@ -19,17 +19,21 @@ export default class ModernPromotedLinks extends React.Component<IModernPromoted
   private renderTile(item: IPromotedLinkItem): JSX.Element {
     const newTab: boolean = isNewTabLaunch(item.launchBehavior);
     const dialog: boolean = isDialogLaunch(item.launchBehavior);
-    const imageStyle: React.CSSProperties = item.imageUrl ? { backgroundImage: 'url("' + this.cssUrl(item.imageUrl) + '")' } : {};
+    const imageStyle: React.CSSProperties = item.imageUrl ? {
+      backgroundImage: 'url("' + this.cssUrl(item.imageUrl) + '")'
+    } : {};
     const label: string = item.description ? item.title + '. ' + item.description : item.title;
     return (
       <li key={item.id} className={styles.tile} style={{ height: this.props.tileHeight + 'px' }}>
         <a className={styles.link} href={item.linkUrl} style={imageStyle} aria-label={label}
           target={newTab ? '_blank' : undefined} rel={newTab ? 'noopener noreferrer' : undefined}
-          onClick={dialog ? (event: React.MouseEvent<HTMLAnchorElement>): void => this.openDialog(event, item) : undefined}>
+          onClick={dialog ? (event: React.MouseEvent<HTMLAnchorElement>): void =>
+            this.openDialog(event, item) : undefined}>
           {!item.imageUrl && <span className={styles.fallbackIcon} aria-hidden='true'>&#8599;</span>}
           <span className={styles.overlay}>
             <span className={styles.title}>{item.title || item.linkUrl}</span>
-            {this.props.showDescriptions && item.description && <span className={styles.description}>{item.description}</span>}
+            {this.props.showDescriptions && item.description &&
+              <span className={styles.description}>{item.description}</span>}
           </span>
         </a>
       </li>
@@ -42,7 +46,7 @@ export default class ModernPromotedLinks extends React.Component<IModernPromoted
     const height: number = Math.min(800, Math.max(480, window.innerHeight - 80));
     const child: Window = window.open(item.linkUrl, this.props.dialogWindowLabel + item.id,
       'width=' + width + ',height=' + height + ',resizable=yes,scrollbars=yes') as Window;
-    if (child) { child.opener = null; }
+    if (child) { child.opener = undefined; }
   }
 
   private cssUrl(value: string): string {