From 92f66fc9f17eb0c5b093f11410722e12075e3980 Mon Sep 17 00:00:00 2001 From: Wendell Liu Date: Thu, 29 Jun 2017 10:27:08 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=A9=E5=80=8B=E5=A1=AB=E5=AF=AB=E9=A0=81?= =?UTF-8?q?=E7=9A=84=E9=80=81=E5=87=BA=E5=9B=9E=E9=A5=8B=EF=BC=8C=E4=BB=A5?= =?UTF-8?q?=E5=8F=8A=E5=85=83=E4=BB=B6Style=20(#166)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * adjust SubmitArea style * add success feedback * finish success feedback * finish FailFeedback * add `hasClose` props to Modal to decide if close button display * add facebook login fail feedback in submit area --- .../ShareExperience/common/FacebookFail.js | 58 +++++++++++ .../ShareExperience/common/FailFeedback.js | 58 +++++++++++ .../ShareExperience/common/SubmitArea.js | 95 +++++++++++++++++-- .../ShareExperience/common/SuccessFeedback.js | 51 ++++++++++ src/components/common/Modal.js | 22 +++-- src/components/common/button/ButtonSubmit.js | 88 ++++++++--------- .../common/button/ButtonSubmit.module.css | 5 +- 7 files changed, 314 insertions(+), 63 deletions(-) create mode 100644 src/components/ShareExperience/common/FacebookFail.js create mode 100644 src/components/ShareExperience/common/FailFeedback.js create mode 100644 src/components/ShareExperience/common/SuccessFeedback.js diff --git a/src/components/ShareExperience/common/FacebookFail.js b/src/components/ShareExperience/common/FacebookFail.js new file mode 100644 index 000000000..c7892b822 --- /dev/null +++ b/src/components/ShareExperience/common/FacebookFail.js @@ -0,0 +1,58 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Warning from 'common/icons/Warning'; +import Button from 'common/button/Button'; + +const FacebookFail = ({ buttonClick }) => ( +
+ +

+ Facebook 登入失敗 +

+

+ 為了避免使用者大量輸入假資訊，我們會以您的 Facebook 帳戶做驗證。但別擔心！您的帳戶資訊不會以任何形式被揭露、顯示。 +

+
+ +
+
+); + +FacebookFail.propTypes = { + buttonClick: PropTypes.func, +}; + +export default FacebookFail; diff --git a/src/components/ShareExperience/common/FailFeedback.js b/src/components/ShareExperience/common/FailFeedback.js new file mode 100644 index 000000000..c506c52e4 --- /dev/null +++ b/src/components/ShareExperience/common/FailFeedback.js @@ -0,0 +1,58 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Warning from 'common/icons/Warning'; +import Button from 'common/button/Button'; + +const FailFeedback = ({ buttonClick }) => ( +
+ +

+ Oops 有些錯誤發生 +

+

+ 請查看你的網路連線再試一次，如果你還沒填寫完，請先別關閉瀏覽器！ +

+
+ +
+
+); + +FailFeedback.propTypes = { + buttonClick: PropTypes.func, +}; + +export default FailFeedback; diff --git a/src/components/ShareExperience/common/SubmitArea.js b/src/components/ShareExperience/common/SubmitArea.js index a92dc7300..8743ede48 100644 --- a/src/components/ShareExperience/common/SubmitArea.js +++ b/src/components/ShareExperience/common/SubmitArea.js @@ -1,38 +1,114 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import { browserHistory } from 'react-router'; import ButtonSubmit from 'common/button/ButtonSubmit'; import Checkbox from 'common/form/Checkbox'; +import Modal from 'common/Modal'; + +import SuccessFeedback from './SuccessFeedback'; +import FailFeedback from './FailFeedback'; +import FacebookFail from './FacebookFail'; + +const getSuccessFeedback = id => ( + ( + browserHistory.push(`/experiences/${id}`) + )} + /> +); + +const getFailFeedback = buttonClick => ( + +); + +const getFacebookFail = buttonClick => ( + +); class SubmitArea extends React.PureComponent { constructor(props) { super(props); this.handleAgree = this.handleAgree.bind(this); + this.handleIsOpen = this.handleIsOpen.bind(this); + this.handleFeedback = this.handleFeedback.bind(this); + this.onSubmit = this.onSubmit.bind(this); + this.login = this.login.bind(this); + this.onFacebookFail = this.onFacebookFail.bind(this); this.state = { agree: false, + isOpen: false, + feedback: null, }; } + + onSubmit() { + return this.props.onSubmit() + .then(r => r.experience._id) + .then(id => { + this.handleIsOpen(true); + return this.handleFeedback(getSuccessFeedback(id)); + }) + .catch(() => { + this.handleIsOpen(true); + return this.handleFeedback(getFailFeedback( + () => this.handleIsOpen(false) + )); + }); + } + + onFacebookFail() { + this.handleIsOpen(true); + return this.handleFeedback(getFacebookFail(this.login)); + } + + login() { + return this.props.login(this.props.FB) + .then(status => { + if (status === 'connected') { + return this.onSubmit(); + } + + throw Error('can not login'); + }) + .catch(this.onFacebookFail); + } handleAgree(agree) { this.setState(() => ({ agree, })); } + handleFeedback(feedback) { + this.setState(() => ({ + feedback, + })); + } + + handleIsOpen(isOpen) { + this.setState(() => ({ + isOpen, + })); + } + render() { const { - onSubmit, submitable, auth, - login, - FB, } = this.props; const { agree, + isOpen, + feedback, } = this.state; return ( @@ -40,7 +116,6 @@ class SubmitArea extends React.PureComponent { style={{ display: 'flex', flexDirection: 'column', - alignItems: 'center', marginTop: '57px', }} > @@ -71,13 +146,19 @@ class SubmitArea extends React.PureComponent {
+ this.handleIsOpen(!isOpen)} + hasClose={false} + > + {feedback} + ); } diff --git a/src/components/ShareExperience/common/SuccessFeedback.js b/src/components/ShareExperience/common/SuccessFeedback.js new file mode 100644 index 000000000..d08661130 --- /dev/null +++ b/src/components/ShareExperience/common/SuccessFeedback.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Checked from 'common/icons/Checked'; +import Button from 'common/button/Button'; + +const SuccessFeedback = ({ buttonClick }) => ( +
+ +

+ 上傳成功 +

+
+ +
+
+); + +SuccessFeedback.propTypes = { + buttonClick: PropTypes.func, +}; + +export default SuccessFeedback; diff --git a/src/components/common/Modal.js b/src/components/common/Modal.js index 3b3b1f5b5..6cc4c7cb1 100644 --- a/src/components/common/Modal.js +++ b/src/components/common/Modal.js @@ -6,7 +6,7 @@ import Cross from '../images/x.svg'; import styles from './Modal.module.css'; -const Modal = ({ children, isOpen, close }) => ( +const Modal = ({ children, isOpen, hasClose, close }) => (
( >
-
- -
+ { + hasClose ? +
+ +
: null + } {children}
@@ -29,7 +32,12 @@ const Modal = ({ children, isOpen, close }) => ( Modal.propTypes = { children: PropTypes.node, isOpen: PropTypes.bool, + hasClose: PropTypes.bool, close: PropTypes.func, }; +Modal.defaultProps = { + hasClose: true, +}; + export default Modal; diff --git a/src/components/common/button/ButtonSubmit.js b/src/components/common/button/ButtonSubmit.js index 00ff30f9a..72ba218ca 100644 --- a/src/components/common/button/ButtonSubmit.js +++ b/src/components/common/button/ButtonSubmit.js @@ -8,56 +8,49 @@ const isLogin = auth => auth.get('status') === 'connected'; class ButtonSubmit extends React.PureComponent { - constructor(props) { - super(props); - - this.login = this.login.bind(this); - } - login() { - return this.props.login(this.props.FB) - .catch(error => { - console.log(error); - }); - } - render() { - const { text, onSubmit, disabled, auth } = this.props; + const { text, onSubmit, disabled, auth, login } = this.props; return ( - isLogin(auth) ? - : -
- -
-

+ { + isLogin(auth) ? +

-
+ {text} + : +
+ +
+

+ 為什麼需要 Facebook 帳戶驗證？ +

+
+
+ } +
); } } @@ -68,7 +61,6 @@ ButtonSubmit.propTypes = { disabled: PropTypes.bool, auth: ImmutablePropTypes.map, login: PropTypes.func.isRequired, - FB: PropTypes.object, }; export default ButtonSubmit; diff --git a/src/components/common/button/ButtonSubmit.module.css b/src/components/common/button/ButtonSubmit.module.css index 398e4ac0c..04532a663 100644 --- a/src/components/common/button/ButtonSubmit.module.css +++ b/src/components/common/button/ButtonSubmit.module.css @@ -4,7 +4,10 @@ .container { background: #000000; color: #FFFFFF; - padding: 14px 68px; + padding: 14px 0; + // height: 50px; + width: 200px; + text-align: center; &:hover { background: main-yellow;