From 250e9eeebc3131306d5a5ec9a15cdd2a03e8ed0f Mon Sep 17 00:00:00 2001 From: ByronEricPerez Date: Fri, 26 Aug 2022 15:50:13 -0300 Subject: [PATCH] btn moved to the correct component and syncs correctly --- ui/component/commentCreate/index.js | 6 --- ui/component/commentCreate/view.jsx | 33 ---------------- ui/component/commentsList/index.js | 10 ++++- ui/component/commentsList/view.jsx | 59 +++++++++++++++++++++++++++-- ui/scss/component/_card.scss | 17 +++++++++ 5 files changed, 80 insertions(+), 45 deletions(-) diff --git a/ui/component/commentCreate/index.js b/ui/component/commentCreate/index.js index 0536f0172..add51ccae 100644 --- a/ui/component/commentCreate/index.js +++ b/ui/component/commentCreate/index.js @@ -13,9 +13,6 @@ 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'; -import { doSetClientSetting } from 'redux/actions/settings'; const select = (state, props) => { const claim = selectClaimForUri(state, props.uri); @@ -27,8 +24,6 @@ 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), - commentServer: makeSelectClientSetting(SETTINGS.CUSTOM_COMMENTS_SERVER_URL)(state), }; }; @@ -39,7 +34,6 @@ const perform = (dispatch, ownProps) => ({ doToast: (options) => dispatch(doToast(options)), fetchComment: (commentId) => dispatch(doCommentById(commentId, false)), sendTip: (params, callback, errorCallback) => dispatch(doSendTip(params, false, callback, errorCallback, false)), - setCommentServer: (url) => dispatch(doSetClientSetting(SETTINGS.CUSTOM_COMMENTS_SERVER_URL, url, true)), }); export default connect(select, perform)(CommentCreate); diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index 0985a0ff8..8512fa3b1 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -28,9 +28,7 @@ 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'; @@ -64,9 +62,6 @@ type Props = { sendTip: ({}, (any) => void, (any) => void) => void, setQuickReply: (any) => void, toast: (string) => void, - customCommentServers: Array, - setCommentServer: (string) => void, - commentServer: string, }; export function CommentCreate(props: Props) { @@ -91,13 +86,8 @@ export function CommentCreate(props: Props) { onDoneReplying, sendTip, setQuickReply, - customCommentServers, - setCommentServer, - commentServer, } = 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(); @@ -504,29 +494,6 @@ export function CommentCreate(props: Props) { type={advancedEditor ? 'markdown' : 'textarea'} textAreaMaxLength={FF_MAX_CHARS_IN_COMMENT} /> - - - {allServers.map(function (server) { - return ( - - ); - })} - )} diff --git a/ui/component/commentsList/index.js b/ui/component/commentsList/index.js index f8755219d..8c74d8fe3 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,18 @@ 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 = { +const perform = (dispatch, ownProps) => ({ fetchTopLevelComments: doCommentList, fetchComment: doCommentById, fetchReacts: doCommentReactList, resetComments: doCommentReset, doResolveUris, -}; + 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..3f8393483 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 ( @@ -357,6 +381,33 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => { )}