#512

app/components/SubmissionHeader.jsx

@@ -17,6 +17,19 @@ const Left = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
 `
+const FlexDiv = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`
+const Progress = styled.span`
+  margin-left: calc(${th('gridUnit')} * 3);
+  font-weight: normal;
+  font-style: italic;
+  color: ${th('colorTextPlaceholder')} &.saved {
+    color: ${th('colorText')};
+  }
+`
 class MailLink extends React.Component {
   state = { show: false }
   render() {
@@ -41,58 +54,85 @@ class MailLink extends React.Component {
   }
 }
 
+let savedTimer
+const addSaved = () => {
+  document.getElementById('progress').classList.add('saved')
+}
+const removeSaved = () => {
+  document.getElementById('progress').classList.remove('saved')
+}
+
 const SubmissionHeader = BaseComponent => ({
   currentUser,
   manuscript,
   children,
+  saved,
   ...props
-}) => (
-  <React.Fragment>
-    <ManuscriptHead>
-      <LeftSide>
-        <Left>
-          {manuscript.id}: <HTMLString string={manuscript.meta.title} />
-        </Left>
-      </LeftSide>
-      <RightSide>
-        <div>
-          {currentUser.admin ? (
-            <React.Fragment>
-              {window.location.pathname ===
-              `/submission/${manuscript.id}/activity` ? (
-                <React.Fragment>
-                  {States.admin[manuscript.status].url !== 'activity' && (
-                    <Link
-                      to={`/submission/${manuscript.id}/${
-                        States.admin[manuscript.status].url
-                      }`}
-                    >
-                      <Icon color="currentColor" size={2.5}>
-                        x-square
-                      </Icon>
-                      Exit activity
-                    </Link>
-                  )}
-                </React.Fragment>
-              ) : (
-                <Link to={`/submission/${manuscript.id}/activity`}>
-                  <Icon color="currentColor" size={2.5}>
-                    check-square
-                  </Icon>
-                  Activity
-                </Link>
-              )}
-            </React.Fragment>
-          ) : (
-            <MailLink currentUser={currentUser} manuscript={manuscript} />
-          )}
-        </div>
-      </RightSide>
-    </ManuscriptHead>
-    <BaseComponent currentUser={currentUser} manuscript={manuscript} {...props}>
-      {children}
-    </BaseComponent>
-  </React.Fragment>
-)
+}) => {
+  if (saved && document.getElementById('progress')) {
+    addSaved()
+  }
+  if (savedTimer) {
+    clearTimeout(savedTimer)
+  }
+  savedTimer = setTimeout(() => {
+    removeSaved()
+  }, 2000)
+  return (
+    <React.Fragment>
+      <ManuscriptHead>
+        <LeftSide>
+          <Left>
+            {manuscript.id}: <HTMLString string={manuscript.meta.title} />
+          </Left>
+        </LeftSide>
+        <RightSide>
+          <FlexDiv>
+            {currentUser.admin ? (
+              <React.Fragment>
+                {window.location.pathname ===
+                `/submission/${manuscript.id}/activity` ? (
+                  <React.Fragment>
+                    {States.admin[manuscript.status].url !== 'activity' && (
+                      <Link
+                        to={`/submission/${manuscript.id}/${
+                          States.admin[manuscript.status].url
+                        }`}
+                      >
+                        <Icon color="currentColor" size={2.5}>
+                          x-square
+                        </Icon>
+                        Exit activity
+                      </Link>
+                    )}
+                  </React.Fragment>
+                ) : (
+                  <Link to={`/submission/${manuscript.id}/activity`}>
+                    <Icon color="currentColor" size={2.5}>
+                      check-square
+                    </Icon>
+                    Activity
+                  </Link>
+                )}
+              </React.Fragment>
+            ) : (
+              <MailLink currentUser={currentUser} manuscript={manuscript} />
+            )}
+            <Progress className="saved" id="progress">
+              Progress saved
+            </Progress>
+          </FlexDiv>
+        </RightSide>
+      </ManuscriptHead>
+      <BaseComponent
+        currentUser={currentUser}
+        manuscript={manuscript}
+        {...props}
+      >
+        {children}
+      </BaseComponent>
+    </React.Fragment>
+  )
+}
 
 export default SubmissionHeader

app/components/SubmissionMutations.jsx

@@ -96,7 +96,7 @@ export const ManuscriptMutations = BaseComponent => ({
 export const NoteMutations = BaseComponent => ({
   manuscriptId,
   children,
-  refetch,
+  refetch = [],
   ...props
 }) => (
   <Mutation mutation={UPDATE_NOTE} refetchQueries={() => refetch}>

app/components/review-wizard/ReviewPage.jsx

@@ -36,6 +36,7 @@ const ReviewPage = ({ match, ...props }) => (
               match={match}
               reload={() => refetch()}
               review={currentReview}
+              saved={new Date()}
               {...props}
             />
           )

app/components/submission-wizard/CreatePage.jsx

@@ -378,6 +378,7 @@ const CreatePage = ({ match, ...props }) => (
         <CreatedWithHeader
           manuscript={data.manuscript}
           match={match}
+          saved={new Date()}
           {...props}
         />
       )

app/components/submission-wizard/SubmitPage.jsx

@@ -10,7 +10,7 @@ import Submit from './Submit'
 const SubmitWithMutations = ManuscriptMutations(Submit)
 const SubmitWithHeader = SubmissionHeader(SubmitWithMutations)
 
-const DupeCheckSubmitPage = ({ manuscript, ...props }) => {
+const DupeCheckSubmitPage = ({ manuscript, saved, ...props }) => {
   const { id, meta } = manuscript
   const { title, articleIds: aids } = meta
   const articleIds = aids ? aids.map(aid => aid.id) : null
@@ -35,6 +35,7 @@ const DupeCheckSubmitPage = ({ manuscript, ...props }) => {
           <SubmitWithHeader
             duplicates={manuscripts}
             manuscript={manuscript}
+            saved={saved}
             {...props}
           />
         )
@@ -62,6 +63,7 @@ const SubmitPage = ({ match, currentUser, ...props }) => (
           <DupeCheckSubmitPage
             currentUser={currentUser}
             manuscript={data.manuscript}
+            saved={new Date()}
             {...props}
           />
         )
@@ -70,6 +72,7 @@ const SubmitPage = ({ match, currentUser, ...props }) => (
         <SubmitWithHeader
           currentUser={currentUser}
           manuscript={data.manuscript}
+          saved={new Date()}
           {...props}
         />
       )