feat: publishing cheers modal
This commit is contained in:
DIYgod
parent
6a2fbd1df4
commit
9fb7619051
|
|
@ -45,6 +45,7 @@
|
|||
"@uiw/react-codemirror": "4.19.6",
|
||||
"@urql/core": "3.1.1",
|
||||
"axios": "1.2.2",
|
||||
"canvas-confetti": "^1.6.0",
|
||||
"clsx": "1.2.1",
|
||||
"crossbell.js": "0.16.1",
|
||||
"dayjs": "1.11.7",
|
||||
|
|
@ -110,6 +111,7 @@
|
|||
"@next/bundle-analyzer": "13.1.2",
|
||||
"@playwright/test": "1.29.2",
|
||||
"@tailwindcss/line-clamp": "^0.4.2",
|
||||
"@types/canvas-confetti": "^1.6.0",
|
||||
"@types/cookie": "0.5.1",
|
||||
"@types/hast": "2.3.4",
|
||||
"@types/js-yaml": "4.0.5",
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ specifiers:
|
|||
'@tanstack/react-query': 4.22.0
|
||||
'@tanstack/react-query-devtools': 4.22.0
|
||||
'@tanstack/react-query-persist-client': 4.22.0
|
||||
'@types/canvas-confetti': ^1.6.0
|
||||
'@types/cookie': 0.5.1
|
||||
'@types/hast': 2.3.4
|
||||
'@types/js-yaml': 4.0.5
|
||||
|
|
@ -53,6 +54,7 @@ specifiers:
|
|||
'@urql/core': 3.1.1
|
||||
autoprefixer: 10.4.13
|
||||
axios: 1.2.2
|
||||
canvas-confetti: ^1.6.0
|
||||
clsx: 1.2.1
|
||||
cross-spawn: 7.0.3
|
||||
crossbell.js: 0.16.1
|
||||
|
|
@ -151,6 +153,7 @@ dependencies:
|
|||
'@uiw/react-codemirror': 4.19.6_hyb5to5u4twfhgokb4qeeija2e
|
||||
'@urql/core': 3.1.1
|
||||
axios: 1.2.2
|
||||
canvas-confetti: 1.6.0
|
||||
clsx: 1.2.1
|
||||
crossbell.js: 0.16.1
|
||||
dayjs: 1.11.7
|
||||
|
|
@ -216,6 +219,7 @@ devDependencies:
|
|||
'@next/bundle-analyzer': 13.1.2
|
||||
'@playwright/test': 1.29.2
|
||||
'@tailwindcss/line-clamp': 0.4.2_tailwindcss@3.2.4
|
||||
'@types/canvas-confetti': 1.6.0
|
||||
'@types/cookie': 0.5.1
|
||||
'@types/hast': 2.3.4
|
||||
'@types/js-yaml': 4.0.5
|
||||
|
|
@ -2653,6 +2657,10 @@ packages:
|
|||
'@types/node': 18.11.18
|
||||
dev: false
|
||||
|
||||
/@types/canvas-confetti/1.6.0:
|
||||
resolution: {integrity: sha512-Yq6rIccwcco0TLD5SMUrIM7Fk7Fe/C0jmNRxJJCLtAF6gebDkPuUjK5EHedxecm69Pi/aA+It39Ux4OHmFhjRw==}
|
||||
dev: true
|
||||
|
||||
/@types/chai-subset/1.3.3:
|
||||
resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
|
||||
dependencies:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
import confetti from "canvas-confetti"
|
||||
|
||||
export function showConfetti() {
|
||||
if (typeof window !== "undefined") {
|
||||
const end = Date.now() + 100
|
||||
const config: confetti.Options = {
|
||||
particleCount: 25,
|
||||
startVelocity: 90,
|
||||
angle: 60,
|
||||
spread: 60,
|
||||
origin: { x: 0, y: 1 },
|
||||
zIndex: 300,
|
||||
gravity: 1.5,
|
||||
colors: ["#6AD991", "#F6C549", "#E65040", "#5B89F7", "#9688F2"],
|
||||
}
|
||||
|
||||
;(function frame() {
|
||||
confetti({
|
||||
...config,
|
||||
angle: 60,
|
||||
origin: { x: 0, y: 1 },
|
||||
})
|
||||
|
||||
confetti({
|
||||
...config,
|
||||
angle: 120,
|
||||
origin: { x: 1, y: 1 },
|
||||
})
|
||||
|
||||
if (Date.now() < end) {
|
||||
requestAnimationFrame(frame)
|
||||
}
|
||||
})()
|
||||
}
|
||||
}
|
||||
|
|
@ -35,6 +35,9 @@ import type { EditorView } from "@codemirror/view"
|
|||
import { Editor } from "~/components/ui/Editor"
|
||||
import { renderPageContent } from "~/markdown"
|
||||
import { Button } from "~/components/ui/Button"
|
||||
import { Modal } from "~/components/ui/Modal"
|
||||
import { CSB_SCAN } from "~/lib/env"
|
||||
import { showConfetti } from "~/lib/confetti"
|
||||
|
||||
const getInputDatetimeValue = (date: Date | string) => {
|
||||
const str = dayjs(date).format()
|
||||
|
|
@ -158,16 +161,11 @@ export default function SubdomainEditor() {
|
|||
}
|
||||
}
|
||||
|
||||
const [isCheersOpen, setIsCheersOpen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (createOrUpdatePage.isSuccess) {
|
||||
if (createOrUpdatePage.data?.code === 0) {
|
||||
if (values.published) {
|
||||
toast.success("Updated!")
|
||||
} else {
|
||||
toast.success(
|
||||
"Published!\nPlease wait a few seconds for the blockchain indexing to complete.",
|
||||
)
|
||||
}
|
||||
if (draftKey) {
|
||||
delStorage(draftKey)
|
||||
queryClient.invalidateQueries(["getPagesBySite", subdomain])
|
||||
|
|
@ -184,6 +182,9 @@ export default function SubdomainEditor() {
|
|||
`/dashboard/${subdomain}/editor?id=${site.data?.metadata?.proof}-${createOrUpdatePage.data.data}&type=${router.query.type}`,
|
||||
)
|
||||
}
|
||||
|
||||
setIsCheersOpen(true)
|
||||
showConfetti()
|
||||
} else {
|
||||
toast.error("Error: " + createOrUpdatePage.data?.message)
|
||||
}
|
||||
|
|
@ -566,6 +567,63 @@ export default function SubdomainEditor() {
|
|||
)}
|
||||
</DashboardMain>
|
||||
</DashboardLayout>
|
||||
<Modal
|
||||
open={isCheersOpen}
|
||||
setOpen={setIsCheersOpen}
|
||||
title="🎉 Published!"
|
||||
>
|
||||
<div className="p-5">
|
||||
Your post has been permanently stored on the blockchain. Now you may
|
||||
want to
|
||||
<ul className="list-disc pl-5 mt-2 space-y-1">
|
||||
<li>
|
||||
<UniLink
|
||||
className="text-accent"
|
||||
href={`${getSiteLink({
|
||||
subdomain,
|
||||
domain: site.data?.custom_domain,
|
||||
})}/${values.slug || defaultSlug}`}
|
||||
>
|
||||
View the post
|
||||
</UniLink>
|
||||
</li>
|
||||
<li>
|
||||
<UniLink
|
||||
className="text-accent"
|
||||
href={
|
||||
page.data?.metadata?.transactions &&
|
||||
`${CSB_SCAN}/tx/${
|
||||
page.data?.metadata?.transactions[1] ||
|
||||
page.data?.metadata?.transactions[0]
|
||||
}`
|
||||
}
|
||||
>
|
||||
View the transaction
|
||||
</UniLink>
|
||||
</li>
|
||||
<li>
|
||||
<UniLink
|
||||
className="text-accent"
|
||||
href={`https://twitter.com/intent/tweet?url=${getSiteLink({
|
||||
subdomain,
|
||||
domain: site.data?.custom_domain,
|
||||
})}/${
|
||||
values.slug || defaultSlug
|
||||
}&via=_xLog&text=${encodeURIComponent(
|
||||
`Read my new post - ${page.data?.title}`,
|
||||
)}`}
|
||||
>
|
||||
Share to Twitter
|
||||
</UniLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="h-16 border-t flex items-center px-5">
|
||||
<Button isBlock onClick={() => setIsCheersOpen(false)}>
|
||||
Got it, thanks!
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue