style: devices components

* Move render methods to the last (together) in the order list
* Remove unused component import
* React lifecycle to come first before our own methods
* General styling and eslint changes
* Cleaner renderContent method using switch/case (fixes an eslint error as well!)
* Cleaner renderPill method with proper spacing + removing uncessary else

assets/js/dashboard/stats/devices/index.js

@@ -8,7 +8,6 @@ import OperatingSystems from './operating-systems'
 import FadeIn from '../../fade-in'
 import numberFormatter from '../../number-formatter'
 import Bar from '../bar'
-import MoreLink from '../more-link'
 import * as api from '../../api'
 
 
@@ -46,46 +45,63 @@ class ScreenSizes extends React.Component {
     this.onVisible = this.onVisible.bind(this)
   }
 
-  onVisible() {
-    this.fetchScreenSizes()
-    if (this.props.timer) this.props.timer.onTick(this.fetchScreenSizes.bind(this))
-  }
-
   componentDidUpdate(prevProps) {
     if (this.props.query !== prevProps.query) {
       this.setState({loading: true, sizes: null})
       this.fetchScreenSizes()
     }
   }
 
+  onVisible() {
+    this.fetchScreenSizes()
+    if (this.props.timer) this.props.timer.onTick(this.fetchScreenSizes.bind(this))
+  }
+
+
   fetchScreenSizes() {
-    api.get(`/api/stats/${encodeURIComponent(this.props.site.domain)}/screen-sizes`, this.props.query)
+    api.get(
+      `/api/stats/${encodeURIComponent(this.props.site.domain)}/screen-sizes`,
+      this.props.query
+    )
       .then((res) => this.setState({loading: false, sizes: res}))
   }
 
+  label() {
+    return this.props.query.period === 'realtime' ? 'Current visitors' : 'Visitors'
+  }
+
   renderScreenSize(size) {
     const query = new URLSearchParams(window.location.search)
     query.set('screen', size.name)
 
     return (
       <div className="flex items-center justify-between my-1 text-sm" key={size.name}>
         <div className="w-full h-8" style={{maxWidth: 'calc(100% - 6rem)'}}>
-          <Bar count={size.count} all={this.state.sizes} bg="bg-green-50 dark:bg-gray-500 dark:bg-opacity-15" />
-          <span tooltip={EXPLANATION[size.name]} className="flex px-2 dark:text-gray-300" style={{marginTop: '-26px'}} >
+          <Bar
+            count={size.count}
+            all={this.state.sizes}
+            bg="bg-green-50 dark:bg-gray-500 dark:bg-opacity-15"
+          />
+          <span
+            tooltip={EXPLANATION[size.name]}
+            className="flex px-2 dark:text-gray-300"
+            style={{marginTop: '-26px'}}
+          >
             <Link className="block truncate hover:underline" to={{search: query.toString()}}>
               {iconFor(size.name)} {size.name}
             </Link>
           </span>
         </div>
-        <span className="font-medium dark:text-gray-200">{numberFormatter(size.count)} <span className="inline-block w-8 text-xs text-right">({size.percentage}%)</span></span>
+        <span
+          className="font-medium dark:text-gray-200"
+        >
+          {numberFormatter(size.count)}
+          <span className="inline-block w-8 text-xs text-right">({size.percentage}%)</span>
+        </span>
       </div>
     )
   }
 
-  label() {
-    return this.props.query.period === 'realtime' ? 'Current visitors' : 'Visitors'
-  }
-
   renderList() {
     if (this.state.sizes && this.state.sizes.length > 0) {
       return (
@@ -97,9 +113,14 @@ class ScreenSizes extends React.Component {
           { this.state.sizes && this.state.sizes.map(this.renderScreenSize.bind(this)) }
         </React.Fragment>
       )
-    } else {
-      return <div className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400">No data yet</div>
     }
+    return (
+      <div
+        className="font-medium text-center text-gray-500 mt-44 dark:text-gray-400"
+      >
+        No data yet
+      </div>
+    )
   }
 
   render() {
@@ -117,38 +138,66 @@ class ScreenSizes extends React.Component {
 export default class Devices extends React.Component {
   constructor(props) {
     super(props)
-    this.tabKey = 'deviceTab__' + props.site.domain
+    this.tabKey = `deviceTab__${  props.site.domain}`
     const storedTab = storage.getItem(this.tabKey)
     this.state = {
       mode: storedTab || 'size'
     }
   }
 
-  renderContent() {
-    if (this.state.mode === 'size') {
-      return <ScreenSizes site={this.props.site} query={this.props.query} timer={this.props.timer} />
-    } else if (this.state.mode === 'browser') {
-      return <Browsers site={this.props.site} query={this.props.query} timer={this.props.timer} />
-    } else if (this.state.mode === 'os') {
-      return <OperatingSystems site={this.props.site} query={this.props.query} timer={this.props.timer} />
-    }
-  }
-
+
   setMode(mode) {
     return () => {
       storage.setItem(this.tabKey, mode)
       this.setState({mode})
     }
   }
+
+  renderContent() {
+    switch (this.state.mode) {
+      case 'browser':
+        return <Browsers site={this.props.site} query={this.props.query} timer={this.props.timer} />
+      case 'os':
+        return (
+          <OperatingSystems
+            site={this.props.site}
+            query={this.props.query}
+            timer={this.props.timer}
+          />
+        )
+      case 'size':
+      default:
+        return (
+          <ScreenSizes
+            site={this.props.site}
+            query={this.props.query}
+            timer={this.props.timer}
+          />
+        )
+    }
+  }
 
   renderPill(name, mode) {
     const isActive = this.state.mode === mode
 
     if (isActive) {
-      return <li className="inline-block h-5 font-bold text-indigo-700 border-b-2 border-indigo-700 dark:text-indigo-500 dark:border-indigo-500">{name}</li>
-    } else {
-      return <li className="cursor-pointer hover:text-indigo-600" onClick={this.setMode(mode)}>{name}</li>
+      return (
+        <li
+          className="inline-block h-5 font-bold text-indigo-700 border-b-2 border-indigo-700 dark:text-indigo-500 dark:border-indigo-500"
+        >
+          {name}
+        </li>
+      )
     }
+
+    return (
+      <li
+        className="cursor-pointer hover:text-indigo-600"
+        onClick={this.setMode(mode)}
+      >
+        {name}
+      </li>
+    )
   }
 
   render() {
@@ -158,16 +207,13 @@ export default class Devices extends React.Component {
 
           <div className="flex justify-between w-full">
             <h3 className="font-bold dark:text-gray-100">Devices</h3>
-
             <ul className="flex text-xs font-medium text-gray-500 dark:text-gray-400 space-x-2">
               { this.renderPill('Size', 'size') }
               { this.renderPill('Browser', 'browser') }
               { this.renderPill('OS', 'os') }
             </ul>
           </div>
-
           { this.renderContent() }
-
         </div>
       </div>
     )