Merge pull request #340 from cofacts/add-line-fab

Add instructions to add LINE as friend in article detail page
cofacts · Oct 5, 2020 · 6b1a941 · 6b1a941
2 parents b097316 + 2309b8d
commit 6b1a941
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 5 deletions.
diff --git a/components/ArticleReply/index.js b/components/ArticleReply/index.js
@@ -4,6 +4,7 @@ import gql from 'graphql-tag';
 import { Box, Divider } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
+import { LINE_URL } from 'constants/urls';
 import { nl2br, linkify } from 'lib/text';
 import { TYPE_NAME } from 'constants/replyType';
 import ExpandableText from 'components/ExpandableText';
@@ -130,13 +131,18 @@ const ArticleReply = React.memo(
     const classes = useStyles({ replyType });
 
     const renderFooter = () => {
+      const articleUrl =
+        typeof window !== 'undefined'
+          ? // Construct Article URL without search strings (usually gibberish 1st-party trackers)
+            window.location.origin + window.location.pathname
+          : '';
       const copyText =
         typeof window !== 'undefined'
           ? `${TYPE_NAME[reply.type]} \n【${t`Reason`}】${(
               reply.text || ''
-            ).trim()}\n↓${t`Details`}↓\n${
-              window.location.href
-            }\n↓${t`Reference`}↓\n${reply.reference}`
+            ).trim()}\n↓${t`Details`}↓\n${articleUrl}\n↓${t`Reference`}↓\n${
+              reply.reference
+            }\n--\n🤔 在 LINE 看到可疑訊息？加「真的假的」好友，查謠言與詐騙 ➡️ ${LINE_URL}`
           : '';
 
       return (
@@ -209,7 +215,9 @@ const ArticleReply = React.memo(
           )}
         </Box>
         <section className={classes.content}>
-          <ExpandableText>{nl2br(linkify(reply.text))}</ExpandableText>
+          <ExpandableText lineClamp={10}>
+            {nl2br(linkify(reply.text))}
+          </ExpandableText>
         </section>
 
         {renderReference()}

diff --git a/pages/article/[id].js b/pages/article/[id].js
@@ -16,7 +16,10 @@ import { usePushToDataLayer } from 'lib/gtm';
 
 import { format, formatDistanceToNow } from 'lib/dateWithLocale';
 import isValid from 'date-fns/isValid';
+import { LINE_URL } from 'constants/urls';
 
+import AddIcon from '@material-ui/icons/AddCircleOutline';
+import Fab from '@material-ui/core/Fab';
 import AppLayout from 'components/AppLayout';
 import Ribbon from 'components/Ribbon';
 import Hyperlinks from 'components/Hyperlinks';
@@ -127,6 +130,24 @@ const useStyles = makeStyles(theme => ({
     textOverflow: 'ellipsis',
     lineClamp: 5,
   },
+  lineFab: {
+    position: 'fixed',
+    zIndex: theme.zIndex.speedDial,
+    right: 20,
+    bottom: 20,
+    background: theme.palette.common.green1,
+    color: '#fff',
+    height: 52,
+    borderRadius: 32,
+
+    '&:hover': {
+      background: theme.palette.common.green2,
+    },
+  },
+  lineFabText: {
+    lineHeight: '20px',
+    margin: '0 12px',
+  },
 }));
 
 const LOAD_ARTICLE = gql`
@@ -246,6 +267,18 @@ function ArticlePage() {
     setFlashMessage(error.toString());
   }, []);
 
+  const handleCopy = useCallback(e => {
+    const selection = document.getSelection();
+    const articleUrl = window.location.origin + window.location.pathname;
+
+    e.clipboardData.setData(
+      'text/plain',
+      selection.toString() +
+        `\n📋 節錄自 Cofacts 真的假的：${articleUrl}\n🤔 在 LINE 看到可疑訊息？加「真的假的」好友，查謠言與詐騙 ➡️ ${LINE_URL}`
+    );
+    e.preventDefault();
+  }, []);
+
   const handleFormClose = () => setShowForm(false);
 
   const article = data?.GetArticle;
@@ -322,7 +355,7 @@ function ArticlePage() {
               )}
             </Box>
             <Box px={{ xs: '12px', md: '19px' }}>
-              <Box py={3} overflow="hidden">
+              <Box py={3} overflow="hidden" onCopy={handleCopy}>
                 {nl2br(
                   linkify(text, {
                     props: {
@@ -390,6 +423,7 @@ function ArticlePage() {
             mt={3}
             id="current-replies"
             ref={replySectionRef}
+            onCopy={handleCopy}
           >
             <h2>{t`${article.articleReplies.length} replies to the message`}</h2>
             <Divider classes={{ root: classes.divider }} />
@@ -430,6 +464,24 @@ function ArticlePage() {
         onClose={() => setFlashMessage('')}
         message={flashMessage}
       />
+      {!currentUser && (
+        <Fab
+          size="large"
+          variant="extended"
+          aria-label="Add friend"
+          data-ga="Add LINE friend FAB"
+          className={classes.lineFab}
+          href={LINE_URL}
+          target="_blank"
+        >
+          <AddIcon />
+          <span className={classes.lineFabText}>
+            LINE 機器人
+            <br />
+            查謠言詐騙
+          </span>
+        </Fab>
+      )}
     </AppLayout>
   );
 }