| 1 |
import { |
| 2 |
fetchSharedBlockUsage, |
| 3 |
isSharedBlockId, |
| 4 |
sharedBlockNotice, |
| 5 |
} from '@agent/lib/shared-block-usage'; |
| 6 |
import { useEffect, useState } from '@wordpress/element'; |
| 7 |
|
| 8 |
export const SharedBlockNotice = ({ blockIds }) => { |
| 9 |
const [notice, setNotice] = useState(null); |
| 10 |
const shared = (Array.isArray(blockIds) ? blockIds : []).find((id) => |
| 11 |
isSharedBlockId(id), |
| 12 |
); |
| 13 |
|
| 14 |
useEffect(() => { |
| 15 |
if (!shared) return setNotice(null); |
| 16 |
let live = true; |
| 17 |
fetchSharedBlockUsage(shared) |
| 18 |
.then((usage) => live && setNotice(sharedBlockNotice(usage))) |
| 19 |
// A missing scope must not block the save the user already reviewed. |
| 20 |
.catch(() => live && setNotice(null)); |
| 21 |
return () => { |
| 22 |
live = false; |
| 23 |
}; |
| 24 |
}, [shared]); |
| 25 |
|
| 26 |
if (!notice) return null; |
| 27 |
|
| 28 |
return ( |
| 29 |
<p className="m-0 mt-2 p-0 text-sm text-gray-700"> |
| 30 |
<span aria-hidden="true">⚠ </span> |
| 31 |
<span>{notice}</span> |
| 32 |
</p> |
| 33 |
); |
| 34 |
}; |
| 35 |
|
