Skip to content

Commit fea69ce

Browse files
64json64json
committed
Add BrowserRouter
1 parent f4500f7 commit fea69ce

11 files changed

Lines changed: 68 additions & 36 deletions

File tree

‎src/frontend/components/App/index.jsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,35 @@ class App extends React.Component {
3333
}
3434

3535
componentDidMount() {
36+
this.updateDirectory(this.props.match.params);
37+
3638
DirectoryApi.getCategories()
3739
.then(({ categories }) => {
3840
this.props.setCategories(categories);
39-
const [category] = categories;
40-
const [algorithm] = category.algorithms;
41-
const [file] = algorithm.files;
42-
this.props.selectFile(category.key, algorithm.key, file.key);
41+
const { categoryKey, algorithmKey, fileKey } = this.props.env;
42+
const category = categories.find(category => category.key === categoryKey) || categories[0];
43+
const algorithm = category.algorithms.find(algorithm => algorithm.key === algorithmKey) || category.algorithms[0];
44+
const file = algorithm.files.find(file => file.key === fileKey) || algorithm.files[0];
45+
this.props.history.push(`/${category.key}/${algorithm.key}/${file.key}`);
4346
});
47+
4448
tracerManager.setOnError(error => this.props.showErrorToast(error.message));
4549
}
4650

51+
componentWillReceiveProps(nextProps) {
52+
if (nextProps.match.params !== this.props.match.params) {
53+
this.updateDirectory(nextProps.match.params);
54+
}
55+
}
56+
4757
componentWillUnmount() {
4858
tracerManager.setOnError(null);
4959
}
5060

61+
updateDirectory({ categoryKey = null, algorithmKey = null, fileKey = null }) {
62+
this.props.setDirectory(categoryKey, algorithmKey, fileKey);
63+
}
64+
5165
toggleNavigator(navigatorOpened = !this.state.navigatorOpened) {
5266
this.setState({ navigatorOpened });
5367
}

‎src/frontend/components/Button/index.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import React from 'react';
22
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
33
import styles from './stylesheet.scss';
44
import { classes } from '/common/util';
5+
import { Link } from 'react-router-dom';
56

67
class Button extends React.Component {
78
render() {
8-
const { className, children, onClick, href, icon, reverse, selected, disabled, primary, active } = this.props;
9+
const { className, children, onClick, to, href, icon, reverse, selected, disabled, primary, active } = this.props;
910

1011
const iconOnly = !children;
1112
const props = {
@@ -18,7 +19,9 @@ class Button extends React.Component {
1819
]
1920
};
2021

21-
return href ? (
22+
return to ? (
23+
<Link to={to} {...props} />
24+
) : href ? (
2225
<a href={href} rel="noopener" target="_blank" {...props} />
2326
) : (
2427
<div {...props} />

‎src/frontend/components/EditorSection/index.jsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,12 @@ class EditorSection extends React.Component {
3333
}
3434

3535
componentDidMount() {
36-
const { categoryKey, algorithmKey, fileKey } = this.props.env;
37-
this.loadCodeAndData(categoryKey, algorithmKey, fileKey);
3836
tracerManager.setDataGetter(() => this.state.data);
3937
tracerManager.setCodeGetter(() => this.state.code);
4038
tracerManager.setOnUpdateLineIndicator(lineIndicator => this.setState({ lineMarker: this.createLineMarker(lineIndicator) }));
39+
40+
const { categoryKey, algorithmKey, fileKey } = this.props.env;
41+
this.loadCodeAndData(categoryKey, algorithmKey, fileKey);
4142
}
4243

4344
componentWillUnmount() {
@@ -73,8 +74,7 @@ class EditorSection extends React.Component {
7374
loadCodeAndData(categoryKey, algorithmKey, fileKey) {
7475
DirectoryApi.getFile(categoryKey, algorithmKey, fileKey)
7576
.then(({ data, code }) => {
76-
this.handleChangeData(data);
77-
this.handleChangeCode(code);
77+
this.setState({ data, code }, () => tracerManager.runData());
7878
});
7979
}
8080

@@ -98,14 +98,18 @@ class EditorSection extends React.Component {
9898

9999
const category = categories.find(category => category.key === categoryKey);
100100
const algorithm = category.algorithms.find(algorithm => algorithm.key === algorithmKey);
101-
const fileKeys = algorithm.files.map(file => file.key);
102-
const tabIndex = fileKeys.findIndex(v => v === fileKey);
101+
const tabs = algorithm.files.map(file => ({
102+
title: file.name,
103+
props: {
104+
to: `/${category.key}/${algorithm.key}/${file.key}`
105+
},
106+
}));
107+
const tabIndex = algorithm.files.findIndex(file => file.key === fileKey);
103108
const fileInfo = ''; // TODO
104109

105110
return (
106111
<section className={classes(styles.editor_section, className)}>
107-
<TabBar titles={fileKeys} selectedIndex={tabIndex}
108-
onClickTab={tabIndex => this.props.selectFile(categoryKey, algorithmKey, fileKeys[tabIndex])} />
112+
<TabBar tabs={tabs} tabIndex={tabIndex} />
109113
<div className={styles.info_container}>
110114
<FontAwesomeIcon fixedWidth icon={faInfoCircle} className={styles.info_icon} />
111115
<Ellipsis className={styles.info_text}>{fileInfo}</Ellipsis>

‎src/frontend/components/Header/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ class Header extends React.Component {
6262
return (
6363
<header className={classes(styles.header, className)}>
6464
<Button className={styles.title_bar} onClick={onClickTitleBar}>
65-
<Ellipsis>{category.ame}</Ellipsis>
65+
<Ellipsis>{category.name}</Ellipsis>
6666
<FontAwesomeIcon className={styles.nav_arrow} fixedWidth icon={faAngleRight} />
6767
<Ellipsis>{algorithm.name}</Ellipsis>
6868
<FontAwesomeIcon className={styles.nav_caret} fixedWidth

‎src/frontend/components/Navigator/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ class Navigator extends React.Component {
9494
const [file] = algorithm.files;
9595
return (
9696
<ListItem indent key={algorithm.key} selected={selected}
97-
onClick={() => this.props.selectFile(category.key, algorithm.key, file.key)}>
97+
to={`/${category.key}/${algorithm.key}/${file.key}`}>
9898
<Ellipsis>{algorithm.name}</Ellipsis>
9999
</ListItem>
100100
)

‎src/frontend/components/TabBar/index.jsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,26 @@ import styles from './stylesheet.scss';
77

88
class TabBar extends React.Component {
99
render() {
10-
const { className, titles, selectedIndex, onClickTab } = this.props;
10+
const { className, tabs, tabIndex } = this.props;
11+
12+
const prevIndex = (tabIndex - 1 + tabs.length) % tabs.length;
13+
const nextIndex = (tabIndex + 1) % tabs.length;
1114

1215
return (
1316
<div className={classes(styles.tab_bar, className)}>
14-
<Button className={styles.tab} icon={faAngleLeft}
15-
onClick={() => onClickTab((selectedIndex - 1 + titles.length) % titles.length)} />
17+
<Button className={styles.tab} icon={faAngleLeft} {...tabs[prevIndex].props} />
1618
<div className={styles.wrapper}>
1719
{
18-
titles.map((title, i) => {
19-
const selected = selectedIndex === i;
20+
tabs.map((tab, i) => {
21+
const { title, props } = tab;
22+
const selected = tabIndex === i;
2023
return (
21-
<Button className={classes(styles.tab, selected && styles.selected)}
22-
onClick={() => onClickTab(i)} key={i}>{title}</Button>
24+
<Button className={classes(styles.tab, selected && styles.selected)} key={i} {...props}>{title}</Button>
2325
)
2426
})
2527
}
2628
</div>
27-
<Button className={styles.tab} icon={faAngleRight}
28-
onClick={() => onClickTab((selectedIndex + 1) % titles.length)} />
29+
<Button className={styles.tab} icon={faAngleRight} {...tabs[nextIndex].props} />
2930
</div>
3031
);
3132
}

‎src/frontend/components/ViewerSection/index.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,16 @@ class ViewerSection extends React.Component {
2020
const { className, style } = this.props;
2121
const { tabIndex } = this.state;
2222

23+
const tabs = ['Visualization', 'Description', 'Tracer API'].map((title, i) => ({
24+
title,
25+
props: {
26+
onClick: () => this.setTabIndex(i)
27+
},
28+
}));
29+
2330
return (
2431
<section className={classes(styles.viewer_section, className)} style={style}>
25-
<TabBar titles={['Visualization', 'Description', 'Tracer API']} selectedIndex={tabIndex}
26-
onClickTab={tabIndex => this.setTabIndex(tabIndex)} />
32+
<TabBar tabs={tabs} tabIndex={tabIndex} />
2733
<div className={styles.content} data-tab_index={tabIndex}>
2834
<RendererContainer className={styles.tab} />
2935
<DescriptionViewer className={styles.tab} />

‎src/frontend/core/tracerManager.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,13 @@ class TracerManager {
6666
if (this.onUpdateLineIndicator) this.onUpdateLineIndicator(lineIndicator);
6767
}
6868

69-
getData(){
70-
if(this.dataGetter) return this.dataGetter();
69+
getData() {
70+
if (this.dataGetter) return this.dataGetter();
7171
return null;
7272
}
7373

74-
getCode(){
75-
if(this.codeGetter) return this.codeGetter();
74+
getCode() {
75+
if (this.codeGetter) return this.codeGetter();
7676
return null;
7777
}
7878

‎src/frontend/index.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import { combineReducers, createStore } from 'redux';
4-
import { BrowserRouter } from 'react-router-dom';
4+
import { BrowserRouter, Route, Switch } from 'react-router-dom';
55
import { Provider } from 'react-redux';
66
import { routerReducer } from 'react-router-redux';
77
import App from '/components/App';
@@ -15,7 +15,10 @@ const render = (Component) => {
1515
ReactDOM.render(
1616
<Provider store={store}>
1717
<BrowserRouter>
18-
<Component />
18+
<Switch>
19+
<Route exact path="/:categoryKey/:algorithmKey/:fileKey" component={Component} />
20+
<Route path="/" component={Component} />
21+
</Switch>
1922
</BrowserRouter>
2023
</Provider>,
2124
MOUNT_NODE

‎src/frontend/reducers/env.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import { combineActions, createAction, handleActions } from 'redux-actions';
33
const prefix = 'ENV';
44

55
const setCategories = createAction(`${prefix}/SET_CATEGORIES`, categories => ({ categories }));
6-
const selectFile = createAction(`${prefix}/SELECT_FILE`, (categoryKey, algorithmKey, fileKey) => ({
6+
const setDirectory = createAction(`${prefix}/SELECT_FILE`, (categoryKey, algorithmKey, fileKey) => ({
77
categoryKey,
88
algorithmKey,
99
fileKey,
1010
}));
1111

1212
export const actions = {
1313
setCategories,
14-
selectFile,
14+
setDirectory,
1515
};
1616

1717
const immutables = {};
@@ -26,7 +26,7 @@ const mutables = {
2626
export default handleActions({
2727
[combineActions(
2828
setCategories,
29-
selectFile,
29+
setDirectory,
3030
)]: (state, { payload }) => ({
3131
...state,
3232
...payload,

0 commit comments

Comments
 (0)