add a modal for share

maheshj01 · Jun 17, 2024 · 8e486df · 8e486df
1 parent 17b1097
commit 8e486df
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 6 deletions.
diff --git a/src/app/(main)/_components/Preview.tsx b/src/app/(main)/_components/Preview.tsx
@@ -4,6 +4,7 @@ import { formatReadableDate } from '@/utils/utils';
 import { EllipsisHorizontalIcon } from "@heroicons/react/24/solid";
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DoneIcon from '@mui/icons-material/Done';
+import { useDisclosure } from '@nextui-org/react';
 import html2canvas from 'html2canvas';
 import { useTheme } from 'next-themes';
 import { usePathname, useRouter } from 'next/navigation';
@@ -12,6 +13,7 @@ import Log from '../_models/Log';
 import LogService from '../_services/logService';
 import PSDropdown from './Dropdown';
 import IconButton from './IconButton';
+import ShareDialog from './Share';
 
 const Preview = ({ logId }: { logId: string }) => {
     const logService = new LogService();
@@ -20,11 +22,28 @@ const Preview = ({ logId }: { logId: string }) => {
     const [previewLog, setpreviewLog] = useState<Log | null>(null);
     const { theme } = useTheme();
     const router = useRouter();
-    const isPublishRoute = usePathname().includes('/logs/publish');
+    const pathName = usePathname()
+    const isPublishRoute = pathName.includes('/logs/publish');
+    const { isOpen, onOpen, onClose } = useDisclosure();
+
+    const [shareContent, setShareContent] = useState({
+        title: "Share Pastelog",
+        content: process.env.NEXT_PUBLIC_BASE_URL + pathName,
+    });
+
+    const handleShare = () => {
+        // Copy link to clipboard
+        navigator.clipboard.writeText(`${window.location.origin}/logs/publish/${previewLog?.id}`);
+        onClose(); // Close the dialog after sharing
+    };
+
 
     function More() {
-        const options = ['Image', 'Text'];
-        if (!logService.isLogPresentLocally(logId)) options.push('Save');
+        const options = ['Image', 'Text', 'Share'];
+        if (!logService.isLogPresentLocally(logId)) {
+
+            options.push('Save');
+        }
         return (<PSDropdown
             options={options}
             onClick={handleonAction}
@@ -47,6 +66,8 @@ const Preview = ({ logId }: { logId: string }) => {
                 downloadText();
                 break;
             case '2':
+                onOpen();
+            case '3':
                 logService.saveLogToLocal(previewLog!);
             default:
                 break;
@@ -137,6 +158,13 @@ const Preview = ({ logId }: { logId: string }) => {
                                         {'save'}
                                     </Button> */}
                                     <More />
+                                    <ShareDialog
+                                        isOpen={isOpen}
+                                        onClose={onClose}
+                                        onShare={handleShare}
+                                        title={shareContent.title}
+                                        content={shareContent.content}
+                                    />
                                 </div>
                             )}
                         </div>

diff --git a/src/app/(main)/_components/Share.tsx b/src/app/(main)/_components/Share.tsx
@@ -0,0 +1,40 @@
+import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@nextui-org/react";
+import React from "react";
+import { Button } from "./button";
+
+interface ShareDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onShare: () => void; // Function to handle share action
+    title: string; // Title for the modal header
+    content: string; // Content to display in the modal body
+}
+
+const ShareDialog: React.FC<ShareDialogProps> = ({ isOpen, onClose, onShare, title, content }) => {
+    return (
+        <Modal size="md" isOpen={isOpen} onClose={onClose}>
+            <ModalContent>
+                <ModalHeader className="flex flex-col gap-1">{title}</ModalHeader>
+                <ModalBody>
+                    <div className="h-8 border-1 w-full rounded-md flex items-center px-2 overflow-hidden text-ellipsis ">
+                        {content}
+                    </div>
+                </ModalBody>
+                <ModalFooter>
+                    <Button
+                        variant={"destructive"}
+                        onClick={onClose}>
+                        Close
+                    </Button>
+                    <Button
+                        onClick={onShare}
+                        className={`bg-gradient-to-r from-gray-700 to-gray-800`}>
+                        Copy
+                    </Button>
+                </ModalFooter>
+            </ModalContent>
+        </Modal >
+    );
+};
+
+export default ShareDialog;
diff --git a/src/app/(main)/_components/SideBarItem.tsx b/src/app/(main)/_components/SideBarItem.tsx
@@ -1,8 +1,11 @@
 import { EllipsisHorizontalIcon } from "@heroicons/react/24/solid";
+import { useDisclosure } from "@nextui-org/react";
+import { usePathname } from "next/navigation";
 import { Key, useState } from 'react';
 import Log from "../_models/Log";
 import LogService from '../_services/logService';
 import PSDropdown from "./Dropdown";
+import ShareDialog from "./Share";
 
 interface SidebarItemProps {
     id: string;
@@ -14,6 +17,8 @@ interface SidebarItemProps {
 
 const SidebarItem: React.FC<SidebarItemProps> = ({ selected, id, log, onLogClick, onRefresh }) => {
     const [isHovered, setIsHovered] = useState(false);
+    const pathName = usePathname();
+    const { isOpen, onOpen, onClose } = useDisclosure();
 
     function MoreOptions() {
         const options = ['Share', 'Delete'];
@@ -28,15 +33,27 @@ const SidebarItem: React.FC<SidebarItemProps> = ({ selected, id, log, onLogClick
         );
     }
 
+    const [shareContent, setShareContent] = useState({
+        title: "Share Pastelog",
+        content: process.env.NEXT_PUBLIC_BASE_URL + '/logs/publish/' + id,
+    });
+
+    const handleShare = () => {
+        // Copy link to clipboard
+        navigator.clipboard.writeText(shareContent.content);
+        onClose(); // Close the dialog after sharing
+    };
+
+
     async function handleonAction(key: Key) {
         const logService = new LogService();
         switch (key) {
-            case 'delete':
+            case '1':
                 await logService.deleteLogFromLocal(id);
                 onRefresh();
                 break;
-            case 'save':
-                // do nothing
+            case '0':
+                onOpen();
                 break;
             default:
                 break;
@@ -57,6 +74,13 @@ const SidebarItem: React.FC<SidebarItemProps> = ({ selected, id, log, onLogClick
                 <div className='flex justify-between items-center'>
                     <span>{log.title!.length === 0 ? log.id : log.title}</span>
                     {(selected || isHovered) && <MoreOptions />}
+                    <ShareDialog
+                        isOpen={isOpen}
+                        onClose={onClose}
+                        onShare={handleShare}
+                        title={shareContent.title}
+                        content={shareContent.content}
+                    />
                 </div>
                 <div className="absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-surface pointer-events-none"></div>
             </div>