Toast notifications.

components/settings/AccountSettings.js

@@ -14,12 +14,14 @@ import Plus from 'assets/plus.svg';
 import Trash from 'assets/trash.svg';
 import Check from 'assets/check.svg';
 import styles from './AccountSettings.module.css';
+import Toast from '../common/Toast';
 
 export default function AccountSettings() {
   const [addAccount, setAddAccount] = useState();
   const [editAccount, setEditAccount] = useState();
   const [deleteAccount, setDeleteAccount] = useState();
   const [saved, setSaved] = useState(0);
+  const [message, setMessage] = useState();
   const { data } = useFetch(`/api/accounts`, {}, { update: [saved] });
 
   const Checkmark = ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null);
@@ -52,6 +54,7 @@ export default function AccountSettings() {
 
   function handleSave() {
     setSaved(state => state + 1);
+    setMessage('Saved successfully.');
     handleClose();
   }
 
@@ -97,6 +100,7 @@ export default function AccountSettings() {
           />
         </Modal>
       )}
+      {message && <Toast message={message} onClose={() => setMessage(null)} />}
     </>
   );
 }

components/settings/ProfileSettings.js

@@ -5,12 +5,19 @@ import Button from 'components/common/Button';
 import ChangePasswordForm from '../forms/ChangePasswordForm';
 import Modal from 'components/common/Modal';
 import Dots from 'assets/ellipsis-h.svg';
+import Toast from '../common/Toast';
 
 export default function ProfileSettings() {
   const user = useSelector(state => state.user);
   const [changePassword, setChangePassword] = useState(false);
+  const [message, setMessage] = useState();
   const { user_id } = user;
 
+  function handleSave() {
+    setChangePassword(false);
+    setMessage('Saved successfully.');
+  }
+
   return (
     <>
       <PageHeader>
@@ -27,11 +34,12 @@ export default function ProfileSettings() {
         <Modal title="Change password">
           <ChangePasswordForm
             values={{ user_id }}
-            onSave={() => setChangePassword(false)}
+            onSave={handleSave}
             onClose={() => setChangePassword(false)}
           />
         </Modal>
       )}
+      {message && <Toast message={message} onClose={() => setMessage(null)} />}
     </>
   );
 }

components/settings/WebsiteSettings.js

@@ -17,6 +17,7 @@ import Code from 'assets/code.svg';
 import Link from 'assets/link.svg';
 import styles from './WebsiteSettings.module.css';
 import useFetch from '../../hooks/useFetch';
+import Toast from '../common/Toast';
 
 export default function WebsiteSettings() {
   const [editWebsite, setEditWebsite] = useState();
@@ -25,6 +26,7 @@ export default function WebsiteSettings() {
   const [showCode, setShowCode] = useState();
   const [showUrl, setShowUrl] = useState();
   const [saved, setSaved] = useState(0);
+  const [message, setMessage] = useState();
   const { data } = useFetch(`/api/websites`, {}, { update: [saved] });
 
   const Buttons = row => (
@@ -66,6 +68,7 @@ export default function WebsiteSettings() {
 
   function handleSave() {
     setSaved(state => state + 1);
+    setMessage('Saved successfully.');
     handleClose();
   }
 
@@ -127,6 +130,7 @@ export default function WebsiteSettings() {
           <ShareUrlForm values={showUrl} onClose={handleClose} />
         </Modal>
       )}
+      {message && <Toast message={message} onClose={() => setMessage(null)} />}
     </>
   );
 }