From 73b275b8da5c32b4dde5f7b4cb55281b6b3b035c Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 30 Jun 2020 17:33:21 -0500 Subject: [PATCH] Patron updates --- .env.example | 1 - README.md | 2 +- app/soapbox/actions/patron.js | 5 ++-- app/soapbox/components/sidebar_menu.js | 12 ++++++---- .../features/ui/components/funding_panel.js | 24 ++++++++++++++----- app/soapbox/pages/home_page.js | 2 +- static/instance/soapbox.example.json | 5 +++- webpack/development.js | 6 ----- 8 files changed, 34 insertions(+), 23 deletions(-) diff --git a/.env.example b/.env.example index 3004daa76..b116e6d40 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,3 @@ NODE_ENV=development # BACKEND_URL="https://example.com" -# PATRON_URL="https://patron.example.com" # PROXY_HTTPS_INSECURE=false diff --git a/README.md b/README.md index 954562943..30fa61a1d 100644 --- a/README.md +++ b/README.md @@ -124,7 +124,7 @@ For https, be sure to also set `PROXY_HTTPS_INSECURE=true`. Allows using an HTTPS backend if set to `true`. -This is needed if `BACKEND_URL` or `PATRON_URL` are set to an `https://` value. +This is needed if `BACKEND_URL` is set to an `https://` value. [More info](https://stackoverflow.com/a/48624590/8811886). **Default:** `false` diff --git a/app/soapbox/actions/patron.js b/app/soapbox/actions/patron.js index 6b4885c9a..3f32e2ad8 100644 --- a/app/soapbox/actions/patron.js +++ b/app/soapbox/actions/patron.js @@ -1,11 +1,12 @@ -import api from '../api'; +import axios from 'axios'; export const PATRON_FUNDING_IMPORT = 'PATRON_FUNDING_IMPORT'; export const PATRON_FUNDING_FETCH_FAIL = 'PATRON_FUNDING_FETCH_FAIL'; export function fetchFunding() { return (dispatch, getState) => { - api(getState).get('/patron/v1/funding').then(response => { + const baseUrl = getState().getIn(['soapbox', 'extensions', 'patron', 'baseUrl']); + axios.get(`${baseUrl}/api/patron/v1/instance`).then(response => { dispatch(importFetchedFunding(response.data)); }).catch(error => { dispatch(fetchFundingFail(error)); diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js index 844a1bc4d..6c9a6e7ad 100644 --- a/app/soapbox/components/sidebar_menu.js +++ b/app/soapbox/components/sidebar_menu.js @@ -15,6 +15,7 @@ import { shortNumberFormat } from '../utils/numbers'; import { isStaff } from '../utils/accounts'; import { makeGetAccount } from '../selectors'; import { logOut } from 'soapbox/actions/auth'; +import { Map as ImmutableMap } from 'immutable'; const messages = defineMessages({ followers: { id: 'account.followers', defaultMessage: 'Followers' }, @@ -39,11 +40,12 @@ const messages = defineMessages({ const mapStateToProps = state => { const me = state.get('me'); const getAccount = makeGetAccount(); + const patron = state.getIn(['soapbox', 'extensions', 'patron'], ImmutableMap()); return { account: getAccount(state, me), sidebarOpen: state.get('sidebar').sidebarOpen, - hasPatron: state.getIn(['soapbox', 'extensions', 'patron']), + patronUrl: patron.get('enabled') && patron.get('baseUrl'), isStaff: isStaff(state.getIn(['accounts', me])), }; }; @@ -75,7 +77,7 @@ class SidebarMenu extends ImmutablePureComponent { } render() { - const { sidebarOpen, onClose, intl, account, onClickLogOut, hasPatron, isStaff } = this.props; + const { sidebarOpen, onClose, intl, account, onClickLogOut, patronUrl, isStaff } = this.props; if (!account) return null; const acct = account.get('acct'); @@ -127,11 +129,11 @@ class SidebarMenu extends ImmutablePureComponent { {intl.formatMessage(messages.messages)} - {hasPatron ? - + {patronUrl ? + {intl.formatMessage(messages.donate)} - + : ''} diff --git a/app/soapbox/features/ui/components/funding_panel.js b/app/soapbox/features/ui/components/funding_panel.js index 7650c8cdf..df96512e2 100644 --- a/app/soapbox/features/ui/components/funding_panel.js +++ b/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 = <>${Math.floor(goal/100)} per month— reached!; + ratio_text = <>{moneyFormat(goal)} per month— reached!; } else { - ratio_text = <>${Math.floor(funding.get('amount')/100)} out of ${Math.floor(goal/100)} per month; + ratio_text = <>{moneyFormat(amount)} out of {moneyFormat(goal)} per month; } return ( @@ -41,11 +52,11 @@ class FundingPanel extends ImmutablePureComponent {
{ratio_text}
- +
{goal_text}
- Donate + {patronUrl && Donate} ); @@ -56,6 +67,7 @@ class FundingPanel extends ImmutablePureComponent { const mapStateToProps = state => { return { funding: state.getIn(['patron', 'funding']), + patronUrl: state.getIn(['soapbox', 'extensions', 'patron', 'baseUrl']), }; }; diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js index 6a6a7f6fe..f06bd90eb 100644 --- a/app/soapbox/pages/home_page.js +++ b/app/soapbox/pages/home_page.js @@ -16,7 +16,7 @@ const mapStateToProps = state => { const me = state.get('me'); return { account: state.getIn(['accounts', me]), - hasPatron: state.getIn(['soapbox', 'extensions', 'patron']), + hasPatron: state.getIn(['soapbox', 'extensions', 'patron', 'enabled']), features: getFeatures(state.get('instance')), }; }; diff --git a/static/instance/soapbox.example.json b/static/instance/soapbox.example.json index 9083c8e7f..540fc51ed 100644 --- a/static/instance/soapbox.example.json +++ b/static/instance/soapbox.example.json @@ -13,7 +13,10 @@ }] }, "extensions": { - "patron": false + "patron": { + "enabled": false, + "baseUrl": "https://patron.example.com" + } }, "defaultSettings": { "autoPlayGif": false, diff --git a/webpack/development.js b/webpack/development.js index a16df0fbf..98ce3e718 100644 --- a/webpack/development.js +++ b/webpack/development.js @@ -9,7 +9,6 @@ const { settings, output } = require('./configuration'); const watchOptions = {}; const backendUrl = process.env.BACKEND_URL || 'http://localhost:4000'; -const patronUrl = process.env.PATRON_URL || 'http://localhost:5000'; const secureProxy = !(process.env.PROXY_HTTPS_INSECURE === 'true'); const backendEndpoints = [ @@ -22,7 +21,6 @@ const backendEndpoints = [ '/.well-known/webfinger', '/static', '/emoji', - '/patron', ]; const makeProxyConfig = () => { @@ -33,10 +31,6 @@ const makeProxyConfig = () => { secure: secureProxy, }; }); - proxyConfig['/patron'] = { - target: patronUrl, - secure: secureProxy, - }; return proxyConfig; };