feat(settings): add confirmation before resetting

- add i18n context - add alert to confirm reset
SimonGolms · Jan 24, 2021 · 64b0dde · 64b0dde
1 parent 8dcf2b5
commit 64b0dde
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/src/pages/Settings/index.css b/src/pages/Settings/index.css
@@ -4,3 +4,7 @@ ion-item-divider {
 ion-content ion-toolbar {
   --background: transparent;
 }
+
+.alert-button.alert-button-danger {
+  color: var(--ion-color-danger);
+}
diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   IonButtons,
@@ -18,6 +18,7 @@ import {
   IonIcon,
   IonItemGroup,
   IonItemDivider,
+  IonAlert,
 } from '@ionic/react';
 import './index.css';
 import { useTranslation } from 'react-i18next';
@@ -31,6 +32,8 @@ import { resetUserState, setCurrentTheme } from '../../data/user/user.slice';
 export const SettingsPage: React.FC = () => {
   const { t, i18n } = useTranslation();
 
+  const [showAlertReset, setShowAlertReset] = useState(false);
+
   const dispatch = useDispatch();
   const currentTheme = useSelector(selectCurrentTheme);
 
@@ -122,12 +125,35 @@ export const SettingsPage: React.FC = () => {
           <IonItem routerLink={'/credits'}>
             <IonLabel>{t('SETTINGS.GENERAL.ITEMS.CREDITS.LABEL')}</IonLabel>
           </IonItem>
-          <IonItem button onClick={() => dispatch(resetUserState())}>
+          <IonItem
+            button
+            detail={false}
+            onClick={() => setShowAlertReset(true)}
+          >
             <IonLabel color="danger">
               {t('SETTINGS.GENERAL.ITEMS.RESET.LABEL')}
             </IonLabel>
           </IonItem>
         </IonList>
+        <IonAlert
+          isOpen={showAlertReset}
+          onDidDismiss={() => setShowAlertReset(false)}
+          header={t('SETTINGS.GENERAL.ITEMS.RESET.ALERT.HEADER')}
+          message={t('SETTINGS.GENERAL.ITEMS.RESET.ALERT.MESSAGE')}
+          buttons={[
+            {
+              text: t('SETTINGS.GENERAL.ITEMS.RESET.ALERT.BUTTON.CANCEL'),
+              role: 'cancel',
+            },
+            {
+              cssClass: 'alert-button-danger',
+              text: t('SETTINGS.GENERAL.ITEMS.RESET.ALERT.BUTTON.RESET'),
+              handler: () => {
+                dispatch(resetUserState());
+              },
+            },
+          ]}
+        />
       </IonContent>
     </IonPage>
   );

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -3078,7 +3078,15 @@
           "NOTE": "Boehringer Ingelheim"
         },
         "RESET": {
-          "LABEL": "Reset"
+          "LABEL": "Reset",
+          "ALERT": {
+            "HEADER": "Reset App Settings",
+            "MESSAGE": "This will reset all your settings like the selection of language and theme and will also delete your favorites.",
+            "BUTTON": {
+              "CANCEL": "Cancel",
+              "RESET": "Reset"
+            }
+          }
         }
       }
     },