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
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
ENABLE_COMMENT_REACTIONS=false
# OG
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_URI_2: process.env.PINNED_URI_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}`;

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

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

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

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