frontend > app

app/components/DocumentPreview/DocumentPreview.js

@@ -0,0 +1,109 @@
+// @flow
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
+import Document from 'models/Document';
+import styled from 'styled-components';
+import { color } from 'styles/constants';
+import StarredIcon from 'components/Icon/StarredIcon';
+import PublishingInfo from './components/PublishingInfo';
+
+type Props = {
+  document: Document,
+  highlight?: ?string,
+  showCollection?: boolean,
+  innerRef?: Function,
+};
+
+const StyledStar = styled(({ solid, ...props }) => (
+  <StarredIcon color={solid ? color.black : color.text} {...props} />
+))`
+  position: absolute;
+  opacity: ${props => (props.solid ? '1 !important' : 0)};
+  transition: all 100ms ease-in-out;
+  margin-left: 2px;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+
+const DocumentLink = styled(Link)`
+  display: block;
+  margin: 0 -16px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  max-height: 50vh;
+  min-width: 100%;
+  overflow: hidden;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: ${color.smokeLight};
+    border: 2px solid ${color.smoke};
+    outline: none;
+
+    ${StyledStar} {
+      opacity: .5;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  &:focus {
+    border: 2px solid ${color.slateDark};
+  }
+
+  h3 {
+    margin-top: 0;
+    margin-bottom: .25em;
+  }
+`;
+
+@observer class DocumentPreview extends Component {
+  props: Props;
+
+  star = (ev: SyntheticEvent) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.props.document.star();
+  };
+
+  unstar = (ev: SyntheticEvent) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.props.document.unstar();
+  };
+
+  render() {
+    const { document, showCollection, innerRef, ...rest } = this.props;
+
+    return (
+      <DocumentLink to={document.url} innerRef={innerRef} {...rest}>
+        <h3>
+          {document.title}
+          {document.starred
+            ? <a onClick={this.unstar}>
+                <StyledStar solid />
+              </a>
+            : <a onClick={this.star}>
+                <StyledStar />
+              </a>}
+        </h3>
+        <PublishingInfo
+          document={document}
+          collection={showCollection ? document.collection : undefined}
+        />
+      </DocumentLink>
+    );
+  }
+}
+
+export default DocumentPreview;

app/components/DocumentPreview/components/PublishingInfo.js

@@ -0,0 +1,62 @@
+// @flow
+import React, { Component } from 'react';
+import moment from 'moment';
+import styled from 'styled-components';
+import { color } from 'styles/constants';
+import Collection from 'models/Collection';
+import Document from 'models/Document';
+import Flex from 'components/Flex';
+
+const Container = styled(Flex)`
+  color: ${color.slate};
+  font-size: 13px;
+`;
+
+const Modified = styled.span`
+  color: ${props => (props.highlight ? color.slateDark : color.slate)};
+  font-weight: ${props => (props.highlight ? '600' : '400')};
+`;
+
+class PublishingInfo extends Component {
+  props: {
+    collection?: Collection,
+    document: Document,
+    views?: number,
+  };
+
+  render() {
+    const { collection, document } = this.props;
+    const {
+      modifiedSinceViewed,
+      createdAt,
+      updatedAt,
+      createdBy,
+      updatedBy,
+    } = document;
+
+    return (
+      <Container align="center">
+        {createdAt === updatedAt
+          ? <span>
+              {createdBy.name}
+              {' '}
+              published
+              {' '}
+              {moment(createdAt).fromNow()}
+            </span>
+          : <span>
+              {updatedBy.name}
+              <Modified highlight={modifiedSinceViewed}>
+                {' '}
+                modified
+                {' '}
+                {moment(updatedAt).fromNow()}
+              </Modified>
+            </span>}
+        {collection && <span>&nbsp;in <strong>{collection.name}</strong></span>}
+      </Container>
+    );
+  }
+}
+
+export default PublishingInfo;

app/components/DocumentPreview/index.js

@@ -0,0 +1,3 @@
+// @flow
+import DocumentPreview from './DocumentPreview';
+export default DocumentPreview;