Wip: mutations, styles and functionality

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccount.js

@@ -4,6 +4,7 @@ import cn from 'classnames';
 import styles from './DeleteMyAccount.css';
 import { Button } from 'plugin-api/beta/client/components/ui';
 import DeleteMyAccountDialog from './DeleteMyAccountDialog';
+import { getErrorMessages } from 'coral-framework/utils';
 
 const initialState = { showDialog: false };
 
@@ -22,12 +23,35 @@ class DeleteMyAccount extends React.Component {
     });
   };
 
+  cancelAccountDeletion = async () => {
+    const { cancelAccountDeletion, notify } = this.props;
+    try {
+      await cancelAccountDeletion();
+      notify(
+        'success',
+        'Account Deletion Request Cancelled - Your request to delete your account has been cancelled. You may now write comments, reply to comments, and select reactions.'
+      );
+    } catch (err) {
+      notify('error', getErrorMessages(err));
+    }
+  };
+
+  requestAccountDeletion = async () => {
+    const { requestAccountDeletion, notify } = this.props;
+    try {
+      await requestAccountDeletion();
+      notify('success', 'Account Deletion Requested');
+    } catch (err) {
+      notify('error', getErrorMessages(err));
+    }
+  };
+
   render() {
+    const { me: { scheduledDeletionDate } } = this.props.root;
     return (
       <div className="talk-plugin-auth--delete-my-account">
         <DeleteMyAccountDialog
-          requestAccountDeletion={this.props.requestAccountDeletion}
-          cancelAccountDeletion={this.props.cancelAccountDeletion}
+          requestAccountDeletion={this.requestAccountDeletion}
           closeDialog={this.closeDialog}
         />
         <h3
@@ -44,16 +68,27 @@ class DeleteMyAccount extends React.Component {
             'talk-plugin-auth--delete-my-account-description'
           )}
         >
-          Deleting your account will permanently erase your profile and remove
-          all your comments from this site.
+          {scheduledDeletionDate &&
+            `You have already submitted a request to delete your account.
+          Your account will be deleted on ${scheduledDeletionDate}. You may
+          cancel the request until that time`}
         </p>
-        <Button
-          className={cn(styles.button)}
-          icon="delete"
-          onClick={this.onSave}
-        >
-          Delete My Account
-        </Button>
+        {scheduledDeletionDate ? (
+          <Button
+            className={cn(styles.button)}
+            onClick={this.cancelAccountDeletion}
+          >
+            Cancel Account Deletion Request
+          </Button>
+        ) : (
+          <Button
+            className={cn(styles.button)}
+            icon="delete"
+            onClick={this.showDialog}
+          >
+            Delete My Account
+          </Button>
+        )}
       </div>
     );
   }
@@ -63,6 +98,7 @@ DeleteMyAccount.propTypes = {
   requestAccountDeletion: PropTypes.func.isRequired,
   cancelAccountDeletion: PropTypes.func.isRequired,
   notify: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired,
 };
 
 export default DeleteMyAccount;

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountDialog.js

@@ -24,28 +24,45 @@ class DeleteMyAccountDialog extends React.Component {
     this.setState(initialState);
   };
 
+  cancel = () => {
+    this.clear();
+    this.closeDialog();
+  };
+
   render() {
     const { step } = this.state;
     return (
       <Dialog open={true} className={styles.dialog}>
-        <span className={styles.close} onClick={this.props.closeDialog}>
+        <span className={styles.close} onClick={this.cancel}>
           ×
         </span>
         <h3 className={styles.title}>Delete My Account</h3>
         <StepProgress currentStep={this.state.step} totalSteps={4} />
         {step === 0 && (
-          <DeleteMyAccountStep0 goToNextStep={this.goToNextStep} />
+          <DeleteMyAccountStep0
+            goToNextStep={this.goToNextStep}
+            cancel={this.cancel}
+          />
         )}
         {step === 1 && (
-          <DeleteMyAccountStep1 goToNextStep={this.goToNextStep} />
+          <DeleteMyAccountStep1
+            goToNextStep={this.goToNextStep}
+            cancel={this.cancel}
+          />
         )}
         {step === 2 && (
-          <DeleteMyAccountStep2 goToNextStep={this.goToNextStep} />
+          <DeleteMyAccountStep2
+            goToNextStep={this.goToNextStep}
+            cancel={this.cancel}
+          />
         )}
         {step === 3 && (
-          <DeleteMyAccountStep3 goToNextStep={this.goToNextStep} />
+          <DeleteMyAccountStep3
+            goToNextStep={this.goToNextStep}
+            cancel={this.cancel}
+          />
         )}
-        {step === 4 && <DeleteMyAccountFinalStep />}
+        {step === 4 && <DeleteMyAccountFinalStep finish={this.cancel} />}
       </Dialog>
     );
   }

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountFinalStep.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import cn from 'classnames';
+import PropTypes from 'prop-types';
 import { Button, Icon } from 'plugin-api/beta/client/components/ui';
 import styles from './DeleteMyAccountStep.css';
 
-const DeleteMyAccountFinalStep = () => (
+const DeleteMyAccountFinalStep = props => (
   <div className={styles.step}>
     <p className={styles.description}>
       Your request has been submitted and confirmation has been sent to the
@@ -35,7 +36,7 @@ const DeleteMyAccountFinalStep = () => (
     <div className={cn(styles.actions, styles.columnView)}>
       <Button
         className={cn(styles.button, styles.proceed)}
-        onClick={this.closeDialog}
+        onClick={props.finish}
         full
       >
         Done
@@ -47,4 +48,8 @@ const DeleteMyAccountFinalStep = () => (
   </div>
 );
 
+DeleteMyAccountFinalStep.propTypes = {
+  finish: PropTypes.func.isRequired,
+};
+
 export default DeleteMyAccountFinalStep;

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep0.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { Button, Icon } from 'plugin-api/beta/client/components/ui';
 import styles from './DeleteMyAccountStep.css';
@@ -29,7 +30,12 @@ const DeleteMyAccountStep0 = props => (
       </li>
     </ul>
     <div className={cn(styles.actions)}>
-      <Button className={cn(styles.button, styles.cancel)}>Cancel</Button>
+      <Button
+        className={cn(styles.button, styles.cancel)}
+        onClick={props.cancel}
+      >
+        Cancel
+      </Button>
       <Button
         className={cn(styles.button, styles.proceed)}
         onClick={props.goToNextStep}
@@ -40,4 +46,9 @@ const DeleteMyAccountStep0 = props => (
   </div>
 );
 
+DeleteMyAccountStep0.propTypes = {
+  goToNextStep: PropTypes.func.isRequired,
+  cancel: PropTypes.func.isRequired,
+};
+
 export default DeleteMyAccountStep0;

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep1.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { Button } from 'plugin-api/beta/client/components/ui';
 import styles from './DeleteMyAccountStep.css';
@@ -18,7 +19,12 @@ const DeleteMyAccountStep1 = props => (
       comments, reply to comments, or select reactions.
     </p>
     <div className={cn(styles.actions)}>
-      <Button className={cn(styles.button, styles.cancel)}>Cancel</Button>
+      <Button
+        className={cn(styles.button, styles.cancel)}
+        onClick={props.cancel}
+      >
+        Cancel
+      </Button>
       <Button
         className={cn(styles.button, styles.proceed)}
         onClick={props.goToNextStep}
@@ -29,4 +35,9 @@ const DeleteMyAccountStep1 = props => (
   </div>
 );
 
+DeleteMyAccountStep1.propTypes = {
+  goToNextStep: PropTypes.func.isRequired,
+  cancel: PropTypes.func.isRequired,
+};
+
 export default DeleteMyAccountStep1;

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep2.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { Button } from 'plugin-api/beta/client/components/ui';
 import styles from './DeleteMyAccountStep.css';
 
-const DeleteMyAccountStep1 = props => (
+const DeleteMyAccountStep2 = props => (
   <div className={styles.step}>
     <p className={styles.description}>
       Before your account is deleted, we recommend you download your comment
@@ -17,7 +18,12 @@ const DeleteMyAccountStep1 = props => (
       </strong>
     </p>
     <div className={cn(styles.actions)}>
-      <Button className={cn(styles.button, styles.cancel)}>Cancel</Button>
+      <Button
+        className={cn(styles.button, styles.cancel)}
+        onClick={props.cancel}
+      >
+        Cancel
+      </Button>
       <Button
         className={cn(styles.button, styles.proceed)}
         onClick={props.goToNextStep}
@@ -28,4 +34,9 @@ const DeleteMyAccountStep1 = props => (
   </div>
 );
 
-export default DeleteMyAccountStep1;
+DeleteMyAccountStep2.propTypes = {
+  goToNextStep: PropTypes.func.isRequired,
+  cancel: PropTypes.func.isRequired,
+};
+
+export default DeleteMyAccountStep2;

plugins/talk-plugin-auth/client/profile-settings/components/DeleteMyAccountStep3.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { Button } from 'plugin-api/beta/client/components/ui';
 import styles from './DeleteMyAccountStep.css';
 
-const DeleteMyAccountStep1 = props => (
+const DeleteMyAccountStep3 = props => (
   <div className={styles.step}>
     <h4 className={styles.subTitle}>
       Are you sure you want to delete your account?
@@ -19,7 +20,12 @@ const DeleteMyAccountStep1 = props => (
       value="delete"
     />
     <div className={cn(styles.actions)}>
-      <Button className={cn(styles.button, styles.cancel)}>Cancel</Button>
+      <Button
+        className={cn(styles.button, styles.cancel)}
+        onClick={props.cancel}
+      >
+        Cancel
+      </Button>
       <Button
         className={cn(styles.button, styles.danger)}
         onClick={props.goToNextStep}
@@ -30,4 +36,9 @@ const DeleteMyAccountStep1 = props => (
   </div>
 );
 
-export default DeleteMyAccountStep1;
+DeleteMyAccountStep3.propTypes = {
+  goToNextStep: PropTypes.func.isRequired,
+  cancel: PropTypes.func.isRequired,
+};
+
+export default DeleteMyAccountStep3;

plugins/talk-plugin-auth/client/profile-settings/containers/DeleteMyAccount.js

@@ -12,7 +12,7 @@ const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch);
 
 const withData = withFragments({
   root: gql`
-    fragment TalkIgnoreUser_IgnoredUserSection_root on RootQuery {
+    fragment Talk_DeleteMyAccount_root on RootQuery {
       me {
         scheduledDeletionDate
       }