style: more eslint/prettier for pages components

* Use newer Fragment syntax * Remove unnecessary else statement * Use backtick strings for concatenating strings * Remove unnecessary space * Remove unused imports and variable declarations * Bunch render methods together as last in the order list
MaybeThisIsRu · Jun 8, 2021 · 4aecdee · 4aecdee
1 parent 14f3f3c
commit 4aecdee
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 24 deletions.
diff --git a/assets/js/dashboard/stats/pages/entry-pages.js b/assets/js/dashboard/stats/pages/entry-pages.js
@@ -42,9 +42,9 @@ export default class EntryPages extends React.Component {
       <div className="flex items-center justify-between my-1 text-sm" key={page.name}>
         <div className="w-full h-8 truncate" style={{maxWidth: 'calc(100% - 4rem)'}}>
           <Bar count={page.count} all={this.state.pages} bg="bg-orange-50 dark:bg-gray-500 dark:bg-opacity-15" />
-          <span className="flex px-2 group dark:text-gray-300" style={{marginTop: '-26px'}} >
+          <span className="flex px-2 group dark:text-gray-300" style={{marginTop: '-26px'}}>
             <Link to={{pathname: window.location.pathname, search: query.toString()}} className="block hover:underline">{page.name}</Link>
-            <a target="_blank" href={'http://' + this.props.site.domain + page.name} className="hidden group-hover:block">
+            <a target="_blank" href={`http://${  this.props.site.domain  }${page.name}`} className="hidden group-hover:block">
               <svg className="inline w-4 h-4 ml-1 -mt-1 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg>
             </a>
           </span>
@@ -57,7 +57,7 @@ export default class EntryPages extends React.Component {
   renderList() {
     if (this.state.pages && this.state.pages.length > 0) {
       return (
-        <React.Fragment>
+        <>
           <div className="flex items-center justify-between mt-3 mb-2 text-xs font-bold tracking-wide text-gray-500 dark:text-gray-400">
             <span>Page url</span>
             <span>Unique Entrances</span>
@@ -66,11 +66,16 @@ export default class EntryPages extends React.Component {
           <FlipMove>
             { this.state.pages.map(this.renderPage.bind(this)) }
           </FlipMove>
-        </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() {

diff --git a/assets/js/dashboard/stats/pages/index.js b/assets/js/dashboard/stats/pages/index.js
@@ -1,11 +1,9 @@
 import React from 'react';
-import { Link } from 'react-router-dom'
 
 import * as storage from '../../storage'
 import Visits from './pages'
 import EntryPages from './entry-pages'
 import ExitPages from './exit-pages'
-import FadeIn from '../../fade-in'
 
 const labelFor = {
 	'pages': 'Top Pages',
@@ -16,42 +14,57 @@ const labelFor = {
 export default class Pages extends React.Component {
   constructor(props) {
     super(props)
-    this.tabKey = 'pageTab__' + props.site.domain
+    this.tabKey = `pageTab__${  props.site.domain}`
     const storedTab = storage.getItem(this.tabKey)
     this.state = {
       mode: storedTab || 'pages'
     }
   }
 
-  renderContent() {
-    if (this.state.mode === 'pages') {
-      return <Visits site={this.props.site} query={this.props.query} timer={this.props.timer} />
-    } else if (this.state.mode === 'entry-pages') {
-      return <EntryPages site={this.props.site} query={this.props.query} timer={this.props.timer} />
-    } else if (this.state.mode === 'exit-pages') {
-      return <ExitPages 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 "entry-pages":
+      return <EntryPages site={this.props.site} query={this.props.query} timer={this.props.timer} />
+    case "exit-pages":
+      return <ExitPages site={this.props.site} query={this.props.query} timer={this.props.timer} />
+    case "pages":
+    default:
+      return <Visits 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 text-indigo-700 dark:text-indigo-500 font-bold border-b-2 border-indigo-700 dark:border-indigo-500">{name}</li>
-    } else {
-      return <li className="hover:text-indigo-600 cursor-pointer" onClick={this.setMode(mode)}>{name}</li>
+      return (
+        <li
+          className="inline-block h-5 text-indigo-700 dark:text-indigo-500 font-bold border-b-2 border-indigo-700 dark:border-indigo-500"
+        >
+          {name}
+        </li>
+      )
     }
+
+    return (
+      <li
+        className="hover:text-indigo-600 cursor-pointer"
+        onClick={this.setMode(mode)}
+      >
+        {name}
+      </li>
+    )
   }
 
   render() {
-		const filters = this.props.query.filters
     return (
       <div className="stats-item">
         <div className="bg-white dark:bg-gray-825 shadow-xl rounded p-4 relative" style={{height: '436px'}}>