diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index a29f039f9..8512fa3b1 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -28,7 +28,6 @@ import type { ElementRef } from 'react'; import UriIndicator from 'component/uriIndicator'; import usePersistedState from 'effects/use-persisted-state'; import WalletTipAmountSelector from 'component/walletTipAmountSelector'; - import { getStripeEnvironment } from 'util/stripe'; const stripeEnvironment = getStripeEnvironment(); diff --git a/ui/component/commentsList/index.js b/ui/component/commentsList/index.js index f8755219d..910ced4e3 100644 --- a/ui/component/commentsList/index.js +++ b/ui/component/commentsList/index.js @@ -23,6 +23,9 @@ import { doCommentReset, doCommentList, doCommentById, doCommentReactList } from import { selectActiveChannelClaim } from 'redux/selectors/app'; import { getChannelIdFromClaim } from 'util/claim'; import CommentsList from './view'; +import { makeSelectClientSetting } from 'redux/selectors/settings'; +import * as SETTINGS from 'constants/settings'; +import { doSetClientSetting } from 'redux/actions/settings'; const select = (state, props) => { const { uri } = props; @@ -56,15 +59,19 @@ const select = (state, props) => { myReactsByCommentId: selectMyReacts(state), othersReactsById: selectOthersReacts(state), activeChannelId: activeChannelClaim && activeChannelClaim.claim_id, + customCommentServers: makeSelectClientSetting(SETTINGS.CUSTOM_COMMENTS_SERVERS)(state), + commentServer: makeSelectClientSetting(SETTINGS.CUSTOM_COMMENTS_SERVER_URL)(state), }; }; -const perform = { - fetchTopLevelComments: doCommentList, - fetchComment: doCommentById, - fetchReacts: doCommentReactList, - resetComments: doCommentReset, - doResolveUris, -}; +const perform = (dispatch, ownProps) => ({ + fetchTopLevelComments: (uri, parentId, page, pageSize, sortBy) => + dispatch(doCommentList(uri, parentId, page, pageSize, sortBy)), + fetchComment: (commentId) => dispatch(doCommentById(commentId)), + fetchReacts: (commentIds) => dispatch(doCommentReactList(commentIds)), + resetComments: (claimId) => dispatch(doCommentReset(claimId)), + doResolveUris: (uris, returnCachedClaims) => dispatch(doResolveUris(uris, returnCachedClaims)), + setCommentServer: (url) => dispatch(doSetClientSetting(SETTINGS.CUSTOM_COMMENTS_SERVER_URL, url, true)), +}); export default connect(select, perform)(CommentsList); diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx index 6f9a6eed8..8698c5b2f 100644 --- a/ui/component/commentsList/view.jsx +++ b/ui/component/commentsList/view.jsx @@ -1,6 +1,6 @@ // @flow import { COMMENT_PAGE_SIZE_TOP_LEVEL, SORT_BY } from 'constants/comment'; -import { ENABLE_COMMENT_REACTIONS } from 'config'; +import { ENABLE_COMMENT_REACTIONS, COMMENT_SERVER_API, COMMENT_SERVER_NAME } from 'config'; import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize'; import { getCommentsListTitle } from 'util/comments'; import * as ICONS from 'constants/icons'; @@ -15,6 +15,8 @@ import Empty from 'component/common/empty'; import React, { useEffect } from 'react'; import Spinner from 'component/spinner'; import usePersistedState from 'effects/use-persisted-state'; +import { FormField } from 'component/common/form'; +import Comments from 'comments'; const DEBOUNCE_SCROLL_HANDLER_MS = 200; @@ -52,6 +54,9 @@ type Props = { fetchReacts: (commentIds: Array) => Promise, resetComments: (claimId: string) => void, doResolveUris: (uris: Array, returnCachedClaims: boolean) => void, + customCommentServers: Array, + setCommentServer: (string) => void, + commentServer: string, }; export default function CommentList(props: Props) { @@ -80,11 +85,17 @@ export default function CommentList(props: Props) { fetchReacts, resetComments, doResolveUris, + customCommentServers, + setCommentServer, + commentServer, } = props; const isMobile = useIsMobile(); const isMediumScreen = useIsMediumScreen(); + const defaultServer = { name: COMMENT_SERVER_NAME, url: COMMENT_SERVER_API }; + const allServers = [defaultServer, ...(customCommentServers || [])]; + const spinnerRef = React.useRef(); const DEFAULT_SORT = ENABLE_COMMENT_REACTIONS ? SORT_BY.POPULARITY : SORT_BY.NEWEST; const [sort, setSort] = usePersistedState('comment-sort-by', DEFAULT_SORT); @@ -255,7 +266,16 @@ export default function CommentList(props: Props) { }, [alreadyResolved, doResolveUris, topLevelComments]); const commentProps = { isTopLevel: true, threadDepth: 3, uri, claimIsMine, linkedCommentId }; - const actionButtonsProps = { totalComments, sort, changeSort, setPage }; + const actionButtonsProps = { + totalComments, + sort, + changeSort, + setPage, + allServers, + commentServer, + defaultServer, + setCommentServer, + }; return ( void, setPage: (number) => void, + allServers: Array, + commentServer: string, + setCommentServer: (string) => void, + defaultServer: CommentServerDetails, }; const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => { - const { totalComments, sort, changeSort, setPage } = actionButtonsProps; - + const { totalComments, sort, changeSort, setPage, allServers, commentServer, setCommentServer, defaultServer } = + actionButtonsProps; const sortButtonProps = { activeSort: sort, changeSort }; return ( @@ -355,8 +379,35 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => { )} - -