diff --git a/src/client/components/Companies/Add.js b/src/client/components/Companies/Add.js
index e848fbf..10fa9d9 100644
--- a/src/client/components/Companies/Add.js
+++ b/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,
};
diff --git a/src/client/components/Companies/Preview.js b/src/client/components/Companies/Preview.js
index 753a292..94ed928 100644
--- a/src/client/components/Companies/Preview.js
+++ b/src/client/components/Companies/Preview.js
@@ -4,8 +4,9 @@ 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',
@@ -13,7 +14,7 @@ const cardStyle = {
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 && }
+ { isNew && }
{name}
diff --git a/src/client/components/Navbar/User.js b/src/client/components/Navbar/User.js
index eaf67bb..6c35668 100644
--- a/src/client/components/Navbar/User.js
+++ b/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 (
{
content={}
>
-
+
);
diff --git a/src/client/components/Navbar/user.js b/src/client/components/Navbar/user.js
deleted file mode 100644
index eaf67bb..0000000
--- a/src/client/components/Navbar/user.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { PropTypes } from 'react';
-import R from 'ramda';
-import { Popover, Button } from 'antd';
-import styled from 'styled-components';
-import Avatar from '../Avatar';
-
-const Row = styled.div`
- display: flex;
- justify-content: space-around;
-`;
-
-const UserMenu = ({ onClick, onLogout }) => (
-
-
-
-
-);
-
-UserMenu.propTypes = {
- onClick: PropTypes.func.isRequired,
- onLogout: PropTypes.func.isRequired,
-};
-
-const User = ({ user, ...params }) => {
- if (!user) return null;
- const fullName = R.join(' ', [user.firstName, user.lastName]);
- return (
- { user.email }}
- placement="leftTop"
- content={}
- >
-
-
-
-
- );
-};
-
-User.propTypes = {
- user: PropTypes.object,
- onClick: PropTypes.func.isRequired,
- onLogout: PropTypes.func.isRequired,
-};
-
-export default User;
diff --git a/src/client/components/widgets/StatusBadge.js b/src/client/components/widgets/StatusBadge.js
new file mode 100644
index 0000000..6c47854
--- /dev/null
+++ b/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 }) => (
+
+);
+
+StatusBadge.propTypes = {
+ type: PropTypes.string.isRequired,
+};
+
+export default StatusBadge;
diff --git a/src/client/selectors/companies.js b/src/client/selectors/companies.js
index d7100da..a8ce555 100644
--- a/src/client/selectors/companies.js
+++ b/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),
);