+
+ );
+ }
+}
SetUsernameDialog.propTypes = {
- open: PropTypes.bool,
- handleClose: PropTypes.func,
- formData: PropTypes.object,
- handleSubmitUsername: PropTypes.func,
- handleChange: PropTypes.func,
- auth: PropTypes.object,
- errors: PropTypes.object,
+ loading: PropTypes.bool.isRequired,
+ username: PropTypes.string.isRequired,
+ usernameError: PropTypes.string.isRequired,
+ onUsernameChange: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ errorMessage: PropTypes.string.isRequired,
};
export default SetUsernameDialog;
diff --git a/plugins/talk-plugin-auth/client/stream/components/SignInButton.js b/plugins/talk-plugin-auth/client/stream/components/SignInButton.js
index dcc6e5c4a..486858151 100644
--- a/plugins/talk-plugin-auth/client/stream/components/SignInButton.js
+++ b/plugins/talk-plugin-auth/client/stream/components/SignInButton.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button } from 'plugin-api/beta/client/components/ui';
-import t from 'coral-framework/services/i18n';
+import { t } from 'plugin-api/beta/client/services';
const SignInButton = ({ currentUser, showSignInDialog }) => (
diff --git a/plugins/talk-plugin-auth/client/stream/components/UserBox.js b/plugins/talk-plugin-auth/client/stream/components/UserBox.js
index 7f48513b8..f03573667 100644
--- a/plugins/talk-plugin-auth/client/stream/components/UserBox.js
+++ b/plugins/talk-plugin-auth/client/stream/components/UserBox.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styles from './UserBox.css';
-import t from 'coral-framework/services/i18n';
+import { t } from 'plugin-api/beta/client/services';
import cn from 'classnames';
const UserBox = ({ user, logout, onShowProfile }) => (
diff --git a/plugins/talk-plugin-auth/client/stream/containers/SetUsernameDialog.js b/plugins/talk-plugin-auth/client/stream/containers/SetUsernameDialog.js
index cba032cd6..16ba5cac0 100644
--- a/plugins/talk-plugin-auth/client/stream/containers/SetUsernameDialog.js
+++ b/plugins/talk-plugin-auth/client/stream/containers/SetUsernameDialog.js
@@ -1,183 +1,64 @@
-import React from 'react';
+import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'react-apollo';
-import { bindActionCreators } from 'redux';
-import errorMsj from 'coral-framework/helpers/error';
-import validate from 'coral-framework/helpers/validate';
-import CreateUsernameDialog from './CreateUsernameDialog';
-import { withSetUsername } from 'coral-framework/graphql/mutations';
-import { forEachError } from 'plugin-api/beta/client/utils';
-
-import t from 'coral-framework/services/i18n';
-
+import { connect, withSetUsername } from 'plugin-api/beta/client/hocs';
+import { compose, branch, renderNothing } from 'recompose';
import {
- showCreateUsernameDialog,
- hideCreateUsernameDialog,
- invalidForm,
- validForm,
- updateUsername,
-} from 'coral-embed-stream/src/actions/login';
+ usernameStatusSelector,
+ usernameSelector,
+} from 'plugin-api/beta/client/selectors/auth';
+import SetUsernameDialog from '../components/SetUsernameDialog';
-class SetUsernameDialog extends React.Component {
- constructor(props) {
- super(props);
-
- this.state = {
- formData: {
- username: (props.auth.user && props.auth.user.username) || '',
- },
- errors: {},
- showErrors: false,
- };
- }
-
- componentWillReceiveProps(next) {
- if (
- !this.props.auth.showCreateUsernameDialog &&
- next.auth.showCreateUsernameDialog
- ) {
- this.setState({
- formData: {
- username:
- (this.props.auth.user && this.props.auth.user.username) || '',
- },
- });
- }
- }
-
- handleChange = e => {
- const { name, value } = e.target;
- this.setState(
- state => ({
- ...state,
- formData: {
- ...state.formData,
- [name]: value,
- },
- }),
- () => {
- this.validation(name, value);
- }
- );
+class SetUsernameDialogContainer extends Component {
+ state = {
+ username: this.props.username,
+ usernameError: '',
};
- addError = (name, error) => {
- return this.setState(state => ({
- errors: {
- ...state.errors,
- [name]: error,
- },
- }));
- };
-
- validation = (name, value) => {
- const { addError } = this;
-
- if (!value.length) {
- addError(name, t('createdisplay.required_field'));
- } else if (!validate[name](value)) {
- addError(name, errorMsj[name]);
+ handleSubmit = () => {
+ const validationError = this.props.validateUsername(this.state.username);
+ if (validationError) {
+ this.setState({ usernameError: validationError });
} else {
- const {[name]: prop, ...errors} = this.state.errors; // eslint-disable-line
- // Removes Error
- this.setState(state => ({ ...state, errors }));
+ this.props.setUsername(this.state.username);
}
};
- isCompleted = () => {
- const { formData } = this.state;
- return !Object.keys(formData).filter(prop => !formData[prop].length).length;
- };
-
- displayErrors = (show = true) => {
- this.setState({ showErrors: show });
- };
-
- async setUsernameAndClose(username, props = this.props) {
- const {
- validForm,
- invalidForm,
- setUsername,
- hideCreateUsernameDialog,
- updateUsername,
- } = props;
- try {
- // Perform mutation
- await setUsername(this.props.auth.user.id, username);
-
- // Also change in redux store...
- updateUsername(username);
-
- hideCreateUsernameDialog();
- validForm();
- } catch (error) {
- const msgs = [];
- forEachError(error, ({ msg }) => msgs.push(msg));
- invalidForm(t(msgs.join(', ')));
- }
- }
-
- handleSubmitUsername = e => {
- e.preventDefault();
- const { errors, formData: { username } } = this.state;
- const { invalidForm } = this.props;
- this.displayErrors();
- if (this.isCompleted() && !Object.keys(errors).length) {
- this.setUsernameAndClose(username);
- } else {
- invalidForm(t('createdisplay.check_the_form'));
- }
- };
-
- handleClose = () => {
- this.setUsernameAndClose(this.props.auth.user.username);
- };
+ setUsername = username => this.setState({ username });
render() {
- const { loggedIn, auth } = this.props;
+ if (!this.props.unset) {
+ return null;
+ }
return (
-
-
-
+
);
}
}
-SetUsernameDialog.propTypes = {
- auth: PropTypes.object,
- hideCreateUsernameDialog: PropTypes.func,
- validForm: PropTypes.func,
- invalidForm: PropTypes.func,
- loggedIn: PropTypes.bool,
- changeUsername: PropTypes.func,
+SetUsernameDialogContainer.propTypes = {
+ unset: PropTypes.bool.isRequired,
+ username: PropTypes.string,
+ setUsername: PropTypes.func.isRequired,
+ loading: PropTypes.bool.isRequired,
+ errorMessage: PropTypes.string.isRequired,
+ success: PropTypes.bool.isRequired,
+ validateUsername: PropTypes.func.isRequired,
};
-const mapStateToProps = ({ auth }) => ({
- auth: auth,
+const mapStateToProps = state => ({
+ unset: usernameStatusSelector(state) === 'UNSET',
+ username: usernameSelector(state),
});
-const mapDispatchToProps = dispatch =>
- bindActionCreators(
- {
- showCreateUsernameDialog,
- hideCreateUsernameDialog,
- invalidForm,
- validForm,
- updateUsername,
- },
- dispatch
- );
-
export default compose(
+ connect(mapStateToProps, null),
withSetUsername,
- connect(mapStateToProps, mapDispatchToProps)
-)(SetUsernameDialog);
+ branch(props => !props.username, renderNothing)
+)(SetUsernameDialogContainer);
diff --git a/plugins/talk-plugin-auth/client/translations.yml b/plugins/talk-plugin-auth/client/translations.yml
index cdc34688d..36af1624b 100644
--- a/plugins/talk-plugin-auth/client/translations.yml
+++ b/plugins/talk-plugin-auth/client/translations.yml
@@ -6,8 +6,6 @@ en:
verify_email2: "You must verify your account before engaging with the community."
not_you: "Not you?"
logged_in_as: "Signed in as"
- facebook_sign_in: "Sign in with Facebook"
- facebook_sign_up: "Sign up with Facebook"
logout: "Sign out"
sign_in: "Sign in"
sign_in_to_join: "Sign in to join the conversation"
@@ -51,8 +49,6 @@ es:
verify_email2: "Debe confirmarla antes de poder involucrarse en la comunidad."
not_you: "¿No eres tu?"
logged_in_as: "Entraste como"
- facebook_sign_in: "Entrar con Facebook"
- facebook_sign_up: "Registrarse con Facebook"
logout: "Salir"
sign_in: "Entrar"
sign_in_to_join: "Entrar para unirte a la conversación"
@@ -97,8 +93,6 @@ fr:
verify_email2: "Vous devez vérifier votre adresse e-mail avant de vous engager auprès de la communauté."
not_you: "Pas vous ?"
logged_in_as: "Connecté en tant que"
- facebook_sign_in: "Connectez-vous avec Facebook"
- facebook_sign_up: "Inscrivez-vous avec Facebook"
logout: "Se déconnecter"
sign_in: "Se connecter"
sign_in_to_join: "Connectez-vous pour participer à la conversation"
@@ -141,8 +135,6 @@ zh_CN:
verify_email2: "您参与社群前须验证帐号。"
not_you: "不是你？"
logged_in_as: "登录身份"
- facebook_sign_in: "使用 Facebook 帐号"
- facebook_sign_up: "使用 Facebook 帐号"
logout: "登出"
sign_in: "登入"
sign_in_to_join: "登入以加入对话"
@@ -185,8 +177,6 @@ zh_TW:
verify_email2: "您參與社群前須驗證帳號。"
not_you: "不是你？"
logged_in_as: "登錄身份"
- facebook_sign_in: "使用 Facebook 帳號"
- facebook_sign_up: "使用 Facebook 帳號"
logout: "登出"
sign_in: "登入"
sign_in_to_join: "登入以加入對話"