Updating cache

client/coral-framework/graphql/mutations.js

@@ -634,7 +634,32 @@ export const withRequestAccountDeletion = withMutation(
   {
     props: ({ mutate }) => ({
       requestAccountDeletion: () => {
-        return mutate();
+        return mutate({
+          variables: {},
+          update: proxy => {
+            const CancelAccountDeletionQuery = gql`
+              query Talk_CancelAccountDeletion {
+                me {
+                  id
+                  scheduledDeletionDate
+                }
+              }
+            `;
+
+            const prev = proxy.readQuery({ query: CancelAccountDeletionQuery });
+
+            const data = update(prev, {
+              me: {
+                scheduledDeletionDate: { $set: new Date() },
+              },
+            });
+
+            proxy.writeQuery({
+              query: CancelAccountDeletionQuery,
+              data,
+            });
+          },
+        });
       },
     }),
   }
@@ -651,7 +676,9 @@ export const withRequestDownloadLink = withMutation(
   {
     props: ({ mutate }) => ({
       requestDownloadLink: () => {
-        return mutate();
+        return mutate({
+          variables: {},
+        });
       },
     }),
   }
@@ -668,7 +695,32 @@ export const withCancelAccountDeletion = withMutation(
   {
     props: ({ mutate }) => ({
       cancelAccountDeletion: () => {
-        return mutate();
+        return mutate({
+          variables: {},
+          update: proxy => {
+            const CancelAccountDeletionQuery = gql`
+              query Talk_CancelAccountDeletion {
+                me {
+                  id
+                  scheduledDeletionDate
+                }
+              }
+            `;
+
+            const prev = proxy.readQuery({ query: CancelAccountDeletionQuery });
+
+            const data = update(prev, {
+              me: {
+                scheduledDeletionDate: { $set: null },
+              },
+            });
+
+            proxy.writeQuery({
+              query: CancelAccountDeletionQuery,
+              data,
+            });
+          },
+        });
       },
     }),
   }

locales/en.yml

@@ -246,6 +246,7 @@ en:
     ALREADY_EXISTS: "Resource already exists"
     INVALID_ASSET_URL: "Assert URL is invalid"
     CANNOT_IGNORE_STAFF: "Cannot ignore Staff members."
+    DELETION_NOT_SCHEDULED: "Deletion was not scheduled"
     email: "Not a valid E-Mail"
     confirm_password: "Passwords don't match. Please check again"
     network_error: "Failed to connect to server. Check your internet connection and try again."

plugins/talk-plugin-auth/client/index.js

@@ -5,12 +5,18 @@ import translations from './translations.yml';
 import Login from './login/containers/Main';
 import reducer from './login/reducer';
 import DeleteMyAccount from './profile-settings/containers/DeleteMyAccount';
+import AccountDeletionRequestedSign from './stream/containers/AccountDeletionRequestedSign';
 
 export default {
   reducer,
   translations,
   slots: {
-    stream: [UserBox, SignInButton, SetUsernameDialog],
+    stream: [
+      AccountDeletionRequestedSign,
+      UserBox,
+      SignInButton,
+      SetUsernameDialog,
+    ],
     login: [Login],
     profileSettings: [DeleteMyAccount],
   },

plugins/talk-plugin-auth/client/profile-settings/components/AccountDeletionRequestedSign.css

@@ -1,23 +0,0 @@
-.container {
-  border : solid 1px #F26563;
-  border-radius: 2px;
-  color: #3B4A53; 
-}
-
-.button {
-  color: #787D80;
-  border-radius: 2px;
-  background-color: transparent;
-  height: 30px;
-  font-size: 0.9em;
-  line-height: normal;
-
-  &:hover {
-    background-color: #eaeaea;
-  }
-
-  &.secondary {
-    background-color: #787D80;
-    color: white;
-  }
-}

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { Button, Icon } from 'plugin-api/beta/client/components/ui';
-import styles from './AccountDeletionRequestedSign.css';
-
-class AccountDeletionRequestedSign extends React.Component {
-  render() {
-    return (
-      <div className={styles.container}>
-        <h3>
-          <Icon name="warning" />Account Deletion Requested
-        </h3>
-        <p>
-          A request to delete your account was received on. If you would like to
-          continue leaving comments, replies or reactions, you may cancel your
-          request to delete your account below before
-        </p>
-        <Button className={cn(styles.button, styles.secondary)}>
-          Cancel Account Deletion Request
-        </Button>
-      </div>
-    );
-  }
-}
-
-export default AccountDeletionRequestedSign;

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

@@ -10,4 +10,14 @@
   &:hover {
     background-color: #eaeaea;
   }
+
+  &.secondary {
+    background-color: #787D80;
+    color: white;
+  }
+
+  > i { 
+    font-size: 1.2em;
+    vertical-align: middle;
+  }
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import moment from 'moment';
 import styles from './DeleteMyAccount.css';
 import { Button } from 'plugin-api/beta/client/components/ui';
 import DeleteMyAccountDialog from './DeleteMyAccountDialog';
@@ -52,6 +53,7 @@ class DeleteMyAccount extends React.Component {
       <div className="talk-plugin-auth--delete-my-account">
         <DeleteMyAccountDialog
           requestAccountDeletion={this.requestAccountDeletion}
+          showDialog={this.state.showDialog}
           closeDialog={this.closeDialog}
         />
         <h3
@@ -62,6 +64,15 @@ class DeleteMyAccount extends React.Component {
         >
           Delete My Account
         </h3>
+        <p
+          className={cn(
+            styles.description,
+            'talk-plugin-auth--delete-my-account-description'
+          )}
+        >
+          Deleting your account will permanently erase your profile and remove
+          all your comments from this site.
+        </p>
         <p
           className={cn(
             styles.description,
@@ -70,12 +81,14 @@ class DeleteMyAccount extends React.Component {
         >
           {scheduledDeletionDate &&
             `You have already submitted a request to delete your account.
-          Your account will be deleted on ${scheduledDeletionDate}. You may
+          Your account will be deleted on ${moment(
+            scheduledDeletionDate
+          ).format('MMM Do YYYY, h:mm:ss a')}. You may
           cancel the request until that time`}
         </p>
         {scheduledDeletionDate ? (
           <Button
-            className={cn(styles.button)}
+            className={cn(styles.button, styles.secondary)}
             onClick={this.cancelAccountDeletion}
           >
             Cancel Account Deletion Request

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

@@ -26,13 +26,13 @@ class DeleteMyAccountDialog extends React.Component {
 
   cancel = () => {
     this.clear();
-    this.closeDialog();
+    this.props.closeDialog();
   };
 
   render() {
     const { step } = this.state;
     return (
-      <Dialog open={true} className={styles.dialog}>
+      <Dialog open={this.props.showDialog} className={styles.dialog}>
         <span className={styles.close} onClick={this.cancel}>
           ×
         </span>
@@ -70,6 +70,7 @@ class DeleteMyAccountDialog extends React.Component {
 }
 
 DeleteMyAccountDialog.propTypes = {
+  showDialog: PropTypes.bool.isRequired,
   closeDialog: PropTypes.func.isRequired,
   requestAccountDeletion: PropTypes.func.isRequired,
 };

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

@@ -35,7 +35,7 @@ class DeleteMyAccountStep3 extends React.Component {
           </Button>
           <Button
             className={cn(styles.button, styles.danger)}
-            onClicsk={this.deleteAndContinue}
+            onClick={this.deleteAndContinue}
           >
             Delete My Account
           </Button>

plugins/talk-plugin-auth/client/stream/components/AccountDeletionRequestedSign.css

@@ -0,0 +1,44 @@
+.container {
+  border: 1px solid #f26563;
+  border-radius: 2px;
+  color: #3b4a53;
+  padding: 20px 10px;
+  background-color: rgba(242, 101, 99, 0.1);
+  margin: 20px 0;
+}
+
+.button {
+  color: #787D80;
+  border-radius: 2px;
+  background-color: transparent;
+  height: 30px;
+  font-size: 0.9em;
+  line-height: normal;
+
+  &:hover {
+    background-color: #eaeaea;
+  }
+
+  &.secondary {
+    background-color: #787D80;
+    color: white;
+  }
+}
+
+.title {
+  margin: 0;
+  i.icon {
+    font-size: 1em;
+    padding: 4px;
+  }
+}
+
+.description {
+  margin: 0;
+  padding-left: 22px;
+  padding-bottom: 15px;
+}
+
+.actions {
+  text-align: center;
+}

plugins/talk-plugin-auth/client/stream/components/AccountDeletionRequestedSign.js

@@ -0,0 +1,55 @@
+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 './AccountDeletionRequestedSign.css';
+import { getErrorMessages } from 'coral-framework/utils';
+
+class AccountDeletionRequestedSign 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));
+    }
+  };
+
+  render() {
+    return (
+      <div className={styles.container}>
+        <h4 className={styles.title}>
+          <Icon name="warning" className={styles.icon} />Account Deletion
+          Requested
+        </h4>
+        <p className={styles.description}>
+          A request to delete your account was received on.
+        </p>
+        <p className={styles.description}>
+          If you would like to continue leaving comments, replies or reactions,
+          you may cancel your request to delete your account below before
+        </p>
+        <div className={styles.actions}>
+          <Button
+            className={cn(styles.button, styles.secondary)}
+            onClick={this.cancelAccountDeletion}
+          >
+            Cancel Account Deletion Request
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+AccountDeletionRequestedSign.propTypes = {
+  cancelAccountDeletion: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired,
+};
+
+export default AccountDeletionRequestedSign;

plugins/talk-plugin-auth/client/stream/containers/AccountDeletionRequestedSign.js

@@ -0,0 +1,25 @@
+import { compose, gql } from 'react-apollo';
+import { bindActionCreators } from 'redux';
+import { connect, withFragments, excludeIf } from 'plugin-api/beta/client/hocs';
+import AccountDeletionRequestedSign from '../components/AccountDeletionRequestedSign';
+import { notify } from 'coral-framework/actions/notification';
+import { withCancelAccountDeletion } from 'plugin-api/beta/client/hocs';
+
+const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch);
+
+const withData = withFragments({
+  root: gql`
+    fragment Talk_AccountDeletionRequestedSignIn_root on RootQuery {
+      me {
+        scheduledDeletionDate
+      }
+    }
+  `,
+});
+
+export default compose(
+  connect(null, mapDispatchToProps),
+  withCancelAccountDeletion,
+  withData,
+  excludeIf(props => !props.root.me.scheduledDeletionDate)
+)(AccountDeletionRequestedSign);