refactor(home): move EmbedCodeDialog to its own file

This commit is contained in:
Jeremy Kahn 2023-10-08 16:54:49 -05:00
parent cbd0da50f6
commit 7a7ddf80fc
2 changed files with 91 additions and 63 deletions

View File

@ -0,0 +1,84 @@
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogContentText from '@mui/material/DialogContentText'
import DialogTitle from '@mui/material/DialogTitle'
// These imports need to be ts-ignored to prevent spurious errors that look
// like this:
//
// Module 'react-markdown' cannot be imported using this construct. The
// specifier only resolves to an ES module, which cannot be imported
// synchronously. Use dynamic import instead. (tsserver 1471)
//
// @ts-ignore
import Markdown from 'react-markdown'
// @ts-ignore
import { CodeProps } from 'react-markdown/lib/ast-to-react'
// @ts-ignore
import remarkGfm from 'remark-gfm'
interface EmbedCodeDialogProps {
showEmbedCode: boolean
handleEmbedCodeWindowClose: () => void
embedUrl: URL
}
export const EmbedCodeDialog = ({
showEmbedCode,
handleEmbedCodeWindowClose,
embedUrl,
}: EmbedCodeDialogProps) => (
<Dialog open={showEmbedCode} onClose={handleEmbedCodeWindowClose}>
<DialogTitle>Room embed code</DialogTitle>
<DialogContent>
<Markdown
remarkPlugins={[remarkGfm]}
components={{
// https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight
code({
node,
inline,
className,
children,
style,
...props
}: CodeProps) {
return (
<SyntaxHighlighter
children={String(children).replace(/\n$/, '')}
language="html"
style={materialDark}
PreTag="div"
lineProps={{
style: {
wordBreak: 'break-all',
whiteSpace: 'pre-wrap',
},
}}
wrapLines={true}
{...props}
/>
)
},
}}
>
{`\`\`\`html
<iframe src="${embedUrl}" allow="camera;microphone;display-capture" width="800" height="800" />
\`\`\``}
</Markdown>
<DialogContentText
sx={{
mb: 2,
}}
>
Copy and paste this HTML snippet into your project.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleEmbedCodeWindowClose}>Close</Button>
</DialogActions>
</Dialog>
)

View File

@ -10,34 +10,16 @@ import IconButton from '@mui/material/IconButton'
import MuiLink from '@mui/material/Link'
import GitHubIcon from '@mui/icons-material/GitHub'
import Cached from '@mui/icons-material/Cached'
import Dialog from '@mui/material/Dialog'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogContentText from '@mui/material/DialogContentText'
import DialogTitle from '@mui/material/DialogTitle'
import { v4 as uuid } from 'uuid'
// These imports need to be ts-ignored to prevent spurious errors that look
// like this:
//
// Module 'react-markdown' cannot be imported using this construct. The
// specifier only resolves to an ES module, which cannot be imported
// synchronously. Use dynamic import instead. (tsserver 1471)
//
// @ts-ignore
import Markdown from 'react-markdown'
// @ts-ignore
import { CodeProps } from 'react-markdown/lib/ast-to-react'
// @ts-ignore
import remarkGfm from 'remark-gfm'
import { routes } from 'config/routes'
import { ShellContext } from 'contexts/ShellContext'
import { PeerNameDisplay } from 'components/PeerNameDisplay'
import { ReactComponent as Logo } from 'img/logo.svg'
import { EmbedCodeDialog } from './EmbedCodeDialog'
interface HomeProps {
userId: string
}
@ -209,49 +191,11 @@ export function Home({ userId }: HomeProps) {
</MuiLink>
.
</Typography>
<Dialog open={showEmbedCode} onClose={handleEmbedCodeWindowClose}>
<DialogTitle>Room embed code</DialogTitle>
<DialogContent>
<Markdown
remarkPlugins={[remarkGfm]}
components={{
// https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight
code({
node,
inline,
className,
children,
style,
...props
}: CodeProps) {
return (
<SyntaxHighlighter
children={String(children).replace(/\n$/, '')}
language="html"
style={materialDark}
PreTag="div"
lineProps={{
style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' },
}}
wrapLines={true}
{...props}
<EmbedCodeDialog
showEmbedCode={showEmbedCode}
handleEmbedCodeWindowClose={handleEmbedCodeWindowClose}
embedUrl={embedUrl}
/>
)
},
}}
>
{`\`\`\`html
<iframe src="${embedUrl}" allow="camera;microphone;display-capture" width="800" height="800" />
\`\`\``}
</Markdown>
<DialogContentText sx={{ mb: 2 }}>
Copy and paste this HTML snippet into your project.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleEmbedCodeWindowClose}>Close</Button>
</DialogActions>
</Dialog>
</Box>
)
}