Skip to content

Commit d805cc2

Browse files
landonreedlandonreed
committed
refactor(manager): refactor recent activity to use shared JSX blocks
1 parent bf014cc commit d805cc2

File tree

1 file changed

+145
-90
lines changed

1 file changed

+145
-90
lines changed

‎lib/manager/components/RecentActivity.js‎

Lines changed: 145 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -3,123 +3,178 @@ import React, {Component, PropTypes} from 'react'
33
import moment from 'moment'
44
import { Link } from 'react-router'
55

6+
const dateFormat = 'MMM. DD, YYYY'
7+
const timeFormat = 'h:mma'
8+
69
export default class RecentActivity extends Component {
710
static propTypes = {
811
currentUser: PropTypes.object,
912
item: PropTypes.object
1013
}
1114

15+
_primaryURL = (feedSourceId, feedVersionIndex) => feedVersionIndex
16+
? this._versionURL(feedSourceId, feedVersionIndex)
17+
: this._feedSourceURL(feedSourceId)
18+
19+
_feedSourceURL = (id) => `/feed/${id}`
20+
21+
_versionURL = (feedSourceId, versionIndex) =>
22+
`/feed/${feedSourceId}/version/${versionIndex}`
23+
24+
_getPrimaryBlock = (item) => {
25+
const commentStyle = {
26+
backgroundColor: '#f0f0f0',
27+
marginTop: 8,
28+
padding: 10,
29+
fontSize: 13,
30+
borderRadius: 4,
31+
color: '#444'
32+
}
33+
const {
34+
feedVersionIndex,
35+
feedVersionName,
36+
feedSourceId,
37+
type,
38+
feedSourceName,
39+
projectName,
40+
projectId,
41+
body
42+
} = item
43+
const primaryURL = this._primaryURL(feedSourceId, feedVersionIndex)
44+
const primaryName = feedVersionIndex
45+
? feedVersionName
46+
: feedSourceName
47+
switch (type) {
48+
case 'feed-commented-on':
49+
case 'version-commented-on':
50+
return (
51+
<div>
52+
<Link to={`${primaryURL}/comments`}>
53+
<div style={commentStyle}><i>{body}</i></div>
54+
</Link>
55+
</div>
56+
)
57+
case 'version-created':
58+
case 'feed-created':
59+
return (
60+
<div>
61+
{`New ${feedVersionIndex ? 'version' : 'feed'} `}
62+
<Link to={primaryURL}>
63+
<b>{primaryName}</b>
64+
</Link>
65+
{feedVersionIndex
66+
? <span>
67+
{' created for feed '}
68+
<Link to={this._feedSourceURL(feedSourceId)}>
69+
<b>{feedSourceName}</b>
70+
</Link>
71+
</span>
72+
: <span>
73+
{' created in project '}
74+
<Link to={`/project/${projectId}`}>
75+
<b>{projectName}</b>
76+
</Link>
77+
</span>
78+
}
79+
</div>
80+
)
81+
default:
82+
return null
83+
}
84+
}
85+
86+
_getMetaBlock = (item, currentUser) => {
87+
// TODO: Refactor below switch to share more of the common JSX with certain
88+
// items (e.g., links, text) conditionally dependent on recent activity type.
89+
const {
90+
feedVersionIndex,
91+
feedVersionName,
92+
feedSourceId,
93+
type,
94+
feedSourceName,
95+
userName
96+
} = item
97+
switch (type) {
98+
case 'feed-commented-on':
99+
case 'version-commented-on':
100+
return (
101+
<div>
102+
{currentUser.profile.name === userName
103+
? 'You'
104+
: <b>{userName}</b>
105+
}
106+
{' commented on feed '}
107+
<Link to={this._feedSourceURL(feedSourceId)}>
108+
<b>{feedSourceName}</b>
109+
</Link>
110+
{feedVersionIndex && feedSourceName && (
111+
<span>
112+
{', version '}
113+
<Link to={this._versionURL(feedSourceId, feedVersionIndex)}>
114+
<b>{feedVersionName}</b>
115+
</Link>
116+
</span>
117+
)}
118+
{`:`}
119+
</div>
120+
)
121+
default:
122+
return null
123+
}
124+
}
125+
126+
_getIconType = type => {
127+
switch (type) {
128+
case 'feed-commented-on':
129+
case 'version-commented-on':
130+
return 'comment'
131+
case 'feed-created':
132+
return 'bus'
133+
case 'version-created':
134+
return 'list'
135+
default:
136+
return null
137+
}
138+
}
139+
12140
render () {
13-
const { item, currentUser } = this.props
141+
// TODO: Move styles into css
14142
const containerStyle = {
15143
marginTop: 10,
16144
paddingBottom: 12,
17145
borderBottom: '1px solid #ddd'
18146
}
19-
20147
const iconStyle = {
21148
float: 'left',
22149
fontSize: 20,
23150
color: '#bbb'
24151
}
25-
26152
const dateStyle = {
27153
color: '#999',
28154
fontSize: 11,
29155
marginBottom: 2
30156
}
31-
32157
const innerContainerStyle = {
33158
marginLeft: 36
34159
}
35-
36-
const commentStyle = {
37-
backgroundColor: '#f0f0f0',
38-
marginTop: 8,
39-
padding: 10,
40-
fontSize: 13,
41-
borderRadius: 4,
42-
color: '#444'
43-
}
44-
45-
// Helper function to create comment item
46-
const createCommentItem = (item) => {
47-
const commentLink = item.feedVersionIndex
48-
? `/feed/${item.feedSourceId}/version/${item.feedVersionIndex}/comments`
49-
: `/feed/${item.feedSourceId}/comments`
50-
return (
51-
<div style={containerStyle}>
52-
<div style={iconStyle}>
53-
<Icon type='comment' />
54-
</div>
55-
<div style={innerContainerStyle}>
56-
<div style={dateStyle}>{moment(item.date).fromNow()}</div>
57-
<div>
58-
{currentUser.profile.name === item.userName
59-
? 'You'
60-
: <b>{item.userName}</b>
61-
}
62-
{' commented on feed '}
63-
<Link to={`/feed/${item.feedSourceId}`}><b>{item.feedSourceName}</b></Link>
64-
{item.feedVersionIndex && item.feedSourceName && (
65-
<span>
66-
{', version '}
67-
<Link to={`/feed/${item.feedSourceId}/versions/${item.feedVersionIndex}`}><b>{item.feedVersionName}</b></Link>
68-
</span>
69-
)}
70-
{`:`}
71-
</div>
72-
73-
<div>
74-
<Link to={commentLink}>
75-
<div style={commentStyle}><i>{item.body}</i></div>
76-
</Link>
77-
</div>
78-
</div>
79-
</div>
80-
)
81-
}
82-
83-
switch (item.type) {
84-
case 'feed-commented-on':
85-
case 'version-commented-on':
86-
return createCommentItem(item)
87-
case 'feed-created': return (
88-
<div style={containerStyle}>
89-
<div style={iconStyle}>
90-
<Icon type='bus' />
91-
</div>
92-
<div style={innerContainerStyle}>
93-
<div style={dateStyle}>{moment(item.date).fromNow()}</div>
94-
<div>
95-
{'New feed '}
96-
<Link to={`/feed/${item.feedSourceId}`}><b>{item.feedSourceName}</b></Link>
97-
{' created in project '}
98-
<Link to={`/project/${item.projectId}`}><b>{item.projectName}</b></Link>
99-
</div>
100-
</div>
160+
const { item, currentUser } = this.props
161+
const {date, type} = item
162+
const activityDate = moment(date)
163+
return (
164+
<div style={containerStyle}>
165+
<div style={iconStyle}>
166+
<Icon type={this._getIconType(type)} />
101167
</div>
102-
)
103-
case 'version-created': return (
104-
<div style={containerStyle}>
105-
<div style={iconStyle}>
106-
<Icon type='list' />
107-
</div>
108-
<div style={innerContainerStyle}>
109-
<div style={dateStyle}>{moment(item.date).fromNow()}</div>
110-
<div>
111-
{'New version '}
112-
<Link to={`/feed/${item.feedSourceId}/versions/${item.feedVersionIndex}`}>
113-
<b>{item.feedVersionName}</b>
114-
</Link>
115-
{' created for feed '}
116-
<Link to={`/feed/${item.feedSourceId}`}><b>{item.feedSourceName}</b></Link>
117-
</div>
168+
<div style={innerContainerStyle}>
169+
<div
170+
style={dateStyle}
171+
title={activityDate.format(dateFormat + ', ' + timeFormat)}>
172+
{activityDate.fromNow()}
118173
</div>
174+
{this._getMetaBlock(item, currentUser)}
175+
{this._getPrimaryBlock(item)}
119176
</div>
120-
)
121-
}
122-
123-
return null
177+
</div>
178+
)
124179
}
125180
}

0 commit comments

Comments
 (0)