Skip to content

Commit

Permalink
add showComments prop to CodeReview
Browse files Browse the repository at this point in the history
  • Loading branch information
@glenwid
glenwid committed Apr 27, 2021
1 parent 950e61a commit 5e5c161
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 11 deletions.
22 changes: 14 additions & 8 deletions src/components/CodeLine.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export interface CodeLineProps {
commentThread: boolean,
comments: CustomComment[]
onReplyCreated: (value: string) => void
showComments: boolean
}

export const CodeLine: React.FC<CodeLineProps> = ({line,
Expand All @@ -69,7 +70,8 @@ export const CodeLine: React.FC<CodeLineProps> = ({line,
severeInfo,
commentThread,
comments,
onReplyCreated
onReplyCreated,
showComments
}) => {

// isShown manages visibility of addButton
Expand All @@ -82,6 +84,9 @@ export const CodeLine: React.FC<CodeLineProps> = ({line,

// returns the right padding value depending on the number of annotations present
const getPaddingLeft = () => {
if(!showComments) {
return 4.3
}
if((commentThread && !(mildInfo || severeInfo))
|| (mildInfo && !(commentThread ||severeInfo))
|| (severeInfo && !(commentThread || mildInfo))) {
Expand Down Expand Up @@ -134,7 +139,8 @@ export const CodeLine: React.FC<CodeLineProps> = ({line,
data-testid={"line" + lineNo}
>
<div className="lineLeft">
{isShown && (

{(isShown && showComments) && (
<>
<Button icon={<PlusOutlined style={{paddingLeft: "0.1em"}}/>}
size="small"
Expand All @@ -145,23 +151,23 @@ export const CodeLine: React.FC<CodeLineProps> = ({line,
</>
)}

{severeInfo && (
{(severeInfo && showComments) && (
<ExclamationCircleTwoTone style={{ paddingLeft: "0.15em",paddingRight: "0.15em"}}
onClick={() => setCollapseState(!collapseState)}
twoToneColor="#F00E3B"
/>

)}

{mildInfo && (
{(mildInfo && showComments) && (
<InfoCircleTwoTone style={{paddingLeft: "0.15em", paddingRight: "0.15em"}}
twoToneColor="#FAC302"
onClick={() => setCollapseState(!collapseState)}
/>

)}

{commentThread && (
{(commentThread && showComments) && (
<MessageTwoTone style={{paddingLeft: "0.15em", paddingRight: "0.15em"}}
onClick={() => setCollapseState(!collapseState)}
/>
Expand All @@ -179,7 +185,7 @@ export const CodeLine: React.FC<CodeLineProps> = ({line,
</LineContent>
</Line>

{(commentThread || (commentThread && mildInfo)) &&(
{((commentThread || (commentThread && mildInfo)) && showComments) &&(
<div data-testid={"commentViewer" + lineNo}>
<CommentViewer comments={comments}
toggle={collapseState}
Expand All @@ -189,7 +195,7 @@ export const CodeLine: React.FC<CodeLineProps> = ({line,
</div>
)}

{(mildInfo && !commentThread) &&(
{((mildInfo && !commentThread) && showComments) &&(
<div data-testid={"commentViewer" + lineNo}>
<CommentViewer comments={comments}
toggle={collapseState}
Expand All @@ -200,7 +206,7 @@ export const CodeLine: React.FC<CodeLineProps> = ({line,
)}


{isEditorShown && (
{(isEditorShown && showComments) && (
<CommentEditor onCancel={() => setIsEditorShown(false)}
line={lineNo}
onSubmit={(value) => {
Expand Down
7 changes: 5 additions & 2 deletions src/components/CodeReview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export interface CodeReviewProps {
onCommentCreated: (comment: CustomComment) => void;
author: string;
showResult: boolean;
showComments: boolean;
}

export const CodeReview: React.FC<CodeReviewProps> = ({
Expand All @@ -21,7 +22,8 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
commentContainer,
onCommentCreated,
author,
showResult
showResult,
showComments
}) => {
const [linesWithComment, setLinesWithComment] = useState<number[]>(new Array<number>());
const [linesWithMildInfo, setLinesWithMildInfo] = useState<number[]>(new Array<number>())
Expand Down Expand Up @@ -112,13 +114,14 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
commentThread={linesWithComment.includes(i)}
comments={getCommentsOfLine(i)}
onReplyCreated={(value) => onCommentCreated(createComment(value, author, i))}
showComments={showComments}
/>
</div>
))}
</Pre>
)}
</Highlight>
{showResult && (
{(showResult && showComments) && (
<div style={{paddingLeft: "0.5em", paddingRight: "0.5em", paddingTop: "1em"}}>
<CommentViewer comments={getResults()}
result={true}
Expand Down
5 changes: 4 additions & 1 deletion src/components/CodeReviewCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export interface CodeReviewCardProps {
onCommentCreated: (comment: CustomComment) => void;
author: string;
showResult: boolean;
showComments: boolean;
}

export const CodeReviewCard: React.FC<CodeReviewCardProps> = ({
Expand All @@ -29,7 +30,8 @@ export const CodeReviewCard: React.FC<CodeReviewCardProps> = ({
language,
commentContainer,
onCommentCreated, author,
showResult
showResult,
showComments
}) => {
return (
<Card style={{ width: width }}
Expand All @@ -44,6 +46,7 @@ export const CodeReviewCard: React.FC<CodeReviewCardProps> = ({
commentContainer={commentContainer}
onCommentCreated={onCommentCreated}
showResult={showResult}
showComments={showComments}
/>
</Card>
)
Expand Down
3 changes: 3 additions & 0 deletions src/stories/CodeReviewCard.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ jsx.args = {
onCommentCreated: handleCommentCreatedJsx,
width: 500,
title: "testReview.jsx",
showComments: true

}

Expand All @@ -159,6 +160,7 @@ css.args = {
onCommentCreated: handleCommentCreatedCss,
width: 600,
title: "layout.css",
showComments: true
}

export const cpp = Template.bind({});
Expand All @@ -171,4 +173,5 @@ cpp.args = {
onCommentCreated: handleCommentCreatedCpp,
width: 500,
title: "matrix.cpp",
showComments: false
}

0 comments on commit 5e5c161

Please sign in to comment.