Merge pull request #960 from jacksonloper/feat/flavortext-for-share

ArendPeter · web-flow · commit 60f1a5dc5c3d · 2025-07-09T23:11:12.000-07:00
feat: supply titles when sharing to X and reddit
diff --git a/packages/frontend/src/components/Election/ShareButton.tsx b/packages/frontend/src/components/Election/ShareButton.tsx
@@ -12,12 +12,16 @@ import { SecondaryButton } from "../styles";
 import useSnackbar from "../SnackbarContext";
 import { useSubstitutedTranslation } from "../util";
 import { useState } from "react"
+import useElection from '../ElectionContextProvider';
+
 import IosShareIcon from '@mui/icons-material/IosShare';
 
 export default function ShareButton({ url }: { url: string }) {
     const { setSnack } = useSnackbar()
     const [anchorElNav, setAnchorElNav] = useState(null)
 
+    const { election } = useElection();
+
     const {t} = useSubstitutedTranslation();
 
     const handleOpenNavMenu = (event) => {
@@ -35,19 +39,36 @@ export default function ShareButton({ url }: { url: string }) {
         const encodedAhref = encodeURIComponent(ahref)
         let link
 
+        const pageTitle = election?.title || "";
+        const votingMethods = Array.from(new Set((election?.races || []).map(r => r.voting_method)));
+        let votingDesc = "";
+        const termType = election?.settings?.term_type === 'poll' ? 'poll' : 'election';
+        if (votingMethods.length === 1) {
+            votingDesc = ` [with the ${votingMethods[0]} voting system]`;
+        } else if (votingMethods.length === 2) {
+            votingDesc = ` [including 2 different voting systems: ${votingMethods.join(" and ")}]`;
+        } else if (votingMethods.length > 2) {
+            votingDesc = ` [including ${votingMethods.length} different voting systems: ${votingMethods.join(", ")}]`;
+        }
+        const shareTitle = encodeURIComponent(`Vote in a new BetterVoting ${termType}: "${pageTitle}"${votingDesc}`);
+
         switch (e.currentTarget.id) {
             case "facebook":
-                link = `https://www.facebook.com/sharer/sharer.php?u=${ahref}`
-                open(link)
-                break
+                // Facebook automatically shows the page prettily, so URL is fine
+                // Passing "quote" param to prefill text is weirdly spotty anyway
+                link = `https://www.facebook.com/sharer/sharer.php?u=${encodedAhref}`;
+                open(link);
+                break;
 
             case "X":
-                link = `https://x.com/intent/tweet?url=${encodedAhref}`
-                open(link)
-                break
+                // Reddit uses the "url" and "title" params to prefill submission
+                link = `https://x.com/intent/tweet?url=${encodedAhref}&text=${shareTitle}`;
+                open(link);
+                break;
 
             case "reddit":
-                link = `https://www.reddit.com/submit?url=${encodedAhref}`
+                // Reddit uses the "url" and "title" params to prefill submission
+                link = `https://new.reddit.com/submit?url=${encodedAhref}&title=${shareTitle}`;
                 open(link)
                 break
 
