Implement badge award system

This commit is contained in:
Nicholas Zuber 2018-11-05 00:48:47 -05:00
parent 771dbff2ac
commit b620f10c62
3 changed files with 24 additions and 14 deletions

View File

@ -15,7 +15,7 @@ const Header = styled('h1')({
const SubHeader = styled(Header)({
fontWeight: 500,
maxWidth: 550,
maxWidth: 460,
color: '#fff',
fontSize: 24,
marginBottom: 30,
@ -89,7 +89,7 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
</LandingHeader>
<LandingMessage>
<Header>Control your notifications</Header>
<SubHeader>Organizing and managing your GitHub notifications made easy</SubHeader>
<SubHeader>Prioritize the tasks that keep you and your team most productive</SubHeader>
<div className="button-container">
<RouterLink to={routes.LOGIN}>let's get started</RouterLink>
</div>

View File

@ -103,7 +103,7 @@ const Sidebar = styled('div')({
const SidebarLink = styled('a')({}, ({active, color}) => ({
textAlign: 'left',
userSelect: 'none',
margin: '0 auto',
margin: '0 auto 5px',
position: 'relative',
cursor: 'pointer',
borderRadius: 4,
@ -630,9 +630,6 @@ export default function Scene ({
</NotificationTitle>
<Timestamp>{getRelativeTime(n.updated_at)}</Timestamp>
</TableItem>
{/* <TableItem width={200}>
<Repository>{n.reasons.map(r => r.reason).join(', ')}</Repository>
</TableItem> */}
<TableItem width={100}>
<InlineBlockContainer>
{n.badges.map(badge => {
@ -672,8 +669,6 @@ export default function Scene ({
/>
</NotificationTab>
</TableItem>
{/* <p>Last read at {n.last_read_at ? moment(n.last_read_at).format('dddd h:mma') : 'never'}</p>
<p>Last updated at {moment(n.last_updated).format('dddd h:mma')}</p> */}
</NotificationRow>
))}
</tbody>

View File

@ -1,4 +1,5 @@
import React from 'react';
import moment from 'moment';
import { Redirect } from "@reach/router";
import { compose } from 'recompose';
import { withNotificationsProvider } from '../../providers/Notifications';
@ -12,6 +13,8 @@ import { Status } from '../../constants/status';
import { Reasons, Badges } from '../../constants/reasons';
import Scene from './SceneAlt';
const PER_PAGE = 15;
// @TODO Move these functions.
/**
@ -65,13 +68,27 @@ function scoreOf (notification) {
// @TODO implement this
function badgesOf (notification) {
const badges = [];
if (notification.reasons.length > 7) {
badges.push(Badges.HOT);
const len = notification.reasons.length;
// If there are more than 4 reasons, and the last 4 reasons have happened within
// an hour of each other.
// The specific time frame and reasons count is subject to change.
if (len >= 4) {
const oldestReference = moment(notification.reasons[len - 4].time);
const newestReference = moment(notification.reasons[len - 1].time);
if (newestReference.diff(oldestReference, 'hours') <= 1) {
badges.push(Badges.HOT);
}
}
if (notification.reasons.length > 3) {
// If there's a lot of activity going on within the thread in general.
// The specific nunmber should be relative to average number of thread lengths.
// We can track a running statistic as we see notifications update.
if (len > 8) {
badges.push(Badges.COMMENTS);
}
if (notification.reasons.length <= 2) {
// If you've been tagged in for review and the most recent update happened over
// 4 hours ago, that specific time is subject to change.
if (notification.reasons.some(r => r.reason === Reasons.REVIEW_REQUESTED) &&
moment().diff(moment(notification.reasons.pop().time).hours, 'hours') > 4) {
badges.push(Badges.OLD);
}
return badges;
@ -93,8 +110,6 @@ const decorateWithScore = notification => ({
badges: badgesOf(notification)
});
const PER_PAGE = 10;
class NotificationsPage extends React.Component {
state = {
isSearching: false,