Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit c898531

Browse files
mydearxymmydearxym
committed
use route store to handle route info
1 parent 9d44fa1 commit c898531

File tree

14 files changed

+163
-41
lines changed

14 files changed

+163
-41
lines changed

‎containers/Body/index.js‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@
77
import React from 'react'
88
import { inject, observer } from 'mobx-react'
99
import keydown from 'react-keydown'
10-
import R from 'ramda'
1110

1211
// import Link from 'next/link'
1312
import { Button } from '../../components'
1413

15-
import { makeDebugger, storeSelector } from '../../utils/functions'
14+
import { storeSelector } from '../../utils/functions'
1615

1716
import * as SuggestionIcons from '../Doraemon/styles/suggestionIcons'
1817
import * as logic from './logic'
@@ -32,10 +31,7 @@ import {
3231
AddonSVGIconWrapper,
3332
} from './styles'
3433

35-
const debug = makeDebugger('C:Body')
36-
3734
const Icons = { ...SuggestionIcons }
38-
const DefaultIcon = SuggestionIcons.js
3935

4036
const AppHeader = () => {
4137
return (
@@ -57,18 +53,14 @@ const AppHeader = () => {
5753
)
5854
}
5955

60-
const AppBanner = ({ route }) => {
61-
let iconKey
62-
// console.log('AppBanner route: ', route.query)
56+
const AppBanner = ({ curUrlPath }) => {
57+
const defaultIcon = 'js'
58+
const iconKey = curUrlPath === '/' ? defaultIcon : curUrlPath
6359

64-
if (R.isEmpty(route.query)) {
65-
iconKey = 'js'
66-
} else {
67-
// getPath(route.asPath)
68-
iconKey = route.query.name
69-
}
60+
// debug('AppBanner curUrlPath: ', curUrlPath)
61+
// debug('iconKey: ', iconKey)
7062

71-
const Icon = Icons[iconKey] ? Icons[iconKey] : DefaultIcon
63+
const Icon = Icons[iconKey]
7264
return (
7365
<Banner>
7466
<AddonSVGIconWrapper>
@@ -81,7 +73,6 @@ const AppBanner = ({ route }) => {
8173
class ContentContainer extends React.Component {
8274
componentWillMount() {
8375
logic.init(this.props.body)
84-
debug('init')
8576
}
8677

8778
/* eslint-disable class-methods-use-this */
@@ -93,12 +84,12 @@ class ContentContainer extends React.Component {
9384
/* eslint-enable class-methods-use-this */
9485

9586
render() {
96-
const { route } = this.props
97-
debug('route: ', route)
87+
const { body } = this.props
88+
// debug('route: ', route)
9889
return (
9990
<Body id="whereCallShowDoraemon">
10091
<AppHeader />
101-
<AppBanner route={route} />
92+
<AppBanner curUrlPath={body.curUrlPath} />
10293
<div>content</div>
10394
</Body>
10495
)

‎containers/Route/index.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/*
2+
*
3+
* Route
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import { inject, observer } from 'mobx-react'
9+
import Router, { withRouter } from 'next/router'
10+
// import Router, { withRouter } from 'next/router'
11+
12+
// import Link from 'next/link'
13+
14+
import { makeDebugger, storeSelector } from '../../utils/functions'
15+
import { init, syncRoute } from './logic'
16+
17+
const debug = makeDebugger('C:Route')
18+
19+
class RouteContainer extends React.Component {
20+
componentWillMount() {
21+
debug('mount')
22+
init(this.props.route)
23+
syncRoute(this.props.router)
24+
Router.onRouteChangeStart = url => {
25+
console.log('App is changing to: ', url)
26+
}
27+
}
28+
29+
componentWillReceiveProps(nextProps) {
30+
syncRoute(nextProps.router)
31+
}
32+
33+
render() {
34+
return <div />
35+
}
36+
}
37+
38+
export default inject(storeSelector('route'))(
39+
observer(withRouter(RouteContainer))
40+
)

‎containers/Route/logic.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { makeDebugger } from '../../utils/functions'
2+
3+
/* eslint-disable no-unused-vars */
4+
const debug = makeDebugger('L:Route')
5+
/* eslint-enable no-unused-vars */
6+
7+
let route = null
8+
9+
export function syncRoute(current) {
10+
// const { query, asPath, pathname } = current
11+
const { asPath, pathname } = current
12+
route.markState({
13+
pathname,
14+
// query,
15+
asPath,
16+
})
17+
}
18+
19+
export function init(selectedStore) {
20+
route = selectedStore
21+
}

‎containers/Route/styles/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// import styled from 'styled-components'

‎containers/Route/tests/index.test.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import React from 'react'
2+
// import { shallow } from 'enzyme'
3+
4+
// import Route from '../index'
5+
6+
describe('<Route />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(false)
9+
})
10+
})

‎containers/Sidebar/index.js‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66

77
import React from 'react'
88
import Link from 'next/link'
9+
// import Router, { withRouter } from 'next/router'
910
import R from 'ramda'
1011
import { inject, observer } from 'mobx-react'
1112

1213
import * as SuggestionIcons from '../../containers/Doraemon/styles/suggestionIcons'
13-
// import { makeDebugger } from '../../utils/functions'
1414

1515
import { makeDebugger, storeSelector } from '../../utils/functions'
1616
import PinButton from './PinButton'
@@ -24,26 +24,29 @@ const DefaultIcon = SuggestionIcons.javascript
2424

2525
const getIconKey = R.compose(R.last, R.split('--'), R.toLower)
2626

27-
const NodeIcon = ({ raw }) => {
27+
const NodeIcon = ({ raw, active }) => {
2828
const lowerRaw = R.toLower(raw)
2929
const iconKey = getIconKey(lowerRaw)
3030

3131
const Icon = Icons[iconKey] ? Icons[iconKey] : DefaultIcon
3232
return (
33-
<SVGIconWrapper>
33+
<SVGIconWrapper active={active}>
3434
<Icon />
3535
</SVGIconWrapper>
3636
)
3737
}
3838

39-
const MenuList = ({ items, open }) => {
39+
const MenuList = ({ items, open, curUrlPath }) => {
4040
const listItems = items.map(item => (
4141
<li key={item.name}>
4242
{open ? (
4343
<div>
4444
<Link href={item.target.href} as={item.target.as}>
45-
<Row>
46-
<NodeIcon raw={item.name} />
45+
<Row active={curUrlPath === R.toLower(item.name)}>
46+
<NodeIcon
47+
raw={item.name}
48+
active={curUrlPath === R.toLower(item.name)}
49+
/>
4750
{/* eslint-disable jsx-a11y/anchor-is-valid */}
4851
<div style={{ marginRight: 10 }} />
4952
<a>{item.name}</a>
@@ -52,7 +55,10 @@ const MenuList = ({ items, open }) => {
5255
</div>
5356
) : (
5457
<Row>
55-
<NodeIcon raw={item.name} />
58+
<NodeIcon
59+
raw={item.name}
60+
active={curUrlPath === R.toLower(item.name)}
61+
/>
5662
</Row>
5763
)}
5864
</li>
@@ -68,19 +74,20 @@ class SidebarContainer extends React.Component {
6874

6975
render() {
7076
const { sidebar } = this.props
71-
/* debug('-----> menuItems2 --------> : ', sidebar.menuItems.toJSON()) */
77+
const { curUrlPath, menuItems, open, pin } = sidebar
78+
// debug('-----> sidebar route --------> : ', this.props.router)
7279

7380
return (
7481
<Sidebar
7582
open={sidebar.open}
7683
onMouseEnter={logic.enterSidebar}
7784
onMouseLeave={logic.leaveSidebar}
7885
>
79-
<PinButton open={sidebar.open} pin={sidebar.pin} onClick={logic.pin} />
86+
<PinButton open={open} pin={pin} onClick={logic.pin} />
8087
<br />
8188
<br />
8289

83-
<MenuList items={sidebar.menuItems} open={sidebar.open} />
90+
<MenuList items={menuItems} open={open} curUrlPath={curUrlPath} />
8491
</Sidebar>
8592
)
8693
}

‎containers/Sidebar/logic.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ const debug = makeDebugger('L:sidebar')
66
let sidebar = null
77

88
export function pin() {
9-
debug('pin: ', !sidebar.pin)
109
sidebar.markState({ pin: !sidebar.pin })
1110
}
1211

‎containers/Sidebar/styles/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,13 @@ export const Row = styled.div`
5757
justify-content: left;
5858
> a {
5959
color: ${theme('sidebar.menu_link')};
60+
opacity: ${props => (props.active ? 1 : 0.5)};
6061
}
6162
`
6263

6364
export const SVGIconWrapper = styled.div`
6465
margin-top: 5px;
66+
opacity: ${props => (props.active ? 1 : 0.5)};
6567
> svg {
6668
width: 22px;
6769
height: 22px;

‎pages/index.js‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@ import React from 'react'
22
import { Provider } from 'mobx-react'
33

44
import initRootStore from '../stores'
5-
65
import Decrator from '../containers/Decrator'
76
import MultiLanguage from '../containers/MultiLanguage'
8-
97
import Sidebar from '../containers/Sidebar'
108
import Body from '../containers/Body'
11-
129
import Preview from '../containers/Preview'
1310
import Doraemon from '../containers/Doraemon'
11+
import Route from '../containers/Route'
1412

1513
// try to fix safari bug
1614
// see https://github.com/yahoo/react-intl/issues/422
@@ -36,19 +34,14 @@ export default class Index extends React.Component {
3634
}
3735

3836
render() {
39-
const route = this.props.url
40-
/*
41-
<Body route={route} />
42-
<Sidebar {...globalStatus} />
43-
*/
44-
4537
return (
4638
<Provider store={this.store}>
4739
<Decrator>
40+
<Route />
4841
<MultiLanguage>
4942
<Preview />
50-
<Body route={route} />
51-
<Sidebar route={route} />
43+
<Body />
44+
<Sidebar />
5245
<Doraemon />
5346
</MultiLanguage>
5447
</Decrator>

‎stores/BodyStore/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ const BodyStore = t
2828
get doraemonVisable() {
2929
return self.root.doraemonVisable
3030
},
31+
get curUrlPath() {
32+
return self.root.curUrlPath
33+
},
3134
}))
3235
.actions(self => ({
3336
changeTheme(name) {

0 commit comments

Comments
 (0)