From 346dccd9e8f035186d3c855c876b5ddcb77bc7b7 Mon Sep 17 00:00:00 2001
From: Anu-Ujin Bat-Ulzii <anuujin@Anu-Ujins-MacBook-Pro.local>
Date: Sun, 2 Oct 2022 22:26:14 +0800
Subject: [PATCH] feat(marketplace): delete constant data in plugin detail

---
 .../components/detail/PluginDetails.tsx       | 84 ++++++++++---------
 .../modules/settings/marketplace/styles.tsx   |  2 +-
 2 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/packages/core-ui/src/modules/settings/marketplace/components/detail/PluginDetails.tsx b/packages/core-ui/src/modules/settings/marketplace/components/detail/PluginDetails.tsx
index 8a769eaaec8..175f7d7f211 100755
--- a/packages/core-ui/src/modules/settings/marketplace/components/detail/PluginDetails.tsx
+++ b/packages/core-ui/src/modules/settings/marketplace/components/detail/PluginDetails.tsx
@@ -39,7 +39,7 @@ class PluginDetails extends React.Component<Props, State> {
 
     this.state = {
       tabType: 'Description',
-      plugin: props.plugin,
+      plugin: props.plugin || {},
       loading: {}
     };
   }
@@ -69,32 +69,53 @@ class PluginDetails extends React.Component<Props, State> {
           </Detail>
         </>
       );
-    } else if (tabType === 'Guide') {
+    }
+
+    if (tabType === 'Guide') {
       return <div dangerouslySetInnerHTML={{ __html: plugin.userGuide }} />;
     }
+
     return null;
   };
 
+  renderCategories() {
+    const categories = this.state.plugin.categories || [];
+
+    if (categories.length === 0) {
+      return <Hashtag>#Free</Hashtag>;
+    }
+
+    return categories.map((category, index) => (
+      <Hashtag key={index}>
+        {'#'}
+        {category}
+      </Hashtag>
+    ));
+  }
+
+  renderScreenshots() {
+    const { screenShots } = this.state.plugin;
+    const items = screenShots.split(',');
+
+    if (!items || items.length === 0) {
+      return null;
+    }
+
+    return items.map((item, index) => {
+      const attachment = {
+        name: item,
+        type: 'image',
+        url: item
+      };
+
+      return <Attachment key={index} simple={true} attachment={attachment} />;
+    });
+  }
+
   render() {
     const { enabledServicesQuery } = this.props;
     const { loading, plugin, tabType } = this.state;
 
-    // fake data
-    const pluginCategories = 'Free Marketing'.split(' ');
-
-    const dataSlider = [
-      {
-        url: 'https://wallpaperaccess.com/full/1760844.jpg',
-        name: 'image-1',
-        type: 'image'
-      },
-      {
-        url: 'https://wallpaperaccess.com/full/1282257.jpg',
-        name: 'image-2',
-        type: 'image'
-      }
-    ];
-
     const breadcrumb = [
       { title: __('Store'), link: '/settings/installer' },
       { title: plugin.title || '' }
@@ -129,14 +150,7 @@ class PluginDetails extends React.Component<Props, State> {
             <img src={plugin.image} />
             <DetailInformation>
               <b>{plugin.title}</b>
-              <Flex>
-                {pluginCategories.map((category, index) => (
-                  <Hashtag key={index}>
-                    {'#'}
-                    {category}
-                  </Hashtag>
-                ))}
-              </Flex>
+              <Flex>{this.renderCategories()}</Flex>
             </DetailInformation>
           </Center>
           {plugin.title && enabledServices[plugin.title.toLowerCase()] ? (
@@ -188,19 +202,7 @@ class PluginDetails extends React.Component<Props, State> {
           )}
         </PluginTitle>
 
-        <AttachmentContainer>
-          {dataSlider.length !== 0 &&
-            dataSlider.map((data, index) =>
-              data.type === 'video' ? (
-                <video key={index} controls={true} loop={true}>
-                  <source src={data.url} type="video/mp4" />
-                  {__('Your browser does not support the video tag')}.
-                </video>
-              ) : (
-                <Attachment key={index} simple={true} attachment={data} />
-              )
-            )}
-        </AttachmentContainer>
+        <AttachmentContainer>{this.renderScreenshots()}</AttachmentContainer>
 
         <Tabs>
           <TabTitle
@@ -229,7 +231,9 @@ class PluginDetails extends React.Component<Props, State> {
 
     return (
       <Wrapper
-        mainHead={<Wrapper.Header title="" breadcrumb={breadcrumb} />}
+        mainHead={
+          <Wrapper.Header title={plugin.title} breadcrumb={breadcrumb} />
+        }
         rightSidebar={<RightSidebar plugin={plugin} />}
         content={content}
       />
diff --git a/packages/core-ui/src/modules/settings/marketplace/styles.tsx b/packages/core-ui/src/modules/settings/marketplace/styles.tsx
index 08198dc4f3e..73694f12ef1 100644
--- a/packages/core-ui/src/modules/settings/marketplace/styles.tsx
+++ b/packages/core-ui/src/modules/settings/marketplace/styles.tsx
@@ -246,7 +246,7 @@ const DetailInformation = styled.div`
 const Hashtag = styled.div`
   border-radius: 4px;
   color: ${colors.colorWhite};
-  background: ${colors.colorSecondary};
+  background: #000;
   padding: 2px 6px;
   margin-right: 5px;
   font-size: 11px;