From 4d5a9293661aec7abf0b3bb7a4684a1b078285d1 Mon Sep 17 00:00:00 2001 From: chlbri <51156116+chlbri@users.noreply.github.com> Date: Thu, 24 Mar 2022 09:05:35 +0000 Subject: [PATCH] Feature style (#627) * initial * style: style and remove Svg export * tiny up Co-authored-by: Steve Ruiz --- apps/vscode/editor/src/app.tsx | 28 +++++++------- apps/www/components/Editor.tsx | 10 +++-- apps/www/components/MultiplayerEditor.tsx | 32 ++++++++-------- apps/www/hooks/useMultiplayerAssets.ts | 45 +++++++++++------------ apps/www/hooks/useMultiplayerState.ts | 20 +++++----- apps/www/pages/index.tsx | 8 ++-- apps/www/pages/sponsorware.tsx | 12 +++--- packages/core/src/utils/index.d.ts | 5 --- 8 files changed, 79 insertions(+), 81 deletions(-) delete mode 100644 packages/core/src/utils/index.d.ts diff --git a/apps/vscode/editor/src/app.tsx b/apps/vscode/editor/src/app.tsx index 64f010d49..725d0d4d9 100644 --- a/apps/vscode/editor/src/app.tsx +++ b/apps/vscode/editor/src/app.tsx @@ -1,28 +1,26 @@ /* eslint-disable @typescript-eslint/no-non-null-assertion */ -import * as React from 'react' -import { Tldraw, TldrawApp, TDFile, TDDocument } from '@tldraw/tldraw' -import { vscode } from './utils/vscode' -import { defaultDocument } from './utils/defaultDocument' -import type { MessageFromExtension, MessageFromWebview } from './types' +import { TDDocument, TDFile, Tldraw, TldrawApp } from '@tldraw/tldraw' +import { FC, useCallback, useEffect, useRef } from 'react' import { exportToImage } from 'utils/export' +import type { MessageFromExtension, MessageFromWebview } from './types' +import { defaultDocument } from './utils/defaultDocument' +import { vscode } from './utils/vscode' // Will be placed in global scope by extension declare let currentFile: TDFile -export default function App(): JSX.Element { - const rLoaded = React.useRef(false) - const rTldrawApp = React.useRef() - const rInitialDocument = React.useRef( - currentFile ? currentFile.document : defaultDocument - ) +const App: FC = () => { + const rLoaded = useRef(false) + const rTldrawApp = useRef() + const rInitialDocument = useRef(currentFile ? currentFile.document : defaultDocument) // When the editor mounts, save the state instance in a ref. - const handleMount = React.useCallback((app: TldrawApp) => { + const handleMount = useCallback((app: TldrawApp) => { rTldrawApp.current = app }, []) // When the editor's document changes, post the stringified document to the vscode extension. - const handlePersist = React.useCallback((app: TldrawApp) => { + const handlePersist = useCallback((app: TldrawApp) => { vscode.postMessage({ type: 'editorUpdated', text: JSON.stringify({ @@ -34,7 +32,7 @@ export default function App(): JSX.Element { }, []) // When the file changes from VS Code's side, update the editor's document. - React.useEffect(() => { + useEffect(() => { function handleMessage({ data }: MessageEvent) { if (data.type === 'openedFile') { try { @@ -73,3 +71,5 @@ export default function App(): JSX.Element { ) } + +export default App diff --git a/apps/www/components/Editor.tsx b/apps/www/components/Editor.tsx index f5727a129..57e0a3f36 100644 --- a/apps/www/components/Editor.tsx +++ b/apps/www/components/Editor.tsx @@ -1,8 +1,8 @@ -import React from 'react' -import * as gtag from 'utils/gtag' import { Tldraw, TldrawApp, TldrawProps, useFileSystem } from '@tldraw/tldraw' import { useAccountHandlers } from 'hooks/useAccountHandlers' +import React, { FC } from 'react' import { exportToImage } from 'utils/export' +import * as gtag from 'utils/gtag' declare const window: Window & { app: TldrawApp } @@ -12,12 +12,12 @@ interface EditorProps { isSponsor?: boolean } -export default function Editor({ +const Editor: FC> = ({ id = 'home', isUser = false, isSponsor = false, ...rest -}: EditorProps & Partial) { +}) => { const handleMount = React.useCallback((app: TldrawApp) => { window.app = app }, []) @@ -53,3 +53,5 @@ export default function Editor({ ) } + +export default Editor diff --git a/apps/www/components/MultiplayerEditor.tsx b/apps/www/components/MultiplayerEditor.tsx index b0ca17490..1612ab359 100644 --- a/apps/www/components/MultiplayerEditor.tsx +++ b/apps/www/components/MultiplayerEditor.tsx @@ -1,19 +1,25 @@ -import * as React from 'react' -import { Tldraw, useFileSystem } from '@tldraw/tldraw' import { createClient } from '@liveblocks/client' import { LiveblocksProvider, RoomProvider } from '@liveblocks/react' +import { Tldraw, useFileSystem } from '@tldraw/tldraw' import { useAccountHandlers } from 'hooks/useAccountHandlers' -import { styled } from 'styles' -import { useMultiplayerState } from 'hooks/useMultiplayerState' -import { exportToImage } from 'utils/export' import { useMultiplayerAssets } from 'hooks/useMultiplayerAssets' +import { useMultiplayerState } from 'hooks/useMultiplayerState' +import { FC } from 'react' +import { styled } from 'styles' +import { exportToImage } from 'utils/export' const client = createClient({ publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_API_KEY || '', throttle: 80, }) -export default function MultiplayerEditor({ +interface Props { + roomId: string + isUser: boolean + isSponsor: boolean +} + +const MultiplayerEditor: FC = ({ roomId, isUser = false, isSponsor = false, @@ -21,7 +27,7 @@ export default function MultiplayerEditor({ roomId: string isUser: boolean isSponsor: boolean -}) { +}) => { return ( @@ -33,15 +39,7 @@ export default function MultiplayerEditor({ // Inner Editor -function Editor({ - roomId, - isUser, - isSponsor, -}: { - roomId: string - isUser: boolean - isSponsor: boolean -}) { +function Editor({ roomId, isUser, isSponsor }: Props) { const fileSystemEvents = useFileSystem() const { onSignIn, onSignOut } = useAccountHandlers() const { error, ...events } = useMultiplayerState(roomId) @@ -68,6 +66,8 @@ function Editor({ ) } +export default MultiplayerEditor + const LoadingScreen = styled('div', { position: 'absolute', top: 0, diff --git a/apps/www/hooks/useMultiplayerAssets.ts b/apps/www/hooks/useMultiplayerAssets.ts index b5a9f1939..2918986c3 100644 --- a/apps/www/hooks/useMultiplayerAssets.ts +++ b/apps/www/hooks/useMultiplayerAssets.ts @@ -1,30 +1,27 @@ -import React from 'react' +import { useCallback } from 'react' export function useMultiplayerAssets() { - const onAssetCreate = React.useCallback( - async (file: File, id: string): Promise => { - const filename = encodeURIComponent(file.name) - const fileType = encodeURIComponent(file.type) - const res = await fetch(`/api/upload?file=${filename}&fileType=${fileType}`) - const { url, fields } = await res.json() - const formData = new FormData() - Object.entries({ ...fields, file }).forEach(([key, value]) => { - formData.append(key, value as any) - }) - const upload = await fetch(url, { - method: 'POST', - body: formData, - }) - if (upload.ok) { - return url + '/' + filename - } else { - return false - } - }, - [] - ) + const onAssetCreate = useCallback(async (file: File, id: string): Promise => { + const filename = encodeURIComponent(file.name) + const fileType = encodeURIComponent(file.type) + const res = await fetch(`/api/upload?file=${filename}&fileType=${fileType}`) + const { url, fields } = await res.json() + const formData = new FormData() + Object.entries({ ...fields, file }).forEach(([key, value]) => { + formData.append(key, value as any) + }) + const upload = await fetch(url, { + method: 'POST', + body: formData, + }) + if (upload.ok) { + return url + '/' + filename + } else { + return false + } + }, []) - const onAssetDelete = React.useCallback(async (id: string): Promise => { + const onAssetDelete = useCallback(async (id: string): Promise => { // noop return true }, []) diff --git a/apps/www/hooks/useMultiplayerState.ts b/apps/www/hooks/useMultiplayerState.ts index 2c28ce9e2..19c5ee254 100644 --- a/apps/www/hooks/useMultiplayerState.ts +++ b/apps/www/hooks/useMultiplayerState.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-non-null-assertion */ -import * as React from 'react' +import React, { useState, useRef, useCallback } from 'react' import type { TldrawApp, TDUser, TDShape, TDBinding, TDDocument, TDAsset } from '@tldraw/tldraw' import { useRedo, useUndo, useRoom, useUpdateMyPresence } from '@liveblocks/react' import { LiveMap, LiveObject } from '@liveblocks/client' @@ -8,23 +8,23 @@ import { LiveMap, LiveObject } from '@liveblocks/client' declare const window: Window & { app: TldrawApp } export function useMultiplayerState(roomId: string) { - const [app, setApp] = React.useState() - const [error, setError] = React.useState() - const [loading, setLoading] = React.useState(true) + const [app, setApp] = useState() + const [error, setError] = useState() + const [loading, setLoading] = useState(true) const room = useRoom() const onUndo = useUndo() const onRedo = useRedo() const updateMyPresence = useUpdateMyPresence() - const rLiveShapes = React.useRef>() - const rLiveBindings = React.useRef>() - const rLiveAssets = React.useRef>() + const rLiveShapes = useRef>() + const rLiveBindings = useRef>() + const rLiveAssets = useRef>() // Callbacks -------------- // Put the state into the window, for debugging. - const onMount = React.useCallback( + const onMount = useCallback( (app: TldrawApp) => { app.loadRoom(roomId) app.pause() // Turn off the app's own undo / redo stack @@ -35,7 +35,7 @@ export function useMultiplayerState(roomId: string) { ) // Update the live shapes when the app's shapes change. - const onChangePage = React.useCallback( + const onChangePage = useCallback( ( app: TldrawApp, shapes: Record, @@ -78,7 +78,7 @@ export function useMultiplayerState(roomId: string) { ) // Handle presence updates when the user's pointer / selection changes - const onChangePresence = React.useCallback( + const onChangePresence = useCallback( (app: TldrawApp, user: TDUser) => { updateMyPresence({ id: app.room?.userId, user }) }, diff --git a/apps/www/pages/index.tsx b/apps/www/pages/index.tsx index ecc311255..4b3a96635 100644 --- a/apps/www/pages/index.tsx +++ b/apps/www/pages/index.tsx @@ -1,9 +1,9 @@ -import dynamic from 'next/dynamic' import type { GetServerSideProps } from 'next' import { getSession } from 'next-auth/react' +import dynamic from 'next/dynamic' import Head from 'next/head' import { useRouter } from 'next/router' -import { useMemo } from 'react' +import { FC, useMemo } from 'react' const Editor = dynamic(() => import('components/Editor'), { ssr: false }) @@ -12,7 +12,7 @@ interface PageProps { isSponsor: boolean } -export default function Home({ isUser, isSponsor }: PageProps): JSX.Element { +const Home: FC = ({ isUser, isSponsor }) => { const { query } = useRouter() const isExportMode = useMemo(() => 'exportMode' in query, [query]) @@ -26,6 +26,8 @@ export default function Home({ isUser, isSponsor }: PageProps): JSX.Element { ) } +export default Home + export const getServerSideProps: GetServerSideProps = async (context) => { const session = await getSession(context) diff --git a/apps/www/pages/sponsorware.tsx b/apps/www/pages/sponsorware.tsx index 348de8011..4074eb5b1 100644 --- a/apps/www/pages/sponsorware.tsx +++ b/apps/www/pages/sponsorware.tsx @@ -1,11 +1,11 @@ -import { styled } from 'styles' -import { getSession, signIn, signOut, useSession } from 'next-auth/react' import type { GetServerSideProps } from 'next' -import Link from 'next/link' -import React from 'react' +import { getSession, signIn, signOut, useSession } from 'next-auth/react' import Head from 'next/head' +import Link from 'next/link' +import React, { FC } from 'react' +import { styled } from 'styles' -export default function Sponsorware(): JSX.Element { +const Sponsorware: FC = () => { const { data, status } = useSession() return ( @@ -86,6 +86,8 @@ export default function Sponsorware(): JSX.Element { ) } +export default Sponsorware + export const getServerSideProps: GetServerSideProps = async (context) => { const session = await getSession(context) diff --git a/packages/core/src/utils/index.d.ts b/packages/core/src/utils/index.d.ts deleted file mode 100644 index b442d1d2e..000000000 --- a/packages/core/src/utils/index.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Utils } from './utils' -export { Utils } from './utils' -export { Svg } from './svg' -export default Utils -//# sourceMappingURL=index.d.ts.map