This commit is contained in:
Steve Ruiz 2022-05-18 22:06:05 +01:00
commit 7e85d00c66
7 changed files with 67 additions and 14 deletions

View file

@ -1,5 +1,6 @@
import { Tldraw, TldrawApp, TldrawProps, useFileSystem } from '@tldraw/tldraw'
import { useAccountHandlers } from 'hooks/useAccountHandlers'
import { useUploadAssets } from 'hooks/useUploadAssets'
import React, { FC } from 'react'
import * as gtag from 'utils/gtag'
@ -35,6 +36,8 @@ const Editor: FC<EditorProps & Partial<TldrawProps>> = ({
const { onSignIn, onSignOut } = useAccountHandlers()
const { onAssetUpload } = useUploadAssets()
return (
<div className="tldraw">
<Tldraw
@ -45,6 +48,7 @@ const Editor: FC<EditorProps & Partial<TldrawProps>> = ({
showSponsorLink={!isSponsor}
onSignIn={isSponsor ? undefined : onSignIn}
onSignOut={isUser ? onSignOut : undefined}
onAssetUpload={onAssetUpload}
{...fileSystemEvents}
{...rest}
/>

View file

@ -42,7 +42,7 @@ function Editor({ roomId, isUser, isSponsor }: Props) {
const fileSystemEvents = useFileSystem()
const { onSignIn, onSignOut } = useAccountHandlers()
const { error, ...events } = useMultiplayerState(roomId)
const { onAssetCreate, onAssetDelete } = useMultiplayerAssets()
const { onAssetCreate, onAssetUpload, onAssetDelete } = useMultiplayerAssets()
if (error) return <LoadingScreen>Error: {error.message}</LoadingScreen>
@ -57,6 +57,7 @@ function Editor({ roomId, isUser, isSponsor }: Props) {
onSignOut={isUser ? onSignOut : undefined}
onAssetCreate={onAssetCreate}
onAssetDelete={onAssetDelete}
onAssetUpload={onAssetUpload}
{...fileSystemEvents}
{...events}
/>

View file

@ -1,4 +1,4 @@
import { TldrawApp } from '@tldraw/tldraw'
import { TDAsset, TldrawApp } from '@tldraw/tldraw'
import { useCallback } from 'react'
export function useMultiplayerAssets() {
@ -62,6 +62,36 @@ export function useMultiplayerAssets() {
[]
)
const onAssetUpload = useCallback(
// Send the asset to our upload enpoint, which in turn will send it to AWS and
// respond with the URL of the uploaded file.
async (app: TldrawApp, id: string, asset: TDAsset): Promise<string | false> => {
const filename = encodeURIComponent(asset.id)
const fileType = encodeURIComponent(asset.type)
const res = await fetch(`/api/upload?file=${filename}&fileType=${fileType}`)
const { url, fields } = await res.json()
const formData = new FormData()
Object.entries({ ...fields, asset }).forEach(([key, value]) => {
formData.append(key, value as any)
})
const upload = await fetch(url, {
method: 'POST',
body: formData,
})
if (!upload.ok) return false
return url + '/' + filename
},
[]
)
const onAssetDelete = useCallback(async (app: TldrawApp, id: string): Promise<boolean> => {
// noop
return true

View file

@ -32,5 +32,6 @@ export function useUploadAssets() {
},
[]
)
return { onAssetUpload }
}

View file

@ -51,7 +51,7 @@ export default async function CreateMultiplayerRoom(req: NextApiRequest, res: Ne
// },
// }).then((d) => d.json())
//POST
// POST
const result = await fetch(`https://liveblocks.net/api/v1/room/${roomId}/storage`, {
method: 'POST',
mode: 'cors',
@ -64,10 +64,12 @@ export default async function CreateMultiplayerRoom(req: NextApiRequest, res: Ne
})
if (result.status === 200) {
res.send({ status: 'success', roomId })
res.send({ status: 'success', message: result.statusText, roomId })
} else {
res.send({ status: 'error', message: result.statusText })
}
} catch (e) {
res.send({ status: 'error' })
res.send({ status: 'error', message: e.message })
// noop
}
}

View file

@ -128,6 +128,7 @@ export function Tldraw({
onChangePage,
onAssetCreate,
onAssetDelete,
onAssetUpload,
onExport,
}: TldrawProps) {
const [sId, setSId] = React.useState(id)
@ -153,6 +154,7 @@ export function Tldraw({
onChangePage,
onAssetDelete,
onAssetCreate,
onAssetUpload,
})
return app
})
@ -179,6 +181,7 @@ export function Tldraw({
onChangePage,
onAssetDelete,
onAssetCreate,
onAssetUpload,
onExport,
})
@ -243,6 +246,7 @@ export function Tldraw({
onChangePage,
onAssetDelete,
onAssetCreate,
onAssetUpload,
onExport,
}
}, [
@ -264,6 +268,7 @@ export function Tldraw({
onChangePage,
onAssetDelete,
onAssetCreate,
onAssetUpload,
onExport,
])

View file

@ -66,7 +66,7 @@ export const MultiplayerMenu = React.memo(function MultiplayerMenu() {
const body = JSON.stringify({
roomId: Utils.uniqueId(),
pageId: app.currentPageId,
document: app.document,
document: nextDocument,
})
const myHeaders = new Headers({
@ -74,16 +74,26 @@ export const MultiplayerMenu = React.memo(function MultiplayerMenu() {
'Content-Type': 'application/json',
})
const res = await fetch(`/api/create`, {
headers: myHeaders,
method: 'POST',
mode: 'no-cors',
body,
}).then((res) => res.json())
app.setIsLoading(true)
if (res?.roomId) {
window.location.href = `/r/${res.roomId}`
try {
const res = await fetch(`/api/create`, {
headers: myHeaders,
method: 'POST',
mode: 'no-cors',
body,
}).then(res => res.json())
if (res?.roomId) {
window.location.href = `/r/${res.roomId}`
} else {
TLDR.warn(res.message)
}
} catch (e) {
TLDR.warn(e.message)
}
app.setIsLoading(false)
}, [])
return (