diff --git a/src/frontend/components/App/index.jsx b/src/frontend/components/App/index.jsx index b5fa1ec4acb556f2e767a425997fb0a4d9463496..79df7ed7c53a90c2a01e96712866446d4cd6a82d 100644 --- a/src/frontend/components/App/index.jsx +++ b/src/frontend/components/App/index.jsx @@ -33,21 +33,35 @@ class App extends React.Component { } componentDidMount() { + this.updateDirectory(this.props.match.params); + DirectoryApi.getCategories() .then(({ categories }) => { this.props.setCategories(categories); - const [category] = categories; - const [algorithm] = category.algorithms; - const [file] = algorithm.files; - this.props.selectFile(category.key, algorithm.key, file.key); + const { categoryKey, algorithmKey, fileKey } = this.props.env; + const category = categories.find(category => category.key === categoryKey) || categories[0]; + const algorithm = category.algorithms.find(algorithm => algorithm.key === algorithmKey) || category.algorithms[0]; + const file = algorithm.files.find(file => file.key === fileKey) || algorithm.files[0]; + this.props.history.push(`/${category.key}/${algorithm.key}/${file.key}`); }); + tracerManager.setOnError(error => this.props.showErrorToast(error.message)); } + componentWillReceiveProps(nextProps) { + if (nextProps.match.params !== this.props.match.params) { + this.updateDirectory(nextProps.match.params); + } + } + componentWillUnmount() { tracerManager.setOnError(null); } + updateDirectory({ categoryKey = null, algorithmKey = null, fileKey = null }) { + this.props.setDirectory(categoryKey, algorithmKey, fileKey); + } + toggleNavigator(navigatorOpened = !this.state.navigatorOpened) { this.setState({ navigatorOpened }); } diff --git a/src/frontend/components/Button/index.jsx b/src/frontend/components/Button/index.jsx index d30693b926880ba21e5175c2f3d54695c4bd1dae..851fe39c6f8ed7babd9e6d07dafde7cc99dd7082 100644 --- a/src/frontend/components/Button/index.jsx +++ b/src/frontend/components/Button/index.jsx @@ -2,10 +2,11 @@ import React from 'react'; import FontAwesomeIcon from '@fortawesome/react-fontawesome' import styles from './stylesheet.scss'; import { classes } from '/common/util'; +import { Link } from 'react-router-dom'; class Button extends React.Component { render() { - const { className, children, onClick, href, icon, reverse, selected, disabled, primary, active } = this.props; + const { className, children, onClick, to, href, icon, reverse, selected, disabled, primary, active } = this.props; const iconOnly = !children; const props = { @@ -18,7 +19,9 @@ class Button extends React.Component { ] }; - return href ? ( + return to ? ( + + ) : href ? ( ) : (
diff --git a/src/frontend/components/EditorSection/index.jsx b/src/frontend/components/EditorSection/index.jsx index 0172f90b26808619744ba7cef612884c8932554b..d221e42f4d092c394668200dc2731b8de92acc5f 100644 --- a/src/frontend/components/EditorSection/index.jsx +++ b/src/frontend/components/EditorSection/index.jsx @@ -33,11 +33,12 @@ class EditorSection extends React.Component { } componentDidMount() { - const { categoryKey, algorithmKey, fileKey } = this.props.env; - this.loadCodeAndData(categoryKey, algorithmKey, fileKey); tracerManager.setDataGetter(() => this.state.data); tracerManager.setCodeGetter(() => this.state.code); tracerManager.setOnUpdateLineIndicator(lineIndicator => this.setState({ lineMarker: this.createLineMarker(lineIndicator) })); + + const { categoryKey, algorithmKey, fileKey } = this.props.env; + this.loadCodeAndData(categoryKey, algorithmKey, fileKey); } componentWillUnmount() { @@ -73,8 +74,7 @@ class EditorSection extends React.Component { loadCodeAndData(categoryKey, algorithmKey, fileKey) { DirectoryApi.getFile(categoryKey, algorithmKey, fileKey) .then(({ data, code }) => { - this.handleChangeData(data); - this.handleChangeCode(code); + this.setState({ data, code }, () => tracerManager.runData()); }); } @@ -98,14 +98,18 @@ class EditorSection extends React.Component { const category = categories.find(category => category.key === categoryKey); const algorithm = category.algorithms.find(algorithm => algorithm.key === algorithmKey); - const fileKeys = algorithm.files.map(file => file.key); - const tabIndex = fileKeys.findIndex(v => v === fileKey); + const tabs = algorithm.files.map(file => ({ + title: file.name, + props: { + to: `/${category.key}/${algorithm.key}/${file.key}` + }, + })); + const tabIndex = algorithm.files.findIndex(file => file.key === fileKey); const fileInfo = ''; // TODO return (