Activity list

package.json

@@ -37,9 +37,13 @@
     "webpack-stream": "^3.2.0"
   },
   "dependencies": {
+    "bulma": "^0.3.1",
+    "chai": "^3.5.0",
     "classnames": "^2.2.5",
+    "moment": "^2.17.1",
     "react": "^15.4.2",
-    "react-dom": "^15.4.2"
+    "react-dom": "^15.4.2",
+    "react-router": "^3.0.2"
   },
   "scripts": {
     "start": "yarn clean-dist && webpack && webpack-dev-server --inline --hot",
@@ -55,7 +59,8 @@
   "jest": {
     "verbose": true,
     "testPathDirs": [
-      "src/components"
+      "src/components",
+      "src/utils"
     ],
     "unmockedModulePathPatterns": [
       "node_modules/react/",

src/components/ActivityCard/ActivityCard.scss

@@ -0,0 +1,15 @@
+.title {
+  font-size: 18px;
+}
+
+.date {
+  margin-top: 5px;
+}
+
+.enrollment {
+  margin-top: 8px;
+}
+
+.join {
+ margin-top: 5px;
+}

src/components/ActivityCard/__tests__/ActivityCard.spec.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ActivityCard from '../index';
+
+jest.dontMock('../index');
+
+describe('Activity Card', () => {
+  const activity = {
+    id: 1,
+    title: '看电影',
+    location: '武汉办公室',
+    startDate: '2017-12-31 13:59:59',
+    endDate: '2017-12-31 13:59:59',
+    sponsor: 'ThoughtWorks',
+    customers: [1, 2],
+    onClickJoin: jest.fn(),
+  };
+
+  let activityCard;
+
+  beforeEach(function () {
+    activityCard = shallow(<ActivityCard {... activity} />);
+  });
+
+  it('should render date range', () => {
+    expect(activityCard.contains(<div className="date">时间: 2017-12-31(星期日) 下午 1:59:59 ~ 2017-12-31(星期日) 下午 1:59:59</div>)).toBe(true);
+  });
+
+  it('should render relative date', () => {
+    const oldDateActivity = Object.assign(activity, {
+      startDate: '2015-12-31 13:59:59',
+      endDate: '2015-12-31 13:59:59',
+    });
+    activityCard = shallow(<ActivityCard {... oldDateActivity} />);
+    expect(activityCard.contains(<div className="date">时间: 1 年前</div>)).toBe(true);
+  });
+
+  it('should call onClickJoin', () => {
+    activityCard.find('.button.is-danger').simulate('click');
+    expect(activity.onClickJoin.mock.calls.length).toBe(1);
+  });
+});

src/components/ActivityCard/index.jsx

@@ -0,0 +1,57 @@
+import React, { PropTypes } from 'react';
+import { Link } from 'react-router';
+import classNames from 'classnames';
+import moment from 'moment';
+import { smartMoment } from '../../utils/moment';
+import styles, { date, container, enrollment, join } from './ActivityCard.scss';
+
+
+const renderDate = (startDate, endDate) => {
+  const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+
+  if (moment(endDate, DATE_FORMAT).isBefore(moment())) {
+    return smartMoment(startDate, DATE_FORMAT);
+  }
+  return `${smartMoment(startDate, DATE_FORMAT)} ~ ${smartMoment(endDate, DATE_FORMAT)}`;
+};
+
+const ActivityCard = ({ id, title, imageUrl, location, startDate, endDate, sponsor, customers, onClickJoin }) => (
+  <div className={classNames('box', container)}>
+    <article className="media">
+      <div className="media-left">
+        <img src={imageUrl} alt={`${title}`} />
+      </div>
+      <div className="media-content">
+        <h3 className={styles.title}>{ title }</h3>
+        <div className={date}>{`时间: ${renderDate(startDate, endDate)}`}</div>
+        <div>{`地点: ${location}`}</div>
+        <div>{`发起: ${sponsor}`}</div>
+        <div className={enrollment}>{`${customers.length}人参与`}</div>
+        <div className={join}>
+          <Link to={`/activity/${id}`} className="button is-primary" activeStyle={{ color: 'red' }}>详情</Link>
+          <button className="button is-danger is-pulled-right" onClick={() => onClickJoin(id)}>
+            立即加入
+          </button>
+        </div>
+      </div>
+    </article>
+  </div>
+);
+
+ActivityCard.propTypes = {
+  id: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  imageUrl: PropTypes.string,
+  location: PropTypes.string.isRequired,
+  sponsor: PropTypes.string.isRequired,
+  startDate: PropTypes.string.isRequired,
+  endDate: PropTypes.string.isRequired,
+  customers: PropTypes.arrayOf(React.PropTypes.number).isRequired,
+  onClickJoin: PropTypes.func.isRequired,
+};
+
+ActivityCard.defaultProps = {
+  imageUrl: 'http://placehold.it/140x180',
+};
+
+export default ActivityCard;

src/components/ActivityList/ActivityList.scss

@@ -0,0 +1,3 @@
+.item {
+  margin-bottom: 10px;
+}

src/components/ActivityList/__tests__/ActivityList.spec.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { expect } from 'chai';
+import ActivityList from '../index';
+import ActivityCard from '../../ActivityCard/index';
+
+jest.dontMock('../index');
+
+describe('Activity List', () => {
+  const activities = [{
+    id: 1,
+    title: '看电影',
+    location: '武汉办公室',
+    startDate: '2017-12-31 13:59:59',
+    endDate: '2017-12-31 13:59:59',
+    sponsor: 'ThoughtWorks',
+    customers: [1, 2],
+    onClickJoin: (id) => {
+      console.log(id);
+    },
+  }, {
+    id: 2,
+    title: '看电影',
+    location: '武汉办公室',
+    startDate: '2017-12-31 13:59:59',
+    endDate: '2017-12-31 13:59:59',
+    sponsor: 'ThoughtWorks',
+    customers: [1, 2],
+    onClickJoin: (id) => {
+      console.log(id);
+    },
+  }];
+
+  let onClickJoinActivity;
+  let activityList;
+
+  beforeEach(() => {
+    onClickJoinActivity = jest.fn();
+    activityList = mount(<ActivityList activities={activities} onClickJoinActivity={onClickJoinActivity} />);
+  });
+
+  it('should render two activity card ', () => {
+    expect(activityList.find(ActivityCard)).to.have.length(2);
+  });
+
+  it('should trigger onClickJoinActivity when click on join button ', () => {
+    activityList.find(ActivityCard).at(0).find('.button.is-danger').simulate('click');
+    expect(onClickJoinActivity.mock.calls.length).to.equal(1);
+  });
+});

src/components/ActivityList/index.jsx

@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react';
+import ActivityCard from '../ActivityCard';
+import { item } from './ActivityList.scss';
+
+const ActivityList = ({ activities, onClickJoinActivity }) => (
+  <ul>
+    {activities.map(activity =>
+      <li key={activity.id} className={item}>
+        <ActivityCard
+          {...activity}
+          onClickJoin={() => onClickJoinActivity(activity.id)}
+        />
+      </li>,
+    )}
+  </ul>
+);
+
+ActivityList.propTypes = {
+  activities: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number.isRequired,
+  }).isRequired).isRequired,
+  onClickJoinActivity: PropTypes.func.isRequired,
+};
+
+export default ActivityList;

src/index.html

@@ -7,14 +7,15 @@
     <!-- Make the page mobile compatible -->
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="mobile-web-app-capable" content="yes">
-    <link rel="stylesheet" type="text/css" href="styles.css">
+    <link rel="stylesheet" type="text/css" href="vendor.min.css">
+    <link rel="stylesheet" type="text/css" href="high.min.css">
     <title>17High</title>
 </head>
 <body>
 <div id="app"/>
 <!-- Display a message if JS has been disabled on the browser. -->
 <noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
 
-<script src="./bundle.js" type="text/javascript"></script>
+<script src="./high.bundle.js" type="text/javascript"></script>
 </body>
-</html>
+</html>

src/index.jsx

@@ -1,7 +1,35 @@
 import React from 'react';
 import { render } from 'react-dom';
-import DemoComponent from './components/DemoComponent';
+import ActivityList from './components/ActivityList';
 
-const App = () => <DemoComponent />;
+const activities = [{
+  id: 1,
+  title: '看电影',
+  location: '武汉办公室',
+  startDate: '2017-12-31 13:59:59',
+  endDate: '2017-12-31 13:59:59',
+  sponsor: 'ThoughtWorks',
+  customers: [1, 2],
+  onClickJoin: (id) => { console.log(id); },
+}, {
+  id: 2,
+  title: '看电影',
+  location: '武汉办公室',
+  startDate: '2017-12-31 13:59:59',
+  endDate: '2017-12-31 13:59:59',
+  sponsor: 'ThoughtWorks',
+  customers: [1, 2],
+  onClickJoin: (id) => { console.log(id); },
+}];
+
+const App = () => (
+  <div className="container">
+    <div className="columns">
+      <div className="column is-7">
+        <ActivityList activities={activities} onClickJoinActivity={(id) => { console.log(id); }} />
+      </div>
+    </div>
+  </div>
+);
 
 render(<App />, document.getElementById('app'));

src/utils/__test__/moment.spec.js

@@ -0,0 +1,13 @@
+import { localeMoment, smartMoment } from '../moment';
+
+describe('moment', () => {
+  it('localeMoment', () => {
+    expect(localeMoment('2017-12-31').format('YYYY-MM-DD')).toEqual('2017-12-31');
+  });
+
+  // This is a test based on Time, so, maybe failed after a period of time
+  it('smartMoment', () => {
+    expect(smartMoment('2017-12-31', 'YYYY-MM-DD')).toEqual('2017-12-31(星期日) 凌晨 12:00:00');
+    expect(smartMoment('2015-12-31', 'YYYY-MM-DD')).toEqual('1 年前');
+  });
+});

src/utils/moment.js

@@ -0,0 +1,14 @@
+import moment from 'moment';
+
+export function localeMoment(...args) {
+  moment.locale('zh-cn');
+  return moment(...args);
+}
+
+export function smartMoment(...args) {
+  localeMoment(...args);
+  if (moment(...args).isBefore(moment())) {
+    return moment.apply(this, args).fromNow();
+  }
+  return moment(...args).format('YYYY-MM-DD(dddd) a h:mm:ss');
+}

src/vendor/index.jsx

@@ -0,0 +1,2 @@
+require('./index.scss');
+

src/vendor/index.scss

@@ -0,0 +1,6 @@
+@import "~bulma/sass/utilities/all";
+@import "~bulma/sass/base/all";
+@import "~bulma/sass/elements/all";
+@import "~bulma/sass/components/all";
+@import "~bulma/sass/layout/all";
+@import "~bulma/sass/grid/all";

webpack.config.js

@@ -5,13 +5,16 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const BUILD_DIR = path.resolve(__dirname, 'public');
 const APP_DIR = path.resolve(__dirname, 'src');
 
-const extractCSS = new ExtractTextPlugin('styles.css');
+const extractCSS = new ExtractTextPlugin('[name].min.css');
 
 const config = {
-  entry: `${APP_DIR}/index.jsx`,
+  entry: {
+    high: `${APP_DIR}/index.jsx`,
+    vendor: `${APP_DIR}/vendor/index.jsx`,
+  },
   output: {
     path: BUILD_DIR,
-    filename: 'bundle.js',
+    filename: '[name].bundle.js',
   },
   module: {
     loaders: [
@@ -22,8 +25,14 @@ const config = {
       },
       {
         test: /\.scss$/,
+        include: `${APP_DIR}/components`,
         loader: extractCSS.extract(['css?minimize&modules&importLoaders=2&localIdentName=[name]__[local]', 'postcss', 'sass']),
       },
+      {
+        test: /\.scss$/,
+        include: `${APP_DIR}/vendor`,
+        loader: extractCSS.extract(['css?minimize', 'sass']),
+      },
     ],
   },
   resolve: {