feature: sharing feature (#81)

* fix: prevent skeleton from navigating to links * feat: add sharing feeature
daodaoedu · Oct 2, 2024 · 1915fc1 · 1915fc1
1 parent 3fa56ea
commit 1915fc1
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 15 deletions.
diff --git a/components/Group/GroupList/SkeletonGroupCard.jsx b/components/Group/GroupList/SkeletonGroupCard.jsx
@@ -7,9 +7,9 @@ import {
   StyledText,
 } from './GroupCard.styled';
 
-function SkeletonGroupCard({ _id }) {
+function SkeletonGroupCard() {
   return (
-    <StyledGroupCard href={`/group/detail?id=${_id}`}>
+    <StyledGroupCard sx={{ cursor: 'default' }}>
       <Skeleton variant="rounded" width="100%" height={122} animation="wave" />
       <StyledContainer>
         <Skeleton

diff --git a/components/Group/detail/ShareButtonGroup.jsx b/components/Group/detail/ShareButtonGroup.jsx
@@ -0,0 +1,53 @@
+import getShareApi from '@/utils/share';
+import styled from '@emotion/styled';
+import IconButton from '@mui/material/IconButton';
+import {
+  FaSquareFacebook,
+  FaLine,
+  FaLinkedin,
+  FaSquareThreads,
+  FaSquareXTwitter,
+  FaShareFromSquare,
+} from 'react-icons/fa6';
+
+const StyledShareButtonGroup = styled.div`
+  display: flex;
+  gap: 0.25rem;
+`;
+
+export default function ShareButtonGroup({ title, text, url, hashtag }) {
+  const {
+    hasNativeShare,
+    nativeShare,
+    facebookShare,
+    lineShare,
+    linkedinShare,
+    threadsShare,
+    xShare,
+  } = getShareApi({ title, text, url, hashtag });
+
+  return (
+    <StyledShareButtonGroup>
+      <IconButton size="small" onClick={facebookShare}>
+        <FaSquareFacebook fill="#1877F2" />
+      </IconButton>
+      <IconButton size="small" onClick={threadsShare}>
+        <FaSquareThreads fill="#000" />
+      </IconButton>
+      <IconButton size="small" onClick={lineShare}>
+        <FaLine size={16} fill="#00B900" />
+      </IconButton>
+      <IconButton size="small" onClick={linkedinShare}>
+        <FaLinkedin fill="#0A66C2" />
+      </IconButton>
+      <IconButton size="small" onClick={xShare}>
+        <FaSquareXTwitter fill="#000" />
+      </IconButton>
+      {hasNativeShare && (
+        <IconButton size="small" onClick={nativeShare}>
+          <FaShareFromSquare size={16} />
+        </IconButton>
+      )}
+    </StyledShareButtonGroup>
+  );
+}
diff --git a/components/Group/detail/index.jsx b/components/Group/detail/index.jsx
@@ -1,7 +1,5 @@
 import { useRouter } from 'next/navigation';
 import { useSelector } from 'react-redux';
-import styled from '@emotion/styled';
-import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import Skeleton from '@mui/material/Skeleton';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
@@ -19,6 +17,7 @@ import {
   StyledMobileEditButton,
 } from './Detail.styled';
 import ContactButton from './Contact';
+import ShareButtonGroup from './ShareButtonGroup';
 
 function GroupDetail({ id, source, isLoading }) {
   const router = useRouter();
@@ -38,18 +37,26 @@ function GroupDetail({ id, source, isLoading }) {
           <Image height="300px" src={source?.photoURL} alt={source?.photoAlt} />
         )}
         <Box sx={{ position: 'relative', p: '10px' }}>
-          {isLoading ? (
-            <Skeleton
-              variant="rounded"
-              height={26}
-              width={68}
-              animation="wave"
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            {isLoading ? (
+              <Skeleton
+                variant="rounded"
+                height={26}
+                width={68}
+                animation="wave"
+              />
+            ) : source?.isGrouping ? (
+              <StyledStatus>揪團中</StyledStatus>
+            ) : (
+              <StyledStatus className="finished">已結束</StyledStatus>
+            )}
+            <ShareButtonGroup
+              title={source?.title}
+              text={source?.description}
+              url={window.location.href}
+              hashtag={source?.hashtag}
             />
-          ) : source?.isGrouping ? (
-            <StyledStatus>揪團中</StyledStatus>
-          ) : (
-            <StyledStatus className="finished">已結束</StyledStatus>
-          )}
+          </Box>
           {isMyGroup ? (
             <StyledDesktopEditButton
               variant="outlined"

diff --git a/utils/share.js b/utils/share.js
@@ -0,0 +1,41 @@
+export default function getShareApi({
+  title = '',
+  text = '',
+  url = '',
+  hashtag = '',
+}) {
+  const openInNewTab = (url) => () => window.open(url, '_blank');
+
+  const nativeShare = () => {
+    if (!navigator?.share) return;
+    navigator.share({ title, text, url });
+  };
+
+  const facebookShare = openInNewTab(
+    `https://www.facebook.com/sharer/sharer.php?u=${url}&source_surface=external_reshare&display=popup&hashtag=${hashtag}`,
+  );
+
+  const lineShare = openInNewTab(
+    `https://social-plugins.line.me/lineit/share?url=${url}`,
+  );
+
+  const linkedinShare = openInNewTab(
+    `https://www.linkedin.com/sharing/share-offsite/?url=${url}&text=${text}`,
+  );
+
+  const threadsShare = openInNewTab(
+    `https://threads.net/intent/post?text=${url}`,
+  );
+
+  const xShare = openInNewTab(`https://x.com/intent/tweet?text=${url}`);
+
+  return {
+    hasNativeShare: !!navigator?.share,
+    facebookShare,
+    lineShare,
+    linkedinShare,
+    nativeShare,
+    threadsShare,
+    xShare,
+  };
+}