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

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>,
-              <DocumentList documents={documents.recentlyViewed} />,
+              <Subheading key="viewed">Recently viewed</Subheading>,
+              <DocumentList
+                key="viewedDocuments"
+                documents={documents.recentlyViewed}
+              />,
             ]}
             {hasRecentlyEdited && [
-              <Subheading>Recently edited</Subheading>,
-              <DocumentList documents={documents.recentlyEdited} />,
+              <Subheading key="edited">Recently edited</Subheading>,
+              <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} />}
-        {titleText && <PageTitle title={titleText} />}
-        {(this.isLoading || this.isSaving) && <LoadingIndicator />}
-        {isFetching && (
-          <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>
+        <ErrorBoundary key={this.props.location.pathname}>
+          {isMoving && document && <DocumentMove document={document} />}
+          {titleText && <PageTitle title={titleText} />}
+          {(this.isLoading || this.isSaving) && <LoadingIndicator />}
+          {isFetching && (
+            <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>
+            )}
+        </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>