Show a confirmation dialogue before resetting

duizendnegen · Dec 10, 2022 · 14c63db · 14c63db
1 parent c8c3cb8
commit 14c63db
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 18 deletions.
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
@@ -22,8 +22,13 @@
     "remove_flavour": "Element entfernen",
     "remove_flavour_button": "Element und alle untergeordneten Elemente entfernen"  
   },
+  "reset": {
+    "content": "Durch das Zurücksetzen wird dein Smorgasbord erneut geladen - deine Änderungen gehen verloren. OK?",
+    "confirm": "Ja, zurücksetzen",
+    "cancel": "Nein, abbrechen"
+  },
   "footer": {
-    "disclaimer": "<a href=\"https://github.com/duizendnegen/sunburst-smorgasbord\">Open Source</a>; mit <a href=\"https://d3js.org/\">D3</a> hergestellt, basierend auf dem <a href=\"https://observablehq.com/@d3/sunburst\">Sunburstdiagramm</a>.<br />Keine Cookies, kein Tracking, keine Datenerhebung. Dein lokaler Speicher wird verwendet, damit du nicht jedes Mal von vorne anfangen musst, wenn du die Webseite neu lädst. Sweet.<br />Made by JayK / Shandalara / dzing",
+    "disclaimer": "<a href=\"https://github.com/duizendnegen/sunburst-smorgasbord\">Open Source</a>; mit <a href=\"https://d3js.org/\">D3</a> hergestellt, basierend auf dem <a href=\"https://observablehq.com/@d3/sunburst\">Sunburstdiagramm</a>.<br />Keine Cookies, kein Tracking, keine Datenerhebung. Dein lokaler Speicher wird verwendet, damit du nicht jedes Mal von vorne anfangen musst, wenn du die Webseite neu lädst. Sweet.",
     "languages": "Verfügbar auf",
     "languages_german": "Deutsch",
     "languages_english": "Englisch"

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -22,8 +22,13 @@
     "remove_flavour": "Flavour to remove",
     "remove_flavour_button": "Remove flavour and all descendants"
   },
-    "footer": {
-    "disclaimer": "<a href=\"https://github.com/duizendnegen/sunburst-smorgasbord\">Open source</a>; made with <a href=\"https://d3js.org/\">D3</a>, based on their <a href=\"https://observablehq.com/@d3/sunburst\">Sunburst diagram</a>.<br />No cookies, no tracking, no data collected. Local storage used to make sure you don't have to start over every time you load the website. Sweet.<br />Made by JayK / Shandalara / dzing",
+  "reset": {
+    "content": "Resetting your Smorgasbord will load the default canvas - your changes will be lost. OK?",
+    "confirm": "Yes, reset",
+    "cancel": "No, cancel"
+  },
+  "footer": {
+    "disclaimer": "<a href=\"https://github.com/duizendnegen/sunburst-smorgasbord\">Open source</a>; made with <a href=\"https://d3js.org/\">D3</a>, based on their <a href=\"https://observablehq.com/@d3/sunburst\">Sunburst diagram</a>.<br />No cookies, no tracking, no data collected. Local storage used to make sure you don't have to start over every time you load the website. Sweet.",
     "languages": "Available in",
     "languages_german": "German",
     "languages_english": "English"

diff --git a/src/App.css b/src/App.css
@@ -8,20 +8,25 @@ footer.footer {
   background: #1F1F1F;
   color: #fff;
 }
+.modal {
+  color: #000;
+}
 
 .sunburst-clickable {
   cursor: pointer;
 }
 
-.button {
+.button.is-primary {
   background-color: #4a1942;
   color: #fff;
 }
-.button:hover {
-  color: #ccc;
+.button.is-primary:hover {
+  background-color: #4a1942;
+  color: #aaa;
 }
 
-.button[disabled] {
+.button.is-primary[disabled] {
+  background-color: #fff;
   border-color: #4a1942;
   color: #333;
 }

diff --git a/src/components/AddFlavourForm/AddFlavourForm.test.tsx b/src/components/AddFlavourForm/AddFlavourForm.test.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import AddFlavourForm from './AddFlavourForm';
 import * as d3 from 'd3';
 import { I18nextProvider } from 'react-i18next';

diff --git a/src/components/AddFlavourForm/AddFlavourForm.tsx b/src/components/AddFlavourForm/AddFlavourForm.tsx
@@ -41,7 +41,7 @@ const AddFlavourForm = ({ onAdd, hierarchicalFlavours } : AddFlavourFormProps) =
         <div className="control">
           <input
             id="input-new-flavour-name"
-            className="input is-primary"
+            className="input"
             type="text"
             placeholder={t('edit.new_flavour')}
             onChange={(e) => setNewFlavourName(e.target.value)}
@@ -52,7 +52,7 @@ const AddFlavourForm = ({ onAdd, hierarchicalFlavours } : AddFlavourFormProps) =
       <div className="field">
         <div className="control">
           <button
-            className={ buttonIsConfirmation ? "button is-confirmation" : "button" }
+            className={ buttonIsConfirmation ? "button is-primary is-confirmation" : "button is-primary" }
             onClick={addNewFlavour}
             disabled={parentUuidToAddFlavourTo === '' || newFlavourName === ''}>
             {t('edit.add_as_child')}

diff --git a/src/components/EditButton/EditButton.tsx b/src/components/EditButton/EditButton.tsx
@@ -8,7 +8,7 @@ const EditButton = ({ onClick } : EditButtonProps) => {
   const { t } = useTranslation();
 
   return (
-    <button className="button" onClick={onClick}>
+    <button className="button is-primary" onClick={onClick}>
       <strong>{t('button.edit')}</strong>
     </button>
   )

diff --git a/src/components/ExportAsImageButton/ExportAsImageButton.tsx b/src/components/ExportAsImageButton/ExportAsImageButton.tsx
@@ -116,7 +116,7 @@ const ExportAsImageButton = () => {
   }
 
   return (
-    <button className="button" onClick={exportAsImage}>
+    <button className="button is-primary" onClick={exportAsImage}>
       <strong>{t('button.download_image')}</strong>
     </button>
   );

diff --git a/src/components/ExportAsJsonButton/ExportAsJsonButton.tsx b/src/components/ExportAsJsonButton/ExportAsJsonButton.tsx
@@ -14,7 +14,7 @@ const ExportAsJsonButton = ({ flavours } : ExportAsJsonButtonProps) => {
   }
 
   return (
-    <button className="button" onClick={exportCurrentFlavours}>
+    <button className="button is-primary" onClick={exportCurrentFlavours}>
       <strong>{t('button.download_json')}</strong>
     </button>
   );

diff --git a/src/components/ImportJsonButton/ImportJsonButton.tsx b/src/components/ImportJsonButton/ImportJsonButton.tsx
@@ -27,7 +27,7 @@ const ImportJsonButton = ({ onUpload } : ImportJsonButtonProps) => {
   }
 
   return (
-    <button className="button" onClick={importNewFlavours}>
+    <button className="button is-primary" onClick={importNewFlavours}>
       <strong>{t('button.import_json')}</strong>
       <input
         type='file'

diff --git a/src/components/RemoveFlavourForm/RemoveFlavourForm.tsx b/src/components/RemoveFlavourForm/RemoveFlavourForm.tsx
@@ -32,7 +32,7 @@ const RemoveFlavourForm = ({ onRemove, hierarchicalFlavours } : RemoveFlavourFor
       <div className="field">
         <div className="control">
           <button
-            className='button'
+            className='button is-primary'
             onClick={removeFlavour}
             disabled={flavourToRemove === ''}>
             {t('edit.remove_flavour_button')}

diff --git a/src/components/ResetButton/ResetButton.test.tsx b/src/components/ResetButton/ResetButton.test.tsx
@@ -0,0 +1,23 @@
+import { I18nextProvider } from "react-i18next";
+import ResetButton from "./ResetButton";
+import i18n from '../../i18n.tests';
+import { act, fireEvent, getByText, render, screen } from '@testing-library/react';
+
+it('resets the flavours after a confirmation', async () => {
+  const onReset = jest.fn();
+  render(
+    <I18nextProvider i18n={i18n}>
+      <ResetButton
+        onReset={onReset} />
+    </I18nextProvider>);
+
+  fireEvent.click(screen.getByText("Reset"));
+  fireEvent.click(screen.getByText("No, cancel"));
+
+  expect(onReset).toHaveBeenCalledTimes(0);
+
+  fireEvent.click(screen.getByText("Reset"));
+  fireEvent.click(screen.getByText("Yes, reset"));
+
+  expect(onReset).toHaveBeenCalledTimes(1);
+});
diff --git a/src/components/ResetButton/ResetButton.tsx b/src/components/ResetButton/ResetButton.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 interface ResetButtonProps {
@@ -6,11 +7,28 @@ interface ResetButtonProps {
 
 const ResetButton = ({ onReset } : ResetButtonProps) => {
   const { t } = useTranslation();
+  const [resetConfirmationVisible, setResetConfirmationvisible] = useState<boolean>(false);
 
   return (
-    <button className="button" onClick={onReset}>
-      <strong>{t('button.reset')}</strong>
-    </button>
+    <div>
+      <button className="button is-primary" onClick={() => { setResetConfirmationvisible(true); }}>
+        <strong>{t('button.reset')}</strong>
+      </button>
+      <div className={resetConfirmationVisible ? 'modal is-active' : 'modal'}>
+        <div className="modal-background" onClick={() => { setResetConfirmationvisible(false); }}></div>
+        <div className="modal-card">
+          <section className="modal-card-body">
+            <p>
+              {t('reset.content')}
+            </p>
+          </section>
+          <footer className="modal-card-foot">
+            <button className="button is-primary" onClick={() => { onReset(); setResetConfirmationvisible(false); }}>{t('reset.confirm')}</button>
+            <button className="button" onClick={() => { setResetConfirmationvisible(false); }}>{t('reset.cancel')}</button>
+          </footer>
+        </div>
+      </div>
+    </div>
   )
 }