refactor(user-page): Improve profile

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.tsx

@@ -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/DetailInfo.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/EventBlock.tsx

@@ -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/index.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/ContributeMap.tsx

@@ -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" />

src/containers/user/UserProfile/NumbersPad.tsx

@@ -1,11 +1,10 @@
 import { FC, memo } from 'react'
 
-import type { TUser } from '@/spec'
+import type { TUser, TPagedCommunities } from '@/spec'
 import FollowButton from '@/widgets/Buttons/FollowButton'
 import Button from '@/widgets/Buttons/Button'
 import { Br } from '@/widgets/Common'
 import Tooltip from '@/widgets/Tooltip'
-import { mockCommunities } from '@/utils/mock'
 
 import CommunityList from '@/widgets/CommunityList'
 
@@ -25,9 +24,10 @@ import {
 
 type TProps = {
   user: TUser
+  subscribedCommunities: TPagedCommunities
 }
 
-const Numberspad: FC<TProps> = ({ user }) => {
+const Numberspad: FC<TProps> = ({ user, subscribedCommunities }) => {
   return (
     <Wrapper>
       <GravitySection>
@@ -56,14 +56,18 @@ const Numberspad: FC<TProps> = ({ user }) => {
       <JoinSection>
         <CommunitiesWrapper>
           <CommunityList
-            items={mockCommunities(7)}
+            items={subscribedCommunities.entries}
             size={16}
-            bottom={2}
+            bottom={1}
             right={8}
-            totalCount={10}
+            totalCount={subscribedCommunities.totalCount}
           />
         </CommunitiesWrapper>
-        <Title>加入的子社区</Title>
+        {subscribedCommunities.totalCount === 1 ? (
+          <Title>加入的社区</Title>
+        ) : (
+          <Title>加入的子社区</Title>
+        )}
       </JoinSection>
       <Divider />
       <FollowSection>

src/containers/user/UserProfile/index.tsx

@@ -33,16 +33,19 @@ const UserProfileContainer: FC<TProps> = ({
 }) => {
   useInit(store)
 
-  const { viewingUser } = store
+  const { viewingUser, pagedSubscribedCommunitiesData, activities } = store
 
   return (
     <Wrapper testid={testid}>
-      <NumbersPad user={viewingUser} />
+      <NumbersPad
+        user={viewingUser}
+        subscribedCommunities={pagedSubscribedCommunitiesData}
+      />
       <ContributesWrapper>
         <ContributeMap user={viewingUser} />
       </ContributesWrapper>
 
-      <Activities />
+      <Activities items={activities} />
     </Wrapper>
   )
 }

src/containers/user/UserProfile/logic.ts

@@ -1,27 +1,76 @@
 import { useEffect } from 'react'
 // import { } from 'ramda'
 
+import { TYPE, ERR, ARTICLE_THREAD } from '@/constant'
+import { errRescue } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
-// import S from './service'
+import asyncSuit from '@/utils/async'
+
+import S from './schema'
 import type { TStore } from './store'
 
 let store: TStore | undefined
+let sub$ = null
 
 /* eslint-disable-next-line */
 const log = buildLog('L:UserProfile')
 
-export const someMethod = (): void => {
-  /* todo */
+const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
+
+const sr71$ = new SR71()
+
+export const loadPublishedArticles = (): void => {
+  const { viewingUser: user, isLogin } = store
+  const filter = { page: 1, size: 30 }
+  const userHasLogin = isLogin
+
+  store.mark({ resState: TYPE.RES_STATE.LOADING })
+  sr71$.query(S.getPagedPublishedArticlesSchema(ARTICLE_THREAD.POST), {
+    login: user.login,
+    filter,
+    userHasLogin,
+  })
 }
 
 // ###############################
 // init & uninit handlers
 // ###############################
 
+const DataSolver = [
+  {
+    match: asyncRes('pagedPublishedPosts'),
+    action: ({ pagedPublishedPosts }) => {
+      console.log('got it: ', pagedPublishedPosts)
+      store.mark({ pagedPosts: pagedPublishedPosts })
+    },
+  },
+]
+
+const ErrSolver = [
+  {
+    match: asyncErr(ERR.GRAPHQL),
+    action: () => {
+      //
+    },
+  },
+  {
+    match: asyncErr(ERR.NETWORK),
+    action: () => {
+      errRescue({ type: ERR.NETWORK, path: 'PublishedArticles' })
+    },
+  },
+]
+
 export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     log('useInit: ', store)
-    // return () => store.reset()
+    sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
+
+    loadPublishedArticles()
+    return () => {
+      sr71$.stop()
+      sub$.unsubscribe()
+    }
   }, [_store])
 }