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), );