Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(structure): make sync document toast dismisable #7209

Merged
merged 4 commits into from
Aug 22, 2024
Merged

fix(structure): make sync document toast dismisable #7209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ab24a4f
fix(structure): make sync document toast dismissable
pedrobonamin Jul 19, 2024
e1cecba
fix(structure): close conditional toast when component unmounts
pedrobonamin Jul 20, 2024
0c63c49
chore(structure): remove the usePrevious hook in useConditionalToast
pedrobonamin Jul 20, 2024
ff02fc6
fix(structure): update sync lock toast id to make it unique across do…
pedrobonamin Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions packages/sanity/src/structure/panes/document/documentPanel/documentViews/FormView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,19 @@
const isLocked = editState?.transactionSyncLock?.enabled
const {t} = useTranslation(structureLocaleNamespace)

useConditionalToast({
id: `sync-lock-${documentId}`,
status: 'warning',
enabled: isLocked,
title: t('document-view.form-view.sync-lock-toast.title'),
description: t('document-view.form-view.sync-lock-toast.description'),
})
const conditionalToastParams = useMemo(
() => ({
id: `sync-lock`,
status: 'warning' as const,
enabled: isLocked,
title: t('document-view.form-view.sync-lock-toast.title'),
description: t('document-view.form-view.sync-lock-toast.description'),
closable: true,
}),
[isLocked, t],
)

useConditionalToast(conditionalToastParams)

useEffect(() => {
const sub = documentStore.pair
Expand Down Expand Up @@ -110,7 +116,7 @@
})
}
// React to changes in hasRev only
// eslint-disable-next-line react-hooks/exhaustive-deps

Check warning on line 119 in packages/sanity/src/structure/panes/document/documentPanel/documentViews/FormView.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior
}, [hasRev])

const [formRef, setFormRef] = useState<null | HTMLDivElement>(null)
Expand Down
29 changes: 11 additions & 18 deletions ...es/sanity/src/structure/panes/document/documentPanel/documentViews/useConditionalToast.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,5 @@
import {type ToastParams, useToast} from '@sanity/ui'
import {useEffect, useRef} from 'react'

function usePrevious<T>(value: T) {
const ref = useRef<T>()
useEffect(() => {
ref.current = value
}, [value])
return ref.current
}
import {useEffect} from 'react'

// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
const LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24
Expand All @@ -18,19 +10,20 @@ const LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24
export function useConditionalToast(params: ToastParams & {id: string; enabled?: boolean}) {
const toast = useToast()

const wasEnabled = usePrevious(params.enabled)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not necessary now that the cleanup function was added to the useEffect.
If the params.enabled condition was true, then the cleanup will take care of closing the toast when params.enabled changes or when the component is unmounted

// note1: there's a `duration || 0` in Sanity UI's pushToast(), so make it non-falsey
// note2: cannot use `Infinity` as duration, since it exceeds setTimeout's maximum delay value
useEffect(() => {
if (!wasEnabled && params.enabled) {
if (params.enabled) {
toast.push({...params, duration: LONG_ENOUGH_BUT_NOT_TOO_LONG})
}
if (wasEnabled && !params.enabled) {
toast.push({
...params,
// Note: @sanity/ui fallbacks to the default duration of 4s in case of falsey values
duration: 0.01,
})
return () => {
if (params.enabled) {
toast.push({
...params,
// Note: @sanity/ui fallbacks to the default duration of 4s in case of falsey values
duration: 0.01,
})
}
}
}, [params, toast, wasEnabled])
}, [params, toast])
}
Loading