btn moved to the correct component and syncs correctly

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

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<CommentServerDetails>,
-  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<any> = React.useRef();
   const buttonRef: ElementRef<any> = React.useRef();
 
@@ -504,29 +494,6 @@ export function CommentCreate(props: Props) {
             type={advancedEditor ? 'markdown' : 'textarea'}
             textAreaMaxLength={FF_MAX_CHARS_IN_COMMENT}
           />
-
-          <FormField
-            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 (
-                <option key={server.url} value={server.url}>
-                  {server.name}
-                </option>
-              );
-            })}
-          </FormField>
         </>
       )}
 

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

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 (
@@ -357,6 +381,33 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
       )}
 
       <Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => setPage(0)} />
+      {allServers.length >= 2 && (
+        <div className="button">
+          <div className="button__content">
+            <FormField
+              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 (
+                  <option key={server.url} value={server.url}>
+                    {server.name}
+                  </option>
+                );
+              })}
+            </FormField>
+          </div>
+        </div>
+      )}
     </>
   );
 };

ui/scss/component/_card.scss

@@ -274,6 +274,23 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+
+  .select--slim {
+    //margin-bottom: var(--spacing-xxs);
+    display: flex;
+    //justify-content: center;
+    margin: 0px 0px 10px 10px;
+
+    @media (min-width: $breakpoint-small) {
+      max-width: none;
+
+      select {
+        //max-height: 1.5rem !important;
+        //padding: 0 var(--spacing-xs);
+        //padding-right: var(--spacing-l);
+      }
+    }
+  }
 }
 
 .card--enable-overflow {