Renamed /src to /frontend
This commit is contained in:
Jori Lallo
215
frontend/scenes/DocumentScene/DocumentScene.js
Normal file
215
frontend/scenes/DocumentScene/DocumentScene.js
Normal file
@@ -0,0 +1,215 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { toJS } from 'mobx';
|
||||
import { Link, browserHistory } from 'react-router';
|
||||
import { observer } from 'mobx-react';
|
||||
import keydown from 'react-keydown';
|
||||
import _ from 'lodash';
|
||||
|
||||
import DocumentSceneStore, {
|
||||
DOCUMENT_PREFERENCES
|
||||
} from './DocumentSceneStore';
|
||||
|
||||
import Layout, { HeaderAction } from 'components/Layout';
|
||||
import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
|
||||
import CenteredContent from 'components/CenteredContent';
|
||||
import Document from 'components/Document';
|
||||
import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
|
||||
import Flex from 'components/Flex';
|
||||
import Tree from 'components/Tree';
|
||||
|
||||
import styles from './DocumentScene.scss';
|
||||
import classNames from 'classnames/bind';
|
||||
const cx = classNames.bind(styles);
|
||||
|
||||
import treeStyles from 'components/Tree/Tree.scss';
|
||||
|
||||
@keydown(['cmd+/', 'ctrl+/', 'c', 'e'])
|
||||
@observer(['ui'])
|
||||
class DocumentScene extends React.Component {
|
||||
static propTypes = {
|
||||
ui: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
static store;
|
||||
|
||||
state = {
|
||||
didScroll: false,
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.store = new DocumentSceneStore(JSON.parse(localStorage[DOCUMENT_PREFERENCES] || "{}"));
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
const { id } = this.props.routeParams;
|
||||
this.store.fetchDocument(id);
|
||||
}
|
||||
|
||||
componentWillReceiveProps = (nextProps) => {
|
||||
const key = nextProps.keydown.event;
|
||||
if (key) {
|
||||
if (key.key === '/' && (key.metaKey || key.ctrl.Key)) {
|
||||
this.toggleSidebar();
|
||||
}
|
||||
|
||||
if (key.key === 'c') {
|
||||
_.defer(this.onCreate);
|
||||
}
|
||||
|
||||
if (key.key === 'e') {
|
||||
_.defer(this.onEdit);
|
||||
}
|
||||
}
|
||||
|
||||
// Reload on url change
|
||||
const oldId = this.props.params.id;
|
||||
const newId = nextProps.params.id;
|
||||
if (oldId !== newId) {
|
||||
this.store.fetchDocument(newId, true);
|
||||
}
|
||||
|
||||
// Scroll to anchor after loading, and only once
|
||||
const { hash } = this.props.location;
|
||||
|
||||
if (nextProps.doc && hash && !this.state.didScroll) {
|
||||
const name = hash.split('#')[1];
|
||||
setTimeout(() => {
|
||||
this.setState({ didScroll: true });
|
||||
const element = doc.getElementsByName(name)[0];
|
||||
if (element) element.scrollIntoView()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
||||
onEdit = () => {
|
||||
const url = `/documents/${this.store.document.id}/edit`;
|
||||
browserHistory.push(url);
|
||||
}
|
||||
|
||||
onCreate = () => {
|
||||
const url = `/documents/${this.store.document.id}/new`;
|
||||
browserHistory.push(url);
|
||||
}
|
||||
|
||||
onDelete = () => {
|
||||
let msg;
|
||||
if (this.store.document.atlas.type === 'atlas') {
|
||||
msg = 'Are you sure you want to delete this document and all it\'s child documents (if any)?'
|
||||
} else {
|
||||
msg = "Are you sure you want to delete this document?";
|
||||
}
|
||||
|
||||
if (confirm(msg)) {
|
||||
this.store.deleteDocument();
|
||||
};
|
||||
}
|
||||
|
||||
onExport = () => {
|
||||
const doc = this.store.document;
|
||||
const a = document.createElement('a');
|
||||
a.textContent = 'download';
|
||||
a.download = `${doc.title}.md`;
|
||||
a.href = `data:text/markdown;charset=UTF-8,${encodeURIComponent(doc.text)}`;
|
||||
a.click();
|
||||
}
|
||||
|
||||
toggleSidebar = () => {
|
||||
this.props.ui.toggleSidebar();
|
||||
}
|
||||
|
||||
renderNode = (node) => {
|
||||
return (
|
||||
<span className={ treeStyles.nodeLabel } onClick={this.onClickNode.bind(null, node)}>
|
||||
{node.module.name}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
sidebar,
|
||||
} = this.props.ui;
|
||||
|
||||
const doc = this.store.document;
|
||||
const allowDelete = doc && doc.atlas.type === 'atlas' &&
|
||||
doc.id !== doc.atlas.navigationTree.id;
|
||||
let title;
|
||||
let titleText;
|
||||
let actions;
|
||||
if (doc) {
|
||||
actions = (
|
||||
<div className={ styles.actions }>
|
||||
<DropdownMenu label={ <MoreIcon /> }>
|
||||
{ this.store.isAtlas && <MenuItem onClick={ this.onCreate }>New document</MenuItem> }
|
||||
<MenuItem onClick={ this.onEdit }>Edit</MenuItem>
|
||||
<MenuItem onClick={ this.onExport }>Export</MenuItem>
|
||||
{ allowDelete && <MenuItem onClick={ this.onDelete }>Delete</MenuItem> }
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
title = (
|
||||
<span>
|
||||
<Link to={ `/atlas/${doc.atlas.id}` }>{doc.atlas.name}</Link>
|
||||
{ ` / ${doc.title}` }
|
||||
</span>
|
||||
);
|
||||
titleText = `${doc.atlas.name} - ${doc.title}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={ title }
|
||||
titleText={ titleText }
|
||||
actions={ doc && actions }
|
||||
loading={ this.store.updatingStructure }
|
||||
>
|
||||
{ this.store.isFetching ? (
|
||||
<CenteredContent>
|
||||
<AtlasPreviewLoading />
|
||||
</CenteredContent>
|
||||
) : (
|
||||
<Flex flex={ true }>
|
||||
{ this.store.isAtlas && (
|
||||
<Flex>
|
||||
{ sidebar && (
|
||||
<div className={ styles.sidebar }>
|
||||
<Tree
|
||||
paddingLeft={ 10 }
|
||||
tree={ toJS(this.store.atlasTree) }
|
||||
onChange={ this.store.updateNavigationTree }
|
||||
onCollapse={ this.store.onNodeCollapse }
|
||||
isNodeCollapsed={ this.isNodeCollapsed }
|
||||
renderNode={ this.renderNode }
|
||||
/>
|
||||
</div>
|
||||
) }
|
||||
<div
|
||||
onClick={ this.toggleSidebar }
|
||||
className={ styles.sidebarToggle }
|
||||
title="Toggle sidebar (Cmd+/)"
|
||||
>
|
||||
<img
|
||||
src={ require("assets/icons/menu.svg") }
|
||||
className={ styles.menuIcon }
|
||||
/>
|
||||
</div>
|
||||
</Flex>
|
||||
) }
|
||||
<Flex flex={ true } justify={ 'center' } className={ styles.content}>
|
||||
<CenteredContent>
|
||||
{ this.store.updatingContent ? (
|
||||
<AtlasPreviewLoading />
|
||||
) : (
|
||||
<Document document={ doc } />
|
||||
) }
|
||||
</CenteredContent>
|
||||
</Flex>
|
||||
</Flex>
|
||||
) }
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default DocumentScene;
|
||||
37
frontend/scenes/DocumentScene/DocumentScene.scss
Normal file
37
frontend/scenes/DocumentScene/DocumentScene.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
padding: 20px 20px 20px 5px;
|
||||
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebarToggle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 60px;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.menuIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menuIcon {
|
||||
margin-top: 18px;
|
||||
height: 28px;
|
||||
opacity: 0.15;
|
||||
}
|
||||
129
frontend/scenes/DocumentScene/DocumentSceneStore.js
Normal file
129
frontend/scenes/DocumentScene/DocumentSceneStore.js
Normal file
@@ -0,0 +1,129 @@
|
||||
import _isEqual from 'lodash/isEqual';
|
||||
import _indexOf from 'lodash/indexOf';
|
||||
import _without from 'lodash/without';
|
||||
import { observable, action, computed, runInAction, toJS, autorun } from 'mobx';
|
||||
import { client } from 'utils/ApiClient';
|
||||
import { browserHistory } from 'react-router';
|
||||
|
||||
const DOCUMENT_PREFERENCES = 'DOCUMENT_PREFERENCES';
|
||||
|
||||
class DocumentSceneStore {
|
||||
@observable document;
|
||||
@observable collapsedNodes = [];
|
||||
|
||||
@observable isFetching = true;
|
||||
@observable updatingContent = false;
|
||||
@observable updatingStructure = false;
|
||||
@observable isDeleting;
|
||||
|
||||
/* Computed */
|
||||
|
||||
@computed get isAtlas() {
|
||||
return this.document &&
|
||||
this.document.atlas.type === 'atlas';
|
||||
}
|
||||
|
||||
@computed get atlasTree() {
|
||||
if (this.document.atlas.type !== 'atlas') return;
|
||||
let tree = this.document.atlas.navigationTree;
|
||||
|
||||
const collapseNodes = (node) => {
|
||||
if (this.collapsedNodes.includes(node.id)) {
|
||||
node.collapsed = true;
|
||||
}
|
||||
node.children = node.children.map(childNode => {
|
||||
return collapseNodes(childNode);
|
||||
})
|
||||
|
||||
return node;
|
||||
};
|
||||
|
||||
return collapseNodes(toJS(tree));
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
|
||||
@action fetchDocument = async (id, softLoad) => {
|
||||
this.isFetching = !softLoad;
|
||||
this.updatingContent = softLoad;
|
||||
|
||||
try {
|
||||
const res = await client.get('/documents.info', { id: id });
|
||||
const { data } = res;
|
||||
runInAction('fetchDocument', () => {
|
||||
this.document = data;
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Something went wrong");
|
||||
}
|
||||
this.isFetching = false;
|
||||
this.updatingContent = false;
|
||||
}
|
||||
|
||||
@action deleteDocument = async () => {
|
||||
this.isFetching = true;
|
||||
|
||||
try {
|
||||
const res = await client.post('/documents.delete', { id: this.document.id });
|
||||
browserHistory.push(`/atlas/${this.document.atlas.id}`);
|
||||
} catch (e) {
|
||||
console.error("Something went wrong");
|
||||
}
|
||||
this.isFetching = false;
|
||||
}
|
||||
|
||||
@action updateNavigationTree = async (tree) => {
|
||||
// Only update when tree changes
|
||||
if (_isEqual(toJS(tree), toJS(this.document.atlas.navigationTree))) {
|
||||
return true;
|
||||
}
|
||||
|
||||
this.updatingStructure = true;
|
||||
|
||||
try {
|
||||
const res = await client.post('/atlases.updateNavigationTree', {
|
||||
id: this.document.atlas.id,
|
||||
tree: tree,
|
||||
});
|
||||
runInAction('updateNavigationTree', () => {
|
||||
const { data } = res;
|
||||
this.document.atlas = data;
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Something went wrong");
|
||||
}
|
||||
this.updatingStructure = false;
|
||||
}
|
||||
|
||||
@action onNodeCollapse = (nodeId, collapsed) => {
|
||||
if (_indexOf(this.collapsedNodes, nodeId) >= 0) {
|
||||
this.collapsedNodes = _without(this.collapsedNodes, nodeId);
|
||||
} else {
|
||||
this.collapsedNodes.push(nodeId);
|
||||
}
|
||||
}
|
||||
|
||||
// General
|
||||
|
||||
persistSettings = () => {
|
||||
localStorage[DOCUMENT_PREFERENCES] = JSON.stringify({
|
||||
collapsedNodes: toJS(this.collapsedNodes),
|
||||
});
|
||||
}
|
||||
|
||||
constructor(settings) {
|
||||
// Rehydrate settings
|
||||
this.collapsedNodes = settings.collapsedNodes || [];
|
||||
|
||||
// Persist settings to localStorage
|
||||
// TODO: This could be done more selectively
|
||||
autorun(() => {
|
||||
this.persistSettings();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default DocumentSceneStore;
|
||||
export {
|
||||
DOCUMENT_PREFERENCES,
|
||||
};
|
||||
2
frontend/scenes/DocumentScene/index.js
Normal file
2
frontend/scenes/DocumentScene/index.js
Normal file
@@ -0,0 +1,2 @@
|
||||
import DocumentScene from './DocumentScene';
|
||||
export default DocumentScene;
|
||||
Reference in New Issue
Block a user