Merge pull request #295 from cofacts/liff-fix

Redirect LIFF & article LIFF fixes
cofacts · Oct 13, 2021 · 8ef1ea7 · 8ef1ea7
2 parents f9040d0 + e71c8aa
commit 8ef1ea7
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 34 deletions.
diff --git a/i18n/zh_TW.po b/i18n/zh_TW.po
@@ -851,30 +851,30 @@ msgstr "在${ dateString }看過"
 msgid "${ dateStr } ago"
 msgstr "${ dateStr }前"
 
-#: src/liff/pages/Article.svelte:103
+#: src/liff/pages/Article.svelte:110
 msgid "Cofacts volunteer's reply to the message above"
 msgstr "真的假的查證志工針對以上訊息的回應"
 
-#: src/liff/pages/Article.svelte:104
+#: src/liff/pages/Article.svelte:111
 #, javascript-format
 msgid ""
 "Cofacts volunteers have published ${ articleReplies.length } replies to the "
 "message above"
 msgstr "真的假的查證志工對以上訊息發表了 ${ articleReplies.length } 則回應"
 
-#: src/liff/pages/Article.svelte:110
+#: src/liff/pages/Article.svelte:117
 msgid "IM check"
 msgstr "網傳訊息查證"
 
-#: src/liff/pages/Article.svelte:111
+#: src/liff/pages/Article.svelte:118
 msgid "Cofacts chatbot"
 msgstr "真的假的聊天機器人"
 
-#: src/liff/pages/Article.svelte:112
+#: src/liff/pages/Article.svelte:120
 msgid "Loading IM data..."
 msgstr "載入可疑訊息"
 
-#: src/liff/pages/Article.svelte:115
+#: src/liff/pages/Article.svelte:123
 msgid "Suspicious messages"
 msgstr "網傳可疑訊息"
 
@@ -935,45 +935,53 @@ msgstr ""
 msgid "Edit feedback"
 msgstr "修改評價"
 
-#: src/liff/pages/Article.svelte:123
+#: src/liff/pages/Article.svelte:132
 msgid "Other replies"
 msgstr "其他查核回應"
 
-#: src/liff/pages/Article.svelte:126
+#: src/liff/pages/Article.svelte:135
 msgid ""
 "There are different replies for the message. We suggest read them all here "
 "before you make judgements."
 msgstr "這則訊息有很多不同的查核回應，建議全部讀完再下判斷唷。"
 
-#: src/liff/pages/Article.svelte:127
+#: src/liff/pages/Article.svelte:136
 msgid "Read other replies"
 msgstr "查看其他查核回應"
 
-#: src/liff/pages/Article.svelte:114
+#: src/liff/pages/Article.svelte:122
 msgid "Open in Cofacts"
 msgstr "在「真的假的」開啟"
 
-#: src/liff/Redirect.svelte:20
+#: src/liff/Redirect.svelte:23
 msgid "Proceed"
 msgstr "繼續前往"
 
-#: src/liff/Redirect.svelte:22
+#: src/liff/Redirect.svelte:25
 msgid "Let's check the message, together!"
 msgstr "一起來查真假吧！"
 
-#: src/liff/Redirect.svelte:23
+#: src/liff/Redirect.svelte:26
 msgid ""
 "You are going to proceed to Cofacts to read the reply for you written by "
 "fact-check volunteers."
 msgstr "您即將前往 Cofacts 真的假的，閱讀闢謠志工為您撰寫的回應。"
 
-#: src/liff/Redirect.svelte:24
+#: src/liff/Redirect.svelte:27
 msgid ""
 "If the reply and the reference is helpful to you, please provide positive "
 "feedback. If existing replies can be improved, please login the website and "
 "provide new fact-check replies."
 msgstr "如果回應與出處對您有幫助，請您不吝給予好評；若有更好的寫法，也請登入動手查核、直接寫新回應。"
 
-#: src/liff/Redirect.svelte:25
+#: src/liff/Redirect.svelte:28
 msgid "Proceed to read the reply"
-msgstr "前往閱讀查核回應"
+msgstr "前往閱讀查核回應"
+
+#: src/liff/pages/Article.svelte:54
+msgid "This message does not exist."
+msgstr "此訊息不存在。"
+
+#: src/liff/pages/Article.svelte:130
+msgid "The reply does not exist. Maybe it has been deleted by its author."
+msgstr "此回應不存在。或許已經被作者刪掉囉。"
diff --git a/src/liff/Redirect.svelte b/src/liff/Redirect.svelte
@@ -5,12 +5,17 @@
   import multipleRepliesBanner from './assets/multiple-replies.png';
 
   const currentParams = new URLSearchParams(location.search);
-  const articleId = currentParams.get('articleId');
-  const replyId = currentParams.get('replyId');
-  const newParamsObj = { p: 'article' };
-  if(articleId) newParamsObj.articleId = articleId;
-  if(replyId) newParamsObj.replyId = replyId;
-  const LIFF_URL = `https://liff.line.me/${LIFF_ID}?${new URLSearchParams(newParamsObj).toString()}`;
+
+  const newParams = new URLSearchParams(
+    [['p', 'article']].concat(
+      Array.from(currentParams).filter(([key]) =>
+        key === 'articleId' ||
+        key === 'replyId' ||
+        key.startsWith('utm_')
+      )
+    )
+  );
+  const LIFF_URL = `https://liff.line.me/${LIFF_ID}?${newParams.toString()}`;
 
   const handleClick = () => {
     location.href = LIFF_URL;

diff --git a/src/liff/pages/Article.svelte b/src/liff/pages/Article.svelte
@@ -7,6 +7,7 @@
   import SingleColorLogo from '../components/icons/SingleColorLogo.svelte';
   import FullpagePrompt from '../components/FullpagePrompt.svelte';
   import Header from '../components/Header.svelte';
+  import Card from '../components/Card.svelte';
   import ArticleCard from '../components/ArticleCard.svelte';
   import ArticleReplyCard from '../components/ArticleReplyCard.svelte';
   import Spacer from '../components/Spacer.svelte';
@@ -22,6 +23,7 @@
   const replyId = params.get('replyId');
   const articleUrl = getArticleURL(articleId);
 
+  let errorStr = null;
   let articleData;
   let articleReplies = [];
   // These article replies are collapsed by default. Used when replyId is specified from URL.
@@ -48,6 +50,11 @@
       ${ArticleReplyCard_articleReply}
     `({id: articleId});
 
+    if (!GetArticle) {
+      errorStr = t`This message does not exist.`;
+      return;
+    }
+
     const {articleReplies: list, ...rest} = GetArticle;
 
     articleReplies = !replyId ? list : list.filter(({reply}) => reply.id === replyId);
@@ -99,13 +106,13 @@
     articleData = {...articleData, ...resp.data.CreateOrUpdateReplyRequest};
   }
 
-  $: replySectionTitle = articleReplies.length === 1
+  $: replySectionTitle = articleReplies.length <= 1
     ? t`Cofacts volunteer's reply to the message above`
     : t`Cofacts volunteers have published ${articleReplies.length} replies to the message above`
 
   const appbarHref = liff.isInClient() ?
-    `https://line.me/R/oaMessage/@cofacts?${encodeURIComponent(`${VIEW_ARTICLE_PREFIX}${articleUrl}`)}` :
-    getArticleURL(articleId);
+    `https://line.me/R/oaMessage/@cofacts/?${encodeURIComponent(`${VIEW_ARTICLE_PREFIX}${articleUrl}`)}` :
+    articleUrl;
 </script>
 
 <style>
@@ -147,7 +154,9 @@
   <title>{t`IM check`} | {t`Cofacts chatbot`}</title>
 </svelte:head>
 
-{#if !articleData }
+{#if errorStr }
+  <FullpagePrompt>{errorStr}</FullpagePrompt>
+{:else if !articleData }
   <FullpagePrompt>{t`Loading IM data...`}</FullpagePrompt>
 {:else}
   <AppBar>
@@ -167,7 +176,8 @@
     createdAt={createdAt}
   />
 
-  {#if articleReplies.length === 0}
+  {#if articleReplies.length + collapsedArticleReplies.length === 0}
+    <!-- No any existing replies -->
     <p>有 {articleData.replyRequestCount} 人回報說看到此訊息。</p>
     <button type="button" on:click={handleRequestReply} disabled={isRequestingReply || articleData.requestedForReply}>
       {#if articleData.requestedForReply}
@@ -177,19 +187,28 @@
       {/if}
     </button>
   {:else}
+    <!-- There is existing replies -->
     <Header style="position: relative; overflow: hidden;">
       {replySectionTitle}
       <SingleColorLogo style="position: absolute; right: -4px; bottom: -9px; color: var(--secondary100); z-index: -1;"/>
     </Header>
-    {#each articleReplies as articleReply, idx (articleReply.reply.id)}
-      {#if idx > 0}
-        <Spacer style="--dot-size: 8px" />
-      {/if}
-      <ArticleReplyCard articleReply={articleReply} />
-    {/each}
+
+    {#if articleReplies.length === 0}
+      <Card>
+        {t`The reply does not exist. Maybe it has been deleted by its author.`}
+      </Card>
+    {:else}
+      {#each articleReplies as articleReply, idx (articleReply.reply.id)}
+        {#if idx > 0}
+          <Spacer style="--dot-size: 8px" />
+        {/if}
+        <ArticleReplyCard articleReply={articleReply} />
+      {/each}
+    {/if}
 
     {#if collapsedArticleReplies.length > 0 }
-      {#if expanded}
+      <!-- automatically expand if no articleReplies, which happens when replyId is not valid -->
+      {#if expanded || articleReplies.length === 0}
         <Header>
           {t`Other replies`}
         </Header>