Skip to content
Permalink

Comparing changes

This is a direct comparison between two commits made in this repository or its related repositories. View the default comparison for this range or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: codefreak/react-code-review-editor
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 29d9c33f80d6c8e02aa54db4b25e85163d3d52e4
Choose a base ref
..
head repository: codefreak/react-code-review-editor
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 6e8d412e607d683e613f9663bb2ef07b96839b66
Choose a head ref
11 changes: 7 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
# react-code-review-editor
The react-code-review-editor is a React component aiming to provide functionality for code review purposes.
The react-code-review-editor is a React component providing an environment for educational code review purposes.
It supports a variety of languages.

![review-editor-screenshot](./review-editor-screenshot.png)
![review-editor-screenshot](./screenshot.PNG)

##Features
This project was developed as part of a thesis at FH Kiel to be integrated into the CodeFREAK project. The development
process included a usability test with students and teachers at said institution to deliver a component with good usability.

## Features
- [x] display syntax highlighted code
- [x] create and display comments inside the code
- [x] create and display results
- [x] different comment types with their own annotation symbols for better usability
- [x] keyboard shortcuts

##Development
## Development
For developing and getting to know the components through storybook examples:
```shell script
git clone https://github.com/codefreak/react-code-review-editor.git
Binary file removed review-editor-screenshot.png
Binary file not shown.
Binary file added screenshot.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 9 additions & 8 deletions src/components/CodeLine.tsx
Original file line number Diff line number Diff line change
@@ -94,21 +94,21 @@ export const CodeLine: React.FC<CodeLineProps> = ({
// returns the right padding value depending on the number of annotations present
const getPaddingLeft = useCallback(() => {
if (!showComments) {
return 2.8
return 2.9
}
if ((commentThread && !mildInfo) || (mildInfo && !commentThread)) {
return 1.5
return 1.6
}
if (commentThread && mildInfo) {
return 0.2
}
return 2.8
return 2.9
}, [commentThread, mildInfo, showComments])

// returns a higher padding offset for higher than double digit lines
const getPaddingOffsetLeft = useCallback(() => {
if (lineNo < 9) {
return 0.55
return 0.6
} else {
return 0
}
@@ -140,7 +140,7 @@ export const CodeLine: React.FC<CodeLineProps> = ({
!isEditorShown
) {
lineNoRef.current.style.paddingLeft =
getPaddingLeft() - 1.3 + getPaddingOffsetLeft() + 'em'
getPaddingLeft() - 1.35 + getPaddingOffsetLeft() + 'em'
setIsAddButtonShown(true)
}
}
@@ -176,11 +176,12 @@ export const CodeLine: React.FC<CodeLineProps> = ({
>
<div
style={{
display: 'table-row'
display: 'table-row',
zIndex: 0
}}
>
{isAddButtonShown && showComments && (
<>
<div style={{ position: 'relative', zIndex: 10 }}>
<Button
icon={<PlusOutlined style={{ paddingLeft: '0.1em' }} />}
size="small"
@@ -192,7 +193,7 @@ export const CodeLine: React.FC<CodeLineProps> = ({
style={{ width: '1.5em', height: '1.5em' }}
data-testid="addButton"
/>
</>
</div>
)}

<div style={annotationStyle}>
2 changes: 1 addition & 1 deletion src/components/CodeReviewCard.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.ant-card-small > .ant-card-body {
padding: 0 1em 0 0.5em
padding: 0 1em 0 0.5em;
}
18 changes: 16 additions & 2 deletions src/components/CommentViewer.css
Original file line number Diff line number Diff line change
@@ -12,6 +12,21 @@
border-top: 1px solid #d9d9d9;
}

.ant-collapse > .ant-collapse-item > .ant-collapse-header::before {
display: none;
content: '';
}

.ant-collapse > .ant-collapse-item > .ant-collapse-header::after {
display: none;
content: '';
}

.ant-collapse > .ant-collapse-item > .ant-collapse-header::after {
display: none;
clear: both;
}

pre {
margin-bottom: 0;
}
@@ -23,7 +38,6 @@ pre {

.ant-collapse-content > .ant-collapse-content-box {
padding: 0;

}

.ant-collapse > .ant-collapse-item > .ant-collapse-header {
@@ -51,7 +65,7 @@ pre {

.commentViewer {
padding-top: 0;
padding-left: 4.65em;
padding-left: 4.7em;
}

.ant-comment-content-author {
2 changes: 1 addition & 1 deletion src/components/ShortcutMenu.tsx
Original file line number Diff line number Diff line change
@@ -35,7 +35,7 @@ const ShortcutMenu: React.FC<ShortcutMenuProps> = ({
display: 'flex',
flexDirection: 'row-reverse',
borderLeft: '1px solid #d9d9d9',
marginLeft: '4.65em'
marginLeft: '4.7em'
}}
data-testid="shortcuts"
>
4 changes: 2 additions & 2 deletions src/components/styles.tsx
Original file line number Diff line number Diff line change
@@ -7,8 +7,8 @@ export const Pre = styled.pre`
overflow: hidden;
& .token-line {
line-height: 1.5em;
height: 1.5em;
line-height: 1.6em;
height: 1.6em;
}
`

4 changes: 2 additions & 2 deletions src/stories/CodeReviewCollapse.stories.tsx
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import {
import { Story, Meta } from '@storybook/react/types-6-0'
import { CustomComment } from '../types/types'
import { forceReRender } from '@storybook/react'
import moment from "moment";
import moment from 'moment'

export default {
component: CodeReviewCollapsable,
@@ -111,7 +111,7 @@ jsx.args = {
onCommentEdited: (oldComment, newComment) =>
handleCommentEdited(oldComment, newComment, jsx),
user: 'Storybook Tester',
role: "student"
role: 'student'
},
width: 500,
title: 'testReview.jsx'
47 changes: 23 additions & 24 deletions src/tests/CodeReview.test.tsx
Original file line number Diff line number Diff line change
@@ -748,25 +748,24 @@ test('possible to reply to comments', () => {
}

render(
<CodeReview
code={jsxCode}
language="jsx"
commentContainer={commentContainer}
onCommentCreated={addComment}
onCommentDeleted={() => nothing}
onCommentEdited={() => nothing}
role="teacher"
user="Tester"
showResult
/>
<CodeReview
code={jsxCode}
language="jsx"
commentContainer={commentContainer}
onCommentCreated={addComment}
onCommentDeleted={() => nothing}
onCommentEdited={() => nothing}
role="teacher"
user="Tester"
showResult
/>
)

expect(screen.getByText('1 comment')).toBeInTheDocument()
fireEvent.click(screen.getByText('1 comment'))
expect(screen.getByTestId('textArea')).toBeInTheDocument()
expect(screen.getByPlaceholderText('Add Reply ...')).toBeInTheDocument()


fireEvent.focus(screen.getByTestId('textArea'))
// change input of text area and add as comment
fireEvent.change(screen.getByTestId('textArea'), {
@@ -777,20 +776,20 @@ test('possible to reply to comments', () => {
cleanup()

render(
<CodeReview
code={jsxCode}
language="jsx"
commentContainer={commentContainer}
onCommentCreated={addComment}
onCommentDeleted={() => nothing}
onCommentEdited={() => nothing}
role="teacher"
user="Tester"
showResult
/>
<CodeReview
code={jsxCode}
language="jsx"
commentContainer={commentContainer}
onCommentCreated={addComment}
onCommentDeleted={() => nothing}
onCommentEdited={() => nothing}
role="teacher"
user="Tester"
showResult
/>
)

expect(screen.getByText('2 comments')).toBeInTheDocument()
fireEvent.click(screen.getByText('2 comments'))
expect(screen.getByText('an input')).toBeInTheDocument()
})
})