Use eslint&prettier for code linting&formatting

arduino-ide-extension/src/browser/theia/messages/notification-center-component.tsx

@@ -1,34 +1,50 @@
 import * as React from 'react';
 import { NotificationComponent } from './notification-component';
-import { NotificationCenterComponent as TheiaNotificationCenterComponent } from '@theia/messages/lib/browser/notification-center-component'
+import { NotificationCenterComponent as TheiaNotificationCenterComponent } from '@theia/messages/lib/browser/notification-center-component';
 
 const PerfectScrollbar = require('react-perfect-scrollbar');
 
 export class NotificationCenterComponent extends TheiaNotificationCenterComponent {
-
     render(): React.ReactNode {
         const empty = this.state.notifications.length === 0;
         const title = empty ? 'NO NEW NOTIFICATIONS' : 'NOTIFICATIONS';
         return (
-            <div className={`theia-notifications-container theia-notification-center ${this.state.visibilityState === 'center' ? 'open' : 'closed'}`}>
-                <div className='theia-notification-center-header'>
-                    <div className='theia-notification-center-header-title'>{title}</div>
-                    <div className='theia-notification-center-header-actions'>
-                        <ul className='theia-notification-actions'>
-                            <li className='collapse' title='Hide Notification Center' onClick={this.onHide} />
-                            <li className='clear-all' title='Clear All' onClick={this.onClearAll} />
+            <div
+                className={`theia-notifications-container theia-notification-center ${
+                    this.state.visibilityState === 'center' ? 'open' : 'closed'
+                }`}
+            >
+                <div className="theia-notification-center-header">
+                    <div className="theia-notification-center-header-title">
+                        {title}
+                    </div>
+                    <div className="theia-notification-center-header-actions">
+                        <ul className="theia-notification-actions">
+                            <li
+                                className="collapse"
+                                title="Hide Notification Center"
+                                onClick={this.onHide}
+                            />
+                            <li
+                                className="clear-all"
+                                title="Clear All"
+                                onClick={this.onClearAll}
+                            />
                         </ul>
                     </div>
                 </div>
-                <PerfectScrollbar className='theia-notification-list-scroll-container'>
-                    <div className='theia-notification-list'>
-                        {this.state.notifications.map(notification =>
-                            <NotificationComponent key={notification.messageId} notification={notification} manager={this.props.manager} />
-                        )}
+                <PerfectScrollbar className="theia-notification-list-scroll-container">
+                    <div className="theia-notification-list">
+                        {this.state.notifications.map((notification) => (
+                            <NotificationComponent
+                                key={notification.messageId}
+                                notification={notification}
+                                manager={this.props.manager}
+                            />
+                        ))}
                     </div>
                 </PerfectScrollbar>
             </div>
         );
     }
-
 }

arduino-ide-extension/src/browser/theia/messages/notification-component.tsx

@@ -1,44 +1,80 @@
 import * as React from 'react';
-import { NotificationComponent as TheiaNotificationComponent } from '@theia/messages/lib/browser/notification-component'
+import { NotificationComponent as TheiaNotificationComponent } from '@theia/messages/lib/browser/notification-component';
 
 export class NotificationComponent extends TheiaNotificationComponent {
-
     render(): React.ReactNode {
-        const { messageId, message, type, collapsed, expandable, source, actions } = this.props.notification;
-        return (<div key={messageId} className='theia-notification-list-item'>
-            <div className={`theia-notification-list-item-content ${collapsed ? 'collapsed' : ''}`}>
-                <div className='theia-notification-list-item-content-main'>
-                    <div className={`theia-notification-icon theia-notification-icon-${type}`} />
-                    <div className='theia-notification-message'>
-                        <span dangerouslySetInnerHTML={{ __html: message }} onClick={this.onMessageClick} />
+        const {
+            messageId,
+            message,
+            type,
+            collapsed,
+            expandable,
+            source,
+            actions,
+        } = this.props.notification;
+        return (
+            <div key={messageId} className="theia-notification-list-item">
+                <div
+                    className={`theia-notification-list-item-content ${
+                        collapsed ? 'collapsed' : ''
+                    }`}
+                >
+                    <div className="theia-notification-list-item-content-main">
+                        <div
+                            className={`theia-notification-icon theia-notification-icon-${type}`}
+                        />
+                        <div className="theia-notification-message">
+                            <span
+                                dangerouslySetInnerHTML={{ __html: message }}
+                                onClick={this.onMessageClick}
+                            />
+                        </div>
+                        <ul className="theia-notification-actions">
+                            {expandable && (
+                                <li
+                                    className={
+                                        collapsed ? 'expand' : 'collapse'
+                                    }
+                                    title={collapsed ? 'Expand' : 'Collapse'}
+                                    data-message-id={messageId}
+                                    onClick={this.onToggleExpansion}
+                                />
+                            )}
+                            {!this.isProgress && (
+                                <li
+                                    className="clear"
+                                    title="Clear"
+                                    data-message-id={messageId}
+                                    onClick={this.onClear}
+                                />
+                            )}
+                        </ul>
                     </div>
-                    <ul className='theia-notification-actions'>
-                        {expandable && (
-                            <li className={collapsed ? 'expand' : 'collapse'} title={collapsed ? 'Expand' : 'Collapse'}
-                                data-message-id={messageId} onClick={this.onToggleExpansion} />
-                        )}
-                        {!this.isProgress && (<li className='clear' title='Clear' data-message-id={messageId} onClick={this.onClear} />)}
-                    </ul>
+                    {(source || !!actions.length) && (
+                        <div className="theia-notification-list-item-content-bottom">
+                            <div className="theia-notification-source">
+                                {source && <span>{source}</span>}
+                            </div>
+                            <div className="theia-notification-buttons">
+                                {actions &&
+                                    actions.map((action, index) => (
+                                        <button
+                                            key={messageId + `-action-${index}`}
+                                            className="theia-button"
+                                            data-message-id={messageId}
+                                            data-action={action}
+                                            onClick={this.onAction}
+                                        >
+                                            {action}
+                                        </button>
+                                    ))}
+                            </div>
+                        </div>
+                    )}
                 </div>
-                {(source || !!actions.length) && (
-                    <div className='theia-notification-list-item-content-bottom'>
-                        <div className='theia-notification-source'>
-                            {source && (<span>{source}</span>)}
-                        </div>
-                        <div className='theia-notification-buttons'>
-                            {actions && actions.map((action, index) => (
-                                <button key={messageId + `-action-${index}`} className='theia-button'
-                                    data-message-id={messageId} data-action={action}
-                                    onClick={this.onAction}>
-                                    {action}
-                                </button>
-                            ))}
-                        </div>
-                    </div>
-                )}
+                {this.renderProgressBar()}
             </div>
-            {this.renderProgressBar()}
-        </div>);
+        );
     }
 
     private renderProgressBar(): React.ReactNode {
@@ -46,17 +82,25 @@ export class NotificationComponent extends TheiaNotificationComponent {
             return undefined;
         }
         if (!Number.isNaN(this.props.notification.progress)) {
-            return <div className='theia-notification-item-progress'>
-                <div className='theia-notification-item-progressbar' style={{ width: `${this.props.notification.progress}%` }} />
-            </div>;
+            return (
+                <div className="theia-notification-item-progress">
+                    <div
+                        className="theia-notification-item-progressbar"
+                        style={{
+                            width: `${this.props.notification.progress}%`,
+                        }}
+                    />
+                </div>
+            );
         }
-        return <div className='theia-progress-bar-container'>
-            <div className='theia-progress-bar' />
-        </div>
+        return (
+            <div className="theia-progress-bar-container">
+                <div className="theia-progress-bar" />
+            </div>
+        );
     }
 
     private get isProgress(): boolean {
         return typeof this.props.notification.progress === 'number';
     }
-
 }

arduino-ide-extension/src/browser/theia/messages/notification-toasts-component.tsx

@@ -1,17 +1,25 @@
 import * as React from 'react';
 import { NotificationComponent } from './notification-component';
-import { NotificationToastsComponent as TheiaNotificationToastsComponent } from '@theia/messages/lib/browser/notification-toasts-component'
+import { NotificationToastsComponent as TheiaNotificationToastsComponent } from '@theia/messages/lib/browser/notification-toasts-component';
 
 export class NotificationToastsComponent extends TheiaNotificationToastsComponent {
-
     render(): React.ReactNode {
         return (
-            <div className={`theia-notifications-container theia-notification-toasts ${this.state.visibilityState === 'toasts' ? 'open' : 'closed'}`}>
-                <div className='theia-notification-list'>
-                    {this.state.toasts.map(notification => <NotificationComponent key={notification.messageId} notification={notification} manager={this.props.manager} />)}
+            <div
+                className={`theia-notifications-container theia-notification-toasts ${
+                    this.state.visibilityState === 'toasts' ? 'open' : 'closed'
+                }`}
+            >
+                <div className="theia-notification-list">
+                    {this.state.toasts.map((notification) => (
+                        <NotificationComponent
+                            key={notification.messageId}
+                            notification={notification}
+                            manager={this.props.manager}
+                        />
+                    ))}
                 </div>
             </div>
         );
     }
-
 }

arduino-ide-extension/src/browser/theia/messages/notifications-manager.ts

@@ -1,12 +1,19 @@
 import { injectable } from 'inversify';
 import { CancellationToken } from '@theia/core/lib/common/cancellation';
-import { ProgressMessage, ProgressUpdate } from '@theia/core/lib/common/message-service-protocol';
+import {
+    ProgressMessage,
+    ProgressUpdate,
+} from '@theia/core/lib/common/message-service-protocol';
 import { NotificationManager as TheiaNotificationManager } from '@theia/messages/lib/browser/notifications-manager';
 
 @injectable()
 export class NotificationManager extends TheiaNotificationManager {
-
-    async reportProgress(messageId: string, update: ProgressUpdate, originalMessage: ProgressMessage, cancellationToken: CancellationToken): Promise<void> {
+    async reportProgress(
+        messageId: string,
+        update: ProgressUpdate,
+        originalMessage: ProgressMessage,
+        cancellationToken: CancellationToken
+    ): Promise<void> {
         const notification = this.find(messageId);
         if (!notification) {
             return;
@@ -14,12 +21,19 @@ export class NotificationManager extends TheiaNotificationManager {
         if (cancellationToken.isCancellationRequested) {
             this.clear(messageId);
         } else {
-            notification.message = originalMessage.text && update.message ? `${originalMessage.text}: ${update.message}` :
-                originalMessage.text || update?.message || notification.message;
+            notification.message =
+                originalMessage.text && update.message
+                    ? `${originalMessage.text}: ${update.message}`
+                    : originalMessage.text ||
+                      update?.message ||
+                      notification.message;
 
             // Unlike in Theia, we allow resetting the progress monitor to NaN to enforce unknown progress.
             const candidate = this.toPlainProgress(update);
-            notification.progress = typeof candidate === 'number' ? candidate : notification.progress;
+            notification.progress =
+                typeof candidate === 'number'
+                    ? candidate
+                    : notification.progress;
         }
         this.fireUpdatedEvent();
     }
@@ -31,7 +45,6 @@ export class NotificationManager extends TheiaNotificationManager {
         if (Number.isNaN(update.work.done) || Number.isNaN(update.work.total)) {
             return Number.NaN; // This should trigger the unknown monitor.
         }
-        return Math.min(update.work.done / update.work.total * 100, 100);
+        return Math.min((update.work.done / update.work.total) * 100, 100);
     }
-
 }

arduino-ide-extension/src/browser/theia/messages/notifications-renderer.tsx

@@ -7,12 +7,16 @@ import { NotificationsRenderer as TheiaNotificationsRenderer } from '@theia/mess
 
 @injectable()
 export class NotificationsRenderer extends TheiaNotificationsRenderer {
-
     protected render(): void {
-        ReactDOM.render(<div>
-            <NotificationToastsComponent manager={this.manager} corePreferences={this.corePreferences} />
-            <NotificationCenterComponent manager={this.manager} />
-        </div>, this.container);
+        ReactDOM.render(
+            <div>
+                <NotificationToastsComponent
+                    manager={this.manager}
+                    corePreferences={this.corePreferences}
+                />
+                <NotificationCenterComponent manager={this.manager} />
+            </div>,
+            this.container
+        );
     }
-
 }