last 2 right side sections, redux tests

README.md

@@ -2,6 +2,20 @@
 Code for the coming updated fccci: http://fccci.org.au/au/, code base for user auth and routing: 
 https://github.com/XBLDev/ReactJSNodejsAuthRouterv4
 
+Comment 10/11/2017, 4:44 pm:
+
+For Redux I think i maybe worth it to at least try wrap each of the component with a store provider such that testing the state of each component is easy. Even if the component/app cannot solely rely on Redux it helps with TDD.
+
+Added 2 last sections on the right:
+
+Search, which sends the search keyword to the mounted searchresult page, and the mounted page first gets all the event titles based on the current language, and then uses react-search-input: https://github.com/enkidevs/react-search-input and the keyword to filter the titles and generates a link for each title that contains the keyword. The problem for now is that upon mounting/getting new props the page needs to load all the titles, which may seem not to be that big at the moment but it will certainly explode over time. The other possible approach is that upon clicking the search link, it finds the titles that contain the keyword and pass them as props to the searchresult page, but that also involves loading data.
+
+FCCCI ARCHIVES, which gets a list of the nubmer of events for each month using the same DB the calendar component uses to load its own events, and for each month it generates a link that goes to an archivedeventspage which uses the URL to load the events of the month and generates a list of links each goes to a different event.
+
+Comment 8/11/2017, 2:35 pm:
+
+Added simple reducer test following tutorial: https://medium.com/javascript-inside/some-thoughts-on-testing-react-redux-applications-8571fbc1b78f, whose code is in: https://github.com/Gethyl/ReactReduxTestingUsingJestEnzyme. Yesterday the test was based on the test instruction from the official Redux site: https://redux.js.org/docs/recipes/WritingTests.html, which doesn't seem to work for the action creators as it says. And I don't think there's much to test action creators because they just simply return a pair of type and value, which is not really worth testing; the logic and result after executing an action in the reducer on the other hand does have value in testing because we want to make sure that after a certain action the resulting state in the store is as expected.
+
 Comment 7/11/2017, 6:36 pm:
 
 Added galary photos section, whose state is initiated in Redux store and changed by Redux actions. The basic idea here is that instead of saving: loading images, current showing images, total number of images, and the timer that changes the current showing image, every state and the actions that change the states are initiated as a state in a Redux store, and the functions and states are all mapped to a component class as its props. Normally once the frontend gets an array of URLs from backend it saves it as its own state, and the timer starts inside the same component to change the current shown image index, and with Redux these are all saved as states in Redux as states of the entire application instead of just states for a single component, which for this particular case is not very useful, but for other apps that need to keep global states this is useful. However I wonder what's the use for Redux if I can use localStorage: I can just save everything that I want to be global, such as current language, in the local storage.

ReactCalendarComponentModi/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "stage-2"]
+}

ReactCalendarComponentModi/.npmignore

@@ -0,0 +1,3 @@
+examples
+docs
+LICENSE.md

ReactCalendarComponentModi/.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - "0.11"
+  - "0.10"

ReactCalendarComponentModi/CHANGELOG.md

@@ -0,0 +1,23 @@
+## v1.2.1
+* Remove lodash dependency
+
+## v1.2.0
+* Add `onChangeMonth` as a replacement for `onPrevMonth` and `onNextMonth`.
+
+## v1.1.1
+* Switch to the [prop-types](https://github.com/reactjs/prop-types) package.
+
+## v1.1.0
+* Upgrade to Babel 6 and allow React 15
+
+## v1.0.0
+* Use Babel and ES6
+* Move state out of the component
+
+
+## v0.2.0
+* Added week day headers (optional)
+* Added onPickDate callback
+
+## v0.1.0
+* `require('react-calendar-component')` returns an object with all the elements instead of just `<Calendar/>`.

ReactCalendarComponentModi/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Hanse
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

ReactCalendarComponentModi/README.md

@@ -0,0 +1,42 @@
+# react-calendar
+
+[React](http://facebook.github.io/react/) calendar component inspired by [CLNDR.js](http://kylestetz.github.io/CLNDR/).
+
+```
+$ npm install react-calendar-component
+```
+
+# See the demo
+http://hanse.github.io/react-calendar/
+
+```js
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import { Calendar } from 'react-calendar-component';
+import moment from 'moment';
+import 'moment/locale/nb';
+
+class CalendarExample extends Component {
+  state = {
+    date: moment()
+  }
+
+  render() {
+    return (
+      <Calendar
+        onChangeMonth={(date) => this.setState({ date })}
+        date={this.state.date}
+        onPickDate={(date) => console.log(date)}
+      />
+    );
+  }
+}
+
+render(
+  <CalendarExample />,
+  document.getElementById('calendar')
+);
+```
+
+# License
+MIT

ReactCalendarComponentModi/lib/Calendar.js

@@ -0,0 +1,188 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
+var _createDateObjects = require('./createDateObjects');
+
+var _createDateObjects2 = _interopRequireDefault(_createDateObjects);
+
+var _reactRouterDom = require('react-router-dom');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // import React, { Component } from 'react';
+
+
+// import './style.css';
+// export default class Calendar extends Component {
+var Calendar = function (_React$Component) {
+  _inherits(Calendar, _React$Component);
+
+  function Calendar() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Calendar);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.handleNextMonth = function () {
+      if (_this.props.onNextMonth) {
+        return _this.props.onNextMonth();
+      }
+
+      // this.props.onChangeMonth(this.props.date.clone().add(1, 'months'));
+    }, _this.handlePrevMonth = function () {
+      if (_this.props.onPrevMonth) {
+        return _this.props.onPrevMonth();
+      }
+
+      // this.props.onChangeMonth(this.props.date.clone().subtract(1, 'months'));
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Calendar, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      console.log('CALENDAR MOUNTED, PROPS', this.props);
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      console.log('CALENDAR WIIL RECEIVE PROPS, nextProps:', nextProps);
+    }
+    //华联社活动日历
+    //FCCCI EVENTS CALENDAR
+
+
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          CurrentLanguage = _props.CurrentLanguage,
+          Events = _props.Events,
+          weekOffset = _props.weekOffset,
+          date = _props.date,
+          renderDay = _props.renderDay,
+          onNextMonth = _props.onNextMonth,
+          onPrevMonth = _props.onPrevMonth,
+          onChange = _props.onChange,
+          onPickDate = _props.onPickDate;
+
+
+      return _react2.default.createElement(
+        'div',
+        { className: 'Calendar' },
+        _react2.default.createElement(
+          'div',
+          { className: 'centerAreaRightItem' },
+          CurrentLanguage == 'Ch' ? '华联社活动日历' : 'FCCCI EVENTS CALENDAR'
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'Calendar-header' },
+          _react2.default.createElement(
+            'button',
+            { onClick: this.handlePrevMonth },
+            '\xAB'
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'Calendar-header-currentDate' },
+            date.format('MMMM').toString().toUpperCase()
+          ),
+          _react2.default.createElement(
+            'button',
+            { onClick: this.handleNextMonth },
+            '\xBB'
+          )
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'Calendar-grid' },
+          (0, _createDateObjects2.default)(date, weekOffset, Events, CurrentLanguage).map(function (day, i) {
+            return _react2.default.createElement(
+              'div',
+              {
+                key: 'day-' + i,
+                className: 'Calendar-grid-item ' + (day.classNames || '')
+                /* onClick={e => onPickDate(day.day)} */
+              },
+              day.linkName == '' ? renderDay(day.day) : _react2.default.createElement(
+                _reactRouterDom.Link,
+                { to: '/Newsboard/'.concat(day.linkName) },
+                renderDay(day.day)
+              )
+            )
+
+            // <div
+            // key={`day-${i}`}
+            // className={`Calendar-grid-item ${day.classNames || ''}`}
+            // >
+            //    <Link to="/" >
+            //      {renderDay(day.day)}
+            //    </Link>            
+            // </div>
+
+            ;
+          })
+        )
+      );
+    }
+  }]);
+
+  return Calendar;
+}(_react2.default.Component);
+
+Calendar.propTypes = {
+  CurrentLanguage: _propTypes2.default.string,
+  Events: _propTypes2.default.string,
+  /** Week offset*/
+  weekOffset: _propTypes2.default.number.isRequired,
+  /** The current date as a moment objecct */
+  date: _propTypes2.default.object.isRequired,
+  // date: PropTypes.string.isRequired,
+
+  /** Function to render a day cell */
+  renderDay: _propTypes2.default.func,
+  /** Called on next month click */
+  onNextMonth: _propTypes2.default.func,
+  /** Called on prev month click */
+  onPrevMonth: _propTypes2.default.func,
+  /** Called when some of the navigation controls are clicked */
+  onChangeMonth: _propTypes2.default.func,
+  /** Called when a date is clicked */
+  onPickDate: _propTypes2.default.func
+};
+Calendar.defaultProps = {
+  weekOffset: 0,
+  renderDay: function renderDay(day) {
+    return day.format('YYYY-MM-D');
+  }
+  // renderDay: day => day.format('MM-D')
+
+};
+exports.default = Calendar;

ReactCalendarComponentModi/lib/__tests__/createDateObjects.spec.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
+var _createDateObjects = require('../createDateObjects');
+
+var _createDateObjects2 = _interopRequireDefault(_createDateObjects);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+it('createDateObjects', function () {
+  for (var month = 0; month < 12; month++) {
+    var date = _moment2.default.utc([2016, month, 1]);
+    expect((0, _createDateObjects2.default)(date)).toMatchSnapshot();
+  }
+});