Merge branch 'master' of github.com:jorilallo/atlas into update-slate

app/components/Actions/Actions.js

@@ -29,6 +29,10 @@ const Actions = styled(Flex)`
   border-radius: 3px;
   background: rgba(255, 255, 255, 0.9);
   -webkit-backdrop-filter: blur(20px);
+
+  @media print {
+    display: none;
+  }
 `;
 
 export default Actions;

app/components/DocumentPreview/DocumentPreview.js

@@ -98,13 +98,13 @@ class DocumentPreview extends Component {
         <h3>
           <Highlight text={document.title} highlight={highlight} />
           {document.starred ? (
-            <a onClick={this.unstar}>
+            <span onClick={this.unstar}>
               <StyledStar solid />
-            </a>
+            </span>
           ) : (
-            <a onClick={this.star}>
+            <span onClick={this.star}>
               <StyledStar />
-            </a>
+            </span>
           )}
         </h3>
         <PublishingInfo

app/components/DropdownMenu/DropdownMenu.js

@@ -96,6 +96,10 @@ const Menu = styled.div`
   overflow: hidden;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08),
     0 2px 4px rgba(0, 0, 0, 0.08);
+
+  @media print {
+    display: none;
+  }
 `;
 
 export default DropdownMenu;

app/components/Editor/Editor.js

@@ -227,6 +227,10 @@ const Header = styled(Flex)`
   flex-shrink: 0;
   align-items: flex-end;
   ${({ readOnly }) => !readOnly && 'cursor: text;'};
+
+  @media print {
+    display: none;
+  }
 `;
 
 const StyledEditor = styled(Editor)`

app/components/Editor/components/Contents.js

@@ -93,6 +93,10 @@ const Wrapper = styled.div`
   right: 0;
   top: 150px;
   z-index: 100;
+
+  @media print {
+    display: none;
+  }
 `;
 
 const Anchor = styled.a`

app/components/Editor/components/Toolbar/BlockToolbar.js

@@ -197,6 +197,10 @@ const Bar = styled(Flex)`
     left: auto;
     right: -100%;
   }
+
+  @media print {
+    display: none;
+  }
 `;
 
 const HiddenInput = styled.input`

app/components/Editor/components/Toolbar/Toolbar.js

@@ -153,4 +153,8 @@ const Menu = styled.div`
     transform: translateY(-6px) scale(1);
     opacity: 1;
   `};
+
+  @media print {
+    display: none;
+  }
 `;

app/components/ErrorBoundary/ErrorBoundary.js

@@ -5,8 +5,13 @@ import { observable } from 'mobx';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 
+type Props = {
+  children?: ?React.Element<any>,
+};
+
 @observer
 class ErrorBoundary extends Component {
+  props: Props;
   @observable error: boolean = false;
 
   componentDidCatch(error: Error, info: Object) {
@@ -27,9 +32,10 @@ class ErrorBoundary extends Component {
       return (
         <CenteredContent>
           <PageTitle title="Something went wrong" />
-          <h1>Something went wrong</h1>
+          <h1>🛸 Something unexpected happened</h1>
           <p>
-            An unrecoverable error occurred. Please try{' '}
+            An unrecoverable error occurred{window.Bugsnag ||
+              (true && ' and our engineers have been notified')}. Please try{' '}
             <a onClick={this.handleReload}>reloading</a>.
           </p>
         </CenteredContent>

app/components/Layout/Layout.js

@@ -124,6 +124,10 @@ const Container = styled(Flex)`
 const Content = styled(Flex)`
   margin-left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
   transition: margin-left 200ms ease-in-out;
+
+  @media print {
+    margin-left: 0;
+  }
 `;
 
 export default withRouter(inject('user', 'auth', 'ui', 'documents')(Layout));

app/components/Sidebar/Sidebar.js

@@ -29,7 +29,6 @@ type Props = {
 @observer
 class Sidebar extends Component {
   props: Props;
-  scrollable: ?HTMLDivElement;
 
   handleCreateCollection = () => {
     this.props.ui.setActiveModal('collection-new');
@@ -39,20 +38,6 @@ class Sidebar extends Component {
     this.props.ui.setActiveModal('collection-edit');
   };
 
-  setScrollableRef = ref => {
-    this.scrollable = ref;
-  };
-
-  scrollToActiveDocument = ref => {
-    const scrollable = this.scrollable;
-    if (!ref || !scrollable) return;
-
-    const container = scrollable.getBoundingClientRect();
-    const bounds = ref.getBoundingClientRect();
-    const scrollTop = bounds.top + container.top;
-    scrollable.scrollTop = scrollTop;
-  };
-
   render() {
     const { auth, ui } = this.props;
     const { user, team } = auth;
@@ -71,7 +56,7 @@ class Sidebar extends Component {
         />
 
         <Flex auto column>
-          <Scrollable innerRef={this.setScrollableRef}>
+          <Scrollable>
             <Section>
               <SidebarLink to="/dashboard" icon={<HomeIcon />}>
                 Home
@@ -88,7 +73,6 @@ class Sidebar extends Component {
                 history={this.props.history}
                 location={this.props.location}
                 onCreateCollection={this.handleCreateCollection}
-                activeDocumentRef={this.scrollToActiveDocument}
               />
             </Section>
           </Scrollable>
@@ -106,6 +90,11 @@ const Container = styled(Flex)`
   width: ${layout.sidebarWidth};
   background: ${color.smoke};
   transition: left 200ms ease-in-out;
+
+  @media print {
+    display: none;
+    left: 0;
+  }
 `;
 
 const Section = styled(Flex)`

app/components/Sidebar/components/Collections.js

@@ -27,7 +27,6 @@ type Props = {
   collections: CollectionsStore,
   documents: DocumentsStore,
   onCreateCollection: () => void,
-  activeDocumentRef: HTMLElement => void,
   ui: UiStore,
 };
 
@@ -36,14 +35,7 @@ class Collections extends Component {
   props: Props;
 
   render() {
-    const {
+    const { history, location, collections, ui, documents } = this.props;
-      history,
-      location,
-      collections,
-      ui,
-      activeDocumentRef,
-      documents,
-    } = this.props;
 
     return (
       <Flex column>
@@ -55,7 +47,6 @@ class Collections extends Component {
             location={location}
             collection={collection}
             activeDocument={documents.active}
-            activeDocumentRef={activeDocumentRef}
             prefetchDocument={documents.prefetchDocument}
             ui={ui}
           />
@@ -79,7 +70,6 @@ type CollectionLinkProps = {
   collection: Collection,
   ui: UiStore,
   activeDocument: ?Document,
-  activeDocumentRef: HTMLElement => void,
   prefetchDocument: (id: string) => Promise<void>,
 };
 
@@ -94,15 +84,32 @@ class CollectionLink extends Component {
     this.dropzoneRef.open();
   };
 
-  render() {
+  renderDocuments() {
     const {
       history,
       collection,
       activeDocument,
-      ui,
-      activeDocumentRef,
       prefetchDocument,
     } = this.props;
+
+    return (
+      <CollectionChildren column>
+        {collection.documents.map(document => (
+          <DocumentLink
+            key={document.id}
+            history={history}
+            document={document}
+            activeDocument={activeDocument}
+            prefetchDocument={prefetchDocument}
+            depth={0}
+          />
+        ))}
+      </CollectionChildren>
+    );
+  }
+
+  render() {
+    const { history, collection, ui } = this.props;
     const expanded = collection.id === ui.activeCollectionId;
 
     return (
@@ -119,6 +126,9 @@ class CollectionLink extends Component {
           to={collection.url}
           icon={<CollectionIcon expanded={expanded} color={collection.color} />}
           iconColor={collection.color}
+          expandedContent={this.renderDocuments()}
+          hideExpandToggle
+          expand={expanded}
         >
           <CollectionName justify="space-between">
             {collection.name}
@@ -134,22 +144,6 @@ class CollectionLink extends Component {
               />
             </CollectionAction>
           </CollectionName>
-
-          {expanded && (
-            <Children column>
-              {collection.documents.map(document => (
-                <DocumentLink
-                  key={document.id}
-                  activeDocumentRef={activeDocumentRef}
-                  history={history}
-                  document={document}
-                  activeDocument={activeDocument}
-                  prefetchDocument={prefetchDocument}
-                  depth={0}
-                />
-              ))}
-            </Children>
-          )}
         </SidebarLink>
       </StyledDropToImport>
     );
@@ -206,7 +200,7 @@ const DocumentLink = observer(
             expand={showChildren}
             expandedContent={
               document.children.length ? (
-                <Children column>
+                <DocumentChildren column>
                   {document.children.map(childDocument => (
                     <DocumentLink
                       key={childDocument.id}
@@ -217,7 +211,7 @@ const DocumentLink = observer(
                       depth={depth + 1}
                     />
                   ))}
-                </Children>
+                </DocumentChildren>
               ) : (
                 undefined
               )
@@ -235,7 +229,7 @@ const CollectionName = styled(Flex)`
   padding: 0 0 4px;
 `;
 
-const CollectionAction = styled.a`
+const CollectionAction = styled.span`
   position: absolute;
   right: 0;
   color: ${color.slate};
@@ -262,7 +256,13 @@ const StyledDropToImport = styled(DropToImport)`
   }
 `;
 
-const Children = styled(Flex)`
+const CollectionChildren = styled(Flex)`
+  margin-top: -4px;
+  margin-left: 36px;
+`;
+
+const DocumentChildren = styled(Flex)`
+  margin-top: -4px;
   margin-left: 12px;
 `;
 

app/components/Sidebar/components/SidebarLink.js

@@ -33,7 +33,7 @@ const StyledNavLink = styled(NavLink)`
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 4px 0;
-  margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')};
+  margin-left: ${({ iconVisible }) => (iconVisible ? '-20px;' : '0')};
   color: ${color.slateDark};
   font-size: 15px;
   cursor: pointer;
@@ -52,6 +52,7 @@ type Props = {
   icon?: React$Element<*>,
   expand?: boolean,
   expandedContent?: React$Element<*>,
+  hideExpandToggle?: boolean,
   iconColor?: string,
 };
 
@@ -81,25 +82,35 @@ class SidebarLink extends Component {
   };
 
   render() {
-    const { icon, children, onClick, to, expandedContent } = this.props;
+    const {
+      icon,
+      children,
+      onClick,
+      to,
+      expandedContent,
+      expand,
+      hideExpandToggle,
+    } = this.props;
     const Component = to ? StyledNavLink : StyledDiv;
+    const showExpandIcon = expandedContent && !hideExpandToggle;
 
     return (
       <Flex column>
         <Component
+          iconVisible={showExpandIcon}
           activeStyle={activeStyle}
-          hasChildren={expandedContent}
           onClick={onClick}
           to={to}
           exact
         >
           {icon && <IconWrapper>{icon}</IconWrapper>}
-          {expandedContent && (
+          {showExpandIcon && (
             <StyledGoTo expanded={this.expanded} onClick={this.handleClick} />
           )}
           <Content onClick={this.handleExpand}>{children}</Content>
         </Component>
-        {this.expanded && expandedContent}
+        {/* Collection */ expand && hideExpandToggle && expandedContent}
+        {/* Document */ this.expanded && !hideExpandToggle && expandedContent}
       </Flex>
     );
   }

app/menus/DocumentMenu.js

@@ -67,6 +67,7 @@ class DocumentMenu extends Component {
         <DropdownMenuItem onClick={this.handleExport}>
           Download
         </DropdownMenuItem>
+        <DropdownMenuItem onClick={window.print}>Print</DropdownMenuItem>
         <DropdownMenuItem onClick={this.handleMove}>Move…</DropdownMenuItem>
         {allowDelete && (
           <DropdownMenuItem onClick={this.handleDelete}>

app/scenes/Collection/Collection.js

@@ -49,6 +49,10 @@ class CollectionScene extends Component {
     }
   }
 
+  componentWillUnmount() {
+    this.props.ui.clearActiveCollection();
+  }
+
   loadContent = async (id: string) => {
     const { collections } = this.props;
 

app/scenes/Dashboard/Dashboard.js

@@ -45,12 +45,18 @@ class Dashboard extends Component {
         {showContent ? (
           <span>
             {hasRecentlyViewed && [
-              <Subheading>Recently viewed</Subheading>,
+              <Subheading key="viewed">Recently viewed</Subheading>,
-              <DocumentList documents={documents.recentlyViewed} />,
+              <DocumentList
+                key="viewedDocuments"
+                documents={documents.recentlyViewed}
+              />,
             ]}
             {hasRecentlyEdited && [
-              <Subheading>Recently edited</Subheading>,
+              <Subheading key="edited">Recently edited</Subheading>,
-              <DocumentList documents={documents.recentlyEdited} />,
+              <DocumentList
+                key="editedDocuments"
+                documents={documents.recentlyEdited}
+              />,
             ]}
           </span>
         ) : (

app/scenes/Document/Document.js

@@ -33,6 +33,7 @@ import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 import NewDocumentIcon from 'components/Icon/NewDocumentIcon';
 import Actions, { Action, Separator } from 'components/Actions';
+import ErrorBoundary from 'components/ErrorBoundary';
 import Search from 'scenes/Search';
 
 const DISCARD_CHANGES = `
@@ -62,7 +63,7 @@ class DocumentScene extends Component {
   @observable notFound = false;
   @observable moveModalOpen: boolean = false;
 
-  componentWillMount() {
+  componentDidMount() {
     this.loadDocument(this.props);
   }
 
@@ -217,75 +218,77 @@ class DocumentScene extends Component {
 
     return (
       <Container column auto>
-        {isMoving && document && <DocumentMove document={document} />}
+        <ErrorBoundary key={this.props.location.pathname}>
-        {titleText && <PageTitle title={titleText} />}
+          {isMoving && document && <DocumentMove document={document} />}
-        {(this.isLoading || this.isSaving) && <LoadingIndicator />}
+          {titleText && <PageTitle title={titleText} />}
-        {isFetching && (
+          {(this.isLoading || this.isSaving) && <LoadingIndicator />}
-          <CenteredContent>
+          {isFetching && (
-            <LoadingState />
+            <CenteredContent>
-          </CenteredContent>
+              <LoadingState />
-        )}
+            </CenteredContent>
-        {!isFetching &&
-          document && (
-            <Flex justify="center" auto>
-              <Prompt
-                when={document.hasPendingChanges}
-                message={DISCARD_CHANGES}
-              />
-              <Editor
-                key={`${document.id}-${document.revision}`}
-                text={document.text}
-                emoji={document.emoji}
-                onImageUploadStart={this.onImageUploadStart}
-                onImageUploadStop={this.onImageUploadStop}
-                onChange={this.onChange}
-                onSave={this.onSave}
-                onCancel={this.onDiscard}
-                readOnly={!this.isEditing}
-              />
-              <Actions
-                align="center"
-                justify="flex-end"
-                readOnly={!this.isEditing}
-              >
-                {!isNew &&
-                  !this.isEditing && <Collaborators document={document} />}
-                <Action>
-                  {this.isEditing ? (
-                    <SaveAction
-                      isSaving={this.isSaving}
-                      onClick={this.onSave.bind(this, true)}
-                      disabled={
-                        !(this.document && this.document.allowSave) ||
-                        this.isSaving
-                      }
-                      isNew={!!isNew}
-                    />
-                  ) : (
-                    <a onClick={this.onClickEdit}>Edit</a>
-                  )}
-                </Action>
-                {this.isEditing && (
-                  <Action>
-                    <a onClick={this.onDiscard}>Discard</a>
-                  </Action>
-                )}
-                {!this.isEditing && (
-                  <Action>
-                    <DocumentMenu document={document} />
-                  </Action>
-                )}
-                {!this.isEditing && <Separator />}
-                <Action>
-                  {!this.isEditing && (
-                    <a onClick={this.onClickNew}>
-                      <NewDocumentIcon />
-                    </a>
-                  )}
-                </Action>
-              </Actions>
-            </Flex>
           )}
+          {!isFetching &&
+            document && (
+              <Flex justify="center" auto>
+                <Prompt
+                  when={document.hasPendingChanges}
+                  message={DISCARD_CHANGES}
+                />
+                <Editor
+                  key={`${document.id}-${document.revision}`}
+                  text={document.text}
+                  emoji={document.emoji}
+                  onImageUploadStart={this.onImageUploadStart}
+                  onImageUploadStop={this.onImageUploadStop}
+                  onChange={this.onChange}
+                  onSave={this.onSave}
+                  onCancel={this.onDiscard}
+                  readOnly={!this.isEditing}
+                />
+                <Actions
+                  align="center"
+                  justify="flex-end"
+                  readOnly={!this.isEditing}
+                >
+                  {!isNew &&
+                    !this.isEditing && <Collaborators document={document} />}
+                  <Action>
+                    {this.isEditing ? (
+                      <SaveAction
+                        isSaving={this.isSaving}
+                        onClick={this.onSave.bind(this, true)}
+                        disabled={
+                          !(this.document && this.document.allowSave) ||
+                          this.isSaving
+                        }
+                        isNew={!!isNew}
+                      />
+                    ) : (
+                      <a onClick={this.onClickEdit}>Edit</a>
+                    )}
+                  </Action>
+                  {this.isEditing && (
+                    <Action>
+                      <a onClick={this.onDiscard}>Discard</a>
+                    </Action>
+                  )}
+                  {!this.isEditing && (
+                    <Action>
+                      <DocumentMenu document={document} />
+                    </Action>
+                  )}
+                  {!this.isEditing && <Separator />}
+                  <Action>
+                    {!this.isEditing && (
+                      <a onClick={this.onClickNew}>
+                        <NewDocumentIcon />
+                      </a>
+                    )}
+                  </Action>
+                </Actions>
+              </Flex>
+            )}
+        </ErrorBoundary>
       </Container>
     );
   }

app/scenes/Search/Search.js

@@ -2,10 +2,13 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import keydown from 'react-keydown';
+import Waypoint from 'react-waypoint';
 import { observable, action } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import _ from 'lodash';
-import DocumentsStore from 'stores/DocumentsStore';
+import DocumentsStore, {
+  DEFAULT_PAGINATION_LIMIT,
+} from 'stores/DocumentsStore';
 
 import { withRouter } from 'react-router-dom';
 import { searchUrl } from 'utils/routeHelpers';
@@ -44,6 +47,7 @@ const ResultsWrapper = styled(Flex)`
 `;
 
 const ResultList = styled(Flex)`
+  margin-bottom: 150px;
   opacity: ${props => (props.visible ? '1' : '0')};
   transition: all 400ms cubic-bezier(0.65, 0.05, 0.36, 1);
 `;
@@ -61,6 +65,8 @@ class Search extends Component {
 
   @observable resultIds: string[] = []; // Document IDs
   @observable query: string = '';
+  @observable offset: number = 0;
+  @observable allowLoadMore: boolean = true;
   @observable isFetching = false;
 
   componentDidMount() {
@@ -98,10 +104,27 @@ class Search extends Component {
   handleQueryChange = () => {
     const query = this.props.match.params.query;
     this.query = query ? decodeURIComponent(query) : '';
+    this.allowLoadMore = true;
+
+    // To prevent "no results" showing before debounce kicks in
+    if (this.query) this.isFetching = true;
+
     this.fetchResultsDebounced();
   };
 
-  fetchResultsDebounced = _.debounce(this.fetchResults, 250);
+  fetchResultsDebounced = _.debounce(this.fetchResults, 350, {
+    leading: false,
+    trailing: true,
+  });
+
+  @action
+  loadMoreResults = async () => {
+    // Don't paginate if there aren't more results or we're in the middle of fetching
+    if (!this.allowLoadMore || this.isFetching) return;
+
+    // Fetch more results
+    await this.fetchResults();
+  };
 
   @action
   fetchResults = async () => {
@@ -109,7 +132,19 @@ class Search extends Component {
 
     if (this.query) {
       try {
-        this.resultIds = await this.props.documents.search(this.query);
+        const newResults = await this.props.documents.search(this.query, {
+          offset: this.offset,
+          limit: DEFAULT_PAGINATION_LIMIT,
+        });
+        this.resultIds = this.resultIds.concat(newResults);
+        if (
+          newResults.length === 0 ||
+          newResults.length < DEFAULT_PAGINATION_LIMIT
+        ) {
+          this.allowLoadMore = false;
+        } else {
+          this.offset += DEFAULT_PAGINATION_LIMIT;
+        }
       } catch (e) {
         console.error('Something went wrong');
       }
@@ -157,7 +192,7 @@ class Search extends Component {
             value={this.query}
           />
           {showEmpty && <Empty>No matching documents.</Empty>}
-          <ResultList visible={hasResults}>
+          <ResultList column visible={hasResults}>
             <StyledArrowKeyNavigation
               mode={ArrowKeyNavigation.mode.VERTICAL}
               defaultActiveChildIndex={0}
@@ -178,6 +213,9 @@ class Search extends Component {
                 );
               })}
             </StyledArrowKeyNavigation>
+            {this.allowLoadMore && (
+              <Waypoint key={this.offset} onEnter={this.loadMoreResults} />
+            )}
           </ResultList>
         </ResultsWrapper>
       </Container>

app/stores/DocumentsStore.js

@@ -17,8 +17,10 @@ import Document from 'models/Document';
 import ErrorsStore from 'stores/ErrorsStore';
 import CacheStore from 'stores/CacheStore';
 import UiStore from 'stores/UiStore';
+import type { PaginationParams } from 'types';
 
 const DOCUMENTS_CACHE_KEY = 'DOCUMENTS_CACHE_KEY';
+export const DEFAULT_PAGINATION_LIMIT = 25;
 
 type Options = {
   cache: CacheStore,
@@ -77,7 +79,10 @@ class DocumentsStore extends BaseStore {
   /* Actions */
 
   @action
-  fetchAll = async (request: string = 'list', options: ?Object): Promise<*> => {
+  fetchAll = async (
+    request: string = 'list',
+    options: ?PaginationParams
+  ): Promise<*> => {
     this.isFetching = true;
 
     try {
@@ -99,12 +104,12 @@ class DocumentsStore extends BaseStore {
   };
 
   @action
-  fetchRecentlyModified = async (options: ?Object): Promise<*> => {
+  fetchRecentlyModified = async (options: ?PaginationParams): Promise<*> => {
     return await this.fetchAll('list', options);
   };
 
   @action
-  fetchRecentlyViewed = async (options: ?Object): Promise<*> => {
+  fetchRecentlyViewed = async (options: ?PaginationParams): Promise<*> => {
     const data = await this.fetchAll('viewed', options);
 
     runInAction('DocumentsStore#fetchRecentlyViewed', () => {
@@ -119,8 +124,14 @@ class DocumentsStore extends BaseStore {
   };
 
   @action
-  search = async (query: string): Promise<*> => {
+  search = async (
-    const res = await client.get('/documents.search', { query });
+    query: string,
+    options?: PaginationParams
+  ): Promise<string[]> => {
+    const res = await client.get('/documents.search', {
+      ...options,
+      query,
+    });
     invariant(res && res.data, 'res or res.data missing');
     const { data } = res;
     data.forEach(documentData => this.add(new Document(documentData)));

app/stores/UiStore.js

@@ -35,6 +35,11 @@ class UiStore {
     this.activeCollectionId = collection.id;
   };
 
+  @action
+  clearActiveCollection = (): void => {
+    this.activeCollectionId = undefined;
+  };
+
   @action
   clearActiveDocument = (): void => {
     this.activeDocumentId = undefined;

app/types/index.js

@@ -39,12 +39,21 @@ export type Document = {
   views: number,
 };
 
+// Pagination response in an API call
 export type Pagination = {
   limit: number,
   nextPath: string,
   offset: number,
 };
 
+// Pagination request params
+export type PaginationParams = {
+  limit?: number,
+  offset?: number,
+  sort?: string,
+  direction?: 'ASC' | 'DESC',
+};
+
 export type ApiKey = {
   id: string,
   name: ?string,

package.json

@@ -154,6 +154,7 @@
     "react-modal": "^3.1.2",
     "react-portal": "^4.0.0",
     "react-router-dom": "^4.2.0",
+    "react-waypoint": "^7.3.1",
     "redis": "^2.6.2",
     "redis-lock": "^0.1.0",
     "rimraf": "^2.5.4",

server/api/documents.js

@@ -142,13 +142,17 @@ router.post('documents.revisions', auth(), pagination(), async ctx => {
   };
 });
 
-router.post('documents.search', auth(), async ctx => {
+router.post('documents.search', auth(), pagination(), async ctx => {
   const { query } = ctx.body;
+  const { offset, limit } = ctx.state.pagination;
   ctx.assertPresent(query, 'query is required');
 
   const user = await ctx.state.user;
 
-  const documents = await Document.searchForUser(user, query);
+  const documents = await Document.searchForUser(user, query, {
+    offset,
+    limit,
+  });
 
   const data = await Promise.all(
     documents.map(async document => await presentDocument(ctx, document))

server/models/Document.js

@@ -160,16 +160,20 @@ Document.findById = async id => {
   }
 };
 
-Document.searchForUser = async (user, query, options = {}) => {
+Document.searchForUser = async (
+  user,
+  query,
+  options = {}
+): Promise<Document[]> => {
   const limit = options.limit || 15;
   const offset = options.offset || 0;
 
   const sql = `
-        SELECT * FROM documents
+        SELECT *, ts_rank(documents."searchVector", plainto_tsquery('english', :query)) as "searchRanking" FROM documents
         WHERE "searchVector" @@ plainto_tsquery('english', :query) AND
           "teamId" = '${user.teamId}'::uuid AND
           "deletedAt" IS NULL
-        ORDER BY ts_rank(documents."searchVector", plainto_tsquery('english', :query)) DESC
+        ORDER BY "searchRanking" DESC
         LIMIT :limit OFFSET :offset;
         `;
 
@@ -184,10 +188,17 @@ Document.searchForUser = async (user, query, options = {}) => {
     })
     .map(document => document.id);
 
+  // Second query to get views for the data
   const withViewsScope = { method: ['withViews', user.id] };
-  return Document.scope('defaultScope', withViewsScope).findAll({
+  const documents = await Document.scope(
+    'defaultScope',
+    withViewsScope
+  ).findAll({
     where: { id: ids },
   });
+
+  // Order the documents in the same order as the first query
+  return _.sortBy(documents, doc => ids.indexOf(doc.id));
 };
 
 // Instance methods

yarn.lock

@@ -1825,6 +1825,10 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
 
+consolidated-events@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/consolidated-events/-/consolidated-events-1.1.1.tgz#25395465b35e531395418b7bbecb5ecaf198d179"
+
 constant-case@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-2.0.0.tgz#4175764d389d3fa9c8ecd29186ed6005243b6a46"
@@ -7215,7 +7219,7 @@ prop-types@>=15.5.6, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
 
-prop-types@^15.5.7, prop-types@^15.6.0:
+prop-types@^15.0.0, prop-types@^15.5.7, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -7510,6 +7514,13 @@ react-transform-hmr@^1.0.3:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
+react-waypoint@^7.3.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/react-waypoint/-/react-waypoint-7.3.1.tgz#abb165d9b6c9590f8d82ceafbe61c2c887262a37"
+  dependencies:
+    consolidated-events "^1.1.0"
+    prop-types "^15.0.0"
+
 react@^15.5.4:
   version "15.6.2"
   resolved "https://registry.npmjs.org/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"