add showResult prop to CodeReview

codefreak · Apr 27, 2021 · 950e61a · 950e61a
1 parent 5cae486
commit 950e61a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 41 deletions.
diff --git a/src/components/CodeReview.tsx b/src/components/CodeReview.tsx
@@ -12,14 +12,16 @@ export interface CodeReviewProps {
     commentContainer?: CustomComment[];
     onCommentCreated: (comment: CustomComment) => void;
     author: string;
+    showResult: boolean;
 }
 
 export const CodeReview: React.FC<CodeReviewProps> = ({
                                                           code,
                                                           language,
                                                           commentContainer,
                                                           onCommentCreated,
-                                                          author
+                                                          author,
+                                                          showResult
 }) => {
     const [linesWithComment, setLinesWithComment] = useState<number[]>(new Array<number>());
     const [linesWithMildInfo, setLinesWithMildInfo] = useState<number[]>(new Array<number>())
@@ -116,13 +118,15 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
                     </Pre>
                 )}
             </Highlight>
-            <div style={{paddingLeft: "0.5em", paddingRight: "0.5em", paddingTop: "1em"}}>
-                <CommentViewer comments={getResults()}
-                               result={true}
-                               onReplyCreated={(value) => onCommentCreated(createComment(value, author))}
-                               toggle={true}
-                />
-            </div>
+            {showResult && (
+                <div style={{paddingLeft: "0.5em", paddingRight: "0.5em", paddingTop: "1em"}}>
+                    <CommentViewer comments={getResults()}
+                                   result={true}
+                                   onReplyCreated={(value) => onCommentCreated(createComment(value, author))}
+                                   toggle={true}
+                    />
+                </div>
+            )}
         </div>
 
     )

diff --git a/src/components/CodeReviewCard.tsx b/src/components/CodeReviewCard.tsx
@@ -3,6 +3,8 @@ import {Card} from "antd";
 import "antd/dist/antd.css";
 import "./CodeReview.css";
 import CodeReview, {CodeReviewProps} from "./CodeReview";
+import {Language} from "prism-react-renderer";
+import {CustomComment} from "./CommentViewer";
 
 const cardBodyStyle = {
     paddingTop: "0.5em",
@@ -12,13 +14,22 @@ const cardBodyStyle = {
 export interface CodeReviewCardProps {
     width: number,
     title: string,
-    getCodeReviewProps: CodeReviewProps
+    code: string;
+    language: Language;
+    commentContainer?: CustomComment[];
+    onCommentCreated: (comment: CustomComment) => void;
+    author: string;
+    showResult: boolean;
 }
 
 export const CodeReviewCard: React.FC<CodeReviewCardProps> = ({
-                                                          getCodeReviewProps,
-                                                          width ,
-                                                          title,
+                                                                  width ,
+                                                                  title,
+                                                                  code,
+                                                                  language,
+                                                                  commentContainer,
+                                                                  onCommentCreated, author,
+                                                                  showResult
 }) => {
     return (
             <Card style={{ width: width }}
@@ -27,11 +38,12 @@ export const CodeReviewCard: React.FC<CodeReviewCardProps> = ({
                   bordered={true}
                   size={"small"}
             >
-                <CodeReview code={getCodeReviewProps.code}
-                            author={getCodeReviewProps.author}
-                            language={getCodeReviewProps.language}
-                            commentContainer={getCodeReviewProps.commentContainer}
-                            onCommentCreated={getCodeReviewProps.onCommentCreated}
+                <CodeReview code={code}
+                            author={author}
+                            language={language}
+                            commentContainer={commentContainer}
+                            onCommentCreated={onCommentCreated}
+                            showResult={showResult}
                 />
             </Card>
         )

diff --git a/src/stories/CodeReviewCard.stories.tsx b/src/stories/CodeReviewCard.stories.tsx
@@ -122,56 +122,53 @@ const customComment4: CustomComment = {
 let customCommentContainer = [customComment1, customComment2, customComment3, customComment4];
 
 const handleCommentCreatedJsx = (comment: CustomComment) => {
-    jsx.args!.getCodeReviewProps!.commentContainer = [...jsx.args!.getCodeReviewProps!.commentContainer!, comment]
+    jsx.args!.commentContainer = [...jsx.args!.commentContainer!, comment]
     forceReRender();
 }
 
 const handleCommentCreatedCss = (comment: CustomComment) => {
-    css.args!.getCodeReviewProps!.commentContainer = [...css.args!.getCodeReviewProps!.commentContainer!, comment]
+    css.args!.commentContainer = [...css.args!.commentContainer!, comment]
     forceReRender();
 }
 
 const handleCommentCreatedCpp = (comment: CustomComment) => {
-    cpp.args!.getCodeReviewProps!.commentContainer = [...cpp.args!.getCodeReviewProps!.commentContainer!, comment]
+    cpp.args!.commentContainer = [...cpp.args!.commentContainer!, comment]
     forceReRender();
 }
 
 export let jsx = Template.bind({});
 jsx.args = {
-    getCodeReviewProps: {
-        author: "Storybook Tester",
-        code: jsxCode,
-        language: "jsx",
-        commentContainer:  customCommentContainer,
-        onCommentCreated: handleCommentCreatedJsx
-    },
+    author: "Storybook Tester",
+    code: jsxCode,
+    language: "jsx",
+    showResult: true,
+    commentContainer:  customCommentContainer,
+    onCommentCreated: handleCommentCreatedJsx,
     width: 500,
     title: "testReview.jsx",
 
 }
 
 export const css = Template.bind({});
 css.args = {
-    getCodeReviewProps: {
-        author: "Storybook Tester",
-        code: cssCode,
-        language: "css",
-        commentContainer:  customCommentContainer,
-        onCommentCreated: handleCommentCreatedCss
-    },
+    author: "Storybook Tester",
+    code: cssCode,
+    language: "css",
+    showResult: true,
+    commentContainer:  customCommentContainer,
+    onCommentCreated: handleCommentCreatedCss,
     width: 600,
     title: "layout.css",
 }
 
 export const cpp = Template.bind({});
 cpp.args = {
-    getCodeReviewProps: {
-        author: "Storybook Tester",
-        code: cppCode,
-        language: "cpp",
-        commentContainer:  customCommentContainer,
-        onCommentCreated: handleCommentCreatedCpp
-    },
+    author: "Storybook Tester",
+    code: cppCode,
+    language: "cpp",
+    showResult: false,
+    commentContainer:  customCommentContainer,
+    onCommentCreated: handleCommentCreatedCpp,
     width: 500,
     title: "matrix.cpp",
 }