Merge branch 'faraday-master' of gitlab.coko.foundation:xpub/xpub into faraday-master

.gitignore

@@ -9,4 +9,5 @@ logs/*
 log.txt
 config.json
 packages/**/_build
-packages/**/api/**/
+packages/**/api/**/
\ No newline at end of file
+.vscode
\ No newline at end of file

packages/component-wizard/README.md

+Component based on `redux-form`.
+
+Submit form through a wizard (applicable for `Submit Manuscript` flow) using a configuration file.
+
+Configuration file must be under config `journal` (make use of `withJournal`) and exported with `wizard` key.
+
+`/xpub-collabra/app/config/journal/wizard.js` (see below file example)
+
+
+### `Wizard.js` options
+|Key|Description|Required|Default|Type|
+| :---: | :---: | :---: | :---: | :---: |
+| showProgress | Show progress bar | true | false | `bool` |
+| submitText | Text to show on Submit button  | false | 'Submit Manuscript' | `string` |
+| backText | Text to show on Back button - Go back 1 step | false | 'Back' | `string` |
+| nextText | Text to show on Back button - Go forward 1 step | false | 'Next' | `string` |
+| cancelText | Text to show on Cancel button - Go to `/`  | false | 'Back' | `string` |
+| submissionRedirect | Path to redirect user after submitting the form. Passes as state `project` as project.id and `version` as version.id | false | `/` | `string` |
+| confirmationModal | If present, component will be rendered as a modal before submitting the form. Accepts `toggleConfirming` to close the modal and must have 2 buttons for submit and close modal (see below)  | false | none | `React Component` |
+| formSectionKeys | Redux form data model. Keys to be saved on the form. | true | [] | `array` |
+| dispatchFunctions | Functions to be dispatched in case a component needs a dispatched function (f.i. `uploadFile`) | true | none | `array` |
+| steps | Each object in steps array represents a step in the form. In case of one-page form, just 1 step is needed. | true | none | `array` of `object` |
+
+
+#### `Steps` options
+|Key|Description|Required|Default|Type|
+| :---: | :---: | :---: | :---: | :---: |
+| label | Text on progress bar | false | '' | `string` |
+| title | Text as title of the step | false | '' | `string` |
+| subtitle | Text as info of the step | false | '' | `string` or `HTML` |
+| children | Fields/Components to be rendered per each step  | true | none | `array` of `object` |
+
+
+#### `Steps children` options
+|Key|Description|Required|Default|Type|
+| :---: | :---: | :---: | :---: | :---: |
+| fieldId | Path to the `redux-form` (f.i. for title in metadata use `metadata.title` ) | true | none | `string` |
+| renderComponent | React Component to be rendered. Usually, a PubSweetUI component or custom component  | true | none | `React Component` |
+| validate | Array of custom validation per each field | false | none | `array` |
+| `<props>` | Other props to be passed for that specific component | false | none | `label` `options` `placeholder` `title` `parse` `format` |
+
+
+
+#### ConfirmationModal.js
+```js
+const ConfirmationModal = ({ toggleConfirming }) => (
+  <div>
+    <p>Explanatory text here</p>
+      <Button primary type="submit"> Submit your manuscript</Button>
+      <Button onClick={toggleConfirming}> get back to your submission (close modal)</Button>
+  </div>
+)
+```
+
+
+#### Example of `Wizard.js` for one-page form
+```js
+export default {
+  showProgress: false,
+  submitText: 'Submit your manuscript',
+  backText: 'Back',
+  cancelText: 'Cancel',
+  nextText: 'Next',
+  formSectionKeys: [
+    'metadata',
+    'files',
+  ],
+  submissionRedirect: '/',
+  confirmationModal: ConfirmModal,
+  dispatchFunctions: [uploadFile],
+  steps: [
+    {
+      label: 'Submission information',
+      title: 'Submission information',
+      subtitle: `We have ingested your manuscript. To access your manuscript in an editor, please view manuscript page.
+        <br/> To complete your submission, please answer the following questions. <br/>
+        The answers will be automatically saved.`,
+      children: [
+        {
+          fieldId: 'metadata.title',
+          renderComponent: TitleEditor,
+          placeholder: 'Title',
+          title: 'Title',
+          validate: [required, minChars20, maxChars500],
+        },
+        {
+          fieldId: 'metadata.abstract',
+          renderComponent: AbstractEditor,
+          title: 'Abstract',
+          placeholder: 'Write an abstract',
+          validate: [required, minChars100, maxChars5000],
+        },
+        {
+          fieldId: 'label-authors',
+          renderComponent: Label,
+          label: 'Authors',
+        },
+        {
+          fieldId: 'metadata.authors',
+          renderComponent: TextField,
+          title: 'Authors',
+          placeholder: 'Enter author names...',
+          format: join(),
+          parse: split(),
+          validate: [minSize1],
+        },
+        {
+          fieldId: 'files.supplementary',
+          label: 'Upload supplementary materials',
+          renderComponent: Supplementary,
+        },
+      ],
+    },
+  ],
+}
+```
\ No newline at end of file

packages/component-wizard/package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "dependencies": {
     "@pubsweet/ui": "^0.1.1",
+    "moment": "^2.20.1",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dnd": "^2.5.4",

packages/component-wizard/src/components/AutosaveIndicator.js

+import React from 'react'
+import moment from 'moment'
+import classnames from 'classnames'
+import { compose, withProps } from 'recompose'
+import { Icon } from '@pubsweet/ui'
+
+import classes from './AutosaveIndicator.local.scss'
+
+const durationParser = lastUpdate => {
+  const today = moment()
+  const last = moment(lastUpdate)
+  const duration = moment.duration(today.diff(last))
+  return `Last saved: ${duration.humanize()} ago.`
+}
+
+const Indicator = ({ isVisibile, isFetching, error, lastUpdate }) =>
+  isVisibile ? (
+    <div className={classnames(classes.container)}>
+      {isFetching && (
+        <div className={classnames(classes['icon-container'])}>
+          <div className={classnames(classes.rotate, classes.icon)}>
+            <Icon size={16}>refresh-cw</Icon>
+          </div>
+          <span>Saving changes...</span>
+        </div>
+      )}
+
+      {!isFetching && lastUpdate && <span>{durationParser(lastUpdate)}</span>}
+      {!isFetching &&
+        error && (
+          <div className={classnames(classes['icon-container'])}>
+            <div className={classnames(classes.icon)}>
+              <Icon color="red" size={16}>
+                slash
+              </Icon>
+            </div>
+            <span className={classnames(classes['error-text'])}>{error}</span>
+          </div>
+        )}
+    </div>
+  ) : null
+
+export default compose(
+  withProps(({ isFetching, lastUpdate, error }) => ({
+    isVisibile: Boolean(isFetching || lastUpdate || error),
+  })),
+)(Indicator)

packages/component-wizard/src/components/AutosaveIndicator.local.scss

+.container {
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 5px;
+}
+
+@keyframes rotating {
+  from {
+    -o-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  to {
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes rotating {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.rotate {
+  -webkit-animation: rotating 1.2s linear infinite;
+  -moz-animation: rotating 1.2s linear infinite;
+  -ms-animation: rotating 1.2s linear infinite;
+  -o-animation: rotating 1.2s linear infinite;
+  animation: rotating 1.2s linear infinite;
+}
+
+.icon-container {
+  align-items: center;
+  display: flex;
+  padding: 5px;
+
+  .icon {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin: 0 10px 0 0;
+  }
+}
+
+.error-text {
+  color: red;
+  font-size: 14px;
+  font-weight: 400;
+}

packages/component-wizard/src/components/WizardFormStep.js

@@ -7,18 +7,26 @@ import { reduxForm, formValueSelector, SubmissionError } from 'redux-form'
 
 import WizardStep from './WizardStep'
 
+import {
+  getAutosave,
+  autosaveRequest,
+  autosaveFailure,
+  autosaveSuccess,
+} from '../redux/autosave'
+
 const wizardSelector = formValueSelector('wizard')
 
 const onChange = (
   values,
   dispatch,
-  { project, version, wizard: { formSectionKeys } },
+  { project, version, wizard: { formSectionKeys }, setLoader },
   prevValues,
 ) => {
   const prev = pick(prevValues, formSectionKeys)
   const newValues = pick(values, formSectionKeys)
-  // TODO: fix it if this sucks down the road
+  // TODO: fix this if it sucks down the road
   if (!isEqual(prev, newValues)) {
+    dispatch(autosaveRequest())
     dispatch(
       actions.updateFragment(project, {
         id: version.id,
@@ -26,10 +34,19 @@ const onChange = (
         ...newValues,
       }),
     )
+      .then(({ receivedAt }) => dispatch(autosaveSuccess(receivedAt)))
+      .catch(() => dispatch(autosaveFailure()))
   }
 }
 
-const submitManuscript = (values, dispatch, project, version, history) => {
+const submitManuscript = (
+  values,
+  dispatch,
+  project,
+  version,
+  history,
+  redirectPath = '/',
+) => {
   dispatch(
     actions.updateFragment(project, {
       id: version.id,
@@ -48,7 +65,7 @@ const submitManuscript = (values, dispatch, project, version, history) => {
       ),
     )
     .then(() => {
-      history.push('/')
+      history.push(redirectPath, { project: project.id, version: version.id })
     })
     .catch(error => {
       if (error.validationErrors) {
@@ -60,12 +77,32 @@ const submitManuscript = (values, dispatch, project, version, history) => {
 const onSubmit = (
   values,
   dispatch,
-  { nextStep, isFinal, history, project, version, ...rest },
+  {
+    nextStep,
+    isFinal,
+    history,
+    project,
+    version,
+    confirmation,
+    wizard: { confirmationModal, submissionRedirect, formSectionKeys },
+    toggleConfirmation,
+    ...rest
+  },
 ) => {
   if (!isFinal) {
     nextStep()
+  } else if (confirmationModal && !confirmation) {
+    toggleConfirmation()
   } else {
-    submitManuscript(values, dispatch, project, version, history)
+    const newValues = pick(values, formSectionKeys)
+    submitManuscript(
+      newValues,
+      dispatch,
+      project,
+      version,
+      history,
+      submissionRedirect,
+    )
   }
 }
 
@@ -78,6 +115,8 @@ export default compose(
     version: PropTypes.object,
     wizard: PropTypes.object,
     dispatchFns: PropTypes.object,
+    confirmation: PropTypes.bool,
+    toggleConfirmation: PropTypes.func,
   }),
   withProps(({ version, wizard }) => ({
     initialValues: pick(version, wizard.formSectionKeys),
@@ -85,6 +124,7 @@ export default compose(
   })),
   connect((state, { wizard: { formSectionKeys } }) => ({
     formValues: wizardSelector(state, ...formSectionKeys),
+    autosave: getAutosave(state),
   })),
   reduxForm({
     form: 'wizard',

packages/component-wizard/src/components/WizardPage.js

@@ -33,6 +33,7 @@ export default compose(
     }),
   ),
   withState('step', 'changeStep', 0),
+  withState('confirmation', 'setConfirmation', false),
   withHandlers({
     getSteps: ({ journal: { wizard: { steps } } }) => () =>
       steps.map(w => w.label),
@@ -41,6 +42,8 @@ export default compose(
     },
     prevStep: ({ changeStep }) => () =>
       changeStep(step => (step <= 0 ? step : step - 1)),
+    toggleConfirmation: ({ setConfirmation }) => () =>
+      setConfirmation(confirmation => !confirmation),
   }),
   withContext(
     {
@@ -51,6 +54,8 @@ export default compose(
       version: PropTypes.object,
       wizard: PropTypes.object,
       dispatchFns: PropTypes.object,
+      confirmation: PropTypes.bool,
+      toggleConfirmation: PropTypes.func,
     },
     ({
       history,
@@ -59,6 +64,8 @@ export default compose(
       version,
       journal: { wizard },
       dispatchFns,
+      confirmation,
+      toggleConfirmation,
     }) => ({
       history,
       isFinal: step === wizard.steps.length - 1,
@@ -67,6 +74,8 @@ export default compose(
       version,
       wizard,
       dispatchFns,
+      confirmation,
+      toggleConfirmation,
     }),
   ),
 )(Wizard)

packages/component-wizard/src/components/WizardStep.js

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 import { ValidatedField, Button } from '@pubsweet/ui'
 
 import classes from './WizardStep.local.scss'
+import AutosaveIndicator from './AutosaveIndicator'
 
 export default ({
   children: stepChildren,
@@ -19,6 +20,10 @@ export default ({
   formValues,
   wizard,
   dispatchFns,
+  autosave,
+  confirmation,
+  toggleConfirmation,
+  wizard: { confirmationModal: ConfirmationModal },
   ...rest
 }) => (
   <div className={classnames(classes.step)}>
@@ -73,6 +78,12 @@ export default ({
             : `${wizard.nextText || 'Next'}`}
         </Button>
       </div>
+      {confirmation && (
+        <div className={classnames(classes.modal)}>
+          <ConfirmationModal toggleConfirming={toggleConfirmation} />
+        </div>
+      )}
     </form>
+    <AutosaveIndicator {...autosave} />
   </div>
 )

packages/component-wizard/src/components/WizardStep.local.scss

@@ -30,3 +30,15 @@
   margin: 15px 0;
   width: 400px;
 }
+
+.modal {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.95);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}

packages/component-wizard/src/components/countries.js

-export default [
-  {
-    value: 'AF',
-    label: 'Afghanistan',
-  },
-  {
-    value: 'AX',
-    label: 'Åland Islands',
-  },
-  {
-    value: 'AL',
-    label: 'Albania',
-  },
-  {
-    value: 'DZ',
-    label: 'Algeria',
-  },
-  {
-    value: 'AS',
-    label: 'American Samoa',
-  },
-  {
-    value: 'AD',
-    label: 'Andorra',
-  },
-  {
-    value: 'AO',
-    label: 'Angola',
-  },
-  {
-    value: 'AI',
-    label: 'Anguilla',
-  },
-  {
-    value: 'AQ',
-    label: 'Antarctica',
-  },
-  {
-    value: 'AG',
-    label: 'Antigua and Barbuda',
-  },
-  {
-    value: 'AR',
-    label: 'Argentina',
-  },
-  {
-    value: 'AM',
-    label: 'Armenia',
-  },
-  {
-    value: 'AW',
-    label: 'Aruba',
-  },
-  {
-    value: 'AU',
-    label: 'Australia',
-  },
-  {
-    value: 'AT',
-    label: 'Austria',
-  },
-  {
-    value: 'AZ',
-    label: 'Azerbaijan',
-  },
-  {
-    value: 'BS',
-    label: 'Bahamas',
-  },
-  {
-    value: 'BH',
-    label: 'Bahrain',
-  },
-  {
-    value: 'BD',
-    label: 'Bangladesh',
-  },
-  {
-    value: 'BB',
-    label: 'Barbados',
-  },
-  {
-    value: 'BY',
-    label: 'Belarus',
-  },
-  {
-    value: 'BE',
-    label: 'Belgium',
-  },
-  {
-    value: 'BZ',
-    label: 'Belize',
-  },
-  {
-    value: 'BJ',
-    label: 'Benin',
-  },
-  {
-    value: 'BM',
-    label: 'Bermuda',
-  },
-  {
-    value: 'BT',
-    label: 'Bhutan',
-  },
-  {
-    value: 'BO',
-    label: 'Bolivia, Plurinational State of',
-  },
-  {
-    value: 'BQ',
-    label: 'Bonaire, Sint Eustatius and Saba',
-  },
-  {
-    value: 'BA',
-    label: 'Bosnia and Herzegovina',
-  },
-  {
-    value: 'BW',
-    label: 'Botswana',
-  },
-  {
-    value: 'BV',
-    label: 'Bouvet Island',
-  },
-  {
-    value: 'BR',
-    label: 'Brazil',
-  },
-  {
-    value: 'IO',
-    label: 'British Indian Ocean Territory',
-  },
-  {
-    value: 'BN',
-    label: 'Brunei Darussalam',
-  },
-  {
-    value: 'BG',
-    label: 'Bulgaria',
-  },
-  {
-    value: 'BF',
-    label: 'Burkina Faso',
-  },
-  {
-    value: 'BI',
-    label: 'Burundi',
-  },
-  {
-    value: 'KH',
-    label: 'Cambodia',
-  },
-  {
-    value: 'CM',
-    label: 'Cameroon',
-  },
-  {
-    value: 'CA',
-    label: 'Canada',
-  },
-  {
-    value: 'CV',
-    label: 'Cape Verde',
-  },
-  {
-    value: 'KY',
-    label: 'Cayman Islands',
-  },
-  {
-    value: 'CF',
-    label: 'Central African Republic',
-  },
-  {
-    value: 'TD',
-    label: 'Chad',
-  },
-  {
-    value: 'CL',
-    label: 'Chile',
-  },
-  {
-    value: 'CN',
-    label: 'China',
-  },
-  {
-    value: 'CX',
-    label: 'Christmas Island',
-  },
-  {
-    value: 'CC',
-    label: 'Cocos (Keeling) Islands',
-  },
-  {
-    value: 'CO',
-    label: 'Colombia',
-  },
-  {
-    value: 'KM',
-    label: 'Comoros',
-  },
-  {
-    value: 'CG',
-    label: 'Congo',
-  },
-  {
-    value: 'CD',
-    label: 'Congo, the Democratic Republic of the',
-  },
-  {
-    value: 'CK',
-    label: 'Cook Islands',
-  },
-  {
-    value: 'CR',
-    label: 'Costa Rica',
-  },
-  {
-    value: 'CI',
-    label: "Côte d'Ivoire",
-  },
-  {
-    value: 'HR',
-    label: 'Croatia',
-  },
-  {
-    value: 'CU',
-    label: 'Cuba',
-  },
-  {
-    value: 'CW',
-    label: 'Curaçao',
-  },
-  {
-    value: 'CY',
-    label: 'Cyprus',
-  },
-  {
-    value: 'CZ',
-    label: 'Czech Republic',
-  },
-  {
-    value: 'DK',
-    label: 'Denmark',
-  },
-  {
-    value: 'DJ',
-    label: 'Djibouti',
-  },
-  {
-    value: 'DM',
-    label: 'Dominica',
-  },
-  {
-    value: 'DO',
-    label: 'Dominican Republic',
-  },
-  {
-    value: 'EC',
-    label: 'Ecuador',
-  },
-  {
-    value: 'EG',
-    label: 'Egypt',
-  },
-  {
-    value: 'SV',
-    label: 'El Salvador',
-  },
-  {
-    value: 'GQ',
-    label: 'Equatorial Guinea',
-  },
-  {
-    value: 'ER',
-    label: 'Eritrea',
-  },
-  {
-    value: 'EE',
-    label: 'Estonia',
-  },
-  {
-    value: 'ET',
-    label: 'Ethiopia',
-  },
-  {
-    value: 'FK',
-    label: 'Falkland Islands (Malvinas)',
-  },
-  {
-    value: 'FO',
-    label: 'Faroe Islands',
-  },
-  {
-    value: 'FJ',
-    label: 'Fiji',
-  },
-  {
-    value: 'FI',
-    label: 'Finland',
-  },
-  {
-    value: 'FR',
-    label: 'France',
-  },
-  {
-    value: 'GF',
-    label: 'French Guiana',
-  },
-  {
-    value: 'PF',
-    label: 'French Polynesia',
-  },
-  {
-    value: 'TF',
-    label: 'French Southern Territories',
-  },
-  {
-    value: 'GA',
-    label: 'Gabon',
-  },
-  {
-    value: 'GM',
-    label: 'Gambia',
-  },
-  {
-    value: 'GE',
-    label: 'Georgia',
-  },
-  {
-    value: 'DE',
-    label: 'Germany',
-  },
-  {
-    value: 'GH',
-    label: 'Ghana',
-  },
-  {
-    value: 'GI',
-    label: 'Gibraltar',
-  },
-  {
-    value: 'GR',
-    label: 'Greece',
-  },
-  {
-    value: 'GL',
-    label: 'Greenland',
-  },
-  {
-    value: 'GD',
-    label: 'Grenada',
-  },
-  {
-    value: 'GP',
-    label: 'Guadeloupe',
-  },
-  {
-    value: 'GU',
-    label: 'Guam',
-  },
-  {
-    value: 'GT',
-    label: 'Guatemala',
-  },
-  {
-    value: 'GG',
-    label: 'Guernsey',
-  },
-  {
-    value: 'GN',
-    label: 'Guinea',
-  },
-  {
-    value: 'GW',
-    label: 'Guinea-Bissau',
-  },
-  {
-    value: 'GY',
-    label: 'Guyana',
-  },
-  {
-    value: 'HT',
-    label: 'Haiti',
-  },
-  {
-    value: 'HM',
-    label: 'Heard Island and McDonald Islands',
-  },
-  {
-    value: 'VA',
-    label: 'Holy See (Vatican City State)',
-  },
-  {
-    value: 'HN',
-    label: 'Honduras',
-  },
-  {
-    value: 'HK',
-    label: 'Hong Kong',
-  },
-  {
-    value: 'HU',
-    label: 'Hungary',
-  },
-  {
-    value: 'IS',
-    label: 'Iceland',
-  },
-  {
-    value: 'IN',
-    label: 'India',
-  },
-  {
-    value: 'ID',
-    label: 'Indonesia',
-  },
-  {
-    value: 'IR',
-    label: 'Iran, Islamic Republic of',
-  },
-  {
-    value: 'IQ',
-    label: 'Iraq',
-  },
-  {
-    value: 'IE',
-    label: 'Ireland',
-  },
-  {
-    value: 'IM',
-    label: 'Isle of Man',
-  },
-  {
-    value: 'IL',
-    label: 'Israel',
-  },
-  {
-    value: 'IT',
-    label: 'Italy',
-  },
-  {
-    value: 'JM',
-    label: 'Jamaica',
-  },
-  {
-    value: 'JP',
-    label: 'Japan',
-  },
-  {
-    value: 'JE',
-    label: 'Jersey',
-  },
-  {
-    value: 'JO',
-    label: 'Jordan',
-  },
-  {
-    value: 'KZ',
-    label: 'Kazakhstan',
-  },
-  {
-    value: 'KE',
-    label: 'Kenya',
-  },
-  {
-    value: 'KI',
-    label: 'Kiribati',
-  },
-  {
-    value: 'KP',
-    label: "Korea, Democratic People's Republic of",
-  },
-  {
-    value: 'KR',
-    label: 'Korea, Republic of',
-  },
-  {
-    value: 'KW',
-    label: 'Kuwait',
-  },
-  {
-    value: 'KG',
-    label: 'Kyrgyzstan',
-  },
-  {
-    value: 'LA',
-    label: "Lao People's Democratic Republic",
-  },
-  {
-    value: 'LV',
-    label: 'Latvia',
-  },
-  {
-    value: 'LB',
-    label: 'Lebanon',
-  },
-  {
-    value: 'LS',
-    label: 'Lesotho',
-  },
-  {
-    value: 'LR',
-    label: 'Liberia',
-  },
-  {
-    value: 'LY',
-    label: 'Libya',
-  },
-  {
-    value: 'LI',
-    label: 'Liechtenstein',
-  },
-  {
-    value: 'LT',
-    label: 'Lithuania',
-  },
-  {
-    value: 'LU',
-    label: 'Luxembourg',
-  },
-  {
-    value: 'MO',
-    label: 'Macao',
-  },
-  {
-    value: 'MK',
-    label: 'Macedonia, the Former Yugoslav Republic of',
-  },
-  {
-    value: 'MG',
-    label: 'Madagascar',
-  },
-  {
-    value: 'MW',
-    label: 'Malawi',
-  },
-  {
-    value: 'MY',
-    label: 'Malaysia',
-  },
-  {
-    value: 'MV',
-    label: 'Maldives',
-  },
-  {
-    value: 'ML',
-    label: 'Mali',
-  },
-  {
-    value: 'MT',
-    label: 'Malta',
-  },
-  {
-    value: 'MH',
-    label: 'Marshall Islands',
-  },
-  {
-    value: 'MQ',
-    label: 'Martinique',
-  },
-  {
-    value: 'MR',
-    label: 'Mauritania',
-  },
-  {
-    value: 'MU',
-    label: 'Mauritius',
-  },
-  {
-    value: 'YT',
-    label: 'Mayotte',
-  },
-  {
-    value: 'MX',
-    label: 'Mexico',
-  },
-  {
-    value: 'FM',
-    label: 'Micronesia, Federated States of',
-  },
-  {
-    value: 'MD',
-    label: 'Moldova, Republic of',
-  },
-  {
-    value: 'MC',
-    label: 'Monaco',
-  },
-  {
-    value: 'MN',
-    label: 'Mongolia',
-  },
-  {
-    value: 'ME',
-    label: 'Montenegro',
-  },
-  {
-    value: 'MS',
-    label: 'Montserrat',
-  },
-  {
-    value: 'MA',
-    label: 'Morocco',
-  },
-  {
-    value: 'MZ',
-    label: 'Mozambique',
-  },
-  {
-    value: 'MM',
-    label: 'Myanmar',
-  },
-  {
-    value: 'NA',
-    label: 'Namibia',
-  },
-  {
-    value: 'NR',
-    label: 'Nauru',
-  },
-  {
-    value: 'NP',
-    label: 'Nepal',
-  },
-  {
-    value: 'NL',
-    label: 'Netherlands',
-  },
-  {
-    value: 'NC',
-    label: 'New Caledonia',
-  },
-  {
-    value: 'NZ',
-    label: 'New Zealand',
-  },
-  {
-    value: 'NI',
-    label: 'Nicaragua',
-  },
-  {
-    value: 'NE',
-    label: 'Niger',
-  },
-  {
-    value: 'NG',
-    label: 'Nigeria',
-  },
-  {
-    value: 'NU',
-    label: 'Niue',
-  },
-  {
-    value: 'NF',
-    label: 'Norfolk Island',
-  },
-  {
-    value: 'MP',
-    label: 'Northern Mariana Islands',
-  },
-  {
-    value: 'NO',
-    label: 'Norway',
-  },
-  {
-    value: 'OM',
-    label: 'Oman',
-  },
-  {
-    value: 'PK',
-    label: 'Pakistan',
-  },
-  {
-    value: 'PW',
-    label: 'Palau',
-  },
-  {
-    value: 'PS',
-    label: 'Palestine, State of',
-  },
-  {
-    value: 'PA',
-    label: 'Panama',
-  },
-  {
-    value: 'PG',
-    label: 'Papua New Guinea',
-  },
-  {
-    value: 'PY',
-    label: 'Paraguay',
-  },
-  {
-    value: 'PE',
-    label: 'Peru',
-  },
-  {
-    value: 'PH',
-    label: 'Philippines',
-  },
-  {
-    value: 'PN',
-    label: 'Pitcairn',
-  },
-  {
-    value: 'PL',
-    label: 'Poland',
-  },
-  {
-    value: 'PT',
-    label: 'Portugal',
-  },
-  {
-    value: 'PR',
-    label: 'Puerto Rico',
-  },
-  {
-    value: 'QA',
-    label: 'Qatar',
-  },
-  {
-    value: 'RE',
-    label: 'Réunion',
-  },
-  {
-    value: 'RO',
-    label: 'Romania',
-  },
-  {
-    value: 'RU',
-    label: 'Russian Federation',
-  },
-  {
-    value: 'RW',
-    label: 'Rwanda',
-  },
-  {
-    value: 'BL',
-    label: 'Saint Barthélemy',
-  },
-  {
-    value: 'SH',
-    label: 'Saint Helena, Ascension and Tristan da Cunha',
-  },
-  {
-    value: 'KN',
-    label: 'Saint Kitts and Nevis',
-  },
-  {
-    value: 'LC',
-    label: 'Saint Lucia',
-  },
-  {
-    value: 'MF',
-    label: 'Saint Martin (French part)',
-  },
-  {
-    value: 'PM',
-    label: 'Saint Pierre and Miquelon',
-  },
-  {
-    value: 'VC',
-    label: 'Saint Vincent and the Grenadines',
-  },
-  {
-    value: 'WS',
-    label: 'Samoa',
-  },
-  {
-    value: 'SM',
-    label: 'San Marino',
-  },
-  {
-    value: 'ST',
-    label: 'Sao Tome and Principe',
-  },
-  {
-    value: 'SA',
-    label: 'Saudi Arabia',
-  },
-  {
-    value: 'SN',
-    label: 'Senegal',
-  },
-  {
-    value: 'RS',
-    label: 'Serbia',
-  },
-  {
-    value: 'SC',
-    label: 'Seychelles',
-  },
-  {
-    value: 'SL',
-    label: 'Sierra Leone',
-  },
-  {
-    value: 'SG',
-    label: 'Singapore',
-  },
-  {
-    value: 'SX',
-    label: 'Sint Maarten (Dutch part)',
-  },
-  {
-    value: 'SK',
-    label: 'Slovakia',
-  },
-  {
-    value: 'SI',
-    label: 'Slovenia',
-  },
-  {
-    value: 'SB',
-    label: 'Solomon Islands',
-  },
-  {
-    value: 'SO',
-    label: 'Somalia',
-  },
-  {
-    value: 'ZA',
-    label: 'South Africa',
-  },
-  {
-    value: 'GS',
-    label: 'South Georgia and the South Sandwich Islands',
-  },
-  {
-    value: 'SS',
-    label: 'South Sudan',
-  },
-  {
-    value: 'ES',
-    label: 'Spain',
-  },
-  {
-    value: 'LK',
-    label: 'Sri Lanka',
-  },
-  {
-    value: 'SD',
-    label: 'Sudan',
-  },
-  {
-    value: 'SR',
-    label: 'Surilabel',
-  },
-  {
-    value: 'SJ',
-    label: 'Svalbard and Jan Mayen',
-  },
-  {
-    value: 'SZ',
-    label: 'Swaziland',
-  },
-  {
-    value: 'SE',
-    label: 'Sweden',
-  },
-  {
-    value: 'CH',
-    label: 'Switzerland',
-  },
-  {
-    value: 'SY',
-    label: 'Syrian Arab Republic',
-  },
-  {
-    value: 'TW',
-    label: 'Taiwan, Province of China',
-  },
-  {
-    value: 'TJ',
-    label: 'Tajikistan',
-  },
-  {
-    value: 'TZ',
-    label: 'Tanzania, United Republic of',
-  },
-  {
-    value: 'TH',
-    label: 'Thailand',
-  },
-  {
-    value: 'TL',
-    label: 'Timor-Leste',
-  },
-  {
-    value: 'TG',
-    label: 'Togo',
-  },
-  {
-    value: 'TK',
-    label: 'Tokelau',
-  },
-  {
-    value: 'TO',
-    label: 'Tonga',
-  },
-  {
-    value: 'TT',
-    label: 'Trinidad and Tobago',
-  },
-  {
-    value: 'TN',
-    label: 'Tunisia',
-  },
-  {
-    value: 'TR',
-    label: 'Turkey',
-  },
-  {
-    value: 'TM',
-    label: 'Turkmenistan',
-  },
-  {
-    value: 'TC',
-    label: 'Turks and Caicos Islands',
-  },
-  {
-    value: 'TV',
-    label: 'Tuvalu',
-  },
-  {
-    value: 'UG',
-    label: 'Uganda',
-  },
-  {
-    value: 'UA',
-    label: 'Ukraine',
-  },
-  {
-    value: 'AE',
-    label: 'United Arab Emirates',
-  },
-  {
-    value: 'UK',
-    label: 'United Kingdom',
-  },
-  {
-    value: 'US',
-    label: 'United States',
-  },
-  {
-    value: 'UM',
-    label: 'United States Minor Outlying Islands',
-  },
-  {
-    value: 'UY',
-    label: 'Uruguay',
-  },
-  {
-    value: 'UZ',
-    label: 'Uzbekistan',
-  },
-  {
-    value: 'VU',
-    label: 'Vanuatu',
-  },
-  {
-    value: 'VE',
-    label: 'Venezuela, Bolivarian Republic of',
-  },
-  {
-    value: 'VN',
-    label: 'Viet Nam',
-  },
-  {
-    value: 'VG',
-    label: 'Virgin Islands, British',
-  },
-  {
-    value: 'VI',
-    label: 'Virgin Islands, U.S.',
-  },
-  {
-    value: 'WF',
-    label: 'Wallis and Futuna',
-  },
-  {
-    value: 'EH',
-    label: 'Western Sahara',
-  },
-  {
-    value: 'YE',
-    label: 'Yemen',
-  },
-  {
-    value: 'ZM',
-    label: 'Zambia',
-  },
-  {
-    value: 'ZW',
-    label: 'Zimbabwe',
-  },
-]

packages/component-wizard/src/components/index.js

 export { default as Wizard } from './Wizard'
 export { default as Progress } from './Progress'
-export { default as Dropdown } from './Dropdown'
 export { default as WizardPage } from './WizardPage'
 export { default as WizardStep } from './WizardStep'
-export { default as SortableList } from './SortableList'
 export { default as WizardFormStep } from './WizardFormStep'
+export { default as AutosaveIndicator } from './AutosaveIndicator'

packages/component-wizard/src/index.js

@@ -3,7 +3,7 @@ module.exports = {
     components: [() => require('./components')],
     reducers: {
       wizardConversion: () => require('./redux/conversion').default,
-      authors: () => require('./redux/authors').default,
+      autosave: () => require('./redux/autosave').default,
     },
   },
 }

packages/component-wizard/src/redux/autosave.js

+import { get } from 'lodash'
+
+export const AUTOSAVE_REQUEST = 'autosave/AUTOSAVE_REQUEST'
+export const AUTOSAVE_FAILURE = 'autosave/AUTOSAVE_FAILURE'
+export const AUTOSAVE_SUCCESS = 'autosave/AUTOSAVE_SUCCESS'
+
+export const autosaveRequest = () => ({
+  type: AUTOSAVE_REQUEST,
+})
+
+export const autosaveFailure = () => ({
+  type: AUTOSAVE_FAILURE,
+  error: 'Something went wrong...',
+})
+
+export const autosaveSuccess = lastUpdate => ({
+  type: AUTOSAVE_SUCCESS,
+  lastUpdate,
+})
+
+const initialState = {
+  isFetching: false,
+  lastUpdate: null,
+  error: null,
+}
+
+export const getAutosave = state => get(state, 'autosave')
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case AUTOSAVE_REQUEST:
+      return {
+        ...initialState,
+        isFetching: true,
+      }
+    case AUTOSAVE_FAILURE:
+      return {
+        ...initialState,
+        error: action.error,
+      }
+    case AUTOSAVE_SUCCESS:
+      return {
+        ...initialState,
+        lastUpdate: action.lastUpdate,
+      }
+    default:
+      return state
+  }
+}

packages/component-wizard/src/redux/conversion.js

 import { actions } from 'pubsweet-client'
-
 /* constants */
 
 export const CREATE_DRAFT_REQUEST = 'CREATE_DRAFT_REQUEST'

packages/component-wizard/src/redux/index.js

+export { default as autosave } from './autosave'
 export { default as conversion } from './conversion'
-export { default as authors } from './authors'

packages/components-faraday/package.json

+{
+  "name": "pubsweet-components-faraday",
+  "version": "0.0.1",
+  "main": "src",
+  "license": "MIT",
+  "dependencies": {
+    "@pubsweet/ui": "^0.1.1",
+    "moment": "^2.20.1",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-dnd": "^2.5.4",
+    "react-dnd-html5-backend": "^2.5.4",
+    "react-dom": "^15.6.1",
+    "react-router-dom": "^4.2.2",
+    "recompose": "^0.26.0",
+    "redux": "^3.6.0",
+    "redux-form": "^7.0.3"
+  }
+}

packages/component-wizard/src/components/AuthorList/AuthorAdder.js → packages/components-faraday/src/components/AuthorList/AuthorAdder.js

@@ -72,10 +72,8 @@ export default compose(
     if (!admin) {
       return {
         initialValues: {
-          author: {
-            email,
-            firstName: username,
-          },
+          email,
+          firstName: username,
         },
       }
     }

packages/component-wizard/src/components/AuthorList/AuthorList.js → packages/components-faraday/src/components/AuthorList/AuthorList.js

@@ -10,6 +10,7 @@ import {
   withState,
 } from 'recompose'
 import { change } from 'redux-form'
+import { SortableList } from 'pubsweet-components-faraday/src/components'
 
 import {
   addAuthor,
@@ -18,8 +19,6 @@ import {
   moveAuthors,
 } from '../../redux/authors'
 
-import SortableList from '../SortableList'
-
 import Author from './Author'
 import StaticList from './StaticList'
 import AuthorAdder from './AuthorAdder'
@@ -66,7 +65,6 @@ const Authors = ({
       <SortableList
         dragHandle={DragHandle}
         dropItem={dropItem}
-        editedAuthor={editedAuthor}
         items={authors}
         listItem={Author}
         moveItem={moveAuthor}