Saving assignment indicator (#1681)

* update package lock

* delete package lock

* addresses #1680

* update creating indicator button

* add fragment

Author: pwjablonski

locales/en/translation.json

@@ -9,7 +9,8 @@
     "date-not-valid": "Please enter a valid date",
     "past-date-not-valid": "Please pick a future date",
     "input-placeholder": "When is it due?",
-    "value-label": "{{valueLabel, formatDate}}"
+    "value-label": "{{valueLabel, formatDate}}",
+    "creating": "Creating..."
   },
   "top-bar": {
     "create-snapshot": "Create Snapshot",

src/components/AssignmentCreator.jsx

@@ -17,6 +17,7 @@ const AssignmentCreatorForm = lazy(
 export default function AssignmentCreator({
   areCoursesLoaded,
   courses,
+  isAssignmentExportInProgress,
   isOpen,
   parsedDate,
   projectTitle,
@@ -42,6 +43,7 @@ export default function AssignmentCreator({
             areCoursesLoaded ?
               <AssignmentCreatorForm
                 courses={courses}
+                isAssignmentExportInProgress={isAssignmentExportInProgress}
                 parsedDate={parsedDate}
                 onAssignAssignment={onAssignAssignment}
                 onCloseAssignmentCreator={onCloseAssignmentCreator}
@@ -58,6 +60,7 @@ export default function AssignmentCreator({
 AssignmentCreator.propTypes = {
   areCoursesLoaded: PropTypes.bool.isRequired,
   courses: ImmutablePropTypes.iterable.isRequired,
+  isAssignmentExportInProgress: PropTypes.bool.isRequired,
   isOpen: PropTypes.bool.isRequired,
   parsedDate: PropTypes.instanceOf(Date),
   projectTitle: PropTypes.string,

src/components/AssignmentCreatorForm.jsx

@@ -33,6 +33,7 @@ function formatDate(value) {
 export default function AssignmentCreatorForm({
   courses,
   handleSubmit,
+  isAssignmentExportInProgress,
   parsedDate,
   onAssignAssignment,
   onDraftAssignment,
@@ -69,43 +70,61 @@ export default function AssignmentCreatorForm({
           valueLabel={parsedDate}
         />
       </div>
-      <button
-        className={classnames(
-          'assignment-creator__button',
-          'assignment-creator__button_reject',
-        )}
-        type="button"
-        onClick={onCloseAssignmentCreator}
-      >
-        {t('assignment-creator.cancel-button')}
-      </button>
-      <button
-        className={classnames(
-          'assignment-creator__button',
-          'assignment-creator__button_confirm',
-        )}
-        type="button"
-        onClick={handleSubmit(onDraftAssignment)}
-      >
-        {t('assignment-creator.draft-button')}
-      </button>
-      <button
-        className={classnames(
-          'assignment-creator__button',
-          'assignment-creator__button_confirm',
-        )}
-        type="button"
-        onClick={handleSubmit(onAssignAssignment)}
-      >
-        {t('assignment-creator.assign-button')}
-      </button>
+      <div>
+        {
+          isAssignmentExportInProgress ?
+            <button
+              disabled
+              className={classnames(
+                'assignment-creator__button',
+                'assignment-creator__button_disabled',
+              )}
+              type="button"
+            >
+              {t('assignment-creator.creating')}
+            </button> :
+            <>
+              <button
+                className={classnames(
+                  'assignment-creator__button',
+                  'assignment-creator__button_reject',
+                )}
+                type="button"
+                onClick={onCloseAssignmentCreator}
+              >
+                {t('assignment-creator.cancel-button')}
+              </button>
+              <button
+                className={classnames(
+                  'assignment-creator__button',
+                  'assignment-creator__button_confirm',
+                )}
+                type="button"
+                onClick={handleSubmit(onDraftAssignment)}
+              >
+                {t('assignment-creator.draft-button')}
+              </button>
+              <button
+                className={classnames(
+                  'assignment-creator__button',
+                  'assignment-creator__button_confirm',
+                )}
+                type="button"
+                onClick={handleSubmit(onAssignAssignment)}
+              >
+                {t('assignment-creator.assign-button')}
+              </button>
+            </>
+        }
+      </div>
     </form>
   );
 }
 
 AssignmentCreatorForm.propTypes = {
   courses: ImmutablePropTypes.iterable.isRequired,
   handleSubmit: PropTypes.func.isRequired,
+  isAssignmentExportInProgress: PropTypes.bool.isRequired,
   parsedDate: PropTypes.instanceOf(Date),
   onAssignAssignment: PropTypes.func.isRequired,
   onCloseAssignmentCreator: PropTypes.func.isRequired,

src/containers/AssignmentCreator.js

@@ -9,6 +9,7 @@ import {
 import {
   getCourses,
   isAssignmentCreatorOpen,
+  isAssignmentExportInProgress,
   getCurrentProjectPreview,
   getParsedDate,
   makeIsRemoteCollectionFullyLoaded,
@@ -23,6 +24,7 @@ function mapStateToProps(state) {
   return {
     courses: getCourses(state),
     areCoursesLoaded: areCoursesLoaded(state),
+    isAssignmentExportInProgress: isAssignmentExportInProgress(state),
     isOpen: isAssignmentCreatorOpen(state),
     projectTitle: getCurrentProjectPreview(state),
     parsedDate: getParsedDate(state),

src/css/application.css

@@ -930,6 +930,11 @@ body {
   margin: 1em;
 }
 
+.assignment-creator__button_disabled {
+  background-color: var(--color-gray);
+  color: var(--color-chrome);
+}
+
 .assignment-creator__button_confirm {
   background-color: var(--color-dark-green);
   color: var(--color-low-contrast-gray);

src/reducers/clients.js

@@ -3,6 +3,7 @@ import Immutable from 'immutable';
 const defaultState = new Immutable.Map({
   firebase: new Immutable.Map({exportingSnapshot: false}),
   projectExports: new Immutable.Map(),
+  exportingAssignment: false,
   gapi: new Immutable.Map({ready: false}),
 });
 
@@ -42,6 +43,19 @@ export default function clients(stateIn, action) {
 
     case 'GAPI_CLIENT_READY':
       return state.setIn(['gapi', 'ready'], true);
+
+    case 'CREATE_ASSIGNMENT':
+      return state.setIn(
+        ['exportingAssignment'],
+        true,
+      );
+
+    case 'ASSIGNMENT_CREATED':
+    case 'ASSIGNMENT_NOT_CREATED':
+      return state.setIn(
+        ['exportingAssignment'],
+        false,
+      );
   }
 
   return state;

src/selectors/index.js

@@ -25,6 +25,7 @@ import getParsedDate from './getParsedDate';
 import getProject from './getProject';
 import getRequestedFocusedLine from './getRequestedFocusedLine';
 import isAssignmentCreatorOpen from './isAssignmentCreatorOpen';
+import isAssignmentExportInProgress from './isAssignmentExportInProgress';
 import isClassroomExportInProgress from './isClassroomExportInProgress';
 import isCurrentlyValidating from './isCurrentlyValidating';
 import isCurrentProjectSyntacticallyValid
@@ -75,6 +76,7 @@ export {
   getProject,
   getRequestedFocusedLine,
   isAssignmentCreatorOpen,
+  isAssignmentExportInProgress,
   isClassroomExportInProgress,
   isCurrentlyValidating,
   isCurrentProjectSyntacticallyValid,

src/selectors/isAssignmentExportInProgress.js

@@ -0,0 +1,6 @@
+export default function isAssignmentExportInProgress(state) {
+  return state.getIn([
+    'clients',
+    'exportingAssignment',
+  ]);
+}