wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-06-30 21:12:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adds component to coral-framework to deal with the change of displayname.

Browse Source
This commit is contained in:
gaba
2017-01-31 13:52:40 -08:00
parent a377f61bdd
commit 37eae51641
8 changed files with 63 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-framework/actions/auth.js
+14 -4
View File
@@ -3,22 +3,32 @@ import translations from './../translations';
const lang = new I18n(translations);
import * as actions from '../constants/auth';
import coralApi, {base} from '../helpers/response';
import {addItem} from './items';
import {addItem, updateItem} from './items';
// Dialog Actions
export const showSignInDialog = (offset = 0) => ({type: actions.SHOW_SIGNIN_DIALOG, offset});
export const hideSignInDialog = () => ({type: actions.HIDE_SIGNIN_DIALOG});
export const createDisplayNameRequest = () => ({type: actions.CREATE_DISPLAYNAME_REQUEST});
export const showCreateDisplayNameDialog = () => ({type: actions.SHOW_CREATEDISPLAYNAME_DIALOG});
export const hideCreateDisplayNameDialog = () => ({type: actions.HIDE_CREATEDISPLAYNAME_DIALOG});
export const createDisplayName = (formData) => (dispatch) => {
coralApi('/users', {method: 'POST', body: formData})
export const updateDisplayName = displayName => ({type: actions.UPDATE_DISPLAYNAME, displayName});
export const createDisplayName = (userId, formData) => dispatch => {
dispatch(createDisplayNameRequest());
coralApi(`/users/${userId}/displayname`, {method: 'POST', body: formData})
.then(() => {
dispatch(createDisplayNameSuccess());
dispatch(hideCreateDisplayNameDialog());
dispatch(updateItem(userId, 'displayName', formData.displayName, 'users'));
dispatch(updateDisplayName(formData.displayName));
})
.catch(() => dispatch(createDisplayNameFailure(lang.t('createdisplay.errorCreate'))));
.catch(() => {
dispatch(createDisplayNameFailure(lang.t('createdisplay.errorCreate')));
});
};
const createDisplayNameSuccess = () => ({type: actions.CREATEDISPLAYNAME_SUCCESS});
const createDisplayNameFailure = error => ({type: actions.CREATEDISPLAYNAME_FAILURE, error});
client/coral-framework/actions/items.js
-1
View File
@@ -203,7 +203,6 @@ export function postItem (item, type, id, mutate) {
parent_id: null
}
}).then(({data}) => {
console.log('it workt');
console.log(data);
});
client/coral-framework/components/CreateDisplayNameDialog.js
+16 -17
View File
@@ -1,11 +1,13 @@
import React from 'react';
import FormField from './FormField';
import Button from 'coral-ui/components/Button';
import {Dialog} from 'coral-ui';
import styles from './styles.css';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
const lang = new I18n(translations);
const CreateDisplayNameDialog = ({open, handleClose, offset, loggedIn}) => (
const CreateDisplayNameDialog = ({open, handleClose, offset, formData, handleSubmitDisplayName, handleChange}) => (
<Dialog
className={styles.dialog}
id="createDisplayNameDialog"
@@ -20,25 +22,22 @@ const CreateDisplayNameDialog = ({open, handleClose, offset, loggedIn}) => (
<h1>
{lang.t('createdisplay.writeyourusername')}
</h1>
Logged {loggedIn}
</div>
<div>
<p>{lang.t('createdisplay.yourusername')}</p>
<form id="saveDisplayName" onSubmit={handleSubmitDisplayName}>
<FormField
id="displayName"
type="string"
label={lang.t('createdisplay.displayName')}
value={formData.displayName}
onChange={handleChange}
/>
<Button id="save" type="submit" className={styles.saveButton}>{lang.t('createdisplay.save')}</Button>
</form>
</div>
</div>
</Dialog>
);
// <form onSubmit={props.handleSignIn}>
// <FormField
// id="displayName"
// type="string"
// label={lang.t('createdisplay.displayName')}
// value="yeah"
// onChange={props.handleSubmitForm}
// />
// <div className={styles.action}>
// <Button id='save' type="submit" cStyle="black" className={styles.saveButton} full>
// {lang.t('createdisplay.save')}
// </Button>
// </div>
// </form>
export default CreateDisplayNameDialog;
client/coral-framework/constants/auth.js
+6
View File
@@ -4,6 +4,10 @@ export const CLEAN_STATE = 'CLEAN_STATE';
export const SHOW_SIGNIN_DIALOG = 'SHOW_SIGNIN_DIALOG';
export const HIDE_SIGNIN_DIALOG = 'HIDE_SIGNIN_DIALOG';
export const CREATE_DISPLAYNAME_REQUEST = 'CREATE_DISPLAYNAME_REQUEST';
export const CREATEDISPLAYNAME_SUCCESS = 'CREATEDISPLAYNAME_SUCCESS';
export const CREATEDISPLAYNAME_FAILURE = 'CREATEDISPLAYNAME_FAILURE';
export const CREATE_DISPLAYNAME = 'CREATE_DISPLAYNAME';
export const SHOW_CREATEDISPLAYNAME_DIALOG = 'SHOW_CREATEDISPLAYNAME_DIALOG';
export const HIDE_CREATEDISPLAYNAME_DIALOG = 'HIDE_CREATEDISPLAYNAME_DIALOG';
@@ -35,3 +39,5 @@ export const CHECK_LOGIN_SUCCESS = 'CHECK_LOGIN_SUCCESS';
export const CHECK_LOGIN_FAILURE = 'CHECK_LOGIN_FAILURE';
export const CHECK_CSRF_TOKEN = 'CHECK_CSRF_TOKEN';
export const UPDATE_DISPLAYNAME = 'UPDATE_DISPLAYNAME';
client/coral-framework/constants/user.js
+1
View File
@@ -5,3 +5,4 @@ export const COMMENTS_BY_USER_REQUEST = 'COMMENTS_BY_USER_REQUEST';
export const COMMENTS_BY_USER_SUCCESS = 'COMMENTS_BY_USER_SUCCESS';
export const COMMENTS_BY_USER_FAILURE = 'COMMENTS_BY_USER_FAILURE';
export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
export const UPDATE_DISPLAYNAME = 'UPDATE_DISPLAYNAME';
client/coral-framework/containers/ChangeDisplayNameContainer.js
+10 -8
View File
@@ -30,12 +30,13 @@ class ChangeDisplayNameContainer extends Component {
super(props);
this.state = this.initialState;
this.handleChange = this.handleChange.bind(this);
this.handleSubmitForm = this.handleSubmitForm.bind(this);
this.handleSubmitDisplayName = this.handleSubmitDisplayName.bind(this);
this.handleClose = this.handleClose.bind(this);
this.addError = this.addError.bind(this);
}
componentDidMount() {
window.authCallback = this.props.facebookCallback;
const {formData} = this.state;
const errors = Object.keys(formData).reduce((map, prop) => {
map[prop] = lang.t('createdisplay.requiredField');
@@ -70,7 +71,7 @@ class ChangeDisplayNameContainer extends Component {
const {addError} = this;
if (!value.length) {
addError(name, lang.t('displayName.requiredField'));
addError(name, lang.t('createdisplay.requiredField'));
} else {
const { [name]: prop, ...errors } = this.state.errors; // eslint-disable-line
// Removes Error
@@ -87,16 +88,16 @@ class ChangeDisplayNameContainer extends Component {
this.setState({showErrors: show});
}
handleSubmitForm(e) {
handleSubmitDisplayName(e) {
e.preventDefault();
const {errors} = this.state;
const {validForm, invalidForm} = this.props;
this.displayErrors();
if (this.isCompleted() && !Object.keys(errors).length) {
createDisplayName(this.state.formData);
this.props.createDisplayName(this.props.user.id, this.state.formData);
validForm();
} else {
invalidForm(lang.t('signIn.checkTheForm'));
invalidForm(lang.t('createdisplay.checkTheForm'));
}
}
@@ -105,15 +106,16 @@ class ChangeDisplayNameContainer extends Component {
}
render() {
const {loggedIn, auth, offset, user} = this.props;
const {loggedIn, auth, offset} = this.props;
return (
<div>
<CreateDisplayNameDialog
open={auth.showCreateDisplayNameDialog}
offset={offset}
handleClose={this.handleClose}
user={user}
loggedIn={loggedIn}
handleSubmitDisplayName={this.handleSubmitDisplayName}
{...this}
{...this.state}
{...this.props}
/>
@@ -127,7 +129,7 @@ const mapStateToProps = state => ({
});
const mapDispatchToProps = dispatch => ({
createDisplayName: formData => dispatch(createDisplayName(formData)),
createDisplayName: (userid, formData) => dispatch(createDisplayName(userid, formData)),
showCreateDisplayNameDialog: () => dispatch(showCreateDisplayNameDialog()),
hideCreateDisplayNameDialog: () => dispatch(hideCreateDisplayNameDialog()),
invalidForm: error => dispatch(invalidForm(error)),
client/coral-framework/reducers/auth.js
+11
View File
@@ -43,6 +43,14 @@ export default function auth (state = initialState, action) {
return state.merge(Map({
showCreateDisplayNameDialog: false
}));
case actions.CREATEDISPLAYNAME_SUCCESS :
return state.merge(Map({
showCreateDisplayNameDialog: false,
error: ''
}));
case actions.CREATEDISPLAYNAME_FAILURE :
return state
.set('error', action.error);
case actions.CHANGE_VIEW :
return state
.set('error', '')
@@ -109,6 +117,9 @@ export default function auth (state = initialState, action) {
return state
.set('passwordRequestFailure', 'There was an error sending your password reset email. Please try again soon!')
.set('passwordRequestSuccess', null);
case actions.UPDATE_DISPLAYNAME:
return state
.merge({'user': {'displayName': action.displayName}});
default :
return state;
}
client/coral-framework/translations.json
+5 -3
View File
@@ -10,7 +10,8 @@
"displayName": "Display Name",
"save": "Save",
"requiredField": "Required field",
"errorCreate": "Error when changing display name"
"errorCreate": "Error when changing display name",
"checkTheForm": "Invalid Form. Please, check the fields"
},
"error": {
"email": "Not a valid E-Mail",
@@ -37,9 +38,10 @@
"createdisplay": {
"writeyourusername": "Escribe tu nombre",
"yourusername": "Tu nombre es visible publicamente en todos los comentarios que publiques. Es necesario tener un nombre de usuario antes de poder publicar tu primer comentario.",
"displayName": "Nombre",
"displayName": "Nombre a mostrar",
"save": "Guardar",
"requiredField": "Campo necesario"
"requiredField": "Campo necesario",
"checkTheForm": "Formulario Invalido. Por favor, verifica los campos"
},
"error": {
"email": "No es un email válido",