initial commit

pages/index.js

@@ -0,0 +1,145 @@
+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 = {
+    $sort: 'updated:-1',
+    $search: '',
+    page: 1,
+    pending: false,
+    error: null,
+    total: 0,
+    docs: []
+  }
+  static async getInitialProps({ req, query }) {
+    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 }; 
+  }
+  updDocs = (time, doSearch) => {
+    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 });
+      }
+      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);
+  }
+  updQuery = e => {
+    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); 
+  }
+  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 }; 
+    }
+    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); 
+  }
+  render() {
+    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}
+          />
+        </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 }}
+              >
+                <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>
+        </PaddedRow>
+        <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>
+              <table>
+                <thead>
+                  <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'
+                  onPageChange={this.handlePage}
+                  forcePage={page - 1}
+                />
+              }
+            </div>
+          }
+        </PaddedRow> 
+      </Page>
+    );
+  }
+}
+export default connect(mapUser)(Index);