Refine the clear all data experience

ts/components/ClearingData.stories.tsx

@@ -0,0 +1,19 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { setup as setupI18n } from '../../js/modules/i18n';
+import enMessages from '../../_locales/en/messages.json';
+
+import { ClearingData } from './ClearingData';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/ClearingData', module);
+
+story.add('Clearing data', () => (
+  <ClearingData deleteAllData={action('deleteAllData')} i18n={i18n} />
+));

ts/components/ClearingData.tsx

@@ -0,0 +1,34 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { useEffect } from 'react';
+import { LocalizerType } from '../types/Util';
+
+export type PropsType = {
+  deleteAllData: () => void;
+  i18n: LocalizerType;
+};
+
+export function ClearingData({ deleteAllData, i18n }: PropsType): JSX.Element {
+  useEffect(() => {
+    deleteAllData();
+  }, [deleteAllData]);
+
+  return (
+    <div className="full-screen-flow overlay">
+      <div className="step">
+        <div className="inner">
+          <div className="step-body">
+            <span className="banner-icon delete" />
+            <div className="header">{i18n('deleteAllDataProgress')}</div>
+          </div>
+          <div className="progress">
+            <div className="bar-container">
+              <div className="bar progress-bar progress-bar-striped active" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

ts/components/Preferences.tsx

@@ -14,6 +14,7 @@ import {
 import { Button, ButtonVariant } from './Button';
 import { ChatColorPicker } from './ChatColorPicker';
 import { Checkbox } from './Checkbox';
+import { ConfirmationDialog } from './ConfirmationDialog';
 import { ConversationType } from '../state/ducks/conversations';
 import {
   ConversationColorType,
@@ -234,6 +235,7 @@ export const Preferences = ({
   whoCanSeeMe,
   zoomFactor,
 }: PropsType): JSX.Element => {
+  const [confirmDelete, setConfirmDelete] = useState(false);
   const [page, setPage] = useState<Page>(Page.General);
   const [showSyncFailed, setShowSyncFailed] = useState(false);
   const [nowSyncing, setNowSyncing] = useState(false);
@@ -912,7 +914,7 @@ export const Preferences = ({
             right={
               <div className="Preferences__right-button">
                 <Button
-                  onClick={doDeleteAllData}
+                  onClick={() => setConfirmDelete(true)}
                   variant={ButtonVariant.SecondaryDestructive}
                 >
                   {i18n('clearDataButton')}
@@ -921,6 +923,24 @@ export const Preferences = ({
             }
           />
         </SettingsRow>
+        {confirmDelete ? (
+          <ConfirmationDialog
+            actions={[
+              {
+                action: doDeleteAllData,
+                style: 'negative',
+                text: i18n('clearDataButton'),
+              },
+            ]}
+            i18n={i18n}
+            onClose={() => {
+              setConfirmDelete(false);
+            }}
+            title={i18n('deleteAllDataHeader')}
+          >
+            {i18n('deleteAllDataBody')}
+          </ConfirmationDialog>
+        ) : null}
       </>
     );
   } else if (page === Page.ChatColor) {