diff --git a/ui/component/commentCreate/index.js b/ui/component/commentCreate/index.js index add51ccae..951a80bb2 100644 --- a/ui/component/commentCreate/index.js +++ b/ui/component/commentCreate/index.js @@ -13,6 +13,8 @@ import { doSendTip } from 'redux/actions/wallet'; import { doToast } from 'redux/actions/notifications'; import { selectActiveChannelClaim } from 'redux/selectors/app'; import { selectSettingsByChannelId } from 'redux/selectors/comments'; +import { makeSelectClientSetting } from 'redux/selectors/settings'; +import * as SETTINGS from 'constants/settings'; const select = (state, props) => { const claim = selectClaimForUri(state, props.uri); @@ -24,6 +26,7 @@ const select = (state, props) => { isFetchingChannels: selectFetchingMyChannels(state), settingsByChannelId: selectSettingsByChannelId(state), supportDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_SUPPORT_TAG)(state), + customCommentServers: makeSelectClientSetting(SETTINGS.CUSTOM_COMMENTS_SERVERS)(state), }; }; diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index 48c823c70..e7e189bb6 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -28,8 +28,9 @@ import type { ElementRef } from 'react'; import UriIndicator from 'component/uriIndicator'; import usePersistedState from 'effects/use-persisted-state'; import WalletTipAmountSelector from 'component/walletTipAmountSelector'; - +import { COMMENT_SERVER_API, COMMENT_SERVER_NAME } from 'config'; import { getStripeEnvironment } from 'util/stripe'; +import Comments from 'comments'; const stripeEnvironment = getStripeEnvironment(); const TAB_FIAT = 'TabFiat'; @@ -63,6 +64,7 @@ type Props = { sendTip: ({}, (any) => void, (any) => void) => void, setQuickReply: (any) => void, toast: (string) => void, + customCommentServers: Array, }; export function CommentCreate(props: Props) { @@ -87,8 +89,11 @@ export function CommentCreate(props: Props) { onDoneReplying, sendTip, setQuickReply, + customCommentServers, } = props; + const defaultServer = { name: COMMENT_SERVER_NAME, url: COMMENT_SERVER_API }; + const allServers = [defaultServer, ...customCommentServers]; const formFieldRef: ElementRef = React.useRef(); const buttonRef: ElementRef = React.useRef(); @@ -97,6 +102,7 @@ export function CommentCreate(props: Props) { location: { pathname }, } = useHistory(); + const [commentServer, setCommentServer] = React.useState(defaultServer.url); const [isSubmitting, setSubmitting] = React.useState(false); const [commentFailure, setCommentFailure] = React.useState(false); const [successTip, setSuccessTip] = React.useState({ txid: undefined, tipAmount: undefined }); @@ -495,15 +501,29 @@ export function CommentCreate(props: Props) { type={advancedEditor ? 'markdown' : 'textarea'} textAreaMaxLength={FF_MAX_CHARS_IN_COMMENT} /> + - {(isReply ? __('Replying as') : __('Comment as')) + ' '} - - - } - type={advancedEditor ? 'markdown' : 'textarea'} - /> + label="server" + type="select-tiny" + onChange={function (x) { + const selectedServer = x.target.value; + setCommentServer(selectedServer); + if (selectedServer === defaultServer.url) { + Comments.setServerUrl(undefined); + } else { + Comments.setServerUrl(selectedServer); + } + }} + value={commentServer} + > + {allServers.map(function (server) { + return ( + + ); + })} + )}