From 75305126633d26cc5aacfd04c801e2092f0d6dd1 Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Tue, 26 Jan 2016 18:05:09 -0300 Subject: [PATCH] [Ivan Diaz] - Update React version and fix i18n issues --- README.md | 29 ++++++------ package.json | 44 ++++++++----------- src/app/App.js | 8 ++-- src/app/Routes.js | 24 +++++----- src/app/demo/components-demo-page.js | 2 +- src/app/index.js | 7 ++- .../main-home/main-home-page-login-widget.js | 2 +- src/app/main/main-home/main-home-page.js | 2 +- src/app/main/main-layout-footer.js | 2 +- src/app/main/main-layout-header.js | 6 +-- src/app/main/main-layout.js | 8 ++-- src/app/main/main-signup/main-signup-page.js | 2 +- src/core-components/__tests__/button-test.js | 2 +- src/core-components/__tests__/form-test.js | 2 +- src/core-components/button.js | 11 ++--- src/core-components/drop-down.js | 21 ++++++--- src/core-components/form.js | 2 +- src/core-components/widget-transition.js | 2 +- src/core-components/widget.js | 2 +- src/data/i18n-data.js | 4 +- src/lib/react-dfs.js | 2 +- src/lib/route-transition.js | 2 +- src/stores/common-store.js | 4 +- 23 files changed, 94 insertions(+), 96 deletions(-) mode change 100755 => 100644 package.json diff --git a/README.md b/README.md index 1c8c086b..3e3d5131 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ OpenSupports v4.0 -[![Build Status](https://codeship.com/projects/3faec3f0-908d-0133-1dce-661fcf0def08/status?branch=master)](https://codeship.com/projects/124436/) +[![Build Status](https://codeship.com/projects/3faec3f0-908d-0133-1dce-661fcf0def08/status?branch=master)](https://codeship.com/projects/124436/) ============ ### Getting up and running FRONT-END @@ -13,23 +13,20 @@ OpenSupports v4.0 3. Install npm `sudo apt-get install npm` 4. Install gulp `sudo npm install -g gulp` 5. Go to repo `cd os4-react` -6. Install dependences `sudo npm install` -7. Rebuild node-sass `sudo npm rebuild node-sass` +6. Install dependences `npm install` +7. Rebuild node-sass `npm rebuild node-sass` 8. Run `gulp dev` 9. Go to the main app: `http://localhost:3000/app` or the component demo `http://localhost:3000/demo` - -### Getting up and running - -1. [Create MySQL Database](#markdown-header-create-mysql-database) -2. Clone this repo -3. Run `npm install` from the root directory -4. Create a mysql database -5. Run `gulp dev` (may require installing Gulp globally `npm install gulp -g`) -6. Your browser will automatically be opened and directed to the browser-sync proxy address -7. To prepare assets for production, run the `gulp prod` task (Note: the production task does not fire up the express server, and won't provide you with browser-sync's live reloading. Simply use `gulp dev` during development. More information below) +10. Your browser will automatically be opened and directed to the browser-sync proxy address Now that `gulp dev` is running, the server is up as well and serving files from the `/build` directory. Any changes in the `/src` directory will be automatically processed by Gulp and the changes will be injected to any open browsers pointed at the proxy address. +### Getting up and running BACK-END + +1. Clone this repo +2. [Create MySQL Database](#markdown-header-create-mysql-database) +TODO + ### Create MySQL Database 1. Install mysql-server @@ -37,13 +34,13 @@ Now that `gulp dev` is running, the server is up as well and serving files from Ubuntu `sudo apt-get install mysql-server` - + Cent OS `sudo yum install mysql-server` `/etc/init.d/mysqld start` -2. Access the mysql shell +2. Access the mysql shell `mysql -u root -p` @@ -63,4 +60,4 @@ Now that `gulp dev` is running, the server is up as well and serving files from Just as there is the `gulp dev` task for development, there is also a `gulp prod` task for putting your project into a production-ready state. This will run each of the tasks, while also adding the image minification task discussed above. There is also an empty `gulp deploy` task that is included when running the production task. This deploy task can be fleshed out to automatically push your production-ready site to your hosting setup. -**Reminder:** When running the production task, gulp will not fire up the express server and serve your index.html. This task is designed to be run before the `deploy` step that may copy the files from `/build` to a production web server. \ No newline at end of file +**Reminder:** When running the production task, gulp will not fire up the express server and serve your index.html. This task is designed to be run before the `deploy` step that may copy the files from `/build` to a production web server. diff --git a/package.json b/package.json old mode 100755 new mode 100644 index 6bf33f94..96a8b771 --- a/package.json +++ b/package.json @@ -1,19 +1,12 @@ { - "name": "react-rocket-boilerplate", - "version": "0.2.0", - "author": "Jake Marsh ", - "description": "Boilerplate using React, Browserify, SASS, and Gulp.", + "name": "os4-react", + "version": "4.0.0", + "author": "Ivan Diaz ", + "description": "OpenSupports version 4 with reactjs", "repository": { "type": "git", - "url": "https://github.com/jakemmarsh/react-rocket-boilerplate.git" + "url": "https://github.com/ivandiazwm/opensupports.git" }, - "keywords": [ - "gulp", - "browserify", - "react", - "sass", - "boilerplate" - ], "private": true, "engines": { "node": "^0.12.x", @@ -46,20 +39,25 @@ "gulp-util": "^3.0.6", "humps": "^0.6.0", "jest-cli": "^0.5.10", - "jquery": "^2.1.4", - "lodash": "^3.10.0", - "messageformat": "^0.2.2", "morgan": "^1.6.1", - "react": "^0.13.x", - "react-document-title": "^1.0.2", - "react-google-recaptcha": "^0.4.0", - "react-motion": "^0.3.0", - "react-router": "^0.13.x", - "reflux": "^0.2.9", "run-sequence": "^1.1.1", "vinyl-source-stream": "^1.1.0", "watchify": "^3.2.x" }, + "dependencies": { + "app-module-path": "^1.0.3", + "classnames": "^2.1.3", + "jquery": "^2.1.4", + "lodash": "^3.10.0", + "messageformat": "^0.2.2", + "react": "^0.14.6", + "react-document-title": "^1.0.2", + "react-dom": "^0.14.6", + "react-google-recaptcha": "^0.5.2", + "react-motion": "^0.3.0", + "react-router": "^2.0.0-rc5", + "reflux": "^0.2.9" + }, "jest": { "scriptPreprocessor": "./preprocessor.js", "testFileExtensions": [ @@ -74,9 +72,5 @@ "unmockedModulePathPatterns": [ "react" ] - }, - "dependencies": { - "app-module-path": "^1.0.3", - "classnames": "^2.1.3" } } diff --git a/src/app/App.js b/src/app/App.js index d06978b6..cb34adc4 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -1,4 +1,4 @@ -import React from 'react/addons'; +import React from 'react'; import Reflux from 'reflux'; import {ListenerMixin} from 'reflux'; import {RouteHandler} from 'react-router'; @@ -13,8 +13,7 @@ let App = React.createClass({ render() { return (
- + {React.cloneElement(this.props.children, {})}
); }, @@ -24,7 +23,6 @@ let App = React.createClass({ this.forceUpdate(); } } - }); -export default App; \ No newline at end of file +export default App; diff --git a/src/app/Routes.js b/src/app/Routes.js index aa3898c2..a2ea0d90 100644 --- a/src/app/Routes.js +++ b/src/app/Routes.js @@ -1,5 +1,5 @@ -import React from 'react/addons'; -import {Route, NotFoundRoute, DefaultRoute} from 'react-router'; +import React from 'react'; +import {Router, Route, IndexRoute, browserHistory} from 'react-router'; import App from 'app/App'; import DemoPage from 'app/demo/components-demo-page'; @@ -10,14 +10,14 @@ import MainSignUpPage from 'app/main/main-signup/main-sign export default ( - + + + + + + - - - - - - - - -); \ No newline at end of file + + + +); diff --git a/src/app/demo/components-demo-page.js b/src/app/demo/components-demo-page.js index 9b499a6f..f32e42d0 100644 --- a/src/app/demo/components-demo-page.js +++ b/src/app/demo/components-demo-page.js @@ -1,6 +1,6 @@ 'use strict'; -import React from 'react/addons'; +import React from 'react'; import {Link} from 'react-router'; import DocumentTitle from 'react-document-title'; diff --git a/src/app/index.js b/src/app/index.js index 647b0627..a3ed6c9c 100644 --- a/src/app/index.js +++ b/src/app/index.js @@ -1,4 +1,5 @@ -import React from 'react/addons'; +import React from 'react'; +import {render} from 'react-dom' import Router from 'react-router'; import routes from './Routes'; @@ -8,6 +9,4 @@ if ( process.env.NODE_ENV !== 'production' ) { window.React = React; } -Router.run(routes, Router.HistoryLocation, (Handler, state) => { - React.render(, document.getElementById('app')); -}); \ No newline at end of file +render(routes, document.getElementById('app')); diff --git a/src/app/main/main-home/main-home-page-login-widget.js b/src/app/main/main-home/main-home-page-login-widget.js index 2066a0c1..e592ffaf 100644 --- a/src/app/main/main-home/main-home-page-login-widget.js +++ b/src/app/main/main-home/main-home-page-login-widget.js @@ -1,4 +1,4 @@ -import React from 'react/addons'; +import React from 'react'; import UserActions from 'actions/user-actions'; import UserStore from 'stores/user-store'; diff --git a/src/app/main/main-home/main-home-page.js b/src/app/main/main-home/main-home-page.js index 291b4a3d..d1d7c67c 100644 --- a/src/app/main/main-home/main-home-page.js +++ b/src/app/main/main-home/main-home-page.js @@ -1,4 +1,4 @@ -import React from 'react/addons'; +import React from 'react'; import {ListenerMixin} from 'reflux'; import {RouteHandler} from 'react-router'; diff --git a/src/app/main/main-layout-footer.js b/src/app/main/main-layout-footer.js index 6e53ab2b..89de858a 100644 --- a/src/app/main/main-layout-footer.js +++ b/src/app/main/main-layout-footer.js @@ -1,4 +1,4 @@ -import React from 'react/addons'; +import React from 'react'; let MainLayoutFooter = React.createClass({ diff --git a/src/app/main/main-layout-header.js b/src/app/main/main-layout-header.js index f170f267..c1be8026 100644 --- a/src/app/main/main-layout-header.js +++ b/src/app/main/main-layout-header.js @@ -1,4 +1,4 @@ -import React from 'react/addons'; +import React from 'react'; import i18n from 'lib/i18n'; import CommonActions from 'actions/common-actions'; @@ -24,7 +24,7 @@ let MainLayoutHeader = React.createClass({
- +
@@ -50,4 +50,4 @@ let MainLayoutHeader = React.createClass({ } }); -export default MainLayoutHeader; \ No newline at end of file +export default MainLayoutHeader; diff --git a/src/app/main/main-layout.js b/src/app/main/main-layout.js index a5fcf55f..89e4ff50 100644 --- a/src/app/main/main-layout.js +++ b/src/app/main/main-layout.js @@ -1,5 +1,4 @@ -import React from 'react/addons'; -import {RouteHandler} from 'react-router'; +import React from 'react'; import MainHeader from 'app/main/main-layout-header'; import MainFooter from 'app/main/main-layout-footer'; @@ -13,8 +12,7 @@ let MainLayout = React.createClass({
- + {this.props.children}
@@ -23,4 +21,4 @@ let MainLayout = React.createClass({ } }); -export default MainLayout; \ No newline at end of file +export default MainLayout; diff --git a/src/app/main/main-signup/main-signup-page.js b/src/app/main/main-signup/main-signup-page.js index b4a7f1ad..316ab717 100644 --- a/src/app/main/main-signup/main-signup-page.js +++ b/src/app/main/main-signup/main-signup-page.js @@ -1,4 +1,4 @@ -import React from 'react/addons'; +import React from 'react'; import {ListenerMixin} from 'reflux'; import ReCAPTCHA from 'react-google-recaptcha'; diff --git a/src/core-components/__tests__/button-test.js b/src/core-components/__tests__/button-test.js index 0d5f14ba..4650ee06 100644 --- a/src/core-components/__tests__/button-test.js +++ b/src/core-components/__tests__/button-test.js @@ -1,6 +1,6 @@ jest.dontMock('../button.js'); -import React from 'react/addons'; +import React from 'react'; import Button from '../button.js'; let TestUtils = React.addons.TestUtils; diff --git a/src/core-components/__tests__/form-test.js b/src/core-components/__tests__/form-test.js index 3eda4d3d..8e11ac6d 100644 --- a/src/core-components/__tests__/form-test.js +++ b/src/core-components/__tests__/form-test.js @@ -1,7 +1,7 @@ jest.dontMock('core-components/form.js'); jest.dontMock('core-components/form.js'); -import React from 'react/addons'; +import React from 'react'; import Form from 'core-components/form.js'; import Input from 'core-components/input.js'; diff --git a/src/core-components/button.js b/src/core-components/button.js index d0c58b29..1884cf6b 100644 --- a/src/core-components/button.js +++ b/src/core-components/button.js @@ -1,12 +1,13 @@ -import React from 'react/addons'; +import React from 'react'; import classNames from 'classnames'; -import {Navigation} from 'react-router'; - +import Router from 'react-router'; import callback from 'lib/callback'; let Button = React.createClass({ - mixins: [Navigation], + contextTypes: { + router: React.PropTypes.object + }, propTypes: { children: React.PropTypes.node, @@ -49,7 +50,7 @@ let Button = React.createClass({ handleClick() { if (this.props.route) { - this.transitionTo(this.props.route.to, this.props.route.param, this.props.route.query); + this.context.router.push(this.props.route.to); } } }); diff --git a/src/core-components/drop-down.js b/src/core-components/drop-down.js index 3e17069f..db276b1f 100644 --- a/src/core-components/drop-down.js +++ b/src/core-components/drop-down.js @@ -12,7 +12,7 @@ let DropDown = React.createClass({ selectedIndex: React.PropTypes.number, items: React.PropTypes.arrayOf(React.PropTypes.shape({ - content: React.PropTypes.string.isRequired, + content: React.PropTypes.node.isRequired, icon: React.PropTypes.string })).isRequired }, @@ -52,7 +52,7 @@ let DropDown = React.createClass({ return (
- {this.props.items[this.getSelectedIndex()]} + {this.props.items[this.getSelectedIndex()].content}
{this.renderList} @@ -75,7 +75,7 @@ let DropDown = React.createClass({ renderItem(item, index) { return ( -
  • +
  • {item.content}
    • ); @@ -91,6 +91,15 @@ let DropDown = React.createClass({ return classNames(classes); }, + getItemProps(index) { + return { + className: 'drop-down--list-item', + onClick: this.handleItemClick.bind(this, index), + onMouseDown: this.handleItemMouseDown, + key: index + }; + }, + handleBlur() { this.setState({ opened: false @@ -110,7 +119,9 @@ let DropDown = React.createClass({ }); if (this.props.onChange) { - this.props.onChange(index); + this.props.onChange({ + index + }); } }, @@ -123,4 +134,4 @@ let DropDown = React.createClass({ } }); -export default DropDown; \ No newline at end of file +export default DropDown; diff --git a/src/core-components/form.js b/src/core-components/form.js index 7014b7e6..c1b65fe0 100644 --- a/src/core-components/form.js +++ b/src/core-components/form.js @@ -1,4 +1,4 @@ -import React from 'react/addons'; +import React from 'react'; import _ from 'lodash'; import {reactDFS, renderChildrenWithProps} from 'lib/react-dfs'; diff --git a/src/core-components/widget-transition.js b/src/core-components/widget-transition.js index 8f234e4b..36f3709b 100644 --- a/src/core-components/widget-transition.js +++ b/src/core-components/widget-transition.js @@ -1,4 +1,4 @@ -import React from 'react/addons'; +import React from 'react'; import classNames from 'classnames'; import _ from 'lodash'; import {Motion, spring} from 'react-motion'; diff --git a/src/core-components/widget.js b/src/core-components/widget.js index 0c4bc48d..08e4ef5a 100644 --- a/src/core-components/widget.js +++ b/src/core-components/widget.js @@ -1,4 +1,4 @@ -import React from 'react/addons'; +import React from 'react'; import classNames from 'classnames'; let Widget = React.createClass({ diff --git a/src/data/i18n-data.js b/src/data/i18n-data.js index 9fa00759..34c7ad82 100644 --- a/src/data/i18n-data.js +++ b/src/data/i18n-data.js @@ -1,7 +1,7 @@ import keys from 'data/i18n-keys' let languages = [ - 'en', + 'us', 'es' ]; @@ -12,4 +12,4 @@ let i18nData = function (key, lang) { return keys[key][langIndex]; }; -export default i18nData \ No newline at end of file +export default i18nData diff --git a/src/lib/react-dfs.js b/src/lib/react-dfs.js index b1d23482..4cfb6c38 100644 --- a/src/lib/react-dfs.js +++ b/src/lib/react-dfs.js @@ -1,4 +1,4 @@ -import React from 'react/addons'; +import React from 'react'; import _ from 'lodash'; let reactDFS = function (children, visitFunction) { diff --git a/src/lib/route-transition.js b/src/lib/route-transition.js index 13c633c1..61ee6686 100644 --- a/src/lib/route-transition.js +++ b/src/lib/route-transition.js @@ -1,4 +1,4 @@ -const React = require('react/addons'); +const React = require('react'); const { PropTypes } = React; const { TransitionMotion, spring } = require('react-motion'); diff --git a/src/stores/common-store.js b/src/stores/common-store.js index de0a0a66..b24f1fd8 100644 --- a/src/stores/common-store.js +++ b/src/stores/common-store.js @@ -5,7 +5,7 @@ import CommonActions from 'actions/common-actions'; let CommonStore = Reflux.createStore({ init() { - this.language = 'en'; + this.language = 'us'; this.listenTo(CommonActions.changeLanguage, this.changeLanguage); }, @@ -16,4 +16,4 @@ let CommonStore = Reflux.createStore({ } }); -export default CommonStore; \ No newline at end of file +export default CommonStore;