From 217fde412537e6c0e5fae4b82144d347ee862239 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 29 Aug 2022 02:30:50 +0800
Subject: [PATCH] [article] support related image articles

---
 components/SideSection.js                     | 10 +++++++
 components/SideSection.stories.js             |  7 +++++
 .../SideSection.stories.storyshot             | 28 +++++++++++++++++++
 pages/article/[id].js                         |  9 +++++-
 4 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/components/SideSection.js b/components/SideSection.js
index dd86cfe3..1648d343 100644
--- a/components/SideSection.js
+++ b/components/SideSection.js
@@ -122,3 +122,13 @@ export const SideSectionText = withStyles(() => ({
     </article>
   );
 });
+
+export const SideSectionImage = withStyles(() => ({
+  asideImage: {
+    maxWidth: '100%',
+    maxHeight: '100px',
+    verticalAlign: 'bottom',
+  },
+}))(({ classes, className, ...props }) => {
+  return <img className={cx(classes.asideImage, className)} {...props} />;
+});
diff --git a/components/SideSection.stories.js b/components/SideSection.stories.js
index f856c2ad..ec993e65 100644
--- a/components/SideSection.stories.js
+++ b/components/SideSection.stories.js
@@ -6,6 +6,7 @@ import {
   SideSectionLinks,
   SideSectionLink,
   SideSectionText,
+  SideSectionImage,
 } from './SideSection';
 
 export default {
@@ -36,6 +37,12 @@ export const SideSectionStructure = () => (
             section 3 Side section 3 Side section 3 Side section 3{' '}
           </SideSectionText>
         </SideSectionLink>
+        <SideSectionLink>
+          <SideSectionImage src="https://placekitten.com/300/200" />
+        </SideSectionLink>
+        <SideSectionLink>
+          <SideSectionImage src="https://placekitten.com/200/500" />
+        </SideSectionLink>
       </SideSectionLinks>
     </SideSection>
   </Container>
diff --git a/components/__snapshots__/SideSection.stories.storyshot b/components/__snapshots__/SideSection.stories.storyshot
index 7825986d..38f55518 100644
--- a/components/__snapshots__/SideSection.stories.storyshot
+++ b/components/__snapshots__/SideSection.stories.storyshot
@@ -60,6 +60,34 @@ exports[`Storyshots SideSection Side Section Structure 1`] = `
               </Component>
             </a>
           </Component>
+          <Component>
+            <a
+              className="Component-asideItem"
+            >
+              <Component
+                src="https://placekitten.com/300/200"
+              >
+                <img
+                  className="Component-asideImage"
+                  src="https://placekitten.com/300/200"
+                />
+              </Component>
+            </a>
+          </Component>
+          <Component>
+            <a
+              className="Component-asideItem"
+            >
+              <Component
+                src="https://placekitten.com/200/500"
+              >
+                <img
+                  className="Component-asideImage"
+                  src="https://placekitten.com/200/500"
+                />
+              </Component>
+            </a>
+          </Component>
         </div>
       </Component>
     </aside>
diff --git a/pages/article/[id].js b/pages/article/[id].js
index 8ffbdeae..3baf16a4 100644
--- a/pages/article/[id].js
+++ b/pages/article/[id].js
@@ -30,6 +30,7 @@ import {
   SideSectionLinks,
   SideSectionLink,
   SideSectionText,
+  SideSectionImage,
 } from 'components/SideSection';
 import Hyperlinks from 'components/Hyperlinks';
 import CurrentReplies from 'components/CurrentReplies';
@@ -145,6 +146,8 @@ const LOAD_ARTICLE = gql`
           node {
             id
             text
+            articleType
+            attachmentUrl(variant: THUMBNAIL)
             articleCategories {
               categoryId
             }
@@ -496,7 +499,11 @@ function ArticlePage() {
                   passHref
                 >
                   <SideSectionLink>
-                    <SideSectionText>{node.text}</SideSectionText>
+                    {node.articleType === 'IMAGE' ? (
+                      <SideSectionImage src={node.attachmentUrl} />
+                    ) : (
+                      <SideSectionText>{node.text}</SideSectionText>
+                    )}
                     <ArticleInfo className={classes.asideInfo} article={node} />
                   </SideSectionLink>
                 </Link>