Add new share buttons

components/teks/pataje.js

@@ -8,8 +8,16 @@ import SpeedDialAction from '@mui/material/SpeedDialAction'
 import FileCopyIcon from '@mui/icons-material/FileCopyOutlined'
 import ShareIcon from '@mui/icons-material/Share'
 import TwitterIcon from '@mui/icons-material/Twitter'
+import TelegramIcon from '@mui/icons-material/Telegram'
+import FacebookIcon from '@mui/icons-material/Facebook'
+import WhatsAppIcon from '@mui/icons-material/WhatsApp'
 import {Backdrop} from '@mui/material'
 
+const twitterUrl = 'https://twitter.com/intent/tweet'
+const telegramUrl = 'https://telegram.me/share/url'
+const facebookUrl = 'https://www.facebook.com/sharer/sharer.php'
+const whatsappUrl = 'whatsapp://send'
+
 const PREFIX = 'pataje'
 
 const classes = {
@@ -28,7 +36,10 @@ const TWITTER_HASHTAGS = process.env.NEXT_PUBLIC_TWITTER_HASHTAGS || 'OKi'
 const TWITTER_USERNAME = process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'
 
 const actions = [
+  {icon: <WhatsAppIcon />, name: 'WhatsApp', code: 'whatsapp'},
+  {icon: <FacebookIcon />, name: 'Facebook', code: 'facebook'},
   {icon: <TwitterIcon />, name: 'Twitter', code: 'twitter'},
+  {icon: <TelegramIcon />, name: 'Telegram', code: 'telegram'},
   {icon: <FileCopyIcon />, name: 'Copier le lien', code: 'copy'}
 ]
 
@@ -40,8 +51,7 @@ export default function Pataje({teks, setError, setSuccess}) {
   const alias = awtis.map(({alias}) => alias)
   const renderAwtis = new Intl.ListFormat('fr').format(alias)
 
-  const text = teks.user ? `${renderAwtis} - ${tit} (Pawòl) - (texte soumis par ${teks.user.username})` : `${renderAwtis} - ${tit} (Pawòl)`
+  const text = teks.user ? `${renderAwtis} - ${tit} (Paroles | Traductions) - (texte soumis par ${teks.user.username})` : `${renderAwtis} - ${tit} (Paroles | Traductions)`
-  const twitterUrl = 'https://twitter.com/intent/tweet'
 
   const handleClose = () => {
     setOpen(false)
@@ -52,16 +62,35 @@ export default function Pataje({teks, setError, setSuccess}) {
   }
 
   const handleClick = code => {
-    if (typeof window !== 'undefined' && code === 'twitter') {
+    if (typeof window !== 'undefined') {
-      window.open(`${twitterUrl}?hashtags=${TWITTER_HASHTAGS}&text=${text}&via=${TWITTER_USERNAME}&url=${patajeUrl}`, 'Partage Twitter', 'width=600,height=300')
+      switch (code) {
-    }
+        case 'whatsapp':
+          window.open(`${whatsappUrl}?text=${encodeURI(text)} \n ${encodeURI(patajeUrl)}`, '_blank')
+          break
 
-    if (typeof window !== 'undefined' && code === 'copy') {
+        case 'facebook':
-      navigator.clipboard.writeText(patajeUrl)
+          window.open(`${facebookUrl}?u=${encodeURI(patajeUrl)}`, '_blank')
-        .then(
+          break
-          () => setSuccess('Lien copié avec succès'),
+
-          () => setError('Error lors de la copie du lien')
+        case 'telegram':
-        )
+          window.open(`${telegramUrl}?url=${encodeURI(patajeUrl)}&text=${encodeURI(text)}`, '_blank')
+          break
+
+        case 'twitter':
+          window.open(`${twitterUrl}?hashtags=${TWITTER_HASHTAGS}&text=${text}&via=${TWITTER_USERNAME}&url=${patajeUrl}`, 'Partage Twitter', 'width=600,height=300')
+          break
+
+        case 'copy':
+          navigator.clipboard.writeText(patajeUrl)
+            .then(
+              () => setSuccess('Lien copié avec succès'),
+              () => setError('Error lors de la copie du lien')
+            )
+          break
+
+        default:
+          break
+      }
     }
 
     setOpen(false)