Preview > StatusBadge: fix redpelicans#37.

src/client/components/Companies/Add.js

@@ -33,7 +33,7 @@ class AddCompany extends React.Component {
   };
 
   componentWillMount() {
-    const { loadCompanies, loadPeople, loadCountries, loadCities } = this.props;
+    const { loadCompanies, loadPeople, loadCountries, loadCities } = this.props; // eslint-disable-line no-shadow
     loadCountries();
     loadCities();
     loadCompanies();
@@ -46,10 +46,7 @@ class AddCompany extends React.Component {
   }
 
   handleSubmit = (e) => {
-    const {
-      form: { validateFieldsAndScroll },
-      addCompany,
-    } = this.props;
+    const { form: { validateFieldsAndScroll }, addCompany } = this.props; // eslint-disable-line no-shadow
 
     e.preventDefault();
 
@@ -275,6 +272,7 @@ AddCompany.propTypes = {
   loadCountries: PropTypes.func.isRequired,
   loadCompanies: PropTypes.func.isRequired,
   loadPeople: PropTypes.func.isRequired,
+  addCompany: PropTypes.func.isRequired,
   history: PropTypes.object.isRequired,
 };
 

src/client/components/Companies/Preview.js

@@ -4,16 +4,17 @@ import { Card, Tag, Button } from 'antd';
 import R from 'ramda';
 import Avatar from '../Avatar';
 import Preferred from '../widgets/Preferred';
+import StatusBadge from '../widgets/StatusBadge';
 
-const TAGS_LIMIT = 5;
+const TAGS_LIMIT = 3;
 
 const cardStyle = {
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
   height: '98px',
   backgroundColor: '#f0f0f0',
-  padding: '12px',
+  padding: '12px 58px 12px 12px',
 };
 
 const Title = styled.h3`
@@ -69,7 +70,8 @@ export class Preview extends Component {
   }
 
   render() {
-    const { company, company: { avatar = {}, name, tags = [], preferred }, filterCompanyList, togglePreferred } = this.props;
+    const { company, filterCompanyList, togglePreferred } = this.props;
+    const { avatar = {}, name, tags = [], preferred, isNew, isUpdated } = company;
     const { showActions } = this.state;
     const handleClick = tag => filterCompanyList(`#${tag}`);
     const handlePreferred = c => togglePreferred(c);
@@ -84,6 +86,8 @@ export class Preview extends Component {
         style={{ margin: '8px' }}
         bordered={false}
       >
+        { isUpdated && <StatusBadge type="updated" /> }
+        { isNew && <StatusBadge type="new" /> }
         <TitleRow>
           <Avatar name={name} color={avatar.color} showTooltip />
           <Title>{name}</Title>

src/client/components/Navbar/User.js

@@ -23,7 +23,7 @@ UserMenu.propTypes = {
 
 const User = ({ user, ...params }) => {
   if (!user) return null;
-  const fullName = R.join(' ', [user.firstName, user.lastName]); 
+  const fullName = R.join(' ', [user.firstName, user.lastName]);
   return (
     <Popover
       trigger="click"
@@ -32,7 +32,7 @@ const User = ({ user, ...params }) => {
       content={<UserMenu {...params} />}
     >
       <a>
-        <Avatar name={fullName} color={user.avatar.color || "darkgrey"} />
+        <Avatar name={fullName} color={user.avatar.color} />
       </a>
     </Popover>
   );

src/client/components/widgets/StatusBadge.js

@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react';
+import styled from 'styled-components';
+
+const status = {
+  new: { color: '#2ecc71' },
+  updated: { color: '#f39c12' },
+};
+
+const Badge = styled.div`
+  position: absolute;
+  top: -15px;
+  right: -15px;
+  background: ${props => props.color};
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  box-shadow: 0px 0px 3px 1px rgba(0,0,0,.2) inset;
+`;
+
+const StatusBadge = ({ type }) => (
+  <Badge {...status[type]} />
+);
+
+StatusBadge.propTypes = {
+  type: PropTypes.string.isRequired,
+};
+
+export default StatusBadge;

src/client/selectors/companies.js

@@ -1,4 +1,5 @@
 import R from 'ramda';
+import moment from 'moment';
 import { createSelector } from 'reselect';
 
 /* sorting */
@@ -18,14 +19,24 @@ const doFilter = (filter, preferredFilter) => R.filter(R.allPass([getPreferredPr
 const filterAndSort = (filter, sort, preferredFilter, companies) =>
   R.compose(doSort(sort), doFilter(filter, preferredFilter), R.values)(companies);
 
+/* status */
+const isNew = company => (!company.updatedAt && moment.duration(moment() - company.createdAt).asHours() < 2);
+const isUpdated = company => (company.updatedAt && moment.duration(moment() - company.updatedAt).asHours() < 1);
+const putStatus = companies =>
+  R.mapObjIndexed(company => (
+    { ...company, isNew: isNew(company), isUpdated: isUpdated(company) }))(companies);
+
 /* input selectors */
 const getFilter = state => state.companies.filter;
 const getSort = state => state.companies.sort;
 const getPreferredFilter = state => state.companies.preferredFilter;
 const getCompanies = state => state.companies.data;
 
+/* selectors */
+const updateCompaniesStatus = createSelector(getCompanies, putStatus);
+
 export const getVisibleCompanies = createSelector( // eslint-disable-line
-  [getFilter, getSort, getPreferredFilter, getCompanies],
-  (filter = '', sort = { by: '', order: '' }, preferredFilter, companies) =>
-    filterAndSort(filter, sort, preferredFilter, companies)
+  [getFilter, getSort, getPreferredFilter, updateCompaniesStatus],
+  (filter, sort, preferredFilter, companies) =>
+    filterAndSort(filter, sort, preferredFilter, companies),
 );