refactor(user-page): Improve profile (#1184)

* refactor(profile): contribuite map title style

* refactor(profile): subscribed community with real data

* refactor(profile): tmp activity

Author: mydearxym

src/containers/content/UserContent/store.ts

@@ -25,6 +25,7 @@ const UserContent = T.model('UserContent', {
   following: T.optional(T.boolean, false),
 
   pagedEditableCommunities: T.optional(PagedCommunities, emptyPagi),
+  subscribedCommunities: T.optional(PagedCommunities, emptyPagi),
   pagedWorks: T.optional(PagedWorks, emptyPagi),
 })
   .views((self) => ({
@@ -50,6 +51,7 @@ const UserContent = T.model('UserContent', {
     get pagedEditableCommunitiesData(): TPagedCommunities {
       return toJS(self.pagedEditableCommunities)
     },
+
     get hasContentBg(): boolean {
       const root = getParent(self) as TRootStore
 

src/containers/user/UserProfile/Activities/BriefInfo.js

@@ -0,0 +1,35 @@
+import { FC, memo } from 'react'
+
+import { TUserActivity } from '@/spec'
+import {
+  Wrapper,
+  DateInfo,
+  DayNum,
+  MonthNum,
+  Divider,
+  Desc,
+} from '../styles/activities/brief_info'
+
+type TProps = {
+  activity: TUserActivity
+  first: boolean
+}
+
+const BriefInfo: FC<TProps> = ({ activity, first }) => {
+  const date = new Date(activity.insertedAt)
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+
+  return (
+    <Wrapper first={first}>
+      <DateInfo>
+        <DayNum>{day}</DayNum>
+        <Divider>/</Divider>
+        <MonthNum>{month}月</MonthNum>
+      </DateInfo>
+      <Desc>发布帖子</Desc>
+    </Wrapper>
+  )
+}
+
+export default memo(BriefInfo)

src/containers/user/UserProfile/Activities/BriefInfo.tsx

@@ -0,0 +1,33 @@
+import { FC, memo } from 'react'
+
+import type { TUserActivity } from '@/spec'
+
+import {
+  Wrapper,
+  IconWrapper,
+  Icon,
+  Content,
+  Title,
+  Digest,
+} from '../styles/activities/detail_info'
+
+type TProps = {
+  activity: TUserActivity
+  first: boolean
+}
+
+const DetailInfo: FC<TProps> = ({ activity, first }) => {
+  return (
+    <Wrapper first={first}>
+      <IconWrapper first={first}>
+        <Icon />
+      </IconWrapper>
+      <Content>
+        <Title>{activity.articleTitle}</Title>
+        <Digest>{activity.digest}</Digest>
+      </Content>
+    </Wrapper>
+  )
+}
+
+export default memo(DetailInfo)

src/containers/user/UserProfile/Activities/DetailInfo.js

@@ -0,0 +1,24 @@
+import { FC, memo } from 'react'
+
+import type { TUserActivity } from '@/spec'
+
+import BriefInfo from './BriefInfo'
+import DetailInfo from './DetailInfo'
+
+import { Wrapper } from '../styles/activities/event_block'
+
+type TProps = {
+  activity: TUserActivity
+  first: boolean
+}
+
+const EventBlock: FC<TProps> = ({ activity, first }) => {
+  return (
+    <Wrapper>
+      <BriefInfo activity={activity} first={first} />
+      <DetailInfo activity={activity} first={first} />
+    </Wrapper>
+  )
+}
+
+export default memo(EventBlock)

src/containers/user/UserProfile/Activities/DetailInfo.tsx

@@ -0,0 +1,26 @@
+import { FC, memo } from 'react'
+
+import type { TUserActivity } from '@/spec'
+import EventBlock from './EventBlock'
+
+import { Wrapper, Title, EmptyHint, Divider } from '../styles/activities'
+
+type TProps = {
+  items: TUserActivity[]
+}
+
+const Activities: FC<TProps> = ({ items }) => {
+  if (items.length === 0) return <EmptyHint>暂无动态</EmptyHint>
+
+  return (
+    <Wrapper>
+      <Title>最新动态</Title>
+      <Divider />
+      {items.map((activity, index) => (
+        <EventBlock key={activity.id} activity={activity} first={index === 0} />
+      ))}
+    </Wrapper>
+  )
+}
+
+export default memo(Activities)

src/containers/user/UserProfile/Activities/EventBlock.js

@@ -13,6 +13,7 @@ import { buildLog } from '@/utils/logger'
 import {
   Wrapper,
   Title,
+  TitleCount,
   Header,
   Divider,
   DotText,
@@ -70,7 +71,10 @@ const UserContributeMap: FC<TProps> = ({ user }) => {
   return (
     <Wrapper className="banner-heatmap">
       <Header>
-        <Title>过去 1 年共创作 {contributes.totalCount} 次内容</Title>
+        <Title>
+          过去 <TitleCount>1</TitleCount> 年共创作{' '}
+          <TitleCount>{contributes.totalCount}</TitleCount> 次内容
+        </Title>
         <DotList>
           <DotText>潜水&nbsp;&nbsp;</DotText>
           <ColorDot scale="empty" />