refactor: user page reorg (#1183)

* refactor(user-page): basic setup

* refactor(user-page): UserProfile Tab UI/UX improve

* refactor(user-page): adjust styles

* refactor(user-page): re-org inputs

* refactor(user-page): editor basic UX

* refactor(user-page): UserProfile Tab UI/UX improve

* refactor(user-page): sidebar add works & re-org

* refactor(sponsor-page): improve & adjust

* refactor(user-page): user digest footer with real data

* refactor(user-page): published articles workflow

* refactor(user-page): published articles workflow

* refactor(user-page): content bg edge case

* refactor(comments): add user_published mode

* refactor(comments): links for publish mode

* refactor(user-page): add publisheComments tab & re-org

Author: mydearxym

docs/js/graphql.md

@@ -30,7 +30,7 @@ const pagedCommunities = gql`
         contributesDigest
         subscribersCount
       }
-      ${F.pagedCounts}
+      ${F.pagi}
     }
   }
 `

docs/js/graphql.zh-CN.md

@@ -30,7 +30,7 @@ const pagedCommunities = gql`
         contributesDigest
         subscribersCount
       }
-      ${F.pagedCounts}
+      ${F.pagi}
     }
   }
 `

server/routes.js

@@ -79,8 +79,15 @@ router.route('/works/:id').get((req, res) => {
 })
 
 // 用户页
-router.route('/user/:userId').get((req, res) => {
-  return renderAndCache({ req, res, path: '/user' })
+router.route('/u/:login').get((req, res) => {
+  const { login } = req.params
+  return renderAndCache({ req, res, path: `/user/${login}` })
+})
+
+router.route('/user/:login').get((req, res) => {
+  const { login } = req.params
+  console.log('hello user ?: ', login)
+  return renderAndCache({ req, res, path: `/user/${login}` })
 })
 
 // 帖子页

src/containers/content/ExploreContent/schema.ts

@@ -10,7 +10,7 @@ const pagedCommunities = gql`
         subscribersCount
         viewerHasSubscribed @include(if: $userHasLogin)
       }
-      ${F.pagedCounts}
+      ${F.pagi}
     }
   }
 `
@@ -24,7 +24,7 @@ const searchCommunities = gql`
         subscribersCount
         viewerHasSubscribed @include(if: $userHasLogin)
       }
-      ${F.pagedCounts}
+      ${F.pagi}
     }
   }
 `
@@ -42,14 +42,14 @@ const subscribeCommunity = gql`
   }
 `
 const unsubscribeCommunity = gql`
-  mutation($communityId: ID!) {
+  mutation ($communityId: ID!) {
     unsubscribeCommunity(communityId: $communityId) {
       id
     }
   }
 `
 const pagedCategories = gql`
-  query($filter: PagedFilter!) {
+  query ($filter: PagedFilter!) {
     pagedCategories(filter: $filter) {
       entries {
         id

src/containers/content/UserContent/AchieveCard.js

@@ -1,19 +1,29 @@
 import { FC, memo } from 'react'
 
-import type { TUser } from '@/spec'
-import { VIEW } from '@/constant'
+import type { TUser, TPagedWorks, TPagedCommunities } from '@/spec'
 import UserBrief from '@/widgets/UserBrief'
 import { Wrapper } from '../styles/sidebar'
 
 type TProps = {
-  viewingUser: TUser
+  user: TUser
   isSelfViewing?: boolean
+  works: TPagedWorks
+  editableCommunities: TPagedCommunities
 }
 
-const Sidebar: FC<TProps> = ({ viewingUser, isSelfViewing = false }) => {
+const Sidebar: FC<TProps> = ({
+  user,
+  works,
+  editableCommunities,
+  isSelfViewing = false,
+}) => {
   return (
     <Wrapper>
-      <UserBrief user={viewingUser} view={VIEW.DESKTOP} />
+      <UserBrief
+        user={user}
+        works={works}
+        editableCommunities={editableCommunities}
+      />
     </Wrapper>
   )
 }

src/containers/content/UserContent/DigestBoard.js

@@ -11,27 +11,24 @@ import { USER_THREAD } from '@/constant'
 import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
 
+import { Comments } from '@/containers/dynamic'
 import UserProfile from '@/containers/user/UserProfile'
-import UserPublished from '@/containers/user/UserPublished'
-import UserPublishedComments from '@/containers/user/UserPublishedComments'
-import UserBilling from '@/containers/user/UserBilling'
+import UserPublishedArticles from '@/containers/user/UserPublishedArticles'
+// import UserBilling from '@/containers/user/UserBilling'
 import UserSettings from '@/containers/user/UserSettings'
-import UserStared from '@/containers/user/UserStared'
-import UserFavorited from '@/containers/user/UserFavorited'
 
 import TabBar from '@/widgets/TabBar'
 
 import type { TStore } from './store'
 import Sidebar from './Sidebar'
-// import DigestBoard from './DigestBoard'
 
 import {
   Wrapper,
   InnerWrapper,
   BannerWrapper,
   ContentWrapper,
   TabBarWrapper,
-  // MobileBottom,
+  PublishedCommentsWrapper,
 } from './styles'
 
 import { useInit, tabOnChange } from './logic'
@@ -52,22 +49,22 @@ const BaseTaberThreads = [
     title: '讨论',
     raw: 'comments',
   },
-  {
-    title: '收藏',
-    raw: 'favorites',
-  },
-  {
-    title: '喜欢',
-    raw: 'likes',
-  },
+  // {
+  //   title: '收藏',
+  //   raw: 'favorites',
+  // },
+  // {
+  //   title: '喜欢',
+  //   raw: 'likes',
+  // },
 ]
 
 const FullTaberThreads = [
   ...BaseTaberThreads,
-  {
-    title: '账单',
-    raw: 'billing',
-  },
+  // {
+  //   title: '账单',
+  //   raw: 'billing',
+  // },
   {
     title: '设置',
     raw: 'settings',
@@ -80,22 +77,20 @@ const TabberContent = ({ active }) => {
       return <UserProfile />
 
     case USER_THREAD.COMMENTS:
-      return <UserPublishedComments />
-
-    case USER_THREAD.FAVORITES:
-      return <UserFavorited />
+      return (
+        <PublishedCommentsWrapper>
+          <Comments apiMode="user_published" />
+        </PublishedCommentsWrapper>
+      )
 
-    case USER_THREAD.LINKS:
-      return <UserStared />
-
-    case USER_THREAD.BILLING:
-      return <UserBilling />
+    // case USER_THREAD.BILLING:
+    //   return <UserBilling />
 
     case USER_THREAD.SETTINGS:
       return <UserSettings />
 
     default:
-      return <UserPublished />
+      return <UserPublishedArticles />
   }
 }
 
@@ -110,33 +105,32 @@ const UserContentContainer: FC<TProps> = ({ userContent: store, metric }) => {
   const {
     activeThread,
     viewingUser,
-    // accountInfo,
     isSelfViewing,
-    // following,
+    pagedWorksData,
+    pagedEditableCommunitiesData,
+    hasContentBg,
   } = store
-
   const taberSource = isSelfViewing ? FullTaberThreads : BaseTaberThreads
 
   return (
     <Wrapper>
-      <BannerWrapper metric={metric}>
-        <TabBarWrapper className="tabs-with-bottom">
-          <TabBar
-            source={taberSource}
-            onChange={tabOnChange}
-            active={activeThread}
-          />
-        </TabBarWrapper>
-      </BannerWrapper>
+      <BannerWrapper metric={metric} />
       <InnerWrapper metric={metric}>
-        <Sidebar viewingUser={viewingUser} isSelfViewing={isSelfViewing} />
-        <ContentWrapper>
+        <Sidebar
+          user={viewingUser}
+          isSelfViewing={isSelfViewing}
+          works={pagedWorksData}
+          editableCommunities={pagedEditableCommunitiesData}
+        />
+        <ContentWrapper hasContentBg={hasContentBg}>
+          <TabBarWrapper className="tabs-with-bottom">
+            <TabBar
+              source={taberSource}
+              onChange={tabOnChange}
+              active={activeThread}
+            />
+          </TabBarWrapper>
           <TabberContent active={activeThread} />
-          {/* <DigestBoard
-            user={viewingUser}
-            accountId={accountInfo.id}
-            following={following}
-          /> */}
         </ContentWrapper>
       </InnerWrapper>
     </Wrapper>