10 |
14 | );
15 | };
16 |
17 | export default App;
18 |
--------------------------------------------------------------------------------
/src/components/Container.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react';
3 | import List from './List';
4 | import Message from './Message';
5 | import emitter from '../emitter';
6 | import { getApiUrl } from '../utils';
7 | import type { HeaderState, ContainerState } from '../type';
8 |
9 | class Container extends React.PureComponent<{}, ContainerState> {
10 | state: ContainerState = {
11 | status: 'init',
12 | data: {}
13 | };
14 |
15 | async getSearchResult(headerState: HeaderState) {
16 | try {
17 | this.setState({ status: 'loading' });
18 | const resp = await fetch(getApiUrl(headerState));
19 | const json = await resp.json();
20 | this.setState({
21 | data: { ...json },
22 | status: json.resultCount ? '' : 'noContent'
23 | });
24 | } catch (e) {
25 | this.setState({ status: 'error' });
26 | }
27 | }
28 |
29 | componentDidMount() {
30 | emitter.on('search', this.getSearchResult.bind(this));
31 | }
32 |
33 | componentWillUnmount() {
34 | emitter.removeListener('search');
35 | }
36 |
37 | render() {
38 | const { status, data } = this.state;
39 | return (
40 |
41 | {status.length ?
43 | );
44 | }
45 | }
46 |
47 | export default Container;
48 |
--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
1 | /* global $ */
2 | // @flow
3 | /* eslint-disable jsx-a11y/anchor-is-valid, jsx-a11y/click-events-have-key-events */
4 | import React from 'react';
5 | import emitter from '../emitter';
6 | import type { HeaderState, SearchOption } from '../type';
7 | import '../style/Header.css';
8 |
9 | const options: Array
76 |
101 |
102 | );
103 | }
104 | }
105 |
106 | export default Header;
107 |
--------------------------------------------------------------------------------
/src/components/Item.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React, { PropTypes } from 'react';
3 | import { getKind, kindColorMap } from '../utils';
4 | import type { SearchResult } from '../type';
5 | import '../style/Item.css';
6 |
7 | const Item = (props: SearchResult) => (
8 |
9 |
37 | );
38 |
39 | export default Item;
40 |
--------------------------------------------------------------------------------
/src/components/List.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React, { PropTypes } from 'react';
3 | import Item from './Item';
4 | import type { SearchResult } from '../type';
5 | import '../style/List.css';
6 |
7 | const List = ({
8 | results,
9 | resultCount
10 | }: {
11 | results: Array
10 |
36 |
11 | 
16 |
17 |
18 | {props.trackName || props.collectionName}more_vert
19 |
31 | 20 | 21 | more 22 | 23 | { 24 | getKind(props.kind).length ? 25 |
26 | {getKind(props.kind)} 27 |
: null 28 | } 29 | 30 |
32 | {props.trackName || props.collectionName}close
33 |
35 | {props.longDescription || props.description || 'No description.'}
34 |
15 | {resultCount > 0 ? results.map((item, i) =>
17 | );
18 |
19 | export default List;
20 |
--------------------------------------------------------------------------------
/src/components/Message.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React, { PropTypes } from 'react';
3 | import '../style/Message.css';
4 |
5 | const msgMap: Object = {
6 | init: {
7 | icon: 'music_note',
8 | msg: 'Welcome back!'
9 | },
10 | loading: {
11 | msg: 'Loading...'
12 | },
13 | noContent: {
14 | icon: 'info',
15 | msg: 'No match'
16 | },
17 | error: {
18 | icon: 'error',
19 | msg: 'Error!'
20 | }
21 | };
22 |
23 | const spinner = _ => (
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | );
39 |
40 | const Message = ({ status }: { status: string }) => (
41 |
42 | {status === 'loading' ? spinner() : {msgMap[status].icon}}
43 | {msgMap[status].msg}
44 |
45 | );
46 |
47 | export default Message;
48 |
--------------------------------------------------------------------------------
/src/components/Ribbon.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import '../style/Ribbon.css';
3 |
4 | const Ribbon = () => (
5 |
12 |
31 |
32 | );
33 |
34 | export default Ribbon;
35 |
--------------------------------------------------------------------------------
/src/emitter.js:
--------------------------------------------------------------------------------
1 | import EventEmitter from 'events';
2 |
3 | export default new EventEmitter();
4 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 | import React from 'react';
5 | import App from './components/App';
6 |
7 | const renderApp = Comp => render(
8 |
5 |
9 | `;
10 |
--------------------------------------------------------------------------------
/test/unit/components/__snapshots__/Container.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`
5 |
9 | `;
10 |
11 | exports[`
31 |
35 | `;
36 |
37 | exports[`
39 |
43 | `;
44 |
45 | exports[`
47 |
51 | `;
52 |
53 | exports[`
62 |
76 | `;
77 |
--------------------------------------------------------------------------------
/test/unit/components/__snapshots__/Header.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`
7 |
152 |
153 | `;
154 |
--------------------------------------------------------------------------------
/test/unit/components/__snapshots__/Item.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`
7 |
57 | `;
58 |
--------------------------------------------------------------------------------
/test/unit/components/__snapshots__/List.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`
10 |
56 |
13 | 
18 |
19 |
22 |
25 |
28 | more_vert
29 |
30 |
31 |
39 | 32 | 35 | more 36 | 37 |
38 |
42 |
45 |
48 | close
49 |
50 |
51 |
55 | 52 | No description. 53 |
54 |
7 |
24 | `;
25 |
26 | exports[`
7 |
53 | `;
54 |
--------------------------------------------------------------------------------
/test/unit/components/__snapshots__/Ribbon.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`
10 |
13 |
16 |
19 |
22 |
25 |
28 |
31 |
34 |
37 |
40 |
43 |
46 |
47 |
50 | Loading...
51 |
52 |