From f893f0e75192ea0e2044903de889d7d2a328c8f0 Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Tue, 5 Jul 2022 18:48:32 +0200
Subject: [PATCH] Toast refactoring

---
 _frontend/src/components/Toasts.jsx | 13 +++++++--
 _frontend/src/pages/Admin.jsx       |  7 ++++-
 _frontend/src/pages/Bucket.jsx      |  9 ++++---
 _frontend/src/util.jsx              | 41 ++++++++++++++++++++++++++++-
 _frontend/styles/main.scss          |  4 +--
 5 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/_frontend/src/components/Toasts.jsx b/_frontend/src/components/Toasts.jsx
index 1d14b13..a9bb361 100644
--- a/_frontend/src/components/Toasts.jsx
+++ b/_frontend/src/components/Toasts.jsx
@@ -6,6 +6,15 @@ let globalToastId = 0
 
 const ToastContext = createContext([])
 
+export const ToastMessage = ({ icon, children }) => {
+    return (
+        <div class="row">
+            {icon && <Icon name={icon} />}
+            <p>{children}</p>
+        </div>
+    )
+}
+
 export const ToastProvider = ({ children }) => {
     const [toasts, setToasts] = useState([])
 
@@ -18,7 +27,7 @@ export const ToastProvider = ({ children }) => {
             {children}
             <div class="toasts">
                 {toasts.map(({ uid, removed, message }) => (
-                    <div key={uid} class={removed ? 'toast removed' : 'toast'}>
+                    <div class={'toast' + (removed ? ' removed' : '')}>
                         <p>{message}</p>
                         <div class="toast-close" onClick={() => removeToast(uid)}>
                             <Icon name="close" />
@@ -43,7 +52,7 @@ export const useToasts = () => {
         }, duration)
 
         setTimeout(() => {
-            setToasts(toasts => toasts.filter(t => !t.removed))
+            setToasts(toasts => toasts.filter(t => t !== toast))
         }, duration + 1000)
 
         setToasts(ts => [...ts.slice(-5), toast])
diff --git a/_frontend/src/pages/Admin.jsx b/_frontend/src/pages/Admin.jsx
index df82ae2..c4b693e 100644
--- a/_frontend/src/pages/Admin.jsx
+++ b/_frontend/src/pages/Admin.jsx
@@ -1,6 +1,9 @@
 import { useEffect, useState } from 'preact/hooks'
+import { ToastMessage, useToasts } from '../components/Toasts.jsx'
 
 export const AdminPanel = () => {
+    const [showToast] = useToasts()
+
     const [text, setText] = useState('')
 
     useEffect(() => {
@@ -19,10 +22,12 @@ export const AdminPanel = () => {
         })
 
         if (!res.ok) {
-            alert('An error occurred while updating the state!')
+            showToast(`Errore "${await res.text()}"`)
         }
 
         setText(formatted)
+
+        showToast(<ToastMessage icon="info">Dashboard aggiornata</ToastMessage>)
     }
 
     return (
diff --git a/_frontend/src/pages/Bucket.jsx b/_frontend/src/pages/Bucket.jsx
index ad8e19d..2ef3e39 100644
--- a/_frontend/src/pages/Bucket.jsx
+++ b/_frontend/src/pages/Bucket.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'preact/hooks'
 import { Icon } from '../components/Icon.jsx'
-import { useToasts } from '../components/Toasts.jsx'
+import { ToastMessage, useToasts } from '../components/Toasts.jsx'
 import { useStore } from '../context.jsx'
 import { useRemoteState } from '../util.jsx'
 
@@ -38,9 +38,10 @@ export const Bucket = () => {
             const { id } = await res.json()
 
             showToast(
-                <>
-                    File caricato con id <code>{id}</code>
-                </>
+                <ToastMessage icon="info">
+                    File caricato con ID: <code>{id}</code>
+                </ToastMessage>,
+                { duration: 10e3 }
             )
 
             await updateBucketObjects()
diff --git a/_frontend/src/util.jsx b/_frontend/src/util.jsx
index 84d49a5..07f2034 100644
--- a/_frontend/src/util.jsx
+++ b/_frontend/src/util.jsx
@@ -1,5 +1,5 @@
 import { toChildArray } from 'preact'
-import { useCallback, useEffect, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 
 export function hashCode(s) {
     s = s.toString() + "seed iniziale dell'hash"
@@ -82,6 +82,45 @@ export function useRemoteState(url, initialValue = null) {
     return [value, error, refresh]
 }
 
+// Toggle CSS Class
+
+// export function useClasses(classes) {
+//     const elementRef = useRef(null)
+
+//     if (Array.isArray(classes)) {
+//         classes = Object.fromEntries(classes.filter(Boolean).map(className => [className, true]))
+//     }
+
+//     const updateClasses = () => {
+//         if (elementRef.current) {
+//             const $el = elementRef.current
+
+//             console.log($el.classList)
+//             console.log('Applying classes:', classes)
+
+//             for (const [className, present] of Object.entries(classes)) {
+//                 if (present) {
+//                     if (!$el.classList.contains(className)) {
+//                         console.log('Adding class:', className, present)
+//                         $el.classList.add(className)
+//                     }
+//                 } else {
+//                     if ($el.classList.contains(className)) {
+//                         console.log('Removing class:', className, present)
+//                         $el.classList.remove(className)
+//                     }
+//                 }
+//             }
+//         }
+//     }
+
+//     useEffect(() => {
+//         updateClasses()
+//     })
+
+//     return [elementRef]
+// }
+
 //
 // Change Case Utility
 //
diff --git a/_frontend/styles/main.scss b/_frontend/styles/main.scss
index 26cd6ce..4c7afef 100644
--- a/_frontend/styles/main.scss
+++ b/_frontend/styles/main.scss
@@ -298,7 +298,7 @@ main {
         background: #38383d;
         color: var(--fg-dark-500);
 
-        padding: 0.5rem 0.5rem 0.5rem 1rem;
+        padding: 0.5rem;
         border-radius: 0.5rem;
 
         opacity: 0.95;
@@ -309,7 +309,7 @@ main {
         display: flex;
         align-items: center;
 
-        gap: 0.5rem;
+        gap: 1rem;
 
         .toast-close {
             display: flex;