diff --git a/app/gabsocial/actions/me.js b/app/gabsocial/actions/me.js index 679ee0397..1d0054845 100644 --- a/app/gabsocial/actions/me.js +++ b/app/gabsocial/actions/me.js @@ -25,7 +25,6 @@ export function fetchMe() { api(getState).get('/api/v1/accounts/verify_credentials').then(response => { dispatch(fetchMeSuccess(response.data)); - dispatch(importFetchedAccount(response.data)); }).catch(error => { dispatch(fetchMeFail(error)); }); @@ -34,6 +33,7 @@ export function fetchMe() { export function patchMe(params) { return (dispatch, getState) => { + dispatch(patchMeRequest()); return api(getState) .patch('/api/v1/accounts/update_credentials', params) .then(response => { @@ -51,9 +51,12 @@ export function fetchMeRequest() { } export function fetchMeSuccess(me) { - return { - type: ME_FETCH_SUCCESS, - me, + return (dispatch, getState) => { + dispatch(importFetchedAccount(me)); + dispatch({ + type: ME_FETCH_SUCCESS, + me, + }); }; } diff --git a/app/gabsocial/features/edit_profile/index.js b/app/gabsocial/features/edit_profile/index.js new file mode 100644 index 000000000..16a774a83 --- /dev/null +++ b/app/gabsocial/features/edit_profile/index.js @@ -0,0 +1,87 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { defineMessages, injectIntl } from 'react-intl'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import Column from '../ui/components/column'; +import { + SimpleForm, + FieldsGroup, + TextInput, +} from 'gabsocial/features/forms'; +import { patchMe } from 'gabsocial/actions/me'; + +const messages = defineMessages({ + heading: { id: 'column.edit_profile', defaultMessage: 'Edit profile' }, +}); + +const mapStateToProps = state => { + const me = state.get('me'); + return { + account: state.getIn(['accounts', me]), + }; +}; + +export default @connect(mapStateToProps) +@injectIntl +class EditProfile extends ImmutablePureComponent { + + static propTypes = { + dispatch: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + account: ImmutablePropTypes.map, + }; + + constructor(props) { + super(props); + this.state = { isLoading: false }; + } + + getFormData = (form) => { + return Object.fromEntries( + new FormData(form).entries() + ); + } + + handleSubmit = (event) => { + const { dispatch } = this.props; + const formData = this.getFormData(event.target); + dispatch(patchMe(formData)).then(() => { + this.setState({ isLoading: false }); + }).catch((error) => { + this.setState({ isLoading: false }); + }); + this.setState({ isLoading: true }); + event.preventDefault(); + } + + render() { + const { account, intl } = this.props; + + return ( + + +
+ + + + +
+
+ +
+
+
+ ); + } + +} diff --git a/app/gabsocial/features/forms/index.js b/app/gabsocial/features/forms/index.js index 148e467cd..b05d9809e 100644 --- a/app/gabsocial/features/forms/index.js +++ b/app/gabsocial/features/forms/index.js @@ -184,3 +184,36 @@ export class SelectDropdown extends ImmutablePureComponent { } } + +export class TextInput extends ImmutablePureComponent { + + static propTypes = { + label: PropTypes.string, + name: PropTypes.string, + defaultValue: PropTypes.string, + maxLength: PropTypes.number, + } + + render() { + const { label, name, defaultValue, maxLength } = this.props; + + return ( +
+
+ +
+ +
+
+
+ ); + } +} diff --git a/app/gabsocial/features/ui/index.js b/app/gabsocial/features/ui/index.js index f0e6cbfe3..a0dfd785f 100644 --- a/app/gabsocial/features/ui/index.js +++ b/app/gabsocial/features/ui/index.js @@ -67,6 +67,7 @@ import { // GroupEdit, LoginPage, Preferences, + EditProfile, } from './util/async-components'; // Dummy import, to make sure that ends up in the application bundle. @@ -236,6 +237,7 @@ class SwitchingColumnsArea extends React.PureComponent { + diff --git a/app/gabsocial/features/ui/util/async-components.js b/app/gabsocial/features/ui/util/async-components.js index ce85789f8..f19cd3298 100644 --- a/app/gabsocial/features/ui/util/async-components.js +++ b/app/gabsocial/features/ui/util/async-components.js @@ -165,3 +165,7 @@ export function LoginPage() { export function Preferences() { return import(/* webpackChunkName: "features/preferences" */'../../preferences'); } + +export function EditProfile() { + return import(/* webpackChunkName: "features/edit_profile" */'../../edit_profile'); +}