refactor(about-thread): parse real data in about thread & re-org metric

src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx

@@ -53,8 +53,7 @@ export const Value = styled.div`
 `
 
 export const UserList = styled.div`
-  ${css.column()};
-  flex-wrap: wrap;
+  ${css.columnWrap()};
   gap: 10px 0;
 `
 

src/containers/content/CommunityContent/AboutContent.tsx

@@ -5,9 +5,8 @@
 import { FC } from 'react'
 import useMobileDetect from '@groupher/use-mobile-detect-hook'
 
-import type { TMetric } from '@/spec'
-import METRIC from '@/constant/metric'
 import useBannerLayout from '@/hooks/useBannerLayout'
+import useMetric from '@/hooks/useMetric'
 
 import { bond } from '@/mobx'
 import { BANNER_LAYOUT } from '@/constant/layout'
@@ -22,25 +21,22 @@ import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper, MobileCardsWrapp
 
 type TProps = {
   communityContent?: TStore
-  metric?: TMetric
 }
 
 /**
  * only for AboutThread, but link to the common communityContent store
  */
-const CommunityContentContainer: FC<TProps> = ({
-  communityContent: store,
-  metric = METRIC.COMMUNITY,
-}) => {
+const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
   useInit(store)
 
+  const metric = useMetric()
   const bannerLayout = useBannerLayout()
   const { isMobile } = useMobileDetect()
 
   const LayoutWrapper = bannerLayout === BANNER_LAYOUT.SIDEBAR ? SidebarWrapper : Wrapper
 
   return (
-    <LayoutWrapper testid="about-thread-content">
+    <LayoutWrapper testid="about-thread-content" metric={metric}>
       <CommunityDigest />
       {isMobile ? (
         <MobileCardsWrapper>

src/containers/content/CommunityContent/ChangeLogContent.tsx

@@ -36,7 +36,7 @@ const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
   const LayoutWrapper = globalLayout.banner === BANNER_LAYOUT.SIDEBAR ? SidebarWrapper : Wrapper
 
   return (
-    <LayoutWrapper testid="changelog-thread-content">
+    <LayoutWrapper testid="changelog-thread-content" metric={metric}>
       <CommunityDigest />
       {isMobile ? (
         <MobileCardsWrapper>

src/containers/content/CommunityContent/DocContent.tsx

@@ -28,14 +28,15 @@ type TProps = {
 const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
   useInit(store)
   const metric = useMetric()
+
   const bannerLayout = useBannerLayout()
   const { isMobile } = useMobileDetect()
 
   const isSidebarLayout = bannerLayout === BANNER_LAYOUT.SIDEBAR
   const LayoutWrapper = isSidebarLayout ? SidebarWrapper : Wrapper
 
   return (
-    <LayoutWrapper testid="doc-thread-content">
+    <LayoutWrapper testid="doc-thread-content" metric={metric}>
       <CommunityDigest />
       {isMobile ? (
         <MobileCardsWrapper>

src/containers/content/CommunityContent/KanbanContent.tsx

@@ -32,7 +32,7 @@ const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
   const LayoutWrapper = bannerLayout === BANNER_LAYOUT.SIDEBAR ? SidebarWrapper : Wrapper
 
   return (
-    <LayoutWrapper testid="kanban-thread-content">
+    <LayoutWrapper testid="kanban-thread-content" metric={metric}>
       <CommunityDigest />
       <MobileCardsWrapper>
         <ContentWrapper>

src/containers/content/LandingPage/styles/feature_wall/index.ts

@@ -59,8 +59,7 @@ export const FeatList = styled.div`
 `
 
 export const MobileIntroLists = styled.div`
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   gap: 16px 0;
   padding-left: 10px;
   margin-top: -25px;

src/containers/content/LandingPage/styles/feature_wall/user_voice.ts

@@ -10,8 +10,7 @@ import TreesSVG from '@/icons/Trees'
 export const Wrapper = styled.div.attrs<TTestable>(({ testid }) => ({
   'data-test-id': testid,
 }))<TTestable>`
-  ${css.row('align-both')};
-  flex-wrap: wrap;
+  ${css.rowWrap('align-both')};
   gap: 40px 25px;
   height: auto;
   margin-top: 80px;

src/containers/content/LandingPage/styles/tech_stacks/index.ts

@@ -71,8 +71,7 @@ export const CADBackground = styled(Img)`
   `};
 `
 export const TechsWrapper = styled.div`
-  ${css.row('align-both')};
-  flex-wrap: wrap;
+  ${css.rowWrap('align-both')};
   gap: 15px 50px;
   height: 440px;
   width: 100%;

src/containers/content/UserContent/styles/sidebar/community_editor_info.ts

@@ -3,10 +3,9 @@ import styled from 'styled-components'
 import css, { theme } from '@/css'
 
 export const Wrapper = styled.div`
-  ${css.row('align-center')};
+  ${css.rowWrap('align-center')};
   margin-top: 10px;
   color: ${theme('banner.desc')};
-  flex-wrap: wrap;
 `
 
 export const Text = styled.div`

src/containers/editor/CommunityEditor/styles/content/fake_browser/mask_panel.ts

@@ -18,8 +18,7 @@ export const Wrapper = styled.div`
 `
 export const InnerWrapper = styled.div`
   width: calc(100% + 148px);
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   gap: 16px 0;
 `
 export const InnerWrapperColumn = styled.div`

src/containers/editor/CoverEditor/styles/toolbox/light_block.ts

@@ -11,8 +11,7 @@ export const Wrapper = styled.div`
 `
 export const Block = styled.div`
   ${css.size(48)};
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   gap: 3px;
   padding: 4px;
   border-radius: 2px;

src/containers/editor/CoverEditor/styles/toolbox/position_block.ts

@@ -11,8 +11,7 @@ export const Wrapper = styled.div`
 `
 export const Block = styled.div`
   ${css.size(47)};
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   border-radius: 2px;
   border: 1px solid;
   border-color: ${theme('divider')};

src/containers/editor/PassportEditor/styles/selects.ts

@@ -7,8 +7,7 @@ import CheckSVG from '@/icons/Check'
 
 export const Wrapper = styled.div`
   width: 100%;
-  ${css.row()};
-  flex-wrap: wrap;
+  ${css.rowWrap()};
   gap: 10px 0;
   position: relative;
 `

src/containers/editor/WallpaperEditor/styles/build_in/gradient_group.ts

@@ -6,9 +6,8 @@ import css, { animate, theme } from '@/css'
 import PenSVG from '@/icons/EditPen'
 
 export const Wrapper = styled.div`
-  ${css.row()};
+  ${css.rowWrap()};
   width: calc(100% + 30px);
-  flex-wrap: wrap;
   gap: 0 12px;
   margin-top: 10px;
 

src/containers/editor/WallpaperEditor/styles/build_in/pictrue_group.ts

@@ -7,9 +7,8 @@ import CheckedSVG from '@/icons/CheckBold'
 import CircleArrowSVG from '@/icons/CircleArrow'
 
 export const Wrapper = styled.div<{ showMore: boolean }>`
-  ${css.row()};
+  ${css.rowWrap()};
   width: calc(100% + 30px);
-  flex-wrap: wrap;
   gap: 15px 16px;
   margin-top: 10px;
   position: relative;

src/containers/thread/AboutThread/ExtraInfo.tsx

@@ -1,35 +1,44 @@
-import { FC, memo } from 'react'
+import { FC } from 'react'
+import { observer } from 'mobx-react'
+import { isEmpty } from 'ramda'
 
-import { Br, SexyDivider as Divider } from '@/widgets/Common'
+import useAboutInfo from '@/hooks/useAboutInfo'
+import { SexyDivider as Divider } from '@/widgets/Common'
+import SocialList from '@/widgets/SocialList'
 
-import { Wrapper, Block, Title, Reports, ReportsArticle, Press, Desc } from './styles/extra_info'
+import LabelList from './LabelList'
+import MediaReports from './MediaReports'
+
+import { Wrapper, Block, Title } from './styles/extra_info'
 
 const Content = () => {
+  const { cities, techstacks, socialLinks, mediaReports } = useAboutInfo()
+
+  const noMediaReports = mediaReports.length <= 1 && !mediaReports[0].title
+
   return (
     <>
+      <Divider bottom={40} top={0} />
+      <Block hide={isEmpty(cities)}>
+        <Title>所在地</Title>
+        <LabelList items={cities} left={-2} />
+      </Block>
+
       <Block>
         <Title>技术栈</Title>
-        <Desc>Typescript, Elixir</Desc>
+        <LabelList items={techstacks} left={-2} />
       </Block>
-      <Block>
-        <Title>所在地</Title>
-        <Desc>成都, 厦门</Desc>
+      <Divider bottom={40} />
+      <Block hide={isEmpty(socialLinks)}>
+        <Title>关注我们</Title>
+        <SocialList size="small" selected={socialLinks} left={-10} top={12} />
       </Block>
-      <Divider bottom={30} />
-      <Block>
+
+      <Block hide={noMediaReports}>
         <Title>媒体报道</Title>
-        <Br top={10} />
-        <Reports>
-          <Press>36kr</Press>
-          <ReportsArticle>新一代xxx一体化协作平台「XXX」获1000万元Pre</ReportsArticle>
-        </Reports>
-        <Br top={6} />
-        <Reports>
-          <Press>科技周刊</Press>
-          <ReportsArticle>这个平台太酷了</ReportsArticle>
-        </Reports>
+        <MediaReports items={mediaReports} />
       </Block>
-      <Divider />
+      <Divider bottom={40} />
     </>
   )
 }
@@ -42,4 +51,4 @@ const ExtraInfo: FC = () => {
   )
 }
 
-export default memo(ExtraInfo)
+export default observer(ExtraInfo)

src/containers/thread/AboutThread/LabelList.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+
+import type { TSpace } from '@/spec'
+import { Trans } from '@/i18n'
+
+import { Wrapper, Label } from './styles/label_list'
+
+type TProps = {
+  items: string[]
+} & TSpace
+
+const LabelList: FC<TProps> = ({ items, ...restProps }) => {
+  return (
+    <Wrapper {...restProps}>
+      {items.map((item: string) => (
+        <Label key={item}>{Trans(item)}</Label>
+      ))}
+    </Wrapper>
+  )
+}
+
+export default LabelList

src/containers/thread/AboutThread/MediaReports.tsx

@@ -0,0 +1,49 @@
+import { FC } from 'react'
+
+import type { TMediaReport } from '@/spec'
+import { sortByIndex } from '@/helper'
+
+import {
+  Wrapper,
+  PreviewWrapper,
+  Brand,
+  Favicon,
+  SiteName,
+  Title,
+  ArrowBox,
+  ArrowIcon,
+} from './styles/media_reports'
+
+type TProps = {
+  items: TMediaReport[]
+}
+
+const MediaReports: FC<TProps> = ({ items }) => {
+  return (
+    <Wrapper>
+      {/* @ts-ignore */}
+      {sortByIndex(items).map((item: TMediaReport) => {
+        const { index, favicon, title, url, siteName } = item
+        if (!title) return null
+
+        return (
+          <PreviewWrapper key={index}>
+            <Brand>
+              <Favicon src={favicon} />
+              <SiteName>{siteName}</SiteName>
+            </Brand>
+
+            <Title href={url} target="_blank">
+              {title}
+            </Title>
+            <ArrowBox>
+              <ArrowIcon />
+            </ArrowBox>
+          </PreviewWrapper>
+        )
+      })}
+    </Wrapper>
+  )
+}
+
+export default MediaReports