Refactored collections store and layout components

frontend/components/Collection/Collection.js

@@ -2,12 +2,9 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
-
-import DocumentLink from './components/DocumentLink';
+import moment from 'moment';
 
 import styles from './Collection.scss';
-// import classNames from 'classnames/bind';
-// const cx = classNames.bind(styles);
 
 @observer class Collection extends React.Component {
   static propTypes = {
@@ -24,7 +21,18 @@ import styles from './Collection.scss';
         </h2>
         {data.recentDocuments.length > 0
           ? data.recentDocuments.map(document => {
-              return <DocumentLink document={document} key={document.id} />;
+              return (
+                <Link
+                  key={document.id}
+                  to={document.url}
+                  className={styles.link}
+                >
+                  <h3 className={styles.title}>{document.title}</h3>
+                  <span className={styles.timestamp}>
+                    {moment(document.updatedAt).fromNow()}
+                  </span>
+                </Link>
+              );
             })
           : <div className={styles.description}>
               No documents. Why not

frontend/components/Collection/Collection.scss

@@ -17,3 +17,25 @@
 .description {
   color: #aaa;
 }
+
+.link {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+
+  margin-bottom: 20px;
+  text-decoration: none;
+}
+
+.title {
+  font-weight: normal;
+  font-size: 15px;
+  color: $textColor;
+
+  margin: 0;
+}
+
+.timestamp {
+  font-size: 13px;
+  color: #ccc;
+}

frontend/components/Editor/plugins.js

@@ -12,13 +12,15 @@ import MarkdownShortcuts from './plugins/MarkdownShortcuts';
 
 const onlyInCode = node => node.type === 'code';
 
+type CreatePluginsOptions = {
+  onImageUploadStart: Function,
+  onImageUploadStop: Function,
+};
+
 const createPlugins = ({
   onImageUploadStart,
   onImageUploadStop,
-}: {
-  onImageUploadStart: Function,
-  onImageUploadStop: Function,
-}) => {
+}: CreatePluginsOptions) => {
   return [
     PasteLinkify({
       type: 'link',

frontend/components/Layout/Layout.js

@@ -6,24 +6,19 @@ import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import _ from 'lodash';
 import keydown from 'react-keydown';
-import classNames from 'classnames/bind';
 import searchIcon from 'assets/icons/search.svg';
 import { Flex } from 'reflexbox';
-import { textColor } from 'styles/constants.scss';
-import styles from './Layout.scss';
+import { textColor, headerHeight } from 'styles/constants.scss';
 
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
 import LoadingIndicator from 'components/LoadingIndicator';
 import UserStore from 'stores/UserStore';
 
-const cx = classNames.bind(styles);
-
 type Props = {
   history: Object,
   children?: ?React.Element<any>,
   actions?: ?React.Element<any>,
   title?: ?React.Element<any>,
-  titleText?: string,
   loading?: boolean,
   user: UserStore,
   search: ?boolean,
@@ -57,11 +52,9 @@ type Props = {
     };
 
     return (
-      <div className={styles.container}>
+      <Container column auto>
         <Helmet
-          title={
-            this.props.titleText ? `${this.props.titleText} - Atlas` : 'Atlas'
-          }
+          title="Atlas"
           meta={[
             {
               name: 'viewport',
@@ -74,16 +67,16 @@ type Props = {
 
         {this.props.notifications}
 
-        <div className={cx(styles.header)}>
-          <div className={styles.headerLeft}>
-            <Link to="/" className={styles.team}>Atlas</Link>
-            <span className={styles.title}>
+        <Header>
+          <Flex align="center">
+            <LogoLink to="/">Atlas</LogoLink>
+            <Title>
               {this.props.title}
-            </span>
-          </div>
-          <Flex className={styles.headerRight}>
+            </Title>
+          </Flex>
+          <Flex>
             <Flex>
-              <Flex align="center" className={styles.actions}>
+              <Flex align="center">
                 {this.props.actions}
               </Flex>
               {user.user &&
@@ -91,9 +84,9 @@ type Props = {
                   {this.props.search &&
                     <Flex>
                       <Link to="/search">
-                        <div className={styles.search} title="Search (/)">
-                          <img src={searchIcon} alt="Search" />
-                        </div>
+                        <Search title="Search (/)">
+                          <SearchIcon src={searchIcon} alt="Search" />
+                        </Search>
                       </Link>
                     </Flex>}
                   <DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
@@ -113,16 +106,67 @@ type Props = {
                 </Flex>}
             </Flex>
           </Flex>
-        </div>
+        </Header>
 
-        <div className={cx(styles.content)}>
+        <Content auto justify="center">
           {this.props.children}
-        </div>
-      </div>
+        </Content>
+      </Container>
     );
   }
 }
 
+const Container = styled(Flex)`
+  width: 100%;
+  height: 100%;
+`;
+
+const Header = styled(Flex)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 0 20px;
+
+  z-index: 1;
+  background: #fff;
+  height: ${headerHeight};
+  border-bottom: 1px solid #eee;
+
+  font-size: 14px;
+  line-height: 1;
+`;
+
+const LogoLink = styled(Link)`
+  font-family: 'Atlas Grotesk';
+  font-weight: bold;
+  color: ${textColor};
+  text-decoration: none;
+  font-size: 16px;
+`;
+
+const Title = styled.span`
+  color: #ccc;
+
+  a {
+    color: #ccc;
+  }
+
+  a:hover {
+    color: $textColor;
+  }
+`;
+
+const Search = styled(Flex)`
+  margin: 0 5px;
+  padding: 15px 5px 0 5px;
+  cursor: pointer;
+`;
+
+const SearchIcon = styled.img`
+  height: 20px;
+`;
+
 const Avatar = styled.img`
   width: 24px;
   height: 24px;
@@ -133,4 +177,9 @@ const MenuLink = styled(Link)`
   color: ${textColor};
 `;
 
+const Content = styled(Flex)`
+  height: 100%;
+  overflow: scroll;
+`;
+
 export default withRouter(inject('user')(Layout));

frontend/components/Layout/Layout.scss

@@ -1,72 +0,0 @@
-@import '~styles/constants.scss';
-
-.container {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-
-  width: 100%;
-  height: 100%;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  padding: 0 20px;
-
-  z-index: 1;
-  background: #fff;
-  height: $headerHeight;
-  border-bottom: 1px solid #eee;
-
-  font-size: 14px;
-  line-height: 1;
-}
-
-.headerLeft {
-  display: flex;
-  align-items: center;
-
-  .team {
-    font-family: 'Atlas Grotesk';
-    font-weight: bold;
-    color: $textColor;
-    text-decoration: none;
-    font-size: 16px;
-  }
-
-  .title {
-    color: #ccc;
-
-    a {
-      color: #ccc;
-    }
-
-    a:hover {
-      color: $textColor;
-    }
-  }
-}
-
-.headerRight {
-}
-
-.search {
-  margin: 0 5px;
-  padding: 15px 5px 0 5px;
-  cursor: pointer;
-
-  img {
-    height: 20px;
-  }
-}
-
-.content {
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  height: 100%;
-  overflow: scroll;
-}

frontend/components/PageTitle/PageTitle.js

@@ -0,0 +1,11 @@
+// @flow
+import React from 'react';
+import Helmet from 'react-helmet';
+
+type Props = {
+  title: string,
+};
+
+const PageTitle = ({ title }: Props) => <Helmet title={`${title} - Atlas`} />;
+
+export default PageTitle;

frontend/components/PageTitle/index.js

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