From c02bc04fd2e26f7080507d77a1aa9c7be41b2329 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Tue, 12 Sep 2017 23:30:18 -0700 Subject: [PATCH] small refactor, lint and fixes --- frontend/components/Input/Input.js | 2 +- .../SidebarCollection/SidebarCollection.js | 2 +- frontend/models/Document.js | 1 + frontend/scenes/Document/Document.js | 11 ++-- .../components/DocumentMove/DocumentMove.js | 17 +------ .../DocumentMove/components/PathToDocument.js | 50 +++++++++---------- frontend/scenes/Search/Search.js | 17 +------ frontend/stores/DocumentsStore.js | 8 +++ 8 files changed, 47 insertions(+), 61 deletions(-) diff --git a/frontend/components/Input/Input.js b/frontend/components/Input/Input.js index 3dc278a2..6b25d24f 100644 --- a/frontend/components/Input/Input.js +++ b/frontend/components/Input/Input.js @@ -55,7 +55,7 @@ const LabelText = styled.div` export type Props = { type: string, - value: string, + value?: string, label?: string, className?: string, }; diff --git a/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js b/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js index 9d1cefdd..4ada3fa9 100644 --- a/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js +++ b/frontend/components/Layout/components/SidebarCollection/SidebarCollection.js @@ -43,7 +43,7 @@ const activeStyle = { {!canDropToImport && {doc.title}} - {(document.pathToDocument.includes(doc.id) || + {(document.pathToDocument.map(entry => entry.id).includes(doc.id) || document.id === doc.id) && {doc.children && this.renderDocuments(doc.children, depth + 1)} diff --git a/frontend/models/Document.js b/frontend/models/Document.js index 39cfdb0a..cafcdefb 100644 --- a/frontend/models/Document.js +++ b/frontend/models/Document.js @@ -186,6 +186,7 @@ class Document extends BaseModel { id: this.id, parentDocument: parentDocumentId, }); + invariant(res && res.data, 'Data not available'); this.updateData(res.data); this.emit('documents.move', { id: this.id, diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js index 3e254346..6cb6316a 100644 --- a/frontend/scenes/Document/Document.js +++ b/frontend/scenes/Document/Document.js @@ -8,7 +8,12 @@ import { withRouter, Prompt } from 'react-router'; import keydown from 'react-keydown'; import Flex from 'components/Flex'; import { color, layout } from 'styles/constants'; -import { collectionUrl, updateDocumentUrl } from 'utils/routeHelpers'; +import { + collectionUrl, + updateDocumentUrl, + matchDocumentEdit, + matchDocumentMove, +} from 'utils/routeHelpers'; import Document from 'models/Document'; import DocumentMove from './components/DocumentMove'; @@ -25,8 +30,6 @@ import CenteredContent from 'components/CenteredContent'; import PageTitle from 'components/PageTitle'; import Search from 'scenes/Search'; -import { matchDocumentEdit, matchDocumentMove } from 'utils/routeHelpers'; - const DISCARD_CHANGES = ` You have unsaved changes. Are you sure you want to discard them? @@ -80,7 +83,7 @@ type Props = { @keydown('m') goToMove(event) { event.preventDefault(); - this.props.history.push(`${this.document.url}/move`); + if (this.document) this.props.history.push(`${this.document.url}/move`); } loadDocument = async props => { diff --git a/frontend/scenes/Document/components/DocumentMove/DocumentMove.js b/frontend/scenes/Document/components/DocumentMove/DocumentMove.js index bed6b4ea..d6268a03 100644 --- a/frontend/scenes/Document/components/DocumentMove/DocumentMove.js +++ b/frontend/scenes/Document/components/DocumentMove/DocumentMove.js @@ -1,13 +1,11 @@ // @flow import React, { Component } from 'react'; import ReactDOM from 'react-dom'; -import { observable, runInAction, action } from 'mobx'; +import { observable, action } from 'mobx'; import { observer, inject } from 'mobx-react'; import { withRouter } from 'react-router'; import ArrowKeyNavigation from 'boundless-arrow-key-navigation'; import _ from 'lodash'; -import invariant from 'invariant'; -import { client } from 'utils/ApiClient'; import styled from 'styled-components'; import { size } from 'styles/constants'; @@ -81,18 +79,7 @@ type Props = { if (this.searchTerm) { try { - const res = await client.get('/documents.search', { - query: this.searchTerm, - }); - invariant(res && res.data, 'res or res.data missing'); - const { data } = res; - runInAction('search document', () => { - // Fill documents store - data.forEach(documentData => - this.props.documents.add(new Document(documentData)) - ); - this.resultIds = data.map(documentData => documentData.id); - }); + this.resultIds = await this.props.documents.search(this.searchTerm); } catch (e) { console.error('Something went wrong'); } diff --git a/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js b/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js index 972f29d5..1c2ec5ff 100644 --- a/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js +++ b/frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js @@ -12,6 +12,30 @@ import ChevronIcon from 'components/Icon/ChevronIcon'; import Document from 'models/Document'; import DocumentsStore from 'stores/DocumentsStore'; +const ResultWrapper = styled.div` +display: flex; +margin-bottom: 10px; + +color: ${color.text}; +cursor: default; +`; + +const ResultWrapperLink = ResultWrapper.withComponent('a').extend` +padding-top: 3px; +padding-left: 5px; + +&:hover, +&:active, +&:focus { + margin-left: 0px; + border-radius: 2px; + background: ${color.black}; + color: ${color.smokeLight}; + outline: none; + cursor: pointer; +} +`; + type Props = { documentId?: string, onSuccess?: Function, @@ -58,7 +82,7 @@ type Props = { {' '} {this.resultDocument.pathToDocument - .map(doc => {doc.title}) + .map(doc => {doc.title}) .reduce((prev, curr) => [prev, , curr])} } {document && @@ -72,28 +96,4 @@ type Props = { } } -const ResultWrapper = styled.div` - display: flex; - margin-bottom: 10px; - - color: ${color.text}; - cursor: default; -`; - -const ResultWrapperLink = ResultWrapper.withComponent('a').extend` - padding-top: 3px; - padding-left: 5px; - - &:hover, - &:active, - &:focus { - margin-left: 0px; - border-radius: 2px; - background: ${color.black}; - color: ${color.smokeLight}; - outline: none; - cursor: pointer; - } -`; - export default PathToDocument; diff --git a/frontend/scenes/Search/Search.js b/frontend/scenes/Search/Search.js index 7665ff79..b6ca7c8c 100644 --- a/frontend/scenes/Search/Search.js +++ b/frontend/scenes/Search/Search.js @@ -2,12 +2,9 @@ import React from 'react'; import ReactDOM from 'react-dom'; import keydown from 'react-keydown'; -import { observable, action, runInAction } from 'mobx'; +import { observable, action } from 'mobx'; import { observer, inject } from 'mobx-react'; import _ from 'lodash'; -import invariant from 'invariant'; -import { client } from 'utils/ApiClient'; -import Document from 'models/Document'; import DocumentsStore from 'stores/DocumentsStore'; import { withRouter } from 'react-router'; @@ -59,7 +56,6 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)` @observer class Search extends React.Component { firstDocument: HTMLElement; props: Props; - store: SearchStore; @observable resultIds: Array = []; // Document IDs @observable searchTerm: ?string = null; @@ -108,16 +104,7 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)` if (query) { try { - const res = await client.get('/documents.search', { query }); - invariant(res && res.data, 'res or res.data missing'); - const { data } = res; - runInAction('search document', () => { - // Fill documents store - data.forEach(documentData => - this.props.documents.add(new Document(documentData)) - ); - this.resultIds = data.map(documentData => documentData.id); - }); + this.resultIds = await this.props.documents.search(query); } catch (e) { console.error('Something went wrong'); } diff --git a/frontend/stores/DocumentsStore.js b/frontend/stores/DocumentsStore.js index cfbb70f9..c7e03e97 100644 --- a/frontend/stores/DocumentsStore.js +++ b/frontend/stores/DocumentsStore.js @@ -104,6 +104,14 @@ class DocumentsStore extends BaseStore { await this.fetchAll('starred'); }; + @action search = async (query: string): Promise<*> => { + const res = await client.get('/documents.search', { query }); + invariant(res && res.data, 'res or res.data missing'); + const { data } = res; + data.forEach(documentData => this.add(new Document(documentData))); + return data.map(documentData => documentData.id); + }; + @action fetch = async (id: string): Promise<*> => { this.isFetching = true;