add comments

codefreak · Apr 26, 2021 · 5cae486 · 5cae486
1 parent 513c177
commit 5cae486
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/components/CodeLine.tsx b/src/components/CodeLine.tsx
@@ -75,9 +75,12 @@ export const CodeLine: React.FC<CodeLineProps> = ({line,
     // isShown manages visibility of addButton
     const [isShown, setIsShown] = useState(false);
     const lineNoRef = React.createRef<HTMLSpanElement>();
+
+    // isEditorShown manages visibility of CommentEditor
     const [isEditorShown, setIsEditorShown] = useState(false);
     const [collapseState, setCollapseState] = useState<boolean>(false)
 
+    // returns the right padding value depending on the number of annotations present
     const getPaddingLeft = () => {
         if((commentThread && !(mildInfo || severeInfo))
             || (mildInfo && !(commentThread ||severeInfo))
@@ -95,13 +98,15 @@ export const CodeLine: React.FC<CodeLineProps> = ({line,
         return 4.3;
     }
 
+    // show addButton and adjust padding accordingly
     const handleMouseEnter = () => {
         if(!commentThread && !mildInfo) {
             lineNoRef.current!.style.paddingLeft = (getPaddingLeft() - 1.5) + getPaddingLeftOffset() + "em";
             setIsShown(true);
         }
     }
 
+    // remove addButton and adjust padding accordingly
     const handleMouseLeave = () => {
         lineNoRef.current!.style.paddingLeft = getPaddingLeft() + getPaddingLeftOffset() + "em";
         setIsShown(false)
@@ -111,6 +116,7 @@ export const CodeLine: React.FC<CodeLineProps> = ({line,
         setIsEditorShown(true);
     }
 
+    // returns a higher padding offset for higher than double digit lines
     const getPaddingLeftOffset = () => {
         if(lineNo < 9) {
             return 0.55

diff --git a/src/components/CodeReview.tsx b/src/components/CodeReview.tsx
@@ -14,7 +14,6 @@ export interface CodeReviewProps {
     author: string;
 }
 
-
 export const CodeReview: React.FC<CodeReviewProps> = ({
                                                           code,
                                                           language,
@@ -27,10 +26,11 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
 
     // "constructor"
     useEffect(() => {
+        // gather intel about present comments and infos
         if(commentContainer) {
             commentContainer.forEach(comment => {
                 if(comment.type === "comment") {
-                    addCommentLine(comment.line!);
+                    addLineWithComment(comment.line!);
                 }
 
                 if(comment.type === "mildInfo") {
@@ -44,14 +44,17 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
 
     const createComment = (content: string, author: string, line?: number) => {
         let newComment: CustomComment
+
         if(line) {
+            // standard comment
             newComment = {
                 line: line,
                 content: content,
                 author : author,
                 type: "comment"
             }
         } else {
+            // result comment
             newComment = {
                 content: content,
                 author : author,
@@ -61,12 +64,14 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
         return newComment;
     }
 
-    const addCommentLine = (line: number) => {
+    // adds a line to the linesWithComment array
+    const addLineWithComment = (line: number) => {
         if(!linesWithComment.includes(line)) {
             setLinesWithComment([...linesWithComment, line]);
         }
     }
 
+    // returns comments of a given line
     const getCommentsOfLine = (line: number) => {
         const commentsOfLine = new Array<CustomComment>();
         commentContainer?.forEach(element => {
@@ -77,6 +82,7 @@ export const CodeReview: React.FC<CodeReviewProps> = ({
         return commentsOfLine;
     }
 
+    // returns all results
     const getResults = () => {
         const results = new Array<CustomComment>();
         commentContainer?.forEach(element => {

diff --git a/src/components/CommentViewer.tsx b/src/components/CommentViewer.tsx
@@ -43,8 +43,9 @@ export const CommentViewer: React.FC<CommentViewerProps> = ({comments,
             toggleCollapse()
         }
         setOldToggleState(toggle)
-    }, [toggle, oldToggleState, activeKey, toggleCollapse])
+    }, [toggle, oldToggleState, activeKey])
 
+    // returns amount of infos present in the component
     const countInfos = () => {
         let count = 0;
         comments.forEach(element => {
@@ -55,6 +56,7 @@ export const CommentViewer: React.FC<CommentViewerProps> = ({comments,
         return count
     }
 
+    // returns amount of comments present in the component
     const countComments = () => {
         let count = 0;
         comments.forEach(element => {
@@ -81,6 +83,7 @@ export const CommentViewer: React.FC<CommentViewerProps> = ({comments,
         }
     }
 
+    // returns a custom header depending on count and kind of comments present
     const getHeader = () => {
         if(result) {
             return "Result"
@@ -103,6 +106,7 @@ export const CommentViewer: React.FC<CommentViewerProps> = ({comments,
         }
     }
 
+    // returns a custom type for the replyType prop of ReplyEditor
     const getType = () => {
         if(!replyType) {
             let noComment = true;
@@ -120,6 +124,7 @@ export const CommentViewer: React.FC<CommentViewerProps> = ({comments,
         return replyType
     }
 
+    // returns icons for extra context in the result header
     const getExtra = () => {
         if(comments.find(element => element.type === "severeInfo")) {
             if(comments.find(element => element.type === "comment")) {