Draft Documents (#518)

* Mostly there

* Fix up specs

* Working scope, updated tests

* Don't record view on draft

* PR feedback

* Highlight drafts nav item

* Bugaboos

* Styling

* Refactoring, gradually addressing Jori feedback

* Show collection in drafts list
Flow fixes

* Ensure menu actions are hidden when draft

app/components/Actions/Actions.js

@@ -7,7 +7,7 @@ import { layout, color } from 'shared/styles/constants';
 export const Action = styled(Flex)`
   justify-content: center;
   align-items: center;
-  padding: 0 0 0 10px;
+  padding: 0 0 0 12px;
 
   a {
     color: ${color.text};

app/components/DocumentList/DocumentList.js

@@ -6,18 +6,25 @@ import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 
 class DocumentList extends React.Component {
   props: {
-    documents: Array<Document>,
+    documents: Document[],
+    showCollection?: boolean,
   };
 
   render() {
+    const { documents, showCollection } = this.props;
+
     return (
       <ArrowKeyNavigation
         mode={ArrowKeyNavigation.mode.VERTICAL}
         defaultActiveChildIndex={0}
       >
-        {this.props.documents &&
-          this.props.documents.map(document => (
-            <DocumentPreview key={document.id} document={document} />
+        {documents &&
+          documents.map(document => (
+            <DocumentPreview
+              key={document.id}
+              document={document}
+              showCollection={showCollection}
+            />
           ))}
       </ArrowKeyNavigation>
     );

app/components/DocumentPreview/DocumentPreview.js

@@ -97,15 +97,16 @@ class DocumentPreview extends Component {
       <DocumentLink to={document.url} innerRef={innerRef} {...rest}>
         <h3>
           <Highlight text={document.title} highlight={highlight} />
-          {document.starred ? (
-            <span onClick={this.unstar}>
-              <StyledStar solid />
-            </span>
-          ) : (
-            <span onClick={this.star}>
-              <StyledStar />
-            </span>
-          )}
+          {document.publishedAt &&
+            (document.starred ? (
+              <span onClick={this.unstar}>
+                <StyledStar solid />
+              </span>
+            ) : (
+              <span onClick={this.star}>
+                <StyledStar />
+              </span>
+            ))}
         </h3>
         <PublishingInfo
           document={document}

app/components/DocumentPreview/components/PublishingInfo.js

@@ -32,22 +32,28 @@ class PublishingInfo extends Component {
       updatedAt,
       createdBy,
       updatedBy,
+      publishedAt,
     } = document;
 
+    const timeAgo = moment(createdAt).fromNow();
+
     return (
       <Container align="center">
-        {createdAt === updatedAt ? (
+        {publishedAt === updatedAt ? (
           <span>
-            {createdBy.name} published {moment(createdAt).fromNow()}
+            {createdBy.name} published {timeAgo}
           </span>
         ) : (
-          <span>
+          <React.Fragment>
             {updatedBy.name}
-            <Modified highlight={modifiedSinceViewed}>
-              {' '}
-              modified {moment(updatedAt).fromNow()}
-            </Modified>
-          </span>
+            {publishedAt ? (
+              <Modified highlight={modifiedSinceViewed}>
+                &nbsp;modified {timeAgo}
+              </Modified>
+            ) : (
+              <span>&nbsp;saved {timeAgo}</span>
+            )}
+          </React.Fragment>
         )}
         {collection && (
           <span>

app/components/Editor/Editor.js

@@ -26,7 +26,7 @@ import { isModKey } from './utils';
 type Props = {
   text: string,
   onChange: Change => *,
-  onSave: (redirect?: boolean) => *,
+  onSave: ({ redirect?: boolean, publish?: boolean }) => *,
   onCancel: () => void,
   onImageUploadStart: () => void,
   onImageUploadStop: () => void,
@@ -125,7 +125,7 @@ class MarkdownEditor extends Component {
 
     ev.preventDefault();
     ev.stopPropagation();
-    this.props.onSave();
+    this.props.onSave({ redirect: false });
   }
 
   @keydown('meta+enter')
@@ -134,7 +134,7 @@ class MarkdownEditor extends Component {
 
     ev.preventDefault();
     ev.stopPropagation();
-    this.props.onSave(true);
+    this.props.onSave({ redirect: true });
   }
 
   @keydown('esc')

app/components/Sidebar/Main.js

@@ -9,6 +9,7 @@ import AccountMenu from 'menus/AccountMenu';
 import Sidebar, { Section } from './Sidebar';
 import Scrollable from 'components/Scrollable';
 import HomeIcon from 'components/Icon/HomeIcon';
+import EditIcon from 'components/Icon/EditIcon';
 import SearchIcon from 'components/Icon/SearchIcon';
 import StarredIcon from 'components/Icon/StarredIcon';
 import Collections from './components/Collections';
@@ -16,12 +17,14 @@ import SidebarLink from './components/SidebarLink';
 import HeaderBlock from './components/HeaderBlock';
 
 import AuthStore from 'stores/AuthStore';
+import DocumentsStore from 'stores/DocumentsStore';
 import UiStore from 'stores/UiStore';
 
 type Props = {
   history: Object,
   location: Location,
   auth: AuthStore,
+  documents: DocumentsStore,
   ui: UiStore,
 };
 
@@ -38,7 +41,7 @@ class MainSidebar extends Component {
   };
 
   render() {
-    const { auth } = this.props;
+    const { auth, documents } = this.props;
     const { user, team } = auth;
     if (!user || !team) return;
 
@@ -65,6 +68,15 @@ class MainSidebar extends Component {
               <SidebarLink to="/starred" icon={<StarredIcon />}>
                 Starred
               </SidebarLink>
+              <SidebarLink
+                to="/drafts"
+                icon={<EditIcon />}
+                active={
+                  documents.active ? !documents.active.publishedAt : undefined
+                }
+              >
+                Drafts
+              </SidebarLink>
             </Section>
             <Section>
               <Collections
@@ -80,4 +92,6 @@ class MainSidebar extends Component {
   }
 }
 
-export default withRouter(inject('user', 'auth', 'ui')(MainSidebar));
+export default withRouter(
+  inject('user', 'documents', 'auth', 'ui')(MainSidebar)
+);

app/components/Sidebar/Sidebar.js

@@ -10,7 +10,9 @@ import { color, layout } from 'shared/styles/constants';
 
 import CloseIcon from 'components/Icon/CloseIcon';
 import MenuIcon from 'components/Icon/MenuIcon';
+
 import AuthStore from 'stores/AuthStore';
+import DocumentsStore from 'stores/DocumentsStore';
 import UiStore from 'stores/UiStore';
 
 type Props = {
@@ -18,6 +20,7 @@ type Props = {
   history: Object,
   location: Location,
   auth: AuthStore,
+  documents: DocumentsStore,
   ui: UiStore,
 };
 

app/components/Sidebar/components/SidebarLink.js

@@ -54,6 +54,7 @@ type Props = {
   expandedContent?: React$Element<*>,
   hideExpandToggle?: boolean,
   iconColor?: string,
+  active?: boolean,
 };
 
 @observer
@@ -89,6 +90,7 @@ class SidebarLink extends Component {
       to,
       expandedContent,
       expand,
+      active,
       hideExpandToggle,
     } = this.props;
     const Component = to ? StyledNavLink : StyledDiv;
@@ -99,6 +101,7 @@ class SidebarLink extends Component {
         <Component
           iconVisible={showExpandIcon}
           activeStyle={activeStyle}
+          style={active ? activeStyle : undefined}
           onClick={onClick}
           to={to}
           exact