refactor(ReactionHeaders): set boundery for threads

Author: mydearxym

components/ArticleHeader/index.js

@@ -59,6 +59,7 @@ const ArticleHeader = ({
         <Maybe text={showFavorite}>
           <Reaction>
             <ReactionAction
+              active={data.viewerHasFavorited}
               onClick={onReaction.bind(
                 this,
                 thread,
@@ -84,6 +85,7 @@ const ArticleHeader = ({
         <Maybe test={showStar}>
           <Reaction>
             <ReactionAction
+              active={data.viewerHasStarred}
               onClick={onReaction.bind(
                 this,
                 thread,
@@ -93,7 +95,9 @@ const ArticleHeader = ({
               )}
             >
               <LikeIcon src={`${ICON_CMD}/like.svg`} />
-              <ReactionName>赞</ReactionName>
+              <ReactionName>
+                {data.viewerHasStarred ? <span>已赞</span> : <span>赞</span>}
+              </ReactionName>
             </ReactionAction>
             <ReactionUserNum>{data.starredCount}</ReactionUserNum>
             <Divider />

components/ArticleHeader/styles/index.js

@@ -31,14 +31,16 @@ export const Reaction = styled.div`
 export const PlainAction = styled.div`
   display: flex;
   align-items: center;
-  padding: 2px 3px;
+  border-radius: 5px;
 `
 export const ReactionAction = styled(PlainAction)`
+  background-color: ${({ active }) =>
+    active ? theme('article.reactionHoverBg') : ''};
+  padding: ${({ active }) => (active ? '2px 5px' : '2px 3px')};
   &:hover {
     cursor: pointer;
     font-weight: bold;
     background: ${theme('article.reactionHoverBg')};
-    border-radius: 6px;
   }
 `
 export const ReactionName = styled.div`

containers/ArticleViwer/logic.js

@@ -1,4 +1,5 @@
 import SR71 from '../../utils/network/sr71'
+import R from 'ramda'
 
 import {
   asyncRes,
@@ -28,13 +29,12 @@ let store = null
 let sub$ = null
 
 export function onReaction(thread, action, userDid, { id }) {
-  /*
-     debug('onReaction thread: ', thread)
-     debug('onReaction action: ', action)
-     debug('onReaction userDid: ', userDid)
-     debug('onReaction id: ', id)
-   */
-  const args = { id, thread, action }
+  /* debug('onReaction thread: ', thread) */
+  /* debug('onReaction action: ', action) */
+  // debug('onReaction userDid: ', store.isLogin)
+  /* debug('onReaction id: ', id) */
+
+  const args = { id, thread: R.toUpper(thread), action }
 
   return userDid
     ? sr71$.mutate(S.undoReaction, args)
@@ -62,21 +62,23 @@ function loadJob({ id }) {
   const userHasLogin = store.isLogin
   const variables = { id, userHasLogin }
   loading()
+  debug('loadJob variables: ', variables)
   sr71$.query(S.job, variables)
 }
 
-function reloadReactions(article) {
-  const variables = {
-    id: article.id,
+function reloadReactions({ id }) {
+  switch (store.activeThread) {
+    case THREAD.JOB: {
+      return sr71$.query(S.jobReactionRes, { id })
+    }
+    default: {
+      return sr71$.query(S.postReactionRes, { id })
+    }
   }
-  debug('reloadReactions: ', variables)
-
-  sr71$.query(S.reactionResult, variables)
 }
 
 export function onEdit(thread) {
   /* debug('onEdit', store.viewingPost) */
-  debug('onEdit viewingData: ', store.viewingData)
   switch (thread) {
     case THREAD.POST: {
       return dispatchEvent(EVENT.PREVIEW_OPEN, {
@@ -118,44 +120,38 @@ const openAttachment = att => {
 // ###############################
 // Data & Error handlers
 // ###############################
-
-function contentLoaded(content) {
-  store.setViewing(content)
-  loading(false)
-}
-
 const DataSolver = [
   {
     match: asyncRes('reaction'),
     action: ({ reaction }) => {
-      // TODO: should be trigger
       debug('get reaction: ', reaction)
-      reloadReactions(reaction)
+      return reloadReactions(reaction)
     },
   },
   {
     match: asyncRes('undoReaction'),
-    action: ({ undoReaction }) => {
-      debug('get undoReaction: ', undoReaction)
-      /* const info = res[TYPE.UNDO_REACTION] */
-      reloadReactions(undoReaction)
-    },
+    action: ({ undoReaction }) => reloadReactions(undoReaction),
   },
   {
     match: asyncRes(EVENT.PREVIEW_CLOSED),
     action: () => {
       sr71$.stop()
-      /* store.load(TYPE.POST, {}) */
       loading(false)
     },
   },
   {
     match: asyncRes('post'),
-    action: ({ post }) => contentLoaded({ post }),
+    action: ({ post }) => {
+      store.setViewing({ post: R.merge(store.viewingData, post) })
+      loading(false)
+    },
   },
   {
     match: asyncRes('job'),
-    action: ({ job }) => contentLoaded({ job }),
+    action: ({ job }) => {
+      store.setViewing({ job: R.merge(store.viewingData, job) })
+      loading(false)
+    },
   },
 ]
 

containers/ArticleViwer/schema.js

@@ -22,8 +22,19 @@ const post = gql`
     }
   }
 `
-const job = gql`
+const postReactionRes = gql`
   query($id: ID!) {
+    post(id: $id) {
+      id
+      favoritedCount
+      starredCount
+      viewerHasFavorited
+      viewerHasStarred
+    }
+  }
+`
+const job = gql`
+  query($id: ID!, $userHasLogin: Boolean!) {
     job(id: $id) {
       id
       title
@@ -40,22 +51,20 @@ const job = gql`
       linkAddr
       insertedAt
       updatedAt
+      favoritedCount
+      viewerHasFavorited @include(if: $userHasLogin)
     }
   }
 `
-const reactionResult = gql`
+const jobReactionRes = gql`
   query($id: ID!) {
-    post(id: $id) {
+    job(id: $id) {
       id
-      title
       favoritedCount
-      starredCount
       viewerHasFavorited
-      viewerHasStarred
     }
   }
 `
-
 const reaction = gql`
   mutation($id: ID!, $action: String!, $thread: CmsThread!) {
     reaction(id: $id, action: $action, thread: $thread) {
@@ -74,11 +83,12 @@ const undoReaction = gql`
 
 const schema = {
   post,
+  postReactionRes,
   job,
+  jobReactionRes,
   // viewerReactions,
   reaction,
   undoReaction,
-  reactionResult,
 }
 
 export default schema

containers/ArticleViwer/store.js

@@ -38,6 +38,10 @@ const ArticleViwerStore = t
     get viewingData() {
       return self.root.viewingData
     },
+    get activeThread() {
+      const { activeThread } = self.root.viewing
+      return activeThread
+    },
   }))
   .actions(self => ({
     setViewing(sobj) {

containers/PostsThread/logic.js

@@ -33,12 +33,7 @@ let store = null
 let sub$ = null
 
 // TODO: move to utils
-const validFilter = R.pickBy(
-  R.compose(
-    R.not,
-    R.isEmpty
-  )
-)
+const validFilter = R.pickBy(R.compose(R.not, R.isEmpty))
 
 export const inAnchor = () => store.setHeaderFix(false)
 export const outAnchor = () => store.setHeaderFix(true)
@@ -94,9 +89,8 @@ export function onTitleSelect(post) {
   })
 }
 
-export function createContent() {
+export const createContent = () =>
   dispatchEvent(EVENT.PREVIEW_OPEN, { type: TYPE.PREVIEW_POST_CREATE })
-}
 
 const DataSolver = [
   {

containers/VideosThread/logic.js

@@ -30,12 +30,7 @@ const debug = makeDebugger('L:VideosThread')
 
 let store = null
 
-const validFilter = R.pickBy(
-  R.compose(
-    R.not,
-    R.isEmpty
-  )
-)
+const validFilter = R.pickBy(R.compose(R.not, R.isEmpty))
 
 export function loadVideos(page = 1) {
   const { mainPath } = store.curRoute
@@ -62,14 +57,11 @@ export function loadVideos(page = 1) {
 
 export function onTitleSelect(video) {
   store.setViewing({ video })
-  debug('onTitleSelect: ', video)
 
-  /*
   dispatchEvent(EVENT.PREVIEW_OPEN, {
     type: TYPE.PREVIEW_VIDEO_VIEW,
     data: video,
   })
-  */
 }
 
 export function createContent() {

stores/SharedModel/Job.js

@@ -27,6 +27,8 @@ export const Job = t.model('Job', {
   views: t.optional(t.number, 0),
   favoritedCount: t.optional(t.number, 0),
   starredCount: t.optional(t.number, 0),
+  viewerHasFavorited: t.optional(t.boolean, false),
+  // viewerHasStarred: t.optional(t.boolean, false),
 
   insertedAt: t.optional(t.string, ''),
   updatedAt: t.optional(t.string, ''),