1
- import { findTimeAgo } from ' ./helpers' ;
1
+ import { findTimeAgo } from " ./helpers" ;
2
2
3
3
/* eslint-disable no-underscore-dangle */
4
4
function createCommentBox ( noteDetail ) {
5
- const { userId , createdAt } = noteDetail ;
6
- const { userName } = userId ;
5
+ const { userDetails , createdAt } = noteDetail ;
6
+ const { userName } = userDetails ;
7
7
const createdTimeAgo = findTimeAgo ( { date : new Date ( createdAt ) } ) ;
8
8
9
- const wrapper = document . createElement ( ' div' ) ;
9
+ const wrapper = document . createElement ( " div" ) ;
10
10
wrapper . classList = [
11
- ' timeline-comment-group js-minimizable-comment-group js-targetable-comment TimelineItem-body my-0 ' ,
11
+ " timeline-comment-group js-minimizable-comment-group js-targetable-comment TimelineItem-body my-0 "
12
12
] ;
13
13
14
- const innerWrapper1 = document . createElement ( 'div' ) ;
15
- innerWrapper1 . classList = [ 'ml-n3 minimized-comment position-relative d-none ' ] ;
14
+ const innerWrapper1 = document . createElement ( "div" ) ;
15
+ innerWrapper1 . classList = [
16
+ "ml-n3 minimized-comment position-relative d-none "
17
+ ] ;
16
18
17
- const innerWrapper2 = document . createElement ( ' div' ) ;
19
+ const innerWrapper2 = document . createElement ( " div" ) ;
18
20
innerWrapper2 . classList = [
19
- ' ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container editable-comment js-comment timeline-comment--caret reorderable-task-lists current-user' ,
21
+ " ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container editable-comment js-comment timeline-comment--caret reorderable-task-lists current-user"
20
22
] ;
21
23
22
- const timelineWrapper = document . createElement ( ' div' ) ;
23
- timelineWrapper . classList = [ ' timeline-comment-header clearfix' ] ;
24
+ const timelineWrapper = document . createElement ( " div" ) ;
25
+ timelineWrapper . classList = [ " timeline-comment-header clearfix" ] ;
24
26
25
- const timeLineAction = document . createElement ( 'div' ) ;
26
- timeLineAction . classList = [ 'timeline-comment-actions js-timeline-comment-actions' ] ;
27
+ const timeLineAction = document . createElement ( "div" ) ;
28
+ timeLineAction . classList = [
29
+ "timeline-comment-actions js-timeline-comment-actions"
30
+ ] ;
27
31
28
- const privateNoteLabel = document . createElement ( ' span' ) ;
32
+ const privateNoteLabel = document . createElement ( " span" ) ;
29
33
privateNoteLabel . classList = [
30
- ' timeline-comment-label tooltipped tooltipped-multiline tooltipped-s pvt-note-label' ,
34
+ " timeline-comment-label tooltipped tooltipped-multiline tooltipped-s pvt-note-label"
31
35
] ;
32
- privateNoteLabel . setAttribute ( ' aria-label' , ' This is a private note' ) ;
33
- privateNoteLabel . innerText = ' Private note' ;
36
+ privateNoteLabel . setAttribute ( " aria-label" , " This is a private note" ) ;
37
+ privateNoteLabel . innerText = " Private note" ;
34
38
timeLineAction . append ( privateNoteLabel ) ;
35
- const timeLineActionDetails = document . createElement ( ' details' ) ;
39
+ const timeLineActionDetails = document . createElement ( " details" ) ;
36
40
timeLineActionDetails . classList = [
37
- ' details-overlay details-reset position-relative d-inline-block' ,
41
+ " details-overlay details-reset position-relative d-inline-block"
38
42
] ;
39
43
timeLineActionDetails . innerHTML = `<summary class="btn-link timeline-comment-action" aria-haspopup="menu">
40
44
<svg aria-label="Show options" class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" role="img"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM13 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path></svg>
@@ -46,30 +50,30 @@ function createCommentBox(noteDetail) {
46
50
</details-menu>` ;
47
51
timeLineAction . append ( timeLineActionDetails ) ;
48
52
timelineWrapper . append ( timeLineAction ) ;
49
- const timelineH3 = document . createElement ( 'h3' ) ;
50
- timelineH3 . classList = [ ' timeline-comment-header-text f5 text-normal' ] ;
53
+ const timelineH3 = document . createElement ( "h3" ) ;
54
+ timelineH3 . classList = [ " timeline-comment-header-text f5 text-normal" ] ;
51
55
timelineH3 . innerHTML = `<strong class="css-truncate expandable"><a class="author text-inherit css-truncate-target">${ userName } </a></strong>` ;
52
- const timestamp = document . createElement ( ' span' ) ;
53
- timestamp . classList = [ ' timestamp js-timestamp' ] ;
56
+ const timestamp = document . createElement ( " span" ) ;
57
+ timestamp . classList = [ " timestamp js-timestamp" ] ;
54
58
55
59
timestamp . innerHTML = ` added ${ createdTimeAgo } ` ;
56
60
57
61
timelineH3 . append ( timestamp ) ;
58
62
timelineWrapper . append ( timelineH3 ) ;
59
63
60
64
innerWrapper2 . append ( timelineWrapper ) ;
61
- const commentBodyWrapper = document . createElement ( ' div' ) ;
62
- commentBodyWrapper . classList = [ ' edit-comment-hide js-edit-comment-hide' ] ;
63
- const taskList = document . createElement ( ' task-lists' ) ;
64
- taskList . setAttribute ( ' sortable' , true ) ;
65
- const table = document . createElement ( ' table' ) ;
66
- table . classList = [ ' d-block' ] ;
67
- const tbody = document . createElement ( ' tbody' ) ;
68
- tbody . classList = [ ' d-block' ] ;
69
- const tr = document . createElement ( 'tr' ) ;
70
- tr . classList = [ ' d-block' ] ;
71
- const td = document . createElement ( 'td' ) ;
72
- td . classList = [ ' d-block comment-body markdown-body js-comment-body' ] ;
65
+ const commentBodyWrapper = document . createElement ( " div" ) ;
66
+ commentBodyWrapper . classList = [ " edit-comment-hide js-edit-comment-hide" ] ;
67
+ const taskList = document . createElement ( " task-lists" ) ;
68
+ taskList . setAttribute ( " sortable" , true ) ;
69
+ const table = document . createElement ( " table" ) ;
70
+ table . classList = [ " d-block" ] ;
71
+ const tbody = document . createElement ( " tbody" ) ;
72
+ tbody . classList = [ " d-block" ] ;
73
+ const tr = document . createElement ( "tr" ) ;
74
+ tr . classList = [ " d-block" ] ;
75
+ const td = document . createElement ( "td" ) ;
76
+ td . classList = [ " d-block comment-body markdown-body js-comment-body" ] ;
73
77
td . innerHTML = noteDetail . noteContent ;
74
78
tr . appendChild ( td ) ;
75
79
tbody . appendChild ( tr ) ;
@@ -83,23 +87,23 @@ function createCommentBox(noteDetail) {
83
87
}
84
88
85
89
function createAvatar ( { userName, githubId, avatarUrl } ) {
86
- const avatarWrapper = document . createElement ( ' div' ) ;
87
- avatarWrapper . classList = [ ' avatar-parent-child TimelineItem-avatar' ] ;
90
+ const avatarWrapper = document . createElement ( " div" ) ;
91
+ avatarWrapper . classList = [ " avatar-parent-child TimelineItem-avatar" ] ;
88
92
89
93
// a tag
90
- const avatarA = document . createElement ( 'a' ) ;
94
+ const avatarA = document . createElement ( "a" ) ;
91
95
avatarA . href = `/${ userName } ` ;
92
- avatarA . classList = [ ' d-inline-block' ] ;
93
- avatarA . setAttribute ( ' data-hovercard-type' , ' user' ) ;
94
- avatarA . setAttribute ( ' data-hovercard-url' , `/hovercards?user_id=${ githubId } ` ) ;
95
- avatarA . setAttribute ( ' data-octo-click' , ' hovercard-link-click' ) ;
96
- avatarA . setAttribute ( ' data-octo-dimensions' , ' link_type:self' ) ;
96
+ avatarA . classList = [ " d-inline-block" ] ;
97
+ avatarA . setAttribute ( " data-hovercard-type" , " user" ) ;
98
+ avatarA . setAttribute ( " data-hovercard-url" , `/hovercards?user_id=${ githubId } ` ) ;
99
+ avatarA . setAttribute ( " data-octo-click" , " hovercard-link-click" ) ;
100
+ avatarA . setAttribute ( " data-octo-dimensions" , " link_type:self" ) ;
97
101
98
102
// image tag
99
- const avatarImg = document . createElement ( ' img' ) ;
100
- avatarImg . classList = [ ' avatar rounded-1' ] ;
101
- avatarImg . height = '44' ;
102
- avatarImg . width = '44' ;
103
+ const avatarImg = document . createElement ( " img" ) ;
104
+ avatarImg . classList = [ " avatar rounded-1" ] ;
105
+ avatarImg . height = "44" ;
106
+ avatarImg . width = "44" ;
103
107
avatarImg . alt = `@${ userName } ` ;
104
108
avatarImg . src = `${ avatarUrl } ?s=180` ;
105
109
avatarA . appendChild ( avatarImg ) ;
@@ -108,16 +112,18 @@ function createAvatar({ userName, githubId, avatarUrl }) {
108
112
}
109
113
110
114
export default function createNoteBox ( noteDetail ) {
111
- if ( ! noteDetail . userId ) {
112
- noteDetail . userId = { } ;
115
+ if ( ! noteDetail . userDetails ) {
116
+ noteDetail . userDetails = { } ;
113
117
}
114
- const { avatarUrl, githubId, userName } = noteDetail . userId ;
115
- const noteNode = document . createElement ( 'div' ) ;
116
- noteNode . classList = [ 'js-timeline-item js-timeline-progressive-focus-container private-note' ] ;
117
- noteNode . setAttribute ( 'private-id' , noteDetail . _id ) ;
118
+ const { avatarUrl, githubId, userName } = noteDetail . userDetails ;
119
+ const noteNode = document . createElement ( "div" ) ;
120
+ noteNode . classList = [
121
+ "js-timeline-item js-timeline-progressive-focus-container private-note"
122
+ ] ;
123
+ noteNode . setAttribute ( "private-id" , noteDetail . _id ) ;
118
124
119
- const noteWrapper = document . createElement ( ' div' ) ;
120
- noteWrapper . classList = [ ' TimelineItem js-comment-container' ] ;
125
+ const noteWrapper = document . createElement ( " div" ) ;
126
+ noteWrapper . classList = [ " TimelineItem js-comment-container" ] ;
121
127
noteWrapper . appendChild ( createAvatar ( { userName, githubId, avatarUrl } ) ) ;
122
128
noteWrapper . appendChild ( createCommentBox ( noteDetail ) ) ;
123
129
0 commit comments