// @flow import * as React from "react"; import { observer, inject } from "mobx-react"; import { withRouter, type Location } from "react-router-dom"; import Fade from "components/Fade"; import Tabs from "components/Tabs"; import Tab from "components/Tab"; import DocumentsStore from "stores/DocumentsStore"; import CollectionsStore from "stores/CollectionsStore"; import Document from "models/Document"; import ReferenceListItem from "./ReferenceListItem"; type Props = { document: Document, documents: DocumentsStore, collections: CollectionsStore, location: Location, }; @observer class References extends React.Component { componentDidMount() { this.props.documents.fetchBacklinks(this.props.document.id); } render() { const { documents, collections, document } = this.props; const backlinks = documents.getBacklinedDocuments(document.id); const collection = collections.get(document.collectionId); const children = collection ? collection.getDocumentChildren(document.id) : []; const showBacklinks = !!backlinks.length; const showChildren = !!children.length; const isBacklinksTab = this.props.location.hash === "#backlinks" || !showChildren; return ( (showBacklinks || showChildren) && ( {showChildren && ( !isBacklinksTab}> Nested documents )} {showBacklinks && ( isBacklinksTab}> References )} {isBacklinksTab ? backlinks.map((backlinkedDocument) => ( )) : children.map((node) => { // If we have the document in the store already then use it to get the extra // contextual info, otherwise the collection node will do (only has title and id) const document = documents.get(node.id); return ( ); })} ) ); } } export default withRouter(inject("documents", "collections")(References));