Swap comment servers without going to settings page #7365

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();
 

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);

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<string>) => Promise<any>,
  resetComments: (claimId: string) => void,
  doResolveUris: (uris: Array<string>, returnCachedClaims: boolean) => void,
+ customCommentServers: Array<CommentServerDetails>,
+ 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 (
  <Card
@@ -334,11 +354,15 @@ type ActionButtonsProps = {
  sort: string,
  changeSort: (string) => void,
  setPage: (number) => void,
+ allServers: Array<CommentServerDetails>,
+ 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) => {
  <SortButton {...sortButtonProps} label={__('New')} icon={ICONS.NEW} sortOption={SORT_BY.NEWEST} />
  </span>
  )}
-
- <Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => setPage(0)} />
+ <div className="button_refresh">
+ <Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => setPage(0)} />
+ </div>
+ {allServers.length >= 2 && (
+ <div className="button_selectedServer">
+ <FormField
+ type="select-tiny"
+ onChange={function (x) {
+ const selectedServer = x.target.value;
+ setPage(0);
+ setCommentServer(selectedServer);
+ if (selectedServer === defaultServer.url) {
+ Comments.setServerUrl(undefined);
+ } else {
+ Comments.setServerUrl(selectedServer);
+ }
+ }}
+ value={commentServer}
+ >
+ {allServers.map(function (server) {
+ return (
+ <option key={server.url} value={server.url}>
+ {server.name}
+ </option>
+ );
+ })}
+ </FormField>
+ </div>
+ )}
  </>
  );
 };

ui/scss/component/_card.scss

@@ -274,6 +274,21 @@
  display: flex;
  flex-direction: column;
  overflow: hidden;
+
+ .select--slim {
+ display: flex;
+ margin-left: var(--spacing-s);
+ margin-bottom: var(--spacing-s);
+
+ @media (min-width: $breakpoint-small) {
+ max-width: none;
+
+ select {
+ padding: 0 var(--spacing-xs);
+ padding-right: var(--spacing-l);
+ }
+ }
+ }
 }
 
 .card--enable-overflow {
@@ -318,6 +333,7 @@
  align-self: flex-start;
  .button--alt {
  padding-top: 2px;
+ padding: 0 var(--spacing-s);
  }
  .comment__sort {
  .button--alt {
@@ -642,3 +658,25 @@
  }
  }
 }
+
+.button_selectedServer {
+ display: inline;
+ float: right;
+ select {
+ width: 12rem;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ @media (max-width: $breakpoint-small) {
+ select {
+ width: 8rem;
+ }
+ }
+}
+
+.button_refresh {
+ display: inline;
+ float: right;
+ margin-left: var(--spacing-s);
+}

ui/scss/component/_comments.scss

@@ -37,16 +37,12 @@ $thumbnailWidthSmall: 1rem;
 }
 
 .comment__sort {
- margin-right: var(--spacing-s);
  display: inline-block;
 
  @media (min-width: $breakpoint-small) {
  margin-top: 0;
  display: inline;
  }
- @media (max-width: $breakpoint-small) {
- margin-right: 0;
- }
 }
 
 .comment {

ui/scss/init/_vars.scss

@@ -62,6 +62,9 @@ $spacing-width: 36px;
  --floating-viewer-container-height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
  --option-select-width: 8rem;
 
+ --input-select-server-min-width: 100px;
+ --input-select-server-max-width: 250px;
+
  // Text
  --text-max-width: 660px;
  --text-link-padding: 4px;