Refactor nitpicks in app-js (#1052)

* chore: nitpicks

* remove console.logs

packages/app-js/src/ActionButtons.tsx

@@ -13,10 +13,10 @@ import translate from './translate';
 type Props = BareProps & I18nProps & {
   isCustomExample: boolean,
   isRunning: boolean,
-  saveSnippet: (snippetName: string) => void,
   generateLink: () => void,
   removeSnippet: () => void,
   runJs: () => void,
+  saveSnippet: (snippetName: string) => void,
   snippetName?: string,
   stopJs: () => void
 };
@@ -36,25 +36,25 @@ class ActionButtons extends React.PureComponent<Props, State> {
 
   render () {
     const {
-      props: { isCustomExample, isRunning,removeSnippet, runJs, stopJs, t },
-      state: { isOpen, snippetName }
+      props: { isCustomExample, isRunning, removeSnippet, runJs, stopJs, t },
+      state: { isOpen, shareText, snippetName }
      } = this;
 
     return (
       <div className='action-button'>
-          <Popup
-            content={this.state.shareText}
-            on='hover'
-            onClose={this.onShareClose}
-            trigger={
-              <SUIB
-                circular
-                icon='share alternate'
-                onClick={this.generateLink}
-              />
-            }
-            wide={'very'}
-          />
+        <Popup
+          content={shareText}
+          on='hover'
+          onClose={this.onShareClose}
+          trigger={
+            <SUIB
+              circular
+              icon='share alternate'
+              onClick={this.generateLink}
+            />
+          }
+          wide='very'
+        />
         {
         // FIXME: The <Popup /> event trigger on='hover' does not work together with the ui-app'
         // <Button /> component. That's why the original Semantic UI component is being used here.
@@ -66,8 +66,8 @@ class ActionButtons extends React.PureComponent<Props, State> {
             trigger={
               <SUIB
                 circular
-                negative
                 icon='trash alternate outline'
+                negative
                 onClick={removeSnippet}
               />
             }
@@ -76,8 +76,9 @@ class ActionButtons extends React.PureComponent<Props, State> {
         { !(isCustomExample) &&
           <Popup
             className='popup-local'
-            open={isOpen}
+            on='click'
             onClose={this.onPopupClose}
+            open={isOpen}
             trigger={
               <SUIB
                 circular
@@ -85,38 +86,37 @@ class ActionButtons extends React.PureComponent<Props, State> {
                 icon='save'
               />
             }
-            on='click'
           >
             <Input
               autoFocus={true}
-              onChange={this.onChangeName}
               onBlur={this.onPopupClose}
-              withLabel={false}
+              onChange={this.onChangeName}
               maxLength={50}
               min={1}
               placeholder={t('Name your example')}
               value={snippetName}
+              withLabel={false}
             />
             <Button
-              onClick={this.saveSnippet}
-              label={t('Save snippet to local storage')}
               isDisabled={!snippetName.length}
               isPositive
+              label={t('Save snippet to local storage')}
+              onClick={this.saveSnippet}
             />
           </Popup>
         }
 
         <Button
+          icon='play'
           isCircular
           isPositive
-          icon='play'
           onClick={runJs}
         />
         <Button
+          icon='close'
           isCircular
           isDisabled={!isRunning}
           isNegative
-          icon='close'
           onClick={stopJs}
         />
       </div>

packages/app-js/src/Playground.tsx

@@ -69,6 +69,7 @@ class Playground extends React.PureComponent<Props, State> {
 
   constructor (props: Props) {
     super(props);
+
     this.snippets.forEach(snippet => snippet.code = `${makeWrapper(this.props.isDevelopment)}${snippet.code}`);
 
     this.state = {
@@ -122,10 +123,10 @@ class Playground extends React.PureComponent<Props, State> {
         <header className='container'>
           <Dropdown
             className='js--Dropdown'
+            defaultValue={selected.value}
             onChange={this.selectExample}
             options={options}
             label={t('Select example')}
-            defaultValue={selected.value}
           />
         </header>
         <section className='js--Content'>
@@ -136,9 +137,9 @@ class Playground extends React.PureComponent<Props, State> {
                 onEdit={this.onEdit}
               />
               <ActionButtons
+                generateLink={this.generateLink}
                 isCustomExample={isCustomExample}
                 isRunning={isRunning}
-                generateLink={this.generateLink}
                 removeSnippet={this.removeSnippet}
                 runJs={this.runJs}
                 saveSnippet={this.saveSnippet}
@@ -150,9 +151,9 @@ class Playground extends React.PureComponent<Props, State> {
           <Output logs={logs}>
             <Button
               className='action-button'
+              icon='erase'
               isCircular
               isNegative
-              icon='erase'
               onClick={this.clearConsole}
             />
           </Output>
@@ -223,15 +224,15 @@ class Playground extends React.PureComponent<Props, State> {
   }
 
   private saveSnippet = (snippetName: string): void => {
-    const { customExamples, sharedExample, selected: { code, type } } = this.state;
+    const { customExamples, selected: { code, type }, sharedExample } = this.state;
 
     // The <Dropdown> component doesn't take boolean custom props and no
     // camelCase keys, that's why 'custom' is passed as a string here
     const snapshot: Snippet = {
       code,
-      type: 'custom',
       label: CUSTOM_LABEL,
       text: snippetName,
+      type: 'custom',
       value: `custom-${Date.now()}`
     };
     const nextOptions = [snapshot, ...customExamples, ...this.snippets];
@@ -248,8 +249,8 @@ class Playground extends React.PureComponent<Props, State> {
       customExamples: [snapshot, ...prevState.customExamples],
       isCustomExample: true,
       options,
-      sharedExample: type === 'shared' ? undefined : prevState.sharedExample,
-      selected: snapshot
+      selected: snapshot,
+      sharedExample: type === 'shared' ? undefined : prevState.sharedExample
     }) as State);
   }
 

packages/ui-app/src/Editor/index.tsx

@@ -70,8 +70,8 @@ export default class Editor extends React.Component<Props> {
 
     return (
       <div
-        id={this.id}
         className={classes('ui-app-editor', className, isValid === false ? 'invalid' : '')}
+        id={this.id}
       />
     );
   }