Merge pull request #88 from avi-l/58-share-options

58 share options

package.json

@@ -21,6 +21,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.48.2",
+    "react-share": "^5.0.3",
+    "react-toastify": "^10.0.4",
     "zod": "^3.22.4",
     "zustand": "^4.4.7"
   },

src/app/(site)/app/post/[postid]/components/post/components/options/index.tsx

@@ -6,14 +6,23 @@ import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { Option } from './option.models';
 import { PrimaryButton } from '@/components/ui/buttons/primary';
-import { deleteFromCloundinary, downloadImage } from '@/utils/utils';
+import { toast } from 'react-toastify';
+import ShareBtns from '@/components/feature/share-btns';
+import Modal from '@/components/ui/modal';
+import {
+  deleteFromCloundinary,
+  copyToClipboard,
+  downloadImage,
+} from '@/utils/utils';
 
 export function PostOptions({
   post_id,
+  title,
   image_url,
   doesUserOwnPost,
 }: {
   post_id: number;
+  title: string;
   image_url: string;
   doesUserOwnPost: boolean;
 }) {
@@ -22,6 +31,7 @@ export function PostOptions({
   const router = useRouter();
 
   const [showDropdown, setShowDropdown] = useState(false);
+  const [showShareModal, setShowShareModal] = useState(false);
   const [indexOfOptionLoading, setIndexOfOptionLoading] = useState<
     number | null
   >(null);
@@ -58,14 +68,31 @@ export function PostOptions({
   ];
 
   const PUBLIC_OPTIONS: Option[] = [
-    { title: 'Share', action: () => {} },
+    {
+      title: 'Share',
+      action: () => toggleShareModal(),
+    },
     { title: 'Download', action: async () => await downloadImage(image_url) },
+    {
+      title: 'Copy URL',
+      action: async () => {
+        (await copyToClipboard(image_url))
+          ? toast.success(`Copied ${image_url} to clipboard`, {
+              position: 'top-center',
+            })
+          : toast.error('error copying', { position: 'top-center' });
+      },
+    },
   ];
 
   const FINAL_OPTIONS = [...OWNER_OPTIONS, ...PUBLIC_OPTIONS];
 
   function toggleDropdown() {
-    setShowDropdown(!showDropdown);
+    setShowDropdown((prev) => !prev);
+  }
+  function toggleShareModal() {
+    setShowShareModal((prev) => !prev);
+    toggleDropdown();
   }
 
   return (
@@ -95,6 +122,15 @@ export function PostOptions({
           ))}
         </ul>
       )}
+      {showShareModal && (
+        <Modal
+          isOpen={showShareModal}
+          onClose={() => setShowShareModal(false)}
+          heading={`Share ${title} on: `}
+        >
+          <ShareBtns shareUrl={image_url} title={title} />
+        </Modal>
+      )}
     </div>
   );
 }

src/app/(site)/app/post/[postid]/components/post/index.tsx

@@ -48,6 +48,7 @@ export async function Post({
           )}
         </section>
         <PostOptions
+          title={post.title}
           post_id={post.id}
           doesUserOwnPost={doesUserOwnPost}
           image_url={post.asset_url}

src/app/(site)/app/settings/components/settings-aside/index.tsx

@@ -1,31 +1,31 @@
-"use client";
+'use client';
 
-import { DesktopAside } from "@/components/feature/aside-menu/desktop-aside";
-import { BackwardsNav } from "@/components/feature/nav/backwards";
-import { IRLink } from "@/components/feature/nav/models";
+import { DesktopAside } from '@/components/feature/aside-menu/desktop-aside';
+import { BackwardsNav } from '@/components/feature/nav/backwards';
+import { IRLink } from '@/components/feature/nav/models';
 import {
   CircleUserIcon,
   LockIcon,
   SunMoonIcon,
   UserRoundCog,
-} from "lucide-react";
+} from 'lucide-react';
 
 const LINKS: IRLink[] = [
   {
     icon: CircleUserIcon,
-    href: "profile",
+    href: 'profile',
   },
   {
     icon: LockIcon,
-    href: "reset-password",
+    href: 'reset-password',
   },
   {
     icon: SunMoonIcon,
-    href: "accesibility",
+    href: 'Accessibility',
   },
   {
     icon: UserRoundCog,
-    href: "account",
+    href: 'account',
   },
 ];
 
@@ -42,9 +42,9 @@ console.log(LINKS_MAPPED);
 
 export function SettingsAside() {
   return (
-    <div className="w-full h-full bg-neutral-200 dark:bg-cm-gray">
-      <div className="pt-5 flex items-center justify-center">
-        <BackwardsNav catchHref="/app" />
+    <div className='w-full h-full bg-neutral-200 dark:bg-cm-gray'>
+      <div className='pt-5 flex items-center justify-center'>
+        <BackwardsNav catchHref='/app' />
       </div>
       <DesktopAside links={LINKS_MAPPED} />
     </div>