refactor(home): move EmbedCodeDialog to its own file

src/pages/Home/EmbedCodeDialog.tsx

@@ -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>
+)

src/pages/Home/Home.tsx

@@ -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}>
+      <EmbedCodeDialog
-        <DialogTitle>Room embed code</DialogTitle>
+        showEmbedCode={showEmbedCode}
-        <DialogContent>
+        handleEmbedCodeWindowClose={handleEmbedCodeWindowClose}
-          <Markdown
+        embedUrl={embedUrl}
-            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>
     </Box>
   )
 }