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

put comment reactions behind flag

Browse source
This commit is contained in:
Sean Yesmunt 2020-10-01 14:43:44 -04:00
parent 859814a17b
commit 5f9fda0e7c
5 changed files with 60 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.env.defaults
View file

@ -24,7 +24,7 @@ SIMPLE_SITE=false
SHOW_ADS=true SHOW_ADS=true
YRBL_HAPPY_IMG_URL=https://cdn.lbryplayer.xyz/api/v3/streams/free/yrbl-happy/7aa50a7e5adaf48691935d55e45d697547392929/839d9a YRBL_HAPPY_IMG_URL=https://cdn.lbryplayer.xyz/api/v3/streams/free/yrbl-happy/7aa50a7e5adaf48691935d55e45d697547392929/839d9a
YRBL_SAD_IMG_URL=https://cdn.lbryplayer.xyz/api/v3/streams/free/yrbl-sad/c2d9649633d974e5ffb503925e1f17d951f1bd0f/f262dd YRBL_SAD_IMG_URL=https://cdn.lbryplayer.xyz/api/v3/streams/free/yrbl-sad/c2d9649633d974e5ffb503925e1f17d951f1bd0f/f262dd
ENABLE_COMMENT_REACTIONS=false
# OG # OG
OG_TITLE_SUFFIX=| lbry.tv OG_TITLE_SUFFIX=| lbry.tv

1
config.js
View file

@ -35,6 +35,7 @@ const config = {
PINNED_LABEL_1: process.env.PINNED_LABEL_1, PINNED_LABEL_1: process.env.PINNED_LABEL_1,
PINNED_URI_2: process.env.PINNED_URI_2, PINNED_URI_2: process.env.PINNED_URI_2,
PINNED_LABEL_2: process.env.PINNED_LABEL_2, PINNED_LABEL_2: process.env.PINNED_LABEL_2,
ENABLE_COMMENT_REACTIONS: process.env.ENABLE_COMMENT_REACTIONS === 'true',
}; };
config.URL_LOCAL = `http://localhost:${config.WEB_SERVER_PORT}`; config.URL_LOCAL = `http://localhost:${config.WEB_SERVER_PORT}`;

90
ui/component/commentReactions/view.jsx
View file

@ -1,58 +1,60 @@
// @flow // @flow
// import * as ICONS from 'constants/icons'; import { ENABLE_COMMENT_REACTIONS } from 'config';
// import * as REACTION_TYPES from 'constants/reactions'; import * as ICONS from 'constants/icons';
// import React from 'react'; import * as REACTION_TYPES from 'constants/reactions';
// import classnames from 'classnames'; import React from 'react';
// import Button from 'component/button'; import classnames from 'classnames';
// import usePersistedState from 'effects/use-persisted-state'; import Button from 'component/button';
import usePersistedState from 'effects/use-persisted-state';
type Props = { type Props = {
myReacts: Array<string>, myReacts: Array<string>,
othersReacts: any, othersReacts: any,
react: (string, string) => void, react: (string, string) => void,
commentId: string, commentId: string,
typesReacting: Array<string>,
}; };
export default function CommentReactions(props: Props) { export default function CommentReactions(props: Props) {
// const { myReacts, othersReacts, commentId, react, typesReacting } = props; const { myReacts, othersReacts, commentId, react } = props;
// const [activeChannel] = usePersistedState('comment-channel'); const [activeChannel] = usePersistedState('comment-channel');
// const getCountForReact = type => { const getCountForReact = type => {
// let count = 0; let count = 0;
// if (othersReacts && othersReacts[type]) { if (othersReacts && othersReacts[type]) {
// count += othersReacts[type]; count += othersReacts[type];
// } }
// if (myReacts && myReacts.includes(type)) { if (myReacts && myReacts.includes(type)) {
// count += 1; count += 1;
// } }
// return count; return count;
// }; };
return null; if (!ENABLE_COMMENT_REACTIONS) {
return null;
}
// return ( return (
// <> <>
// <Button <Button
// title={__('Upvote')} title={__('Upvote')}
// icon={ICONS.UPVOTE} icon={ICONS.UPVOTE}
// className={classnames('comment__action', { className={classnames('comment__action', {
// 'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE), 'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
// })} })}
// disabled={!activeChannel || typesReacting.includes(REACTION_TYPES.LIKE)} disabled={!activeChannel}
// onClick={() => react(commentId, REACTION_TYPES.LIKE)} onClick={() => react(commentId, REACTION_TYPES.LIKE)}
// label={getCountForReact(REACTION_TYPES.LIKE)} label={getCountForReact(REACTION_TYPES.LIKE)}
// /> />
// <Button <Button
// title={__('Downvote')} title={__('Downvote')}
// icon={ICONS.DOWNVOTE} icon={ICONS.DOWNVOTE}
// className={classnames('comment__action', { className={classnames('comment__action', {
// 'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE), 'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
// })} })}
// disabled={!activeChannel || typesReacting.includes(REACTION_TYPES.DISLIKE)} disabled={!activeChannel}
// onClick={() => react(commentId, REACTION_TYPES.DISLIKE)} onClick={() => react(commentId, REACTION_TYPES.DISLIKE)}
// label={getCountForReact(REACTION_TYPES.DISLIKE)} label={getCountForReact(REACTION_TYPES.DISLIKE)}
// /> />
// </> </>
// ); );
} }

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

@ -1,4 +1,5 @@
// @flow // @flow
import { ENABLE_COMMENT_REACTIONS } from 'config';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import Comment from 'component/comment'; import Comment from 'component/comment';
@ -6,7 +7,7 @@ import Spinner from 'component/spinner';
import Button from 'component/button'; import Button from 'component/button';
import Card from 'component/common/card'; import Card from 'component/common/card';
import CommentCreate from 'component/commentCreate'; import CommentCreate from 'component/commentCreate';
// import usePersistedState from 'effects/use-persisted-state'; import usePersistedState from 'effects/use-persisted-state';
type Props = { type Props = {
comments: Array<any>, comments: Array<any>,
@ -23,7 +24,7 @@ type Props = {
function CommentList(props: Props) { function CommentList(props: Props) {
const { const {
fetchComments, fetchComments,
// fetchReacts, fetchReacts,
uri, uri,
comments, comments,
claimIsMine, claimIsMine,
@ -32,10 +33,11 @@ function CommentList(props: Props) {
linkedComment, linkedComment,
totalComments, totalComments,
} = props; } = props;
const commentRef = React.useRef();
const linkedCommentId = linkedComment && linkedComment.comment_id; const [activeChannel] = usePersistedState('comment-channel', '');
const [start] = React.useState(0); const [start] = React.useState(0);
const [end, setEnd] = React.useState(9); const [end, setEnd] = React.useState(9);
const linkedCommentId = linkedComment && linkedComment.comment_id;
const hasNoComments = totalComments === 0; const hasNoComments = totalComments === 0;
const moreBelow = totalComments - end > 0; const moreBelow = totalComments - end > 0;
@ -57,18 +59,15 @@ function CommentList(props: Props) {
} }
}; };
// const [activeChannel] = usePersistedState('comment-channel', '');
const commentRef = React.useRef();
useEffect(() => { useEffect(() => {
fetchComments(uri); fetchComments(uri);
}, [fetchComments, uri]); }, [fetchComments, uri]);
// useEffect(() => { useEffect(() => {
// if (totalComments) { if (totalComments && ENABLE_COMMENT_REACTIONS) {
// fetchReacts(uri); fetchReacts(uri);
// } }
// }, [fetchReacts, uri, totalComments, activeChannel]); }, [fetchReacts, uri, totalComments, activeChannel]);
useEffect(() => { useEffect(() => {
if (linkedCommentId && commentRef && commentRef.current) { if (linkedCommentId && commentRef && commentRef.current) {

2
ui/scss/component/_comments.scss
View file

@ -199,7 +199,7 @@ $thumbnailWidthSmall: 1.5rem;
margin-top: var(--spacing-s); margin-top: var(--spacing-s);
> *:not(:last-child) { > *:not(:last-child) {
margin-right: var(--spacing-s); margin-right: var(--spacing-m);
} }
.icon { .icon {