updated format and lint scripts and applied them

pages/index.js

@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux'; 
-import Router from 'next/router'; 
-import Paginate from 'react-paginate'; 
-import Page from '../comps/Page'; 
-import PaddedRow from '../comps/PaddedRow';  
-import Spinner from '../comps/Spinner';
-import DocItem from '../comps/DocItem'; 
-import { $limit, getDocs, buildQ } from '../util/getDocs'; 
-import getJwt from '../util/getJwt'; 
-import mapUser from '../util/mapUser'; 
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import Router from 'next/router'
+import Paginate from 'react-paginate'
+import Page from '../comps/Page'
+import PaddedRow from '../comps/PaddedRow'
+import Spinner from '../comps/Spinner'
+import DocItem from '../comps/DocItem'
+import { $limit, getDocs, buildQ } from '../util/getDocs'
+import getJwt from '../util/getJwt'
+import mapUser from '../util/mapUser'
 
 class Index extends Component {
   state = {
@@ -18,95 +18,104 @@ class Index extends Component {
     pending: false,
     error: null,
     total: 0,
-    docs: []
+    docs: [],
   }
   static async getInitialProps({ req, query }) {
-    let page = 1, $search = ''; 
-    if(query) {
-      page = query.page || page;
-      $search = query.search || $search;  
+    let page = 1,
+      $search = ''
+    if (query) {
+      page = query.page || page
+      $search = query.search || $search
     }
-    const jwt = getJwt(req); 
-    if(!jwt) return { total: 0, docs: [] }; 
-    const q = buildQ({ $search, $skip: page }); 
-    const data = await getDocs(q, req ? jwt : false); 
-    return { ...data, page, $search }; 
+    const jwt = getJwt(req)
+    if (!jwt) return { total: 0, docs: [] }
+    const q = buildQ({ $search, $skip: page })
+    const data = await getDocs(q, req ? jwt : false)
+    return { ...data, page, $search }
   }
   updDocs = (time, doSearch) => {
-    clearTimeout(this.docsTime); 
+    clearTimeout(this.docsTime)
     this.docsTime = setTimeout(async () => {
-      let { $sort, $search, page } = this.state; 
-      if(doSearch) {
-        const query = { search: $search }; 
-        if(!$search) delete query.search; 
-        Router.push({ pathname: '/', query });
+      let { $sort, $search, page } = this.state
+      if (doSearch) {
+        const query = { search: $search }
+        if (!$search) delete query.search
+        Router.push({ pathname: '/', query })
       }
-      this.setState({ error: null }); 
+      this.setState({ error: null })
       this.docsTime = setTimeout(() => {
-        this.setState({ pending: true }); 
-      }, 125);
-    
-      const q = buildQ({ $search, $sort, $skip: page });
-      const data = await getDocs(q); 
-      clearTimeout(this.docsTime);  
-      this.setState({ ...data, pending: false });
-    }, time || 275);
+        this.setState({ pending: true })
+      }, 125)
+
+      const q = buildQ({ $search, $sort, $skip: page })
+      const data = await getDocs(q)
+      clearTimeout(this.docsTime)
+      this.setState({ ...data, pending: false })
+    }, time || 275)
   }
   updQuery = e => {
-    this.setState({ [e.target.id]: e.target.value }); 
-    this.updDocs(0, e.target.id === '$search'); 
+    this.setState({ [e.target.id]: e.target.value })
+    this.updDocs(0, e.target.id === '$search')
   }
   handlePage = ({ selected }) => {
-    const { $search } = this.state; 
-    const page = selected + 1;
-    const query = {};
-    this.setState({ page }); 
-    if(page > 1) query.page = page; 
-    if($search) query.search = $search; 
-    Router.push({ pathname: '/', query }); 
-    this.updDocs(1); 
+    const { $search } = this.state
+    const page = selected + 1
+    const query = {}
+    this.setState({ page })
+    if (page > 1) query.page = page
+    if ($search) query.search = $search
+    Router.push({ pathname: '/', query })
+    this.updDocs(1)
   }
   static getDerivedStateFromProps(nextProps, prevState) {
-    let { docs, total, page, $search } = nextProps; 
-    if(docs.length !== prevState.docs.length || 
-       page !== prevState.page || $search !== prevState.$search) {
-      return { total, docs, page, $search, pending: false }; 
+    let { docs, total, page, $search } = nextProps
+    if (
+      docs.length !== prevState.docs.length ||
+      page !== prevState.page ||
+      $search !== prevState.$search
+    ) {
+      return { total, docs, page, $search, pending: false }
     }
-    return null; 
+    return null
   }
   componentDidUpdate(prevProps) {
-    const { user, docs } = this.props;
-    if(prevProps.user.email === user.email) return; 
-    if(user.email && docs.length === 0) this.updDocs(1); 
+    const { user, docs } = this.props
+    if (prevProps.user.email === user.email) return
+    if (user.email && docs.length === 0) this.updDocs(1)
   }
   render() {
-    const { 
-      $sort, $search, pending, 
-      error, docs, total, page 
-    } = this.state; 
-    const pages = Math.ceil(total / $limit); 
+    const { $sort, $search, pending, error, docs, total, page } = this.state
+    const pages = Math.ceil(total / $limit)
     return (
       <Page>
         <PaddedRow>
-          <input type='text' placeholder='Search knowledge base...' 
-            maxLength={128} value={$search} className='search'
-            id='$search' onChange={this.updQuery}
+          <input
+            type="text"
+            placeholder="Search knowledge base..."
+            maxLength={128}
+            value={$search}
+            className="search"
+            id="$search"
+            onChange={this.updQuery}
           />
         </PaddedRow>
         <PaddedRow>
-          <div className='inline' style={{ width: '100%' }}>
-            <h4 className='noMargin'>Docs</h4>
-            <div className='float-right inline'>
-              <label htmlFor='sort'>Sort: </label>
-              <select id='$sort' value={$sort} 
-                onChange={this.updQuery} style={{ width: 150 }}
+          <div className="inline" style={{ width: '100%' }}>
+            <h4 className="noMargin">Docs</h4>
+            <div className="float-right inline">
+              <label htmlFor="sort">Sort: </label>
+              <select
+                id="$sort"
+                value={$sort}
+                onChange={this.updQuery}
+                style={{ width: 150 }}
               >
-                <option value='updated:-1'>{'Updated (new -> old)'}</option>
-                <option value='updated:1'>{'Updated (old -> new)'}</option>
-                <option value='created:-1'>{'Created (new -> old)'}</option>
-                <option value='created:1'>{'Created (old -> new)'}</option>
-                <option value='dirName:1'>{'Name (A -> Z)'}</option>
-                <option value='dirName:-1'>{'Name (Z -> A)'}</option>
+                <option value="updated:-1">{'Updated (new -> old)'}</option>
+                <option value="updated:1">{'Updated (old -> new)'}</option>
+                <option value="created:-1">{'Created (new -> old)'}</option>
+                <option value="created:1">{'Created (old -> new)'}</option>
+                <option value="dirName:1">{'Name (A -> Z)'}</option>
+                <option value="dirName:-1">{'Name (Z -> A)'}</option>
               </select>
             </div>
           </div>
@@ -114,32 +123,37 @@ class Index extends Component {
         <PaddedRow>
           {docs.length > 0 || error || pending ? null : <p>No docs found...</p>}
           {!error ? null : <p>{error}</p>}
-          {!pending || error ? null : <Spinner style={{ margin: '25px auto 0' }} />}
-          {docs.length < 1 || pending || error ? null
-            : <div>
+          {!pending || error ? null : (
+            <Spinner style={{ margin: '25px auto 0' }} />
+          )}
+          {docs.length < 1 || pending || error ? null : (
+            <div>
               <table>
                 <thead>
-                  <tr><th>
-                    Doc <span className='float-right'>Modified</span>
-                  </th></tr>
+                  <tr>
+                    <th>
+                      Doc <span className="float-right">Modified</span>
+                    </th>
+                  </tr>
                 </thead>
                 <tbody>
                   {docs.map(doc => <DocItem {...doc} key={doc.id} />)}
                 </tbody>
-              </table> 
-              {pages < 2 ? null
-                : <Paginate pageCount={pages} 
-                  containerClassName='paginate' 
-                  activeClassName='active'
+              </table>
+              {pages < 2 ? null : (
+                <Paginate
+                  pageCount={pages}
+                  containerClassName="paginate"
+                  activeClassName="active"
                   onPageChange={this.handlePage}
                   forcePage={page - 1}
                 />
-              }
+              )}
             </div>
-          }
-        </PaddedRow> 
+          )}
+        </PaddedRow>
       </Page>
-    );
+    )
   }
 }
-export default connect(mapUser)(Index); 
+export default connect(mapUser)(Index)