LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Comment server swap #7706

Closed
jessopb wants to merge 9 commits from Comment-server-swap into master
pull from: Comment-server-swap
merge into: LBRYCommunity:master
Conversation 0 Commits 9 Files changed 6 +80 -45
5 changed files with 80 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 250e9eeebc - Show all commits

6
ui/component/commentCreate/index.js
View file

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

33
ui/component/commentCreate/view.jsx
View file

@ -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>
</>
)}

10
ui/component/commentsList/index.js
View file

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

59
ui/component/commentsList/view.jsx
View file

@ -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>
)}
</>
);
};

17
ui/scss/component/_card.scss
View file

@ -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 {