yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed: Modified time display on dashboard

Browse Source 
New Time component for relative time formatting with accessibility
This commit is contained in:
Tom Moor
2018-07-01 19:56:58 -07:00
parent 933fa9732c
commit 2fd8b35ca9
5 changed files with 56 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/components/DocumentPreview/components/PublishingInfo.js
View File

@@ -1,10 +1,10 @@
// @flow
import * as React from 'react';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import styled from 'styled-components';
import Collection from 'models/Collection';
import Document from 'models/Document';
import Flex from 'shared/components/Flex';
import Time from 'shared/components/Time';
const Container = styled(Flex)`
color: ${props => props.theme.slate};
@@ -23,46 +23,36 @@ type Props = {
views?: number,
};
class PublishingInfo extends React.Component<Props> {
render() {
const { collection, document } = this.props;
const {
modifiedSinceViewed,
createdAt,
updatedAt,
createdBy,
updatedBy,
publishedAt,
} = document;
function PublishingInfo({ collection, document }: Props) {
const { modifiedSinceViewed, updatedAt, updatedBy, publishedAt } = document;
const timeAgo = `${distanceInWordsToNow(new Date(createdAt))} ago`;
return (
<Container align="center">
{publishedAt === updatedAt ? (
<span>
{createdBy.name} published {timeAgo}
</span>
) : (
<React.Fragment>
{updatedBy.name}
{publishedAt ? (
<Modified highlight={modifiedSinceViewed}>
&nbsp;modified {timeAgo}
</Modified>
) : (
<span>&nbsp;saved {timeAgo}</span>
)}
</React.Fragment>
)}
{collection && (
<span>
&nbsp;in <strong>{collection.name}</strong>
</span>
)}
</Container>
);
}
return (
<Container align="center">
{publishedAt && publishedAt === updatedAt ? (
<span>
{updatedBy.name} published <Time dateTime={publishedAt} /> ago
</span>
) : (
<React.Fragment>
{updatedBy.name}
{publishedAt ? (
<Modified highlight={modifiedSinceViewed}>
&nbsp;modified <Time dateTime={updatedAt} /> ago
</Modified>
) : (
<span>
&nbsp;saved <Time dateTime={updatedAt} /> ago
</span>
)}
</React.Fragment>
)}
{collection && (
<span>
&nbsp;in <strong>{collection.name}</strong>
</span>
)}
</Container>
);
}
export default PublishingInfo;