diff --git a/app/components/AddResource.tsx b/app/components/AddResource.tsx index 50fc7c0..bd963d0 100644 --- a/app/components/AddResource.tsx +++ b/app/components/AddResource.tsx @@ -5,6 +5,7 @@ import { FormEvent, useEffect, useRef, useState } from 'react' import { useAuth } from '../contexts/AuthContext' import { useCollections } from '../contexts/CollectionsContext' import { jsonAuthFetch } from '../lib/authFetch' +import { ShareModal } from './ui/ShareModal' interface AddResourceProps { onSuccess: () => void @@ -37,6 +38,8 @@ export function AddResource({ onSuccess }: AddResourceProps) { const [selectedCollectionId, setSelectedCollectionId] = useState('none') const [newCollectionName, setNewCollectionName] = useState('') const lastEnrichedLinkRef = useRef('') + const [showShareModal, setShowShareModal] = useState(false) + const [sharedResourceData, setSharedResourceData] = useState<{ title: string; note?: string; link: string }>({ title: '', note: '', link: '' }) useEffect(() => { if (user) fetchCollections().catch(() => {}) @@ -106,6 +109,8 @@ export function AddResource({ onSuccess }: AddResourceProps) { } const data = await response.json() + setSharedResourceData({ title, note, link }) + setTitle('') setLink('') setNote('') @@ -116,7 +121,7 @@ export function AddResource({ onSuccess }: AddResourceProps) { lastEnrichedLinkRef.current = '' refreshCollections().catch(() => {}) - onSuccess() + setShowShareModal(true) } catch (err) { setError(err instanceof Error ? err.message : 'Failed to add resource') } finally { @@ -124,6 +129,11 @@ export function AddResource({ onSuccess }: AddResourceProps) { } } + const handleShareModalClose = () => { + setShowShareModal(false) + onSuccess() + } + return (
@@ -313,6 +323,14 @@ export function AddResource({ onSuccess }: AddResourceProps) { + +
) } diff --git a/app/components/ui/ShareModal.tsx b/app/components/ui/ShareModal.tsx new file mode 100644 index 0000000..bea89a9 --- /dev/null +++ b/app/components/ui/ShareModal.tsx @@ -0,0 +1,130 @@ +'use client' + +import { Copy, Facebook, Linkedin, X } from 'lucide-react'; +import { useState } from 'react'; + +interface ShareModalProps { + isOpen: boolean; + onClose: () => void; + resourceTitle: string; + resourceNote?: string; + resourceLink: string; +} + +export function ShareModal({ isOpen, onClose, resourceTitle, resourceNote, resourceLink }: ShareModalProps) { + const [copied, setCopied] = useState(false); + + if (!isOpen) return null; + + // Use the actual resource link if available, fallback to the platform URL + const publicLink = resourceLink || `https://dumpit-three.vercel.app/`; + const userHandle = '@DumpItApp'; + + const handleTwitterShare = () => { + const twitterText = `Just found this amazing resource: "${resourceTitle}" 🔥\n\n${resourceNote ? `${resourceNote.substring(0, 100)}...` : ''}\n\nCheck it out! ${publicLink}\n\n${userHandle} #DumpIt`; + const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(twitterText)}`; + window.open(url, '_blank'); + }; + + const handleLinkedInShare = () => { + // LinkedIn offsite share dialog: pre-filling text is deprecated by LinkedIn, but it will pull site preview + const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(publicLink)}`; + window.open(url, '_blank'); + }; + + const handleFacebookShare = () => { + // Facebook sharer: quote pre-filling is deprecated by Facebook, but it will pull site preview + const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(publicLink)}`; + window.open(url, '_blank'); + }; + + const handleCopyLink = async () => { + try { + await navigator.clipboard.writeText(publicLink); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch (err) { + console.error('Failed to copy link:', err); + } + }; + + return ( +
+
+ + {/* Close Button */} + + +
+
+ + + +
+

+ Resource Added! +

+

+ Share this amazing resource with your network. +

+
+ +
+ {/* Twitter/X Button */} + + + {/* LinkedIn Button */} + + + {/* Facebook Button */} + + + {/* Copy Link Button */} + +
+ +
+ +
+
+
+ ); +}