Hook up download markdown button

aaron7 · Jun 2, 2024 · 36ebd21 · 36ebd21
1 parent fdb1f02
commit 36ebd21
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/src/components/StatusBar/StatusBar.tsx b/src/components/StatusBar/StatusBar.tsx
@@ -16,24 +16,40 @@ import { buildJoinUrl, type Session } from '@/utils/session';
 const COPIED_TO_CLIPBOARD_TIMEOUT = 3000;
 
 type StatusBarProps = {
+  copyMarkdownToClipboard: () => void;
   isHost: boolean;
   onEndSession: () => void;
   session: Session;
 };
 
-const StatusBar = ({ isHost, onEndSession, session }: StatusBarProps) => {
-  const [copiedToClipboard, setCopiedToClipboard] = useState(false);
+const StatusBar = ({
+  copyMarkdownToClipboard,
+  isHost,
+  onEndSession,
+  session,
+}: StatusBarProps) => {
+  const [copiedJoinUrlToClipboard, setCopiedJoinUrlToClipboard] =
+    useState(false);
+  const [copiedMarkdownToClipboard, setCopiedMarkdownToClipboard] =
+    useState(false);
 
   const joinUrl = useMemo(() => buildJoinUrl(session), [session]);
 
   const onCopyInviteUrlClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-
     copyToClipboard(joinUrl);
 
-    setCopiedToClipboard(true);
+    setCopiedJoinUrlToClipboard(true);
     setTimeout(() => {
-      setCopiedToClipboard(false);
+      setCopiedJoinUrlToClipboard(false);
+    }, COPIED_TO_CLIPBOARD_TIMEOUT);
+  };
+
+  const onDownloadMarkdown = () => {
+    copyMarkdownToClipboard();
+
+    setCopiedMarkdownToClipboard(true);
+    setTimeout(() => {
+      setCopiedMarkdownToClipboard(false);
     }, COPIED_TO_CLIPBOARD_TIMEOUT);
   };
 
@@ -53,16 +69,20 @@ const StatusBar = ({ isHost, onEndSession, session }: StatusBarProps) => {
         )}
 
         <Button onClick={onCopyInviteUrlClick} variant="outline">
-          {copiedToClipboard ? (
+          {copiedJoinUrlToClipboard ? (
             <Check className="mr-2 h-4 w-4 text-success" />
           ) : (
             <ClipboardCopy className="mr-2 h-4 w-4" />
           )}
           Copy invite URL
         </Button>
 
-        <Button size="icon" variant="ghost">
-          <Download className="h-4 w-4" />
+        <Button onClick={onDownloadMarkdown} size="icon" variant="ghost">
+          {copiedMarkdownToClipboard ? (
+            <Check className="h-4 w-4 text-success" />
+          ) : (
+            <Download className="h-4 w-4" />
+          )}
         </Button>
 
         <Button size="icon" variant="ghost">

diff --git a/src/routes/Session.tsx b/src/routes/Session.tsx
@@ -7,6 +7,7 @@ import Editor from '@/components/MarkdownEditor/Editor';
 import StatusBar from '@/components/StatusBar/StatusBar';
 import { Separator } from '@/components/ui/separator';
 import routes from '@/routes';
+import { copyToClipboard } from '@/utils/clipboard';
 import {
   createWebrtcProvider,
   findHostId,
@@ -53,6 +54,10 @@ const Session = () => {
     setValue(val);
   }, []);
 
+  const copyMarkdownToClipboard = () => {
+    copyToClipboard(value);
+  };
+
   // When the session ends, set status to 'ended' and navigate back to the home page
   const onEndSession = () => {
     if (!webrtcProvider) {
@@ -136,6 +141,7 @@ const Session = () => {
   return (
     <div>
       <StatusBar
+        copyMarkdownToClipboard={copyMarkdownToClipboard}
         isHost={isHost}
         onEndSession={onEndSession}
         session={session}