Merge branch 'develop' into audio-player

app/soapbox/features/ui/components/bundle.js

@@ -33,11 +33,11 @@ class Bundle extends React.PureComponent {
     forceRender: false,
   }
 
-  componentWillMount() {
+  componentDidMount() {
     this.load(this.props);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.fetchComponent !== this.props.fetchComponent) {
       this.load(nextProps);
     }

app/soapbox/features/ui/components/focal_point_modal.js

@@ -34,11 +34,11 @@ class FocalPointModal extends ImmutablePureComponent {
     dragging: false,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     this.updatePositionFromMedia(this.props.media);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (this.props.media.get('id') !== nextProps.media.get('id')) {
       this.updatePositionFromMedia(nextProps.media);
     }

app/soapbox/features/ui/components/funding_panel.js

@@ -5,6 +5,16 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import ProgressBar from '../../../components/progress_bar';
 import { fetchFunding } from 'soapbox/actions/patron';
 
+const moneyFormat = amount => (
+  new Intl
+    .NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'usd',
+      notation: 'compact',
+    })
+    .format(amount/100)
+);
+
 class FundingPanel extends ImmutablePureComponent {
 
   componentDidMount() {
@@ -12,21 +22,22 @@ class FundingPanel extends ImmutablePureComponent {
   }
 
   render() {
-    const { funding } = this.props;
+    const { funding, patronUrl } = this.props;
 
     if (!funding) {
       return null;
     }
 
+    const amount = funding.getIn(['funding', 'amount']);
     const goal = funding.getIn(['goals', '0', 'amount']);
     const goal_text = funding.getIn(['goals', '0', 'text']);
-    const goal_reached = funding.get('amount') >= goal;
+    const goal_reached = amount >= goal;
     let ratio_text;
 
     if (goal_reached) {
-      ratio_text = <><strong>${Math.floor(goal/100)}</strong> per month<span className='funding-panel__reached'>&mdash; reached!</span></>;
+      ratio_text = <><strong>{moneyFormat(goal)}</strong> per month<span className='funding-panel__reached'>&mdash; reached!</span></>;
     } else {
-      ratio_text = <><strong>${Math.floor(funding.get('amount')/100)} out of ${Math.floor(goal/100)}</strong> per month</>;
+      ratio_text = <><strong>{moneyFormat(amount)} out of {moneyFormat(goal)}</strong> per month</>;
     }
 
     return (
@@ -41,11 +52,11 @@ class FundingPanel extends ImmutablePureComponent {
           <div className='funding-panel__ratio'>
             {ratio_text}
           </div>
-          <ProgressBar progress={funding.get('amount')/goal} />
+          <ProgressBar progress={amount/goal} />
           <div className='funding-panel__description'>
             {goal_text}
           </div>
-          <a className='button' href='/donate'>Donate</a>
+          {patronUrl && <a className='button' href={patronUrl}>Donate</a>}
         </div>
       </div>
     );
@@ -56,6 +67,7 @@ class FundingPanel extends ImmutablePureComponent {
 const mapStateToProps = state => {
   return {
     funding: state.getIn(['patron', 'funding']),
+    patronUrl: state.getIn(['soapbox', 'extensions', 'patron', 'baseUrl']),
   };
 };
 

app/soapbox/features/ui/components/image_loader.js

@@ -42,7 +42,7 @@ export default class ImageLoader extends React.PureComponent {
     this.loadImage(this.props);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (this.props.src !== nextProps.src) {
       this.loadImage(nextProps);
     }

app/soapbox/features/ui/components/report_modal.js

@@ -83,7 +83,7 @@ class ReportModal extends ImmutablePureComponent {
     this.props.dispatch(expandAccountTimeline(this.props.account.get('id'), { withReplies: true }));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (this.props.account !== nextProps.account && nextProps.account) {
       this.props.dispatch(expandAccountTimeline(nextProps.account.get('id'), { withReplies: true }));
     }

app/soapbox/features/ui/components/user_panel.js

@@ -9,7 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import Avatar from 'soapbox/components/avatar';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 import { acctFull } from 'soapbox/utils/accounts';
-import { getSettings } from 'soapbox/actions/settings';
+import StillImage from 'soapbox/components/still_image';
 
 class UserPanel extends ImmutablePureComponent {
 
@@ -20,7 +20,7 @@ class UserPanel extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, intl, domain, autoPlayGif } = this.props;
+    const { account, intl, domain } = this.props;
     if (!account) return null;
     const displayNameHtml = { __html: account.get('display_name_html') };
     const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
@@ -30,7 +30,7 @@ class UserPanel extends ImmutablePureComponent {
         <div className='user-panel__container'>
 
           <div className='user-panel__header'>
-            <img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' />
+            <StillImage src={account.get('header')} alt='' />
           </div>
 
           <div className='user-panel__profile'>
@@ -91,7 +91,6 @@ const mapStateToProps = state => {
 
   return {
     account: getAccount(state, me),
-    autoPlayGif: getSettings(state).get('autoPlayGif'),
   };
 };