diff --git a/app/components/DropToImport.js b/app/components/DropToImport.js index d5dcf550..2d669346 100644 --- a/app/components/DropToImport.js +++ b/app/components/DropToImport.js @@ -2,8 +2,8 @@ import * as React from 'react'; import { observable } from 'mobx'; import { observer, inject } from 'mobx-react'; +import { Redirect } from 'react-router-dom'; import { createGlobalStyle } from 'styled-components'; -import { omit } from 'lodash'; import invariant from 'invariant'; import importFile from 'utils/importFile'; import Dropzone from 'react-dropzone'; @@ -18,11 +18,11 @@ type Props = { rejectClassName?: string, documents: DocumentsStore, disabled: boolean, - history: Object, }; -const GlobalStyles = createGlobalStyle` +export const GlobalStyles = createGlobalStyle` .activeDropZone { + border-radius: 4px; background: ${props => props.theme.slateDark}; svg { fill: ${props => props.theme.white}; } } @@ -35,6 +35,7 @@ const GlobalStyles = createGlobalStyle` @observer class DropToImport extends React.Component { @observable isImporting: boolean = false; + @observable redirectTo: ?string; onDropAccepted = async (files = []) => { this.isImporting = true; @@ -59,7 +60,7 @@ class DropToImport extends React.Component { }); if (redirect) { - this.props.history.push(doc.url); + this.redirectTo = doc.url; } } } finally { @@ -68,16 +69,15 @@ class DropToImport extends React.Component { }; render() { - const props = omit( - this.props, - 'history', - 'documentId', - 'collectionId', - 'documents', - 'disabled', - 'menuOpen' - ); + const { + documentId, + collectionId, + documents, + disabled, + ...rest + } = this.props; + if (this.redirectTo) return ; if (this.props.disabled) return this.props.children; return ( @@ -88,9 +88,8 @@ class DropToImport extends React.Component { disableClick disablePreview multiple - {...props} + {...rest} > - {this.isImporting && } {this.props.children} diff --git a/app/components/Layout.js b/app/components/Layout.js index 45ae4c43..afd72441 100644 --- a/app/components/Layout.js +++ b/app/components/Layout.js @@ -12,6 +12,7 @@ import Flex from 'shared/components/Flex'; import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers'; import { LoadingIndicatorBar } from 'components/LoadingIndicator'; +import { GlobalStyles } from 'components/DropToImport'; import Sidebar from 'components/Sidebar'; import SettingsSidebar from 'components/Sidebar/Settings'; import Modals from 'components/Modals'; @@ -103,6 +104,7 @@ class Layout extends React.Component { + ); } diff --git a/app/components/Sidebar/components/CollectionLink.js b/app/components/Sidebar/components/CollectionLink.js index f4d322eb..560e1d82 100644 --- a/app/components/Sidebar/components/CollectionLink.js +++ b/app/components/Sidebar/components/CollectionLink.js @@ -13,7 +13,6 @@ import DropToImport from 'components/DropToImport'; import Flex from 'shared/components/Flex'; type Props = { - history: Object, collection: Collection, ui: UiStore, activeDocument: ?Document, @@ -25,19 +24,12 @@ class CollectionLink extends React.Component { @observable menuOpen = false; render() { - const { - history, - collection, - activeDocument, - prefetchDocument, - ui, - } = this.props; + const { collection, activeDocument, prefetchDocument, ui } = this.props; const expanded = collection.id === ui.activeCollectionId; return ( @@ -72,7 +64,6 @@ class CollectionLink extends React.Component { {collection.documents.map(document => ( *, prefetchDocument: (documentId: string) => Promise, @@ -34,7 +33,6 @@ class DocumentLink extends React.Component { activeDocumentRef, prefetchDocument, depth, - history, } = this.props; const isActiveDocument = @@ -55,11 +53,7 @@ class DocumentLink extends React.Component { ref={isActiveDocument ? activeDocumentRef : undefined} onMouseEnter={this.handleMouseEnter} > - + { {document.children.map(childDocument => ( { isSaving={this.isSaving} isPublishing={this.isPublishing} savingIsDisabled={!document.allowSave} - history={this.props.history} onDiscard={this.onDiscard} onSave={this.onSave} /> diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js index 83229d90..8996012d 100644 --- a/app/scenes/Document/components/Header.js +++ b/app/scenes/Document/components/Header.js @@ -3,6 +3,7 @@ import * as React from 'react'; import { throttle } from 'lodash'; import { observable } from 'mobx'; import { observer, inject } from 'mobx-react'; +import { Redirect } from 'react-router-dom'; import styled from 'styled-components'; import breakpoint from 'styled-components-breakpoint'; import { NewDocumentIcon } from 'outline-icons'; @@ -33,7 +34,6 @@ type Props = { publish?: boolean, autosave?: boolean, }) => *, - history: Object, auth: AuthStore, }; @@ -41,6 +41,7 @@ type Props = { class Header extends React.Component { @observable isScrolled = false; @observable showShareModal = false; + @observable redirectTo: ?string; componentDidMount() { window.addEventListener('scroll', this.handleScroll); @@ -57,7 +58,7 @@ class Header extends React.Component { handleScroll = throttle(this.updateIsScrolled, 50); handleEdit = () => { - this.props.history.push(documentEditUrl(this.props.document)); + this.redirectTo = documentEditUrl(this.props.document); }; handleSave = () => { @@ -86,6 +87,8 @@ class Header extends React.Component { }; render() { + if (this.redirectTo) return ; + const { document, isEditing,