phc/storage
6
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Better toasts, a bit responsive and more

Browse Source
This commit is contained in:
aziis98
2022-07-05 01:53:42 +02:00
parent bd0a9b5c6e
commit 70ab93de0a
8 changed files with 273 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_frontend/src/components/Sidebar.jsx
+15 -3
View File
@@ -1,6 +1,8 @@
import { useState } from 'preact/hooks'
import { useEffect, useState } from 'preact/hooks'
import { Icon } from './Icon.jsx'
import { useStore } from '../context.jsx'
import { useRemoteState } from '../util.jsx'
import { useToasts } from './Toasts.jsx'
const SidebarDropdownItem = ({ icon, label, children }) => {
const [collapsed, setCollapsed] = useState(false)
@@ -28,7 +30,16 @@ const SidebarDropdownItem = ({ icon, label, children }) => {
}
export const Sidebar = () => {
const { sidebarVisibile, buckets, user } = useStore()
const { sidebarVisibile, user } = useStore()
const [showToast] = useToasts()
const [buckets, err] = useRemoteState('/api/buckets', [])
useEffect(() => {
if (err) {
showToast(`Errore "${err}"`)
}
}, [err])
return (
user === 'admin' && (
@@ -77,7 +88,7 @@ export const Sidebar = () => {
</a>
</div>
{buckets.map(bucket => (
<div class="item">
<div class="item" style="margin-left: 1.75rem;">
<a href={'/buckets/' + bucket} class="label">
<div class="row">
<div class="row-group">
@@ -88,6 +99,7 @@ export const Sidebar = () => {
</a>
</div>
))}
{/* <hr /> */}
</div>
</div>
)
_frontend/src/components/Toasts.jsx
+48 -26
View File
@@ -1,35 +1,57 @@
import { useStore } from '../context.jsx'
import { createContext } from 'preact'
import { useContext, useState } from 'preact/hooks'
import { Icon } from './Icon.jsx'
let globalToastId = 0
export const Toasts = () => {
const { toasts } = useStore()
const ToastContext = createContext([])
export const ToastProvider = ({ children }) => {
const [toasts, setToasts] = useState([])
const removeToast = uid => {
setToasts(toasts => toasts.filter(t => t.uid !== uid))
}
return (
<div class="toasts">
{toasts.map(({ i, removed, message }) => (
<div key={i} class={removed ? 'toast removed' : 'toast'}>
{message}
</div>
))}
</div>
<ToastContext.Provider value={{ toasts, setToasts }}>
{children}
<div class="toasts">
{toasts.map(({ uid, removed, message }) => (
<div key={uid} class={removed ? 'toast removed' : 'toast'}>
<p>{message}</p>
<div class="toast-close" onClick={() => removeToast(uid)}>
<Icon name="close" />
</div>
</div>
))}
</div>
</ToastContext.Provider>
)
}
const cleanToasts = setToasts => {
setToasts(ts => ts.filter((t, i) => !t.removed))
}
export const showToast = (_toasts, setToasts) => message => {
const toast = { i: globalToastId++, removed: false, message }
setTimeout(() => {
setToasts(ts => ts.map(t => (t === toast ? { ...t, removed: true } : t)))
}, 3000)
setTimeout(() => {
cleanToasts(setToasts)
}, 4000)
setToasts(ts => [...ts.slice(-5), toast])
export const useToasts = () => {
const { setToasts } = useContext(ToastContext)
const showToast = (message, { duration } = {}) => {
duration ??= 3000
const toast = { uid: globalToastId++, removed: false, message }
setTimeout(() => {
setToasts(toasts => toasts.map(t => (t === toast ? { ...t, removed: true } : t)))
}, duration)
setTimeout(() => {
setToasts(toasts => toasts.filter(t => !t.removed))
}, duration + 1000)
setToasts(ts => [...ts.slice(-5), toast])
}
const clearToasts = () => {
setToasts([])
}
return [showToast, clearToasts]
}
_frontend/src/main.jsx
+7 -19
View File
@@ -7,9 +7,9 @@ import { Login } from './pages/Login.jsx'
import { Store, useStore } from './context.jsx'
import { changeCase, useRouter, useUser } from './util.jsx'
import { Dashboard } from './pages/Dashboard.jsx'
import { showToast, Toasts } from './components/Toasts.jsx'
import { Sidebar } from './components/Sidebar.jsx'
import { MainContent } from './components/MainContent.jsx'
import { ToastProvider } from './components/Toasts.jsx'
const App = () => {
const [id, route, routeParams] = useRouter({
@@ -52,27 +52,14 @@ const App = () => {
}
})
const [toasts, setToasts] = useState([])
const [sidebarVisibile, setSidebarVisible] = useState(true)
const [buckets, setBuckets] = useState([])
useEffect(() => {
fetch('/api/buckets')
.then(res => res.json())
.then(value => setBuckets(value))
}, [])
const context = {
// Auth
user,
// Sidebar
sidebarVisibile,
setSidebarVisible,
buckets,
// Toasts
toasts,
setToasts,
showToast: showToast(toasts, setToasts),
// Routing
route: {
...route,
@@ -82,11 +69,12 @@ const App = () => {
}
return (
<Store.Provider value={context}>
<Sidebar />
<MainContent />
<Toasts />
</Store.Provider>
<ToastProvider>
<Store.Provider value={context}>
{user === 'admin' && <Sidebar />}
<MainContent />
</Store.Provider>
</ToastProvider>
)
}
_frontend/src/pages/ApiKeys.jsx
+5 -4
View File
@@ -1,9 +1,10 @@
import { useEffect, useState } from 'preact/hooks'
import { Icon } from '../components/Icon.jsx'
import { useToasts } from '../components/Toasts.jsx'
import { useStore } from '../context.jsx'
export const ApiKeys = () => {
const { showToast } = useStore()
const [showToast] = useToasts()
const [keys, setKeys] = useState([])
@@ -40,7 +41,7 @@ export const ApiKeys = () => {
await navigator.clipboard.writeText(key)
showToast(
<>
Copiata <code>{key}</code> negli appunti
Copiata chiave <code>{key.substring(0, 6)}</code>... negli appunti
</>
)
}
@@ -62,7 +63,7 @@ export const ApiKeys = () => {
<div class="cells" style="grid-template-columns: 1fr auto;">
{/* Header */}
<div class="header">Chiave</div>
<div class="header">Opzioni</div>
<div class="header">Azioni</div>
{/* Rows */}
{keys.map(key => {
return (
@@ -72,7 +73,7 @@ export const ApiKeys = () => {
{key}
</button>
</div>
<div class="options">
<div class="actions">
<button
class="icon delete flat"
onClick={() => removeKey(key)}
_frontend/src/pages/Bucket.jsx
+10 -3
View File
@@ -1,5 +1,6 @@
import { useEffect, useRef, useState } from 'preact/hooks'
import { Icon } from '../components/Icon.jsx'
import { useToasts } from '../components/Toasts.jsx'
import { useStore } from '../context.jsx'
import { useRemoteState } from '../util.jsx'
@@ -8,10 +9,16 @@ export const Bucket = () => {
route: {
params: { bucket },
},
showToast,
} = useStore()
const [bucketObjects, updateBucketObjects] = useRemoteState(`/api/buckets/${bucket}`, [])
const [showToast] = useToasts()
const [bucketObjects, err, updateBucketObjects] = useRemoteState(`/api/buckets/${bucket}`, [])
useEffect(() => {
if (err) {
showToast(`Errore "${err}"`)
}
}, [err])
const fileInputRef = useRef(null)
@@ -46,7 +53,7 @@ export const Bucket = () => {
if (res.ok) {
showToast('Oggetto rimosso')
} else {
showToast(`Errore: ${await res.text()}`)
showToast(`Errore "${await res.text()}"`)
}
}
_frontend/src/pages/Buckets.jsx
+21 -6
View File
@@ -1,10 +1,18 @@
import { useEffect, useState } from 'preact/hooks'
import { Icon } from '../components/Icon.jsx'
import { showToast } from '../components/Toasts.jsx'
import { useToasts } from '../components/Toasts.jsx'
import { useRemoteState } from '../util.jsx'
export const Buckets = () => {
const [buckets, updateBuckets] = useRemoteState('/api/buckets', [])
const [showToast] = useToasts()
const [buckets, err, updateBuckets] = useRemoteState('/api/buckets', [])
useEffect(() => {
if (err) {
showToast(`Errore "${err}"`)
}
}, [err])
const [allBucketSettings, setAllBucketSettings] = useState({})
const updateBucketSettings = async bucket => {
@@ -44,6 +52,10 @@ export const Buckets = () => {
}
}
const deleteBucket = async bucket => {
showToast('TODO: Not implemented')
}
return (
<>
<div class="panel">
@@ -57,7 +69,7 @@ export const Buckets = () => {
{/* Header */}
<div class="header">Bucket</div>
<div class="header">Settings</div>
<div class="header">Options</div>
<div class="header">Actions</div>
{/* Rows */}
{buckets.map(bucket => (
<>
@@ -74,8 +86,11 @@ export const Buckets = () => {
value={JSON.stringify(allBucketSettings[bucket])}
/>
</div>
<div class="options">
<button class="icon delete flat">
<div class="actions">
<button
class="icon delete flat"
onClick={() => deleteBucket(bucket)}
>
<Icon name="delete" />
</button>
</div>
@@ -85,7 +100,7 @@ export const Buckets = () => {
</div>
</div>
<form action="/api/buckets" method="POST">
<form action="/api/buckets" method="POST" autocomplete="off">
<div class="fill title">Nuovo Bucket</div>
<label for="new-bucket-name">Name</label>
_frontend/src/util.jsx
+14 -8
View File
@@ -58,22 +58,28 @@ export const useRouter = routes => {
// useRemoteState
export function useRemoteState(url, initialValue = null) {
const [error, setError] = useState(null)
const [value, setValue] = useState(initialValue)
const updateValue = async () => {
const res = await fetch(url)
if (!res.ok) {
console.error(res.body)
}
const refresh = async () => {
try {
const res = await fetch(url)
if (!res.ok) {
setError(await res.text())
return
}
setValue(await res.json())
setValue(await res.json())
} catch (err) {
setError(err)
}
}
useEffect(() => {
updateValue()
refresh()
}, [])
return [value, updateValue]
return [value, error, refresh]
}
//