From d7c6b5039c253b3c16a3595473708f164f33b924 Mon Sep 17 00:00:00 2001 From: ByronEricPerez Date: Thu, 21 Jul 2022 20:01:40 -0300 Subject: [PATCH] Swap comment servers without going to settings page work in progress added input to select custom and default server when creating comment the problem of synchronizing the two commentServer of the application was solved btn moved to the correct component and syncs correctly Fixed why it didn't show comments Aligned input size and location of the refresh btn changed, and added maximum and minimum width for the comment server margin removed change using overflow refresh --- ui/component/commentCreate/view.jsx | 1 - ui/component/commentsList/index.js | 21 ++++++---- ui/component/commentsList/view.jsx | 63 ++++++++++++++++++++++++++--- ui/scss/component/_card.scss | 38 +++++++++++++++++ ui/scss/component/_comments.scss | 4 -- ui/scss/init/_vars.scss | 3 ++ 6 files changed, 112 insertions(+), 18 deletions(-) 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) => { )} - -