Progress

app/javascript/gabsocial/components/panel/media_gallery_panel.js

@@ -28,7 +28,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     accountId: PropTypes.string,
-    account: ImmutablePropTypes.map.isRequired,
+    account: ImmutablePropTypes.map,
     attachments: ImmutablePropTypes.list.isRequired,
     intl: PropTypes.object.isRequired,
   }
@@ -54,8 +54,6 @@ class MediaGalleryPanel extends ImmutablePureComponent {
       attachments
     } = this.props
 
-    console.log("account, attachments:", account, attachments)
-
     if (!account || !attachments) return null
     if (attachments.size === 0) return null
 

app/javascript/gabsocial/components/panel/profile_info_panel.js

@@ -39,7 +39,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
 
   static propTypes = {
     identityProofs: ImmutablePropTypes.list,
-    account: ImmutablePropTypes.map.isRequired,
+    account: ImmutablePropTypes.map,
     intl: PropTypes.object.isRequired,
   }
 
@@ -50,93 +50,92 @@ class ProfileInfoPanel extends ImmutablePureComponent {
   render() {
     const { intl, account, identityProofs } = this.props
 
-    const fields = !account ? null : account.get('fields')
-    const content = !account ? null : { __html: account.get('note_emojified') }
-    const memberSinceDate = !account ? null : intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' })
+    if (!account) return null
+
+    const fields = account.get('fields')
+    const content = { __html: account.get('note_emojified') }
+    const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' })
     const hasNote = !!content ? (account.get('note').length > 0 && account.get('note') !== '<p></p>') : false
 
     return (
       <PanelLayout title={intl.formatMessage(messages.title)}>
-        {
-          !!account &&
-          <div className={[_s.default].join(' ')}>
-            {
-              hasNote &&
-              <Fragment>
-                <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
-                <Divider small />
-              </Fragment>
-            }
+        <div className={[_s.default].join(' ')}>
+          {
+            hasNote &&
+            <Fragment>
+              <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
+              <Divider small />
+            </Fragment>
+          }
 
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-              <Icon id='calendar' width='12px' height='12px' className={_s.fillColorSecondary} />
-              <Text
-                size='small'
-                color='secondary'
-                className={_s.ml5}
-              >
-                {
-                  intl.formatMessage(messages.memberSince, {
-                    date: memberSinceDate
-                  })
-                }
-              </Text>
-            </div>
+          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+            <Icon id='calendar' width='12px' height='12px' className={_s.fillColorSecondary} />
+            <Text
+              size='small'
+              color='secondary'
+              className={_s.ml5}
+            >
+              {
+                intl.formatMessage(messages.memberSince, {
+                  date: memberSinceDate
+                })
+              }
+            </Text>
+          </div>
 
-            {(fields.size > 0 || identityProofs.size > 0) && (
-              <div className={[_s.default]}>
-                {identityProofs.map((proof, i) => (
+          {(fields.size > 0 || identityProofs.size > 0) && (
+            <div className={[_s.default]}>
+              {identityProofs.map((proof, i) => (
+                <Fragment>
+                  <Divider small />
+                  <dl className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')} key={`profile-identity-proof-${i}`}>
+                    <dt
+                      className={_s.dangerousContent}
+                      dangerouslySetInnerHTML={{ __html: proof.get('provider') }}
+                    />
+
+                    { /* : todo : */}
+                    <dd className='verified'>
+                      <a href={proof.get('proof_url')} target='_blank' rel='noopener'>
+                        <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(proof.get('updated_at'), dateFormatOptions) })}>
+                          <Icon id='check' className='verified__mark' />
+                        </span>
+                      </a>
+                      <a href={proof.get('profile_url')} target='_blank' rel='noopener'>
+                        <span
+                          className={_s.dangerousContent}
+                          dangerouslySetInnerHTML={{ __html: ' ' + proof.get('provider_username') }}
+                        />
+                      </a>
+                    </dd>
+                  </dl>
+                </Fragment>
+              ))}
+
+              {
+                fields.map((pair, i) => (
                   <Fragment>
                     <Divider small />
-                    <dl className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')} key={`profile-identity-proof-${i}`}>
+                    <dl className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')} key={`profile-field-${i}`}>
                       <dt
-                        className={_s.dangerousContent}
-                        dangerouslySetInnerHTML={{ __html: proof.get('provider') }}
+                        className={[_s.text, _s.dangerousContent].join(' ')}
+                        dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }}
+                        title={pair.get('name')}
+                      />
+                      <dd
+                        className={[_s.dangerousContent, _s.marginLeftAuto].join(' ')}
+                        title={pair.get('value_plain')}
+                        dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }}
                       />
-
-                      { /* : todo : */}
-                      <dd className='verified'>
-                        <a href={proof.get('proof_url')} target='_blank' rel='noopener'>
-                          <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(proof.get('updated_at'), dateFormatOptions) })}>
-                            <Icon id='check' className='verified__mark' />
-                          </span>
-                        </a>
-                        <a href={proof.get('profile_url')} target='_blank' rel='noopener'>
-                          <span
-                            className={_s.dangerousContent}
-                            dangerouslySetInnerHTML={{ __html: ' ' + proof.get('provider_username') }}
-                          />
-                        </a>
-                      </dd>
                     </dl>
                   </Fragment>
-                ))}
+                ))
+              }
 
-                {
-                  fields.map((pair, i) => (
-                    <Fragment>
-                      <Divider small />
-                      <dl className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')} key={`profile-field-${i}`}>
-                        <dt
-                          className={[_s.text, _s.dangerousContent].join(' ')}
-                          dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }}
-                          title={pair.get('name')}
-                        />
-                        <dd
-                          className={[_s.dangerousContent, _s.marginLeftAuto].join(' ')}
-                          title={pair.get('value_plain')}
-                          dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }}
-                        />
-                      </dl>
-                    </Fragment>
-                  ))
-                }
+            </div>
+          )}
 
-              </div>
-            )}
-
-          </div>
-        }
+        </div>
       </PanelLayout>
     )
   }

app/javascript/gabsocial/components/panel/profile_stats_panel.js

@@ -10,7 +10,7 @@ const messages = defineMessages({
   gabs: { id: 'account.gabs', defaultMessage: 'Gabs' },
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
   follows: { id: 'account.follows', defaultMessage: 'Follows' },
-  favorites: { id: 'navigation_bar.favorites', defaultMessage: 'Favorites' },
+  likes: { id: 'likes', defaultMessage: 'Likes' },
 })
 
 export default
@@ -18,7 +18,7 @@ export default
 class ProfileStatsPanel extends ImmutablePureComponent {
 
   static propTypes = {
-    account: ImmutablePropTypes.list.isRequired,
+    account: ImmutablePropTypes.map,
     intl: PropTypes.object.isRequired,
   }
 
@@ -50,9 +50,9 @@ class ProfileStatsPanel extends ImmutablePureComponent {
             {
               account.get('id') === me &&
               <UserStat
-                title={intl.formatMessage(messages.favorites)}
+                title={intl.formatMessage(messages.likes)}
                 value={shortNumberFormat(favouritesCount)}
-                to={`/${account.get('acct')}/favorites`}
+                to={`/${account.get('acct')}/likes`}
               />
             }
           </div>

app/javascript/gabsocial/components/panel/user_panel.js

@@ -2,19 +2,24 @@ import { NavLink } from 'react-router-dom'
 import { injectIntl, defineMessages } from 'react-intl'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
+import classNames from 'classnames/bind'
 import { me } from '../../initial_state'
 import { makeGetAccount } from '../../selectors'
 import { shortNumberFormat } from '../../utils/numbers'
+import Button from '../button'
 import DisplayName from '../display_name'
 import Avatar from '../avatar'
 import Image from '../image'
 import UserStat from '../user_stat'
 import PanelLayout from './panel_layout'
 
+const cx = classNames.bind(_s)
+
 const messages = defineMessages({
   gabs: { id: 'account.posts', defaultMessage: 'Gabs' },
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
-  follows: { id: 'account.follows', defaultMessage: 'Follows' }
+  follows: { id: 'account.follows', defaultMessage: 'Follows' },
+  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
 })
 
 const mapStateToProps = state => {
@@ -32,15 +37,51 @@ class UserPanel extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
   }
 
+  state = {
+    hovering: false,
+  }
+
+  handleOnMouseEnter = () => {
+    this.setState({ hovering: true })
+  }
+
+  handleOnMouseLeave = () => {
+    this.setState({ hovering: false })
+  }
+
   render() {
     const { account, intl } = this.props
+    const { hovering } = this.state
+
+    const buttonClasses = cx({
+      positionAbsolute: 1,
+      mt10: 1,
+      mr10: 1,
+      top0: 1,
+      right0: 1,
+      displayNone: !hovering,
+    })
 
     return (
       <PanelLayout noPadding>
-        <Image
-          className={_s.height122PX}
-          src={account.get('header_static')}
-        />
+        <div
+          className={[_s.default, _s.height122PX].join(' ')}
+          onMouseEnter={() => this.handleOnMouseEnter()}
+          onMouseLeave={() => this.handleOnMouseLeave()}
+        >
+          <Image
+            className={_s.height122PX}
+            src={account.get('header_static')}
+          /> 
+          <Button
+            color='secondary'
+            backgroundColor='secondary'
+            radiusSmall
+            className={buttonClasses}
+          >
+            {intl.formatMessage(messages.edit_profile)}
+          </Button>
+        </div>
 
         <NavLink
           className={[_s.default, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}