From c3736407324cafc758990339c872f92ebffe1487 Mon Sep 17 00:00:00 2001 From: Mohammed Rayan A Date: Sat, 11 Jul 2026 14:51:31 +0530 Subject: [PATCH 1/2] Restore social sharing modal after resource is dumped with dark mode support --- app/components/AddResource.tsx | 20 ++++- app/components/ui/ShareModal.tsx | 131 +++++++++++++++++++++++++++++++ 2 files changed, 150 insertions(+), 1 deletion(-) create mode 100644 app/components/ui/ShareModal.tsx 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..aa82adb --- /dev/null +++ b/app/components/ui/ShareModal.tsx @@ -0,0 +1,131 @@ +'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 = () => { + const linkedInTitle = `Just discovered: "${resourceTitle}"`; + const linkedInSummary = `${resourceNote ? `${resourceNote.substring(0, 150)}...` : 'Worth checking out!'}\n\nShared via DumpIt ${userHandle}`; + const url = `https://www.linkedin.com/feed/?shareActive=true&text=${encodeURIComponent(linkedInTitle + '\n\n' + linkedInSummary + '\n\n' + publicLink)}`; + window.open(url, '_blank'); + }; + + const handleFacebookShare = () => { + const facebookText = `Check out this resource I found: "${resourceTitle}"\n\n${resourceNote ? `${resourceNote.substring(0, 100)}...` : ''}\n\n${publicLink}\n\nShared via DumpIt ${userHandle}`; + const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(publicLink)}"e=${encodeURIComponent(facebookText)}`; + 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 */} + +
+ +
+ +
+
+
+ ); +} From 89b38d5b43a7aa23d68c0a00b96ca092fbaa2504 Mon Sep 17 00:00:00 2001 From: Mohammed Rayan A Date: Sat, 11 Jul 2026 14:58:53 +0530 Subject: [PATCH 2/2] Fix social sharing platform urls for LinkedIn and Facebook in ShareModal --- app/components/ui/ShareModal.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/app/components/ui/ShareModal.tsx b/app/components/ui/ShareModal.tsx index aa82adb..bea89a9 100644 --- a/app/components/ui/ShareModal.tsx +++ b/app/components/ui/ShareModal.tsx @@ -27,15 +27,14 @@ export function ShareModal({ isOpen, onClose, resourceTitle, resourceNote, resou }; const handleLinkedInShare = () => { - const linkedInTitle = `Just discovered: "${resourceTitle}"`; - const linkedInSummary = `${resourceNote ? `${resourceNote.substring(0, 150)}...` : 'Worth checking out!'}\n\nShared via DumpIt ${userHandle}`; - const url = `https://www.linkedin.com/feed/?shareActive=true&text=${encodeURIComponent(linkedInTitle + '\n\n' + linkedInSummary + '\n\n' + publicLink)}`; + // 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 = () => { - const facebookText = `Check out this resource I found: "${resourceTitle}"\n\n${resourceNote ? `${resourceNote.substring(0, 100)}...` : ''}\n\n${publicLink}\n\nShared via DumpIt ${userHandle}`; - const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(publicLink)}"e=${encodeURIComponent(facebookText)}`; + // 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'); };