diff --git a/src/components/CodeLine.tsx b/src/components/CodeLine.tsx index 649c940..13b4298 100644 --- a/src/components/CodeLine.tsx +++ b/src/components/CodeLine.tsx @@ -75,9 +75,12 @@ export const CodeLine: React.FC = ({line, // isShown manages visibility of addButton const [isShown, setIsShown] = useState(false); const lineNoRef = React.createRef(); + + // isEditorShown manages visibility of CommentEditor const [isEditorShown, setIsEditorShown] = useState(false); const [collapseState, setCollapseState] = useState(false) + // returns the right padding value depending on the number of annotations present const getPaddingLeft = () => { if((commentThread && !(mildInfo || severeInfo)) || (mildInfo && !(commentThread ||severeInfo)) @@ -95,6 +98,7 @@ export const CodeLine: React.FC = ({line, return 4.3; } + // show addButton and adjust padding accordingly const handleMouseEnter = () => { if(!commentThread && !mildInfo) { lineNoRef.current!.style.paddingLeft = (getPaddingLeft() - 1.5) + getPaddingLeftOffset() + "em"; @@ -102,6 +106,7 @@ export const CodeLine: React.FC = ({line, } } + // 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 = ({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 index 37bacad..e821529 100644 --- a/src/components/CodeReview.tsx +++ b/src/components/CodeReview.tsx @@ -14,7 +14,6 @@ export interface CodeReviewProps { author: string; } - export const CodeReview: React.FC = ({ code, language, @@ -27,10 +26,11 @@ export const CodeReview: React.FC = ({ // "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,7 +44,9 @@ export const CodeReview: React.FC = ({ const createComment = (content: string, author: string, line?: number) => { let newComment: CustomComment + if(line) { + // standard comment newComment = { line: line, content: content, @@ -52,6 +54,7 @@ export const CodeReview: React.FC = ({ type: "comment" } } else { + // result comment newComment = { content: content, author : author, @@ -61,12 +64,14 @@ export const CodeReview: React.FC = ({ 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(); commentContainer?.forEach(element => { @@ -77,6 +82,7 @@ export const CodeReview: React.FC = ({ return commentsOfLine; } + // returns all results const getResults = () => { const results = new Array(); commentContainer?.forEach(element => { diff --git a/src/components/CommentViewer.tsx b/src/components/CommentViewer.tsx index a75b081..76c2468 100644 --- a/src/components/CommentViewer.tsx +++ b/src/components/CommentViewer.tsx @@ -43,8 +43,9 @@ export const CommentViewer: React.FC = ({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 = ({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 = ({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 = ({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 = ({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")) {