. See Profile > tbody > Tr > noscript.
28 | return |
;
29 | };
30 |
31 | Tr.propTypes = {
32 | label: React.PropTypes.string,
33 | value: React.PropTypes.any,
34 | type: React.PropTypes.string,
35 | display: React.PropTypes.string
36 | };
37 |
38 | export default Tr;
39 |
--------------------------------------------------------------------------------
/src/components/common/__tests__/DisplayInfosPanel.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-expressions, react/prop-types */
2 | import { expect } from 'chai';
3 |
4 | import React from 'react';
5 | import { shallow } from 'enzyme';
6 | import DisplayInfosPanel from '../DisplayInfosPanel';
7 | import Spinner from '../Spinner';
8 | import Panel from '../Panel';
9 |
10 | describe('components/common/DisplayInfosPanel', () => {
11 | describe('state/render', () => {
12 | it('should render a spinner at fetching=true when props.infos.fetching = true', () => {
13 | const wrapper = shallow();
14 | expect(wrapper.find(Spinner).props().fetching).to.be.true;
15 | });
16 | it('should render a spinner at fetching=false when props.infos.fetching = false', () => {
17 | const wrapper = shallow();
18 | expect(wrapper.find(Spinner).props().fetching).to.be.false;
19 | });
20 | it('should render a panel with a title=props.originalTitle when props.infos.fetching = true', () => {
21 | const wrapper = shallow();
22 | expect(wrapper.find(Panel).props().title).to.equal('Hello World');
23 | });
24 | it('should render the error passed in props.infos.error', () => {
25 | const wrapper = shallow();
26 | expect(wrapper.contains(Something went wrong
)).to.be.true;
27 | });
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/src/components/common/__tests__/DisplayStars.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-expressions, react/prop-types */
2 | import { expect } from 'chai';
3 |
4 | import React from 'react';
5 | import { shallow } from 'enzyme';
6 | import DisplayStars from '../DisplayStars';
7 |
8 | describe('components/common/DisplayStars', () => {
9 | describe('state/render', () => {
10 | it('should render the number passed via props.number if > 0', () => {
11 | const wrapper = shallow();
12 | expect(wrapper.find('span').first().text()).to.equal('2 ');
13 | });
14 | it('should render nothing if props.number = 0', () => {
15 | const wrapper = shallow();
16 | expect(wrapper.equals(null)).to.be.true;
17 | });
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/src/components/common/__tests__/Panel.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-expressions, react/prop-types */
2 | import { expect } from 'chai';
3 |
4 | import React from 'react';
5 | import { shallow } from 'enzyme';
6 | import Panel from '../Panel';
7 |
8 | describe('components/common/Panel', () => {
9 | describe('state/render', () => {
10 | it('should render title', () => {
11 | const wrapper = shallow(Hie there
);
12 | expect(wrapper.contains(Hello World
)).to.be.true;
13 | });
14 | it('should render children', () => {
15 | const wrapper = shallow(Hie there
);
16 | expect(wrapper.contains(Hie there
)).to.be.true;
17 | });
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/src/components/common/__tests__/Spinner.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-expressions, react/prop-types */
2 | import { expect } from 'chai';
3 |
4 | import React from 'react';
5 | import { shallow } from 'enzyme';
6 | import Spinner from '../Spinner';
7 |
8 | describe('components/common/Spinner', () => {
9 | describe('state/render', () => {
10 | it('should render empty div when props.fetching !== true', () => {
11 | const wrapper = shallow();
12 | expect(wrapper.find('.bounce1').length).to.equal(0);
13 | });
14 | it('should render nested divs when props.fetching = true', () => {
15 | const wrapper = shallow();
16 | expect(wrapper.find('.bounce1').length).to.equal(1);
17 | expect(wrapper.find('.bounce2').length).to.equal(1);
18 | expect(wrapper.find('.bounce3').length).to.equal(1);
19 | });
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/src/components/common/__tests__/Tr.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-expressions, react/prop-types */
2 | import { expect } from 'chai';
3 |
4 | import React from 'react';
5 | import { shallow } from 'enzyme';
6 | import Tr from '../Tr';
7 |
8 | describe('components/common/Tr', () => {
9 | describe('state/render', () => {
10 | it('should render 2 columns by default', () => {
11 | const wrapper = shallow(|
);
12 | expect(wrapper.find('td').length).to.equal(2);
13 | expect(wrapper.contains(Hello | )).to.be.true;
14 | expect(wrapper.contains(World | )).to.be.true;
15 | });
16 | it('should render in 1 column if props.display = colspan', () => {
17 | const wrapper = shallow(|
);
18 | expect(wrapper.find('td').length).to.equal(1);
19 | expect(wrapper.contains(Hello World | )).to.be.true;
20 | });
21 | it('should render value as a link if props.type = link', () => {
22 | const wrapper = shallow(|
);
23 | expect(wrapper.contains(http://labs.topheman.com)).to.be.true;
24 | });
25 | it('should render value as date (without hours/min/sec) if value is instance of a Date', () => {
26 | const value = new Date('2014-04-24');
27 | const expected = 'Thu Apr 24 2014';
28 | const wrapper = shallow(|
);
29 | expect(wrapper.contains({expected} | )).to.be.true;
30 | });
31 | it('should render no nested td if no props.value passed', () => {
32 | const wrapper = shallow(|
);
33 | expect(wrapper.find('td').length).to.equal(0);
34 | });
35 | });
36 | });
37 |
--------------------------------------------------------------------------------
/src/containers/App/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Header from '../../components/Header/Header.js';
4 | import Footer from '../../components/Footer/Footer.js';
5 |
6 | const App = ({ children }) => {
7 | return (
8 |
9 |
10 |
11 | {children}
12 |
13 |
14 |
14 |
15 |
16 |
17 | );
18 | };
19 |
20 | Github.propTypes = {
21 | multipleUsers: React.PropTypes.object.isRequired,
22 | changeUsername: React.PropTypes.func.isRequired,
23 | findUsers: React.PropTypes.func.isRequired
24 | };
25 |
26 | export default connect(
27 | (state) => ({multipleUsers: state.multipleUsers}),
28 | (dispatch) => bindActionCreators({ changeUsername, findUsers }, dispatch)
29 | )(Github);
30 |
--------------------------------------------------------------------------------
/src/containers/GithubUser/GithubUser.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Profile from '../../components/Profile/Profile.js';
4 | import Repos from '../../components/Repos/Repos.js';
5 |
6 | import { connect } from 'react-redux';
7 | import { bindActionCreators } from 'redux';
8 | import { getRepositories, getProfile, initUsername } from '../../redux/modules/singleUser.js';// import action creators
9 |
10 | class GithubUser extends React.Component {
11 |
12 | static propTypes = {
13 | params: React.PropTypes.object.isRequired,
14 | singleUser: React.PropTypes.object.isRequired,
15 | initUsername: React.PropTypes.func.isRequired,
16 | getProfile: React.PropTypes.func.isRequired,
17 | getRepositories: React.PropTypes.func.isRequired
18 | }
19 |
20 | constructor(props) {
21 | super(props);
22 |
23 | // init context bindings - due to diff between React.createClass and ES6 class
24 | this.reposGotoPage = this.reposGotoPage.bind(this);
25 | this.componentWillMount = this.componentWillMount.bind(this);
26 | }
27 | componentWillMount() {
28 | this.props.initUsername(this.props.params.username);
29 | this.props.getProfile(this.props.params.username);
30 | this.props.getRepositories(this.props.params.username);
31 | }
32 | reposGotoPage(pageNum) {
33 | this.props.getRepositories(this.props.params.username, {
34 | page: pageNum
35 | });
36 | }
37 | render() {
38 | const { profile, repositories } = this.props.singleUser;
39 | return (
40 |
44 | );
45 | }
46 | }
47 |
48 | export default connect(
49 | (state) => ({ singleUser: state.singleUser }),
50 | (dispatch) => bindActionCreators({ getRepositories, getProfile, initUsername }, dispatch)
51 | )(GithubUser);
52 |
--------------------------------------------------------------------------------
/src/containers/Home/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router';
3 |
4 | const prodMessage = ();
12 |
13 | const devtoolsMessage = (
14 |
This is the development packaged version (the production version is here). In the current mode, you have access to:
15 |
16 | - sourcemaps for
.scss/.js (open the sources tab of your developer tools)
17 | - redux devtools (this is the tab you can see on the right - ctrl+H to toggle hide - ctrl+Q to change position), it lets you play with history state of redux
18 |
19 |
Those features are meant to be used only in the development but I felt it would be a great way to let you discover them.
20 |
25 |
This project is a POC based on React, coded in ES6, relying on topheman-apis-proxy as a backend (providing the github API) and using redux for state management.
26 |
This is the front-only part, you can see an isomorphic (universal if you will) version of this project at topheman/react-es6-isomorphic.
27 |
TL;DR : click on the button to try it !
28 |
TRY the DAMN thing !
29 | {process.env.DEVTOOLS ? devtoolsMessage : prodMessage }
30 |
6 |
7 | This part is lazy-loaded
8 |
9 |
10 | {children}
11 |
12 |
6 |
Welcome to component lazy-loading, thanks to react-router & webpack.ensure !
7 |
Take a look in your devtools, you'll see some chunks required.
8 |
11 |
I added redux to manage state (a flux-like implementation if you will).
12 |
If you clone the project and launch it in local, you'll have access to the redux devtools (hot reloading / state history ...).{process.env.DEVTOOLS === true ? '' : In fact, you can test them right now here!}
13 |
The button bellow is connected to a redux store:
14 |
{process.env.DEVTOOLS ? ' (ctrl+H to hide the debug panel).' : ''}
15 |
This count is updated through the actions: {counter}.
16 |
All actions modifying state on this site are connected to redux.
17 |
Back Home page
18 |
)).to.be.true;
22 | });
23 | it('should render the user login', () => {
24 | expect(wrapper.contains(topheman)).to.be.true;
25 | });
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/src/components/ProfileList/ProfileList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router';
3 |
4 | import ProfileBox from './../ProfileBox/ProfileBox.js';
5 |
6 | const ProfileList = ({results}) => {
7 | if (results === null) {
8 | return (
9 |