[Article] expand other replies if replyId is specified

cofacts · Sep 7, 2021 · a5358a5 · a5358a5
1 parent 29447ce
commit a5358a5
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git a/src/liff/assets/multiple-replies.png b/src/liff/assets/multiple-replies.png
diff --git a/src/liff/pages/Article.svelte b/src/liff/pages/Article.svelte
@@ -10,9 +10,11 @@
   import ArticleReplyCard from '../components/ArticleReplyCard.svelte';
   import Spacer from '../components/Spacer.svelte';
   import Terms from '../components/Terms.svelte';
+  import Button from '../components/Button.svelte';
   import { ArticleReplyCard_articleReply } from '../components/fragments';
   import { getArticleURL } from 'src/lib/sharedUtils';
   import improveBanner from '../assets/improve-reply-banner.png';
+  import multipleRepliesBanner from '../assets/multiple-replies.png';
 
   const params = new URLSearchParams(location.search);
   const articleId = params.get('articleId');
@@ -21,6 +23,9 @@
 
   let articleData;
   let articleReplies = [];
+  // These article replies are collapsed by default. Used when replyId is specified from URL.
+  let collapsedArticleReplies = [];
+  let expanded = false; // Collapse above article replies by default
   let createdAt;
 
   const loadData = async () => {
@@ -44,7 +49,8 @@
 
     const {articleReplies: list, ...rest} = GetArticle;
 
-    articleReplies = list.filter(({reply}) => replyId ? reply.id === replyId : true);
+    articleReplies = !replyId ? list : list.filter(({reply}) => reply.id === replyId);
+    collapsedArticleReplies = !replyId ? [] : list.filter(({reply}) => reply.id !== replyId);
     articleData = rest;
     createdAt = new Date(articleData.createdAt);
 
@@ -101,6 +107,20 @@
     margin-top: 24px;
     width: 100%;
   }
+
+  .multiple-replies-banner {
+    margin-top: 24px;
+    padding: 24px 16px;
+    background: var(--primary50);
+    display: grid;
+    grid-auto-flow: row;
+    row-gap: 16px;
+  }
+
+  .multiple-replies-banner > img {
+    width: 72.8%;
+    margin: 0 auto;
+  }
 </style>
 
 <svelte:head>
@@ -140,9 +160,34 @@
       {/if}
       <ArticleReplyCard articleReply={articleReply} />
     {/each}
-    <a class="improve-banner" href={articleUrl} target="_blank">
-      <img src={improveBanner} alt="Help improve replies" />
-    </a>
+
+    {#if collapsedArticleReplies.length > 0 }
+      {#if expanded}
+        <Header>
+          {t`Other replies`}
+        </Header>
+        {#each collapsedArticleReplies as articleReply, idx (articleReply.reply.id)}
+          {#if idx > 0}
+            <Spacer style="--dot-size: 8px" />
+          {/if}
+          <ArticleReplyCard articleReply={articleReply} />
+        {/each}
+      {:else}
+        <footer class="multiple-replies-banner">
+          <img src={multipleRepliesBanner} alt="Multiple replies available" />
+          {t`There are different replies for the message. We suggest read them all here before you make judgements.`}
+          <Button variant="outlined" on:click={() => { expanded = true; }}>
+            {t`Read other replies`}
+          </Button>
+        </footer>
+      {/if}
+    {/if}
+
+    {#if collapsedArticleReplies.length === 0 || expanded}
+      <a class="improve-banner" href={articleUrl} target="_blank">
+        <img src={improveBanner} alt="Help improve replies" />
+      </a>
+    {/if}
   {/if}
   <Terms />
 {/if}