Skip to content
Snippets Groups Projects
Commit e29c8e98 authored by Allen Gilliland's avatar Allen Gilliland
Browse files

reorganize things a little and simplify the rendering code a bit where... 

reorganize things a little and simplify the rendering code a bit where possible.  also remove react components that weren't really needed.
parent fb117228
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/frontend_client/app/home/components/Activity.react.js
+ 54
− 71
View file @ e29c8e98
......@@ -22,6 +22,48 @@ export default class Activity extends Component {
this.colorClasses = ['bg-brand', 'bg-purple', 'bg-error', 'bg-green', 'bg-gold', 'bg-grey-2'];
}
async componentDidMount() {
try {
await this.props.dispatch(fetchActivity());
} catch (error) {
this.setState({ error });
}
}
componentWillReceiveProps(nextProps) {
// do a quick pass over the activity and make sure we've assigned colors to all users which have activity
let { activity, user } = nextProps;
let { userColors } = this.state;
const colors = [1,2,3,4,5];
const maxColorUsed = (_.isEmpty(userColors)) ? 0 : _.max(_.values(userColors));
var currColor = (maxColorUsed && maxColorUsed < colors.length) ? maxColorUsed : 0;
for (var item of activity) {
if (!(item.user_id in userColors)) {
// assign the user a color
if (item.user_id === user.id) {
userColors[item.user_id] = 0;
} else if (item.user_id === null) {
// just skip this scenario, we handle this differently
} else {
userColors[item.user_id] = colors[currColor];
currColor++;
// if we hit the end of the colors list then just go back to the beginning again
if (currColor >= colors.length) {
currColor = 0;
}
}
}
}
this.setState({
'error': this.state.error,
'userColors': userColors
});
}
userName(user, currentUser) {
if (user && user.id === currentUser.id) {
return "You";
......@@ -129,49 +171,6 @@ export default class Activity extends Component {
};
}
async componentDidMount() {
try {
await this.props.dispatch(fetchActivity());
} catch (error) {
this.setState({ error });
}
}
componentWillReceiveProps(nextProps) {
// do a quick pass over the activity and make sure we've assigned colors to all users which have activity
let { activity, user } = nextProps;
let { userColors } = this.state;
const colors = [1,2,3,4,5];
const maxColorUsed = (_.isEmpty(userColors)) ? 0 : _.max(_.values(userColors));
var currColor = (maxColorUsed && maxColorUsed < colors.length) ? maxColorUsed : 0;
for (var item of activity) {
if (!(item.user_id in userColors)) {
// assign the user a color
if (item.user_id === user.id) {
userColors[item.user_id] = 0;
} else if (item.user_id === null) {
// just skip this scenario, we handle this differently
} else {
userColors[item.user_id] = colors[currColor];
currColor++;
// if we hit the end of the colors list then just go back to the beginning again
if (currColor >= colors.length) {
currColor = 0;
}
}
}
}
this.setState({
'error': this.state.error,
'userColors': userColors
});
}
initialsCssClasses(user) {
let { userColors } = this.state;
......@@ -193,26 +192,6 @@ export default class Activity extends Component {
}
}
renderActivity(activity) {
return (
<ul className="pt2 pb4 relative">
{activity.map(item => {
const description = this.activityDescription(item, item.user);
return (
<li key={item.id} className="mt3">
<ActivityItem
item={item}
description={description}
userColors={this.initialsCssClasses(item.user)}
/>
{ description.body ? <ActivityStory story={description} /> : null }
</li>
)
})}
</ul>
);
}
render() {
let { activity } = this.props;
let { error } = this.state;
......@@ -229,7 +208,18 @@ export default class Activity extends Component {
<div className="text-normal text-grey-2">Save a question and get this baby going!</div>
</div>
:
this.renderActivity(activity)
<ul className="pt2 pb4 relative">
{activity.map(item =>
<li key={item.id} className="mt3">
<ActivityItem
item={item}
description={this.activityDescription(item, item.user)}
userColors={this.initialsCssClasses(item.user)}
/>
<ActivityStory story={this.activityDescription(item, item.user)} />
</li>
)}
</ul>
}
</div>
</div>
......@@ -238,10 +228,3 @@ export default class Activity extends Component {
);
}
}
Activity.propTypes = {
dispatch: PropTypes.func.isRequired,
onChangeLocation: PropTypes.func.isRequired,
onDashboardDeleted: PropTypes.func.isRequired,
visualizationSettingsApi: PropTypes.object.isRequired
};
resources/frontend_client/app/home/components/ActivityDescription.react.js deleted 100644 → 0
+ 0
− 34
View file @ fb117228
"use strict";
import React, { Component, PropTypes } from "react";
export default class ActivityDescription extends Component {
constructor(props) {
super(props);
}
render() {
let { description } = this.props;
return (
<div className="ml2 full flex align-center">
<div className="text-grey-4">
<span className="text-dark">{description.userName}</span>
&nbsp;{description.subject}&nbsp;
{ description.subjectRefName && description.subjectRefLink ?
<a className="link text-dark" href={description.subjectRefLink}>{description.subjectRefName}</a>
: null }
{ description.subjectRefName && !description.subjectRefLink ?
<span className="text-dark">{description.subjectRefName}</span>
: null }
</div>
<div className="flex-align-right text-right text-grey-2">
{description.timeSince}
</div>
</div>
);
}
}
resources/frontend_client/app/home/components/ActivityItem.react.js
+ 28
− 6
View file @ e29c8e98
'use strict';
import React, { Component } from 'react';
import Icon from 'metabase/components/Icon.react';
import ActivityDescription from './ActivityDescription.react';
export default class ActivityItem extends Component {
constructor() {
super()
constructor(props) {
super(props);
this.styles = {
initials: {
borderRadius: '0px',
}
}
};
}
userInitials(user) {
......@@ -29,7 +32,8 @@ export default class ActivityItem extends Component {
}
render() {
const { item, description, userColors } = this.props
const { item, description, userColors } = this.props;
return (
<div className="flex align-center">
{ item.user ?
......@@ -41,7 +45,25 @@ export default class ActivityItem extends Component {
<span className="UserInitials"><Icon name={'return'}></Icon></span>
</span>
}
<ActivityDescription description={description} />
<div className="ml2 full flex align-center">
<div className="text-grey-4">
<span className="text-dark">{description.userName}</span>
&nbsp;{description.subject}&nbsp;
{ description.subjectRefName && description.subjectRefLink ?
<a className="link text-dark" href={description.subjectRefLink}>{description.subjectRefName}</a>
: null }
{ description.subjectRefName && !description.subjectRefLink ?
<span className="text-dark">{description.subjectRefName}</span>
: null }
</div>
<div className="flex-align-right text-right text-grey-2">
{description.timeSince}
</div>
</div>
</div>
)
}
......
resources/frontend_client/app/home/components/ActivityStory.react.js
+ 12
− 3
View file @ e29c8e98
......@@ -2,17 +2,26 @@
import React, { Component } from 'react';
export default class ActivityStory extends Component {
constructor() {
super()
constructor(props) {
super(props);
this.styles = {
modelLink: {
borderWidth: "2px"
},
}
}
render() {
const { story } = this.props
const { story } = this.props;
if (!story.body) {
return null;
}
return (
<div className="ml2 mt1 border-left flex" style={{borderWidth: '3px'}}>
<div style={this.styles.modelLink} className="flex full ml4 bordered rounded p2">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment