feat(UserPublishedComments): with different thread & refactor

Author: mydearxym

containers/UserContent/index.js

@@ -8,6 +8,7 @@ import React from 'react'
 import { inject, observer } from 'mobx-react'
 
 import UserPublished from '../UserPublished'
+import UserPublishedComments from '../UserPublishedComments'
 import UserBilling from '../UserBilling'
 import UserSettings from '../UserSettings'
 import UserStared from '../UserStared'
@@ -26,7 +27,7 @@ import * as logic from './logic'
 const debug = makeDebugger('C:UserContent')
 /* eslint-enable no-unused-vars */
 
-const fakeThreads = [
+const taberThreads = [
   {
     title: '发布',
     raw: 'publish',
@@ -56,7 +57,7 @@ const fakeThreads = [
 const TabberContent = ({ active }) => {
   switch (active) {
     case USER_THREAD.COMMENTS: {
-      return <h2>COMMENTS</h2>
+      return <UserPublishedComments />
     }
     case USER_THREAD.FAVORITES: {
       return <UserFavorited />
@@ -91,7 +92,7 @@ class UserContentContainer extends React.Component {
         <MainWrapper>
           <TabberWrapper className="tabs-with-bottom">
             <Tabber
-              source={fakeThreads}
+              source={taberThreads}
               onChange={logic.tabChange}
               active={activeThread}
             />

containers/UserPublishedComments/CommentsToContent.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import TimeAgo from 'timeago-react'
+
+import { MarkDownRender, CommentLoading, EmptyLabel } from '../../components'
+import {
+  Wrapper,
+  CommentBlock,
+  CommentDivider,
+  CommentBox,
+  CommentHeader,
+  Avatar,
+  AvatarInfo,
+  Nickname,
+  When,
+  CommentBody,
+} from './styles/comments_to_post'
+
+import Parent from './Parent'
+
+import { uid, TYPE, Trans } from '../../utils'
+
+const CommentsToContent = ({ data, thread, curView }) => {
+  const { entries } = data
+
+  switch (curView) {
+    case TYPE.RESULT: {
+      return (
+        <Wrapper>
+          {entries.map(comment => (
+            <div key={uid.gen()}>
+              <CommentBlock>
+                <Parent data={comment} thread={thread} />
+                <CommentBox>
+                  <CommentHeader>
+                    <Avatar src={comment.author.avatar} />
+                    <AvatarInfo>
+                      <Nickname>{comment.author.nickname}</Nickname>
+                      <When>
+                        评论于:
+                        <TimeAgo datetime={comment.updatedAt} locale="zh_CN" />
+                      </When>
+                    </AvatarInfo>
+                  </CommentHeader>
+                  <CommentBody>
+                    <MarkDownRender body={comment.body} />
+                  </CommentBody>
+                </CommentBox>
+              </CommentBlock>
+              <CommentDivider />
+            </div>
+          ))}
+        </Wrapper>
+      )
+    }
+    case TYPE.RESULT_EMPTY: {
+      return (
+        <React.Fragment>
+          <EmptyLabel text={`未找到评论的${Trans(thread)}信息`} size="large" />
+        </React.Fragment>
+      )
+    }
+    default: {
+      return <CommentLoading />
+    }
+  }
+}
+
+export default CommentsToContent

containers/UserPublishedComments/CommunityList.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { Popover } from '../../components'
+
+import { Wrapper, Logo, PopoverInfo } from './styles/community_list'
+import { uid } from '../../utils'
+
+const CommunityList = ({ items }) => (
+  <Wrapper>
+    {items.map(community => (
+      <Popover
+        key={uid.gen()}
+        placement="bottom"
+        trigger="hover"
+        content={<PopoverInfo>{community.title}</PopoverInfo>}
+      >
+        <div>
+          <Logo src={community.logo} />
+        </div>
+      </Popover>
+    ))}
+  </Wrapper>
+)
+
+export default CommunityList

containers/UserPublishedComments/Parent.js

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import { Wrapper, Title } from './styles/parent'
+import CommunityList from './CommunityList'
+
+import { THREAD } from '../../utils'
+
+const Parent = ({ thread, data }) => {
+  switch (thread) {
+    case THREAD.JOB: {
+      return (
+        <Wrapper>
+          <Title>{data.job.title}</Title>
+          <CommunityList items={data.job.communities} />
+        </Wrapper>
+      )
+    }
+    case THREAD.REPO: {
+      return (
+        <Wrapper>
+          <Title>{data.repo.title}</Title>
+          <CommunityList items={data.repo.communities} />
+        </Wrapper>
+      )
+    }
+    case THREAD.VIDEO: {
+      return (
+        <Wrapper>
+          <Title>{data.video.title}</Title>
+          <CommunityList items={data.video.communities} />
+        </Wrapper>
+      )
+    }
+    default: {
+      return (
+        <Wrapper>
+          <Title>{data.post.title}</Title>
+          <CommunityList items={data.post.communities} />
+        </Wrapper>
+      )
+    }
+  }
+}
+
+export default Parent

containers/UserPublishedComments/index.js

@@ -0,0 +1,57 @@
+/*
+ *
+ * UserPublishedComments
+ *
+ */
+
+import React from 'react'
+import { inject, observer } from 'mobx-react'
+
+import { ThreadSelector } from '../../components'
+import { ThreadWrapper } from './styles'
+
+import CommentsToContent from './CommentsToContent'
+
+import { makeDebugger, storePlug } from '../../utils'
+
+import * as logic from './logic'
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('C:UserPublishedComments')
+/* eslint-enable no-unused-vars */
+
+class UserPublishedCommentsContainer extends React.Component {
+  componentWillMount() {
+    const { userPublishedComments } = this.props
+    logic.init(userPublishedComments)
+  }
+
+  render() {
+    const { userPublishedComments } = this.props
+    const { curThread, curView, pagedCommentsData } = userPublishedComments
+
+    const { totalCount } = pagedCommentsData
+    // debug('pagedCommentsData-->: ', pagedCommentsData)
+
+    return (
+      <div>
+        <ThreadWrapper>
+          <ThreadSelector
+            active={curThread}
+            onSelect={logic.onThreadChange}
+            totalCount={totalCount}
+            lookLike="box"
+          />
+        </ThreadWrapper>
+        <CommentsToContent
+          thread={curThread}
+          curView={curView}
+          data={pagedCommentsData}
+        />
+      </div>
+    )
+  }
+}
+
+export default inject(storePlug('userPublishedComments'))(
+  observer(UserPublishedCommentsContainer)
+)

containers/UserPublishedComments/logic.js

@@ -0,0 +1,136 @@
+// import R from 'ramda'
+
+import {
+  makeDebugger,
+  $solver,
+  asyncRes,
+  asyncErr,
+  TYPE,
+  THREAD,
+  ERR,
+  pagedFilter,
+} from '../../utils'
+
+import SR71 from '../../utils/network/sr71'
+import S from './schema'
+
+const sr71$ = new SR71()
+let sub$ = null
+
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('L:UserPublishedComments')
+/* eslint-enable no-unused-vars */
+
+let store = null
+
+const beforeQuery = page => {
+  store.markState({ curView: TYPE.LOADING })
+  // args
+  return {
+    userId: store.viewingUser.id,
+    filter: pagedFilter(page),
+  }
+}
+
+export function loadPostComments(page = 1) {
+  const args = beforeQuery(page)
+  sr71$.query(S.publishedPostComments, args)
+}
+
+export function loadJobComments(page = 1) {
+  const args = beforeQuery(page)
+  sr71$.query(S.publishedJobComments, args)
+}
+
+export function loadVideoComments(page = 1) {
+  const args = beforeQuery(page)
+  sr71$.query(S.publishedVideoComments, args)
+}
+
+export function loadRepoComments(page = 1) {
+  const args = beforeQuery(page)
+  sr71$.query(S.publishedRepoComments, args)
+}
+
+export function onThreadChange(curThread) {
+  // TODO: markRoute
+  store.markState({ curThread })
+  // reload()
+  switch (store.curThread) {
+    case THREAD.JOB: {
+      return loadJobComments()
+    }
+    case THREAD.VIDEO: {
+      return loadVideoComments()
+    }
+    case THREAD.REPO: {
+      return loadRepoComments()
+    }
+    default: {
+      return loadPostComments()
+    }
+  }
+}
+
+// ###############################
+// Data & Error handlers
+// ###############################
+
+const DataSolver = [
+  {
+    match: asyncRes('publishedPostComments'),
+    action: ({ publishedPostComments }) =>
+      store.markPagedData(publishedPostComments),
+  },
+  {
+    match: asyncRes('publishedJobComments'),
+    action: ({ publishedJobComments }) =>
+      store.markPagedData(publishedJobComments),
+  },
+  {
+    match: asyncRes('publishedVideoComments'),
+    action: ({ publishedVideoComments }) =>
+      store.markPagedData(publishedVideoComments),
+  },
+  {
+    match: asyncRes('publishedRepoComments'),
+    action: ({ publishedRepoComments }) => {
+      debug('get publishedRepoComments: ', publishedRepoComments)
+      store.markPagedData(publishedRepoComments)
+    },
+  },
+]
+
+const ErrSolver = [
+  {
+    match: asyncErr(ERR.CRAPHQL),
+    action: ({ details }) => {
+      debug('ERR.CRAPHQL -->', details)
+    },
+  },
+  {
+    match: asyncErr(ERR.TIMEOUT),
+    action: ({ details }) => {
+      debug('ERR.TIMEOUT -->', details)
+    },
+  },
+  {
+    match: asyncErr(ERR.NETWORK),
+    action: ({ details }) => {
+      debug('ERR.NETWORK -->', details)
+    },
+  },
+]
+
+export function init(_store) {
+  if (store) {
+    return loadPostComments()
+  }
+  store = _store
+
+  debug(store)
+  if (sub$) sub$.unsubscribe()
+  sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
+
+  loadPostComments()
+}