From 3ecca38d9e06f831ca8e69fb00a7e1ae407b6462 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Sat, 13 May 2017 15:36:06 -0700 Subject: [PATCH 1/4] Build the full navigation tree for document in header --- .../scenes/DocumentScene/DocumentScene.js | 29 ++++++++++++++----- .../DocumentScene/DocumentSceneStore.js | 27 ++++++++++++++++- frontend/types/index.js | 10 ++++++- 3 files changed, 57 insertions(+), 9 deletions(-) diff --git a/frontend/scenes/DocumentScene/DocumentScene.js b/frontend/scenes/DocumentScene/DocumentScene.js index 31ebecc0a..3bda986c8 100644 --- a/frontend/scenes/DocumentScene/DocumentScene.js +++ b/frontend/scenes/DocumentScene/DocumentScene.js @@ -146,6 +146,26 @@ class DocumentScene extends React.Component { } }; + renderLayoutTitle() { + const { document, pathToDocument } = this.store; + if (document && document.collection) { + const titleSections = pathToDocument + ? pathToDocument.map(node => {node.title}) + : []; + titleSections.unshift( + {document.collection.name} + ); + + return ( + +  /  + {titleSections.reduce((prev, curr) => [prev, ' / ', curr])} + {` / ${document.title}`} + + ); + } + } + render() { const { sidebar } = this.props.ui; @@ -177,13 +197,8 @@ class DocumentScene extends React.Component { ); - title = ( - -  /  - {doc.collection.name} - {` / ${doc.title}`} - - ); + + title = this.renderLayoutTitle(); titleText = `${doc.collection.name} - ${doc.title}`; } diff --git a/frontend/scenes/DocumentScene/DocumentSceneStore.js b/frontend/scenes/DocumentScene/DocumentSceneStore.js index d1d6ff64e..40ee36e64 100644 --- a/frontend/scenes/DocumentScene/DocumentSceneStore.js +++ b/frontend/scenes/DocumentScene/DocumentSceneStore.js @@ -11,7 +11,11 @@ import { autorunAsync, } from 'mobx'; import { client } from 'utils/ApiClient'; -import type { Document as DocumentType, Collection } from 'types'; +import type { + Document as DocumentType, + Collection, + NavigationNode, +} from 'types'; const DOCUMENT_PREFERENCES = 'DOCUMENT_PREFERENCES'; @@ -54,6 +58,27 @@ class DocumentSceneStore { } } + @computed get pathToDocument(): ?Array { + let path; + const traveler = (node, previousPath) => { + if (this.document && node.id === this.document.id) { + path = previousPath; + return; + } else { + node.children.forEach(childNode => { + const newPath = [...previousPath, node]; + return traveler(childNode, newPath); + }); + } + }; + + if (this.document && this.collectionTree) { + traveler(this.collectionTree, []); + invariant(path, 'Path is not available for collection, abort'); + return path.splice(1); + } + } + /* Actions */ @action fetchDocument = async ( diff --git a/frontend/types/index.js b/frontend/types/index.js index 17eadbbb4..ac6ad6947 100644 --- a/frontend/types/index.js +++ b/frontend/types/index.js @@ -11,13 +11,21 @@ export type Team = { name: string, }; +export type NavigationNode = { + id: string, + title: string, + url: string, + collapsed: boolean, + children: Array, +}; + export type Collection = { createdAt: string, description: ?string, id: string, name: string, type: 'atlas' | 'journal', - navigationTree: Object, // TODO + navigationTree: NavigationNode, updatedAt: string, url: string, }; From 7144cc7f141cb36902bb89d8bdcf546607d6388d Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Sat, 13 May 2017 16:03:35 -0700 Subject: [PATCH 2/4] Fixed key warning --- frontend/scenes/DocumentScene/DocumentScene.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/scenes/DocumentScene/DocumentScene.js b/frontend/scenes/DocumentScene/DocumentScene.js index 3bda986c8..def21887e 100644 --- a/frontend/scenes/DocumentScene/DocumentScene.js +++ b/frontend/scenes/DocumentScene/DocumentScene.js @@ -150,10 +150,14 @@ class DocumentScene extends React.Component { const { document, pathToDocument } = this.store; if (document && document.collection) { const titleSections = pathToDocument - ? pathToDocument.map(node => {node.title}) + ? pathToDocument.map(node => ( + {node.title} + )) : []; titleSections.unshift( - {document.collection.name} + + {document.collection.name} + ); return ( From a4bc4663ef0d0e3c8950cf400c27ef6b444fb19f Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Sat, 13 May 2017 16:50:36 -0700 Subject: [PATCH 3/4] Separated Breadcrumbs into its own component --- .../scenes/DocumentScene/DocumentScene.js | 3 +- .../components/Breadcrumbs/Breadcrumbs.js | 36 +++++++++++++++++++ .../components/Breadcrumbs/index.js | 3 ++ 3 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 frontend/scenes/DocumentScene/components/Breadcrumbs/Breadcrumbs.js create mode 100644 frontend/scenes/DocumentScene/components/Breadcrumbs/index.js diff --git a/frontend/scenes/DocumentScene/DocumentScene.js b/frontend/scenes/DocumentScene/DocumentScene.js index def21887e..c23600af8 100644 --- a/frontend/scenes/DocumentScene/DocumentScene.js +++ b/frontend/scenes/DocumentScene/DocumentScene.js @@ -17,6 +17,7 @@ import Document from 'components/Document'; import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu'; import { Flex } from 'reflexbox'; import Sidebar from './components/Sidebar'; +import Breadcrumbs from './components/Breadcrumbs'; import styles from './DocumentScene.scss'; @@ -202,7 +203,7 @@ class DocumentScene extends React.Component { ); - title = this.renderLayoutTitle(); + title = ; titleText = `${doc.collection.name} - ${doc.title}`; } diff --git a/frontend/scenes/DocumentScene/components/Breadcrumbs/Breadcrumbs.js b/frontend/scenes/DocumentScene/components/Breadcrumbs/Breadcrumbs.js new file mode 100644 index 000000000..adec66f13 --- /dev/null +++ b/frontend/scenes/DocumentScene/components/Breadcrumbs/Breadcrumbs.js @@ -0,0 +1,36 @@ +// @flow +import React from 'react'; +import styled from 'styled-components'; +import { Link } from 'react-router'; +import type { Document, NavigationNode } from 'types'; +import DocumentSceneStore from '../../DocumentSceneStore'; + +type Props = { + store: DocumentSceneStore, +}; + +const Breadcrumbs = ({ store }: Props) => { + const { document, pathToDocument } = store; + if (document && document.collection) { + const titleSections = pathToDocument + ? pathToDocument.map(node => ( + {node.title} + )) + : []; + titleSections.unshift( + + {document.collection.name} + + ); + + return ( + +  /  + {titleSections.reduce((prev, curr) => [prev, ' / ', curr])} + {` / ${document.title}`} + + ); + } +}; + +export default Breadcrumbs; diff --git a/frontend/scenes/DocumentScene/components/Breadcrumbs/index.js b/frontend/scenes/DocumentScene/components/Breadcrumbs/index.js new file mode 100644 index 000000000..8fe21291d --- /dev/null +++ b/frontend/scenes/DocumentScene/components/Breadcrumbs/index.js @@ -0,0 +1,3 @@ +// @flow +import Breadcrumbs from './Breadcrumbs'; +export default Breadcrumbs; From 823d6a934c590ba69e4b378388ca709b32ad8e44 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Sat, 13 May 2017 16:51:27 -0700 Subject: [PATCH 4/4] removed old code --- .../scenes/DocumentScene/DocumentScene.js | 24 ------------------- 1 file changed, 24 deletions(-) diff --git a/frontend/scenes/DocumentScene/DocumentScene.js b/frontend/scenes/DocumentScene/DocumentScene.js index c23600af8..09021b029 100644 --- a/frontend/scenes/DocumentScene/DocumentScene.js +++ b/frontend/scenes/DocumentScene/DocumentScene.js @@ -147,30 +147,6 @@ class DocumentScene extends React.Component { } }; - renderLayoutTitle() { - const { document, pathToDocument } = this.store; - if (document && document.collection) { - const titleSections = pathToDocument - ? pathToDocument.map(node => ( - {node.title} - )) - : []; - titleSections.unshift( - - {document.collection.name} - - ); - - return ( - -  /  - {titleSections.reduce((prev, curr) => [prev, ' / ', curr])} - {` / ${document.title}`} - - ); - } - } - render() { const { sidebar } = this.props.ui;