Merge master

frontend/scenes/Document/Document.js

@@ -4,16 +4,18 @@ import get from 'lodash/get';
 import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
+import { layout } from 'styles/constants';
 
+import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
 import DocumentsStore from 'stores/DocumentsStore';
 import Menu from './components/Menu';
 import Editor from 'components/Editor';
+import DropToImport from 'components/DropToImport';
 import { HeaderAction, SaveAction } from 'components/Layout';
 import LoadingIndicator from 'components/LoadingIndicator';
 import PublishingInfo from 'components/PublishingInfo';
-import AuthorInfo from 'components/AuthorInfo';
 import PreviewLoading from 'components/PreviewLoading';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
@@ -28,15 +30,19 @@ type Props = {
   history: Object,
   keydown: Object,
   documents: DocumentsStore,
-  newChildDocument?: boolean,
+  newDocument?: boolean,
   ui: UiStore,
 };
 
-@observer class Document extends Component {
+@observer class DocumentScene extends Component {
   props: Props;
-
+  state: {
+    newDocument?: Document,
+  };
   state = {
+    isDragging: false,
     isLoading: false,
+    newDocument: undefined,
   };
 
   componentDidMount() {
@@ -44,7 +50,10 @@ type Props = {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.match.params.id !== this.props.match.params.id) {
+    if (
+      nextProps.match.params.documentSlug !==
+      this.props.match.params.documentSlug
+    ) {
       this.loadDocument(nextProps);
     }
   }
@@ -54,42 +63,49 @@ type Props = {
   }
 
   loadDocument = async props => {
-    await this.props.documents.fetch(props.match.params.id);
-    const document = this.document;
-
-    if (document) {
-      this.props.ui.setActiveDocument(document);
-      document.view();
-    }
-
-    if (this.props.match.params.edit) {
-      this.props.ui.enableEditMode();
+    if (props.newDocument) {
+      const newDocument = new Document({
+        collection: { id: props.match.params.id },
+      });
+      this.setState({ newDocument });
     } else {
-      this.props.ui.disableEditMode();
+      let document = this.document;
+      if (document) {
+        this.props.ui.setActiveDocument(document);
+      }
+
+      await this.props.documents.fetch(props.match.params.documentSlug);
+      document = this.document;
+
+      if (document) {
+        this.props.ui.setActiveDocument(document);
+        document.view();
+      }
     }
   };
 
   get document() {
-    return this.props.documents.getByUrl(`/d/${this.props.match.params.id}`);
+    if (this.state.newDocument) return this.state.newDocument;
+    return this.props.documents.getByUrl(
+      `/doc/${this.props.match.params.documentSlug}`
+    );
   }
 
   onClickEdit = () => {
     if (!this.document) return;
     const url = `${this.document.url}/edit`;
     this.props.history.push(url);
-    this.props.ui.enableEditMode();
   };
 
   onSave = async (redirect: boolean = false) => {
-    const document = this.document;
+    let document = this.document;
 
     if (!document) return;
     this.setState({ isLoading: true });
-    await document.save();
+    document = await document.save();
     this.setState({ isLoading: false });
-    this.props.ui.disableEditMode();
 
-    if (redirect) {
+    if (redirect || this.props.newDocument) {
       this.props.history.push(document.url);
     }
   };
@@ -111,86 +127,111 @@ type Props = {
     this.props.history.goBack();
   };
 
+  onStartDragging = () => {
+    this.setState({ isDragging: true });
+  };
+
+  onStopDragging = () => {
+    this.setState({ isDragging: false });
+  };
+
   render() {
-    const isNew = this.props.newDocument || this.props.newChildDocument;
-    const isEditing = this.props.match.params.edit;
-    const isFetching = !this.document && get(this.document, 'isFetching');
+    const isNew = this.props.newDocument;
+    const isEditing = this.props.match.params.edit || isNew;
+    const isFetching = !this.document;
     const titleText = get(this.document, 'title', 'Loading');
 
     return (
       <Container column auto>
+        {this.state.isDragging &&
+          <DropHere align="center" justify="center">
+            Drop files here to import into Atlas.
+          </DropHere>}
         {titleText && <PageTitle title={titleText} />}
         {this.state.isLoading && <LoadingIndicator />}
         {isFetching &&
           <CenteredContent>
-            <PreviewLoading />
+            <LoadingState />
           </CenteredContent>}
         {!isFetching &&
           this.document &&
-          <PagePadding justify="center" auto>
-            <Prompt
-              when={this.document.hasPendingChanges}
-              message={DISCARD_CHANGES}
-            />
-            <DocumentContainer>
-              <InfoWrapper visible={!isEditing}>
-                <PublishingInfo
-                  collaborators={this.document.collaborators}
-                  createdAt={this.document.createdAt}
-                  createdBy={this.document.createdBy}
-                  updatedAt={this.document.updatedAt}
-                  updatedBy={this.document.updatedBy}
-                />
-              </InfoWrapper>
-              <Content>
-                <Editor
-                  key={this.document.id}
-                  text={this.document.text}
-                  onImageUploadStart={this.onImageUploadStart}
-                  onImageUploadStop={this.onImageUploadStop}
-                  onChange={this.onChange}
-                  onSave={this.onSave}
-                  onCancel={this.onCancel}
-                  onStar={this.document.star}
-                  onUnstar={this.document.unstar}
-                  starred={this.document.starred}
-                  readOnly={!isEditing}
-                />
-              </Content>
-              <InfoWrapper visible={!isEditing} bottom>
-                <AuthorInfo
-                  collaborators={this.document.collaborators}
-                  views={this.document.views}
-                />
-              </InfoWrapper>
-            </DocumentContainer>
-            <Meta align="center" justify="flex-end" readOnly={!isEditing}>
-              <Flex align="center">
-                <HeaderAction>
-                  {isEditing
-                    ? <SaveAction
-                        onClick={this.onSave.bind(this, true)}
-                        disabled={get(this.document, 'isSaving')}
-                        isNew={!!isNew}
-                      />
-                    : <a onClick={this.onClickEdit}>Edit</a>}
-                </HeaderAction>
-                {!isEditing && <Menu document={this.document} />}
-              </Flex>
-            </Meta>
-          </PagePadding>}
+          <DropToImport
+            documentId={this.document.id}
+            history={this.props.history}
+            onDragEnter={this.onStartDragging}
+            onDragLeave={this.onStopDragging}
+            onDrop={this.onStopDragging}
+          >
+            <PagePadding justify="center" auto>
+              <Prompt
+                when={this.document.hasPendingChanges}
+                message={DISCARD_CHANGES}
+              />
+              <DocumentContainer>
+                <InfoWrapper visible={!isEditing}>
+                  <PublishingInfo
+                    collaborators={this.document.collaborators}
+                    createdAt={this.document.createdAt}
+                    createdBy={this.document.createdBy}
+                    updatedAt={this.document.updatedAt}
+                    updatedBy={this.document.updatedBy}
+                  />
+                </InfoWrapper>
+                <Content>
+                  <Editor
+                    key={this.document.id}
+                    text={this.document.text}
+                    onImageUploadStart={this.onImageUploadStart}
+                    onImageUploadStop={this.onImageUploadStop}
+                    onChange={this.onChange}
+                    onSave={this.onSave}
+                    onCancel={this.onCancel}
+                    onStar={this.document.star}
+                    onUnstar={this.document.unstar}
+                    starred={this.document.starred}
+                    readOnly={!isEditing}
+                  />
+                </Content>
+              </DocumentContainer>
+              <Meta align="center" justify="flex-end" readOnly={!isEditing}>
+                <Flex align="center">
+                  <HeaderAction>
+                    {isEditing
+                      ? <SaveAction
+                          onClick={this.onSave.bind(this, true)}
+                          disabled={get(this.document, 'isSaving')}
+                          isNew={!!isNew}
+                        />
+                      : <a onClick={this.onClickEdit}>Edit</a>}
+                  </HeaderAction>
+                  {!isEditing && <Menu document={this.document} />}
+                </Flex>
+              </Meta>
+            </PagePadding>
+          </DropToImport>}
       </Container>
     );
   }
 }
 
+const DropHere = styled(Flex)`
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: ${layout.sidebarWidth};
+  bottom: 0;
+  right: 0;
+  text-align: center;
+  background: rgba(255,255,255,.9);
+  z-index: 1;
+`;
+
 const Meta = styled(Flex)`
-  justify-content: ${props => (props.readOnly ? 'space-between' : 'flex-end')};
   align-items: flex-start;
   width: 100%;
   position: absolute;
   top: 0;
-  padding: 10px 20px;
+  padding: ${layout.padding};
 `;
 
 const Content = styled(Flex)`
@@ -207,6 +248,10 @@ const Container = styled.div`
   width: 100%;
 `;
 
+const LoadingState = styled(PreviewLoading)`
+  margin: 80px 20px;
+`;
+
 const PagePadding = styled(Flex)`
   padding: 80px 20px;
   position: relative;
@@ -220,4 +265,4 @@ const DocumentContainer = styled.div`
   width: 50em;
 `;
 
-export default withRouter(inject('ui', 'documents')(Document));
+export default withRouter(inject('ui', 'user', 'documents')(DocumentScene));