Added back EditProfileModal to all edit profile action buttons

• Added: - back EditProfileModal to all edit profile action buttons - AccountActionButton, UserPanel, ProfileHeader
2020-07-17 15:25:05 -05:00 · 2020-07-17 15:25:05 -05:00 · 10a410be53
commit 10a410be53
parent 1e55e2e920
4 changed files with 201 additions and 54 deletions
--- a/app/javascript/gabsocial/components/account_action_button.js
+++ b/app/javascript/gabsocial/components/account_action_button.js
@ -8,6 +8,7 @@ import {
 } from '../actions/accounts'
 import { openModal } from '../actions/modal'
 import { me, unfollowModal } from '../initial_state'
+import { MODAL_EDIT_PROFILE } from '../constants'
 import Button from './button'
 import Text from './text'

@ -51,6 +52,10 @@ const mapDispatchToProps = (dispatch) => ({
    }
  },

+  onOpenEditProfile() {
+    dispatch(openModal(MODAL_EDIT_PROFILE))
+  },
+
 });

 export default
@ -64,6 +69,7 @@ class AccountActionButton extends ImmutablePureComponent {
    isSmall: PropTypes.bool,
    onBlock: PropTypes.func.isRequired,
    onFollow: PropTypes.func.isRequired,
+    onOpenEditProfile: PropTypes.func.isRequired,
  }

  updateOnProps = [
@ -78,6 +84,10 @@ class AccountActionButton extends ImmutablePureComponent {
    this.props.onBlock(this.props.account)
  }

+  handleOnEditProfile = () => {
+    this.props.onOpenEditProfile()
+  }
+  
  render() {
    const {
      account,
@ -98,7 +108,7 @@ class AccountActionButton extends ImmutablePureComponent {
    if (isMe) {
      buttonText = intl.formatMessage(messages.edit_profile)
      buttonOptions = {
-        href: '/settings/profile',
+        onClick: this.handleOnEditProfile,
        color: 'brand',
        backgroundColor: 'none',
        isOutline: true,
--- a/app/javascript/gabsocial/components/modal/edit_profile_modal.js
+++ b/app/javascript/gabsocial/components/modal/edit_profile_modal.js
@ -1,89 +1,222 @@
+import { Fragment } from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
+import { saveUserProfileInformation } from '../../actions/user'
 import { me } from '../../initial_state'
-import ModalLayout from './modal_layout'
-import Avatar from '../avatar'
 import Button from '../button'
+import Block from '../block'
 import Divider from '../divider'
-import Image from '../image'
+import FileInput from '../file_input'
 import Input from '../input'
-import Text from '../text'
+import Switch from '../switch'
+import Heading from '../heading'
 import Textarea from '../textarea'

 const messages = defineMessages({
  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
  headerPhoto: { id: 'header_photo', defaultMessage: 'Header photo' },
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+  save: { id: 'lightbox.save', defaultMessage: 'Save' },
 })

 const mapStateToProps = (state) => ({
  account: state.getIn(['accounts', me]),
 })

+const mapDispatchToProps = (dispatch) => ({
+  onSave: (data) => dispatch(saveUserProfileInformation(data)),
+})
+
 export default
@injectIntl
-@connect(mapStateToProps)
+@connect(mapStateToProps, mapDispatchToProps)
 class EditProfileModal extends ImmutablePureComponent {

  static propTypes = {
    account: ImmutablePropTypes.map,
    intl: PropTypes.object.isRequired,
    onClose: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+  }
+
+  state = {
+    avatarSrc: this.props.account ? this.props.account.get('avatar_static') : undefined,
+    bioValue: this.props.account ? this.props.account.get('note_plain') : '',
+    displayNameValue: this.props.account ? this.props.account.get('display_name_plain') : '',
+    headerSrc: this.props.account ? this.props.account.get('header_static') : undefined,
+    locked: this.props.account ? this.props.account.get('locked') : false,
+  }
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.account !== this.props.account) {
+      if (this.props.account) {
+        this.setState({
+          avatarSrc: this.props.account.get('avatar_static'),
+          bioValue: this.props.account.get('note_plain'),
+          displayNameValue: this.props.account.get('display_name_plain'),
+          headerSrc: this.props.account.get('header_static'),
+          locked: this.props.account.get('locked'),
+        })
+      } else {
+        this.setState({
+          avatarSrc: undefined,
+          bioValue: '',
+          displayNameValue: '',
+          headerSrc: undefined,
+          locked: false,
+        })
+      }
+    }
+  }
+
+  handleCoverPhotoChange = (e) => {
+    try {
+      this.setState({ headerSrc: e.target.files[0] })
+    } catch (error) {
+      // 
+    }
+  }
+
+  handleProfilePhotoChange = (e) => {
+    try {
+      this.setState({ avatarSrc: e.target.files[0] })
+    } catch (error) {
+      // 
+    }
+  }
+
+  handleDisplayNameChange = (value) => {
+    this.setState({ displayNameValue: value })
+  }
+
+  handleBioChange = (value) => {
+    this.setState({ bioValue: value })
+  }
+
+  handleLockedChange = ({ target }) => {
+    this.setState({ locked: target.checked })
+  }
+
+  handleOnClose = () => {
+    this.props.onClose()
+  }
+
+  handleOnSave = () => {
+    const { account } = this.props
+    const {
+      avatarSrc,
+      bioValue,
+      displayNameValue,
+      headerSrc,
+      locked,
+    } = this.state
+
+    const isPro = account.get('is_pro')
+
+    const obj = {}
+    obj.locked = locked
+    if (!isPro && account.get('display_name_plain') !== displayNameValue) obj.displayName = displayNameValue
+    if (account.get('note_plain') !== bioValue) obj.note = bioValue
+    if (account.get('avatar_static') !== avatarSrc) obj.avatar = avatarSrc
+    if (account.get('header_static') !== headerSrc) obj.header = headerSrc
+
+    this.props.onSave(obj)
+    this.handleOnClose()
  }

  render() {
-    const { account, intl, onClose } = this.props
-    
-    const headerSrc = !!account ? account.get('header') : ''
+    const { intl, account } = this.props
+    const {
+      avatarSrc,
+      bioValue,
+      displayNameValue,
+      headerSrc,
+      locked,
+    } = this.state
+
+    const isPro = account.get('is_pro')

    return (
-      <ModalLayout
-        title={intl.formatMessage(messages.edit_profile)}
-        noPadding
-        width={460}
-        onClose={onClose}
-      >
-        <div className={[_s.default, _s.py5, _s.px5, _s.width100PC, _s.overflowHidden].join(' ')}>
-          <Image
-            alt={intl.formatMessage(messages.headerPhoto)}
-            className={_s.radiusSmall}
-            height='180px'
-            src={headerSrc}
-          />
-        </div>
-
-        <div className={[_s.default, _s.flexRow, _s.pl25].join(' ')}>
-          <div className={[_s.default, _s.circle, _s.mtNeg75PX, _s.boxShadowProfileAvatar].join(' ')}>
-            <Avatar
-              size={98}
-              account={account}
-              noHover
+      <div style={{ width: '440px' }} className={[_s.default, _s.modal].join(' ')}>
+        <Block>
+          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
+            <Button
+              backgroundColor='none'
+              title={intl.formatMessage(messages.close)}
+              className={[_s.mrAuto, _s.width60PX, _s.pl0].join(' ')}
+              onClick={this.handleOnClose}
+              color='secondary'
+              icon='close'
+              iconSize='10px'
            />
+            <Heading size='h2'>
+              {intl.formatMessage(messages.edit_profile)}
+            </Heading>
+            <Button
+              title={intl.formatMessage(messages.save)}
+              className={[_s.mlAuto, _s.width60PX].join(' ')}
+              onClick={this.handleOnSave}
+            >
+              {intl.formatMessage(messages.save)}
+            </Button>
          </div>
-        </div>
+          <div className={[_s.default, _s.heightMax80VH, _s.overflowYScroll].join(' ')}>
+            <div className={[_s.default, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+              <FileInput
+                width='440px'
+                height='180px'
+                id='cover-photo'
+                onChange={this.handleCoverPhotoChange}
+                file={headerSrc}
+              />
+              <div className={[_s.default, _s.mtNeg50PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+                <FileInput
+                  width='132px'
+                  height='132px'
+                  id='profile-photo'
+                  file={avatarSrc}
+                  className={[_s.circle, _s.border6PX, _s.borderColorWhite, _s.bgPrimary].join(' ')}
+                  onChange={this.handleProfilePhotoChange}
+                />
+              </div>
+              <div className={[_s.default, _s.py5, _s.px15, _s.mt5, _s.mb15, _s.width100PC].join(' ')}>
+                {
+                  !isPro &&
+                  <Fragment>
+                    <Input
+                      id='display-name'
+                      title='Display name'
+                      value={displayNameValue}
+                      onChange={this.handleDisplayNameChange}
+                      onBlur={this.handleDisplayNameBlur}
+                    />
+                    <Divider isInvisible />
+                  </Fragment>
+                }

-        <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
-          <Input
-            title='Name'
-            value=''
-            disabled={false}
-            // onChange={this.handleTitleChange}
-            placeholder='Add your name...'
-          />
+                <Textarea
+                  title='Bio'
+                  value={bioValue}
+                  disabled={false}
+                  onChange={this.handleBioChange}
+                  placeholder='Add your bio...'
+                />

-          <Divider isInvisible />
+                <Divider isInvisible />

-          <Textarea
-            title='Bio'
-            value=''
-            disabled={false}
-            // onChange={this.handleDescriptionChange}
-            placeholder='Add your bio...'
-          />
-
-        </div>
-
-      </ModalLayout>
+                <div className={[_s.default, _s.px10].join(' ')}>
+                  <Switch
+                    label='Private account'
+                    checked={locked}
+                    onChange={this.handleLockedChange}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </Block>
+      </div>
    )
  }
 }
--- a/app/javascript/gabsocial/components/panel/user_panel.js
+++ b/app/javascript/gabsocial/components/panel/user_panel.js
@ -62,6 +62,10 @@ class UserPanel extends ImmutablePureComponent {
    this.setState({ hovering: false })
  }

+  handleOnEditProfile = () => {
+    this.props.onOpenEditProfile()
+  }
+
  render() {
    const {
      account,
@ -98,7 +102,7 @@ class UserPanel extends ImmutablePureComponent {
            backgroundColor='secondary'
            radiusSmall
            className={buttonClasses}
-            href='/settings/profile'
+            onClick={this.handleOnEditProfile}
          >
            {intl.formatMessage(messages.edit_profile)}
          </Button>
--- a/app/javascript/gabsocial/components/profile_header.js
+++ b/app/javascript/gabsocial/components/profile_header.js
@ -208,7 +208,7 @@ class ProfileHeader extends ImmutablePureComponent {
                        backgroundColor='none'
                        color='brand'
                        className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
-                        href='/settings/profile'
+                        onClick={this.handleOnEditProfile}
                      >
                        <Text color='inherit' weight='bold' size='medium' className={_s.px15}>
                          {intl.formatMessage(messages.editProfile)}
@ -310,7 +310,7 @@ class ProfileHeader extends ImmutablePureComponent {
                          backgroundColor='none'
                          color='brand'
                          className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
-                          href='/settings/profile'
+                          onClick={this.handleOnEditProfile}
                        >
                          <Text color='inherit' weight='bold' size='medium' className={_s.px15}>
                            {intl.formatMessage(messages.editProfile)}