From 1c9c0a4cbfd3e61ea4096a4313de2c4a1236845c Mon Sep 17 00:00:00 2001 From: ByronEricPerez Date: Thu, 21 Jul 2022 20:01:40 -0300 Subject: [PATCH 1/9] work in progress --- ui/component/commentCreate/view.jsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index a29f039f9..48c823c70 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -495,6 +495,15 @@ export function CommentCreate(props: Props) { type={advancedEditor ? 'markdown' : 'textarea'} textAreaMaxLength={FF_MAX_CHARS_IN_COMMENT} /> + + {(isReply ? __('Replying as') : __('Comment as')) + ' '} + + + } + type={advancedEditor ? 'markdown' : 'textarea'} + /> )} -- 2.45.2 From ef27cb5a9bbdd4b6f7ab02524508ec719b0a5187 Mon Sep 17 00:00:00 2001 From: ByronEricPerez Date: Tue, 9 Aug 2022 14:33:36 -0300 Subject: [PATCH 2/9] added input to select custom and default server when creating comment --- ui/component/commentCreate/index.js | 3 +++ ui/component/commentCreate/view.jsx | 38 ++++++++++++++++++++++------- 2 files changed, 32 insertions(+), 9 deletions(-) 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 ( + + ); + })} + )} -- 2.45.2 From fd2d817ba798b4f90d1b405bee726e2c442fd050 Mon Sep 17 00:00:00 2001 From: ByronEricPerez Date: Mon, 15 Aug 2022 12:27:11 -0300 Subject: [PATCH 3/9] the problem of synchronizing the two commentServer of the application was solved --- ui/component/commentCreate/index.js | 3 +++ ui/component/commentCreate/view.jsx | 5 ++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/ui/component/commentCreate/index.js b/ui/component/commentCreate/index.js index 951a80bb2..0536f0172 100644 --- a/ui/component/commentCreate/index.js +++ b/ui/component/commentCreate/index.js @@ -15,6 +15,7 @@ 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,6 +28,7 @@ const select = (state, props) => { 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), }; }; @@ -37,6 +39,7 @@ 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 e7e189bb6..0985a0ff8 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -65,6 +65,8 @@ type Props = { setQuickReply: (any) => void, toast: (string) => void, customCommentServers: Array, + setCommentServer: (string) => void, + commentServer: string, }; export function CommentCreate(props: Props) { @@ -90,6 +92,8 @@ export function CommentCreate(props: Props) { sendTip, setQuickReply, customCommentServers, + setCommentServer, + commentServer, } = props; const defaultServer = { name: COMMENT_SERVER_NAME, url: COMMENT_SERVER_API }; @@ -102,7 +106,6 @@ 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 }); -- 2.45.2 From 250e9eeebc3131306d5a5ec9a15cdd2a03e8ed0f Mon Sep 17 00:00:00 2001 From: ByronEricPerez Date: Fri, 26 Aug 2022 15:50:13 -0300 Subject: [PATCH 4/9] 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) => { )}