use source to simply logic

Author: mydearxym

components/TagsCell/index.js

@@ -23,12 +23,12 @@ import {
   AddText,
 } from './styles'
 
-const TagsList = ({ tags, partId, onDelete }) => (
+const TagsList = ({ source, onDelete }) => (
   <CategoryWrapper>
-    {tags.map(c => (
+    {source.tags.map(c => (
       <CategoryTag
         key={shortid.generate()}
-        onClick={onDelete.bind(this, partId, c)}
+        onClick={onDelete.bind(this, source.id, c)}
       >
         {c.title}
         <DeleteCross>x</DeleteCross>
@@ -43,19 +43,19 @@ class TagsCell extends React.Component {
   componentWillUnmount() {}
 
   render() {
-    const { tags, partId, onDelete, onAdd } = this.props
+    const { source, onDelete, onAdd } = this.props
 
     return (
       <React.Fragment>
-        {R.isEmpty(tags) ? (
+        {R.isEmpty(source.tags) ? (
           <AddWrapper>
             <AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
-            <AddText onClick={onAdd.bind(this, partId, [])}>添加</AddText>
+            <AddText onClick={onAdd.bind(this, source)}>添加</AddText>
           </AddWrapper>
         ) : (
           <Wrapper>
-            <TagsList tags={tags} partId={partId} onDelete={onDelete} />
-            <div onClick={onAdd.bind(this, partId, tags)}>
+            <TagsList source={source} onDelete={onDelete} />
+            <div onClick={onAdd.bind(this, source)}>
               <AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
             </div>
           </Wrapper>
@@ -70,18 +70,9 @@ export default TagsCell
 TagsCell.propTypes = {
   // https://www.npmjs.com/package/prop-types
   /* communityId: PropTypes.number.isRequired, */
-  tags: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      title: PropTypes.string,
-      color: PropTypes.string,
-    })
-  ),
-  partId: PropTypes.string.isRequired,
+  source: PropTypes.object.isRequired,
   onDelete: PropTypes.func.isRequired,
   onAdd: PropTypes.func.isRequired,
 }
 
-TagsCell.defaultProps = {
-  tags: [],
-}
+TagsCell.defaultProps = {}

components/TagsCell/styles/index.js

@@ -9,7 +9,7 @@ export const UnsetText = styled.div`
 `
 export const Wrapper = styled.div`
   display: flex;
-  justify-content: center;
+  justify-content: left;
   align-items: center;
 `
 export const CategoryWrapper = styled.div`

containers/CommunitiesBanner/logic.js

@@ -106,8 +106,8 @@ const DataSolver = [
           return loadCategories()
         }
         default: {
-          debug('unknow event')
-          return loadPosts()
+          debug('unknow event: ', closeType)
+          /* return loadPosts() */
         }
       }
     },

containers/CommunitiesContent/PostsContent.js

@@ -67,16 +67,13 @@ const columns = [
     width: 200,
     dataIndex: 'tags',
     align: 'center',
-    render: (tags, record) => {
-      return (
-        <TagsCell
-          tags={tags}
-          partId={record.id}
-          onDelete={logic.unsetTag}
-          onAdd={logic.setTag}
-        />
-      )
-    },
+    render: (tags, record) => (
+      <TagsCell
+        source={record}
+        onDelete={logic.unsetTag}
+        onAdd={logic.setTag}
+      />
+    ),
   },
   {
     title: '浏览',

containers/CommunitiesContent/logic.js

@@ -105,13 +105,10 @@ export function setCategory(communityId, categories) {
   })
 }
 
-export function setTag(partId, tags) {
+export function setTag(source) {
   dispatchEvent(EVENT.NAV_SET_TAG, {
     type: TYPE.PREVIEW_SET_TAG,
-    data: {
-      partId,
-      tags,
-    },
+    data: source,
   })
 }
 
@@ -210,8 +207,8 @@ const DataSolver = [
           return loadPosts()
         }
         default: {
-          debug('unknow event')
-          return loadPosts()
+          debug('unknow event: ', closeType)
+          /* return loadPosts() */
         }
       }
     },

containers/Preview/logic.js

@@ -156,13 +156,11 @@ const DataResolver = [
       const event = res[EVENT.NAV_SET_TAG]
       console.log('res -> ', {
         partId: event.data.partId,
+        /* source: event.data.source, */
         tags: event.data.tags,
       })
       preview.markState({
-        editTag: {
-          partId: event.data.partId,
-          tags: event.data.tags,
-        },
+        editTag: event.data,
       })
       holdPage()
       preview.open(event.type)

containers/TagSetter/index.js

@@ -20,6 +20,7 @@ import {
   CategoryWrapper,
   CategoryTag,
   CommunityLogo,
+  SetterTitle,
   PartText,
 } from './styles'
 
@@ -62,17 +63,17 @@ class TagSetterContainer extends React.Component {
     const { pagedTagsData } = tagSetter
 
     const selectedTids = R.pluck('id', editData.tags)
-    const { partId } = editData
+    const { id, title } = editData
 
     return (
       <Wrapper>
-        coderplanets
+        <SetterTitle>{title}</SetterTitle>
         <h2>设置标签</h2>
         <Divider />
         {pagedTagsData ? (
           <TagsList
             tags={pagedTagsData.entries}
-            partId={partId}
+            partId={id}
             selectedTids={selectedTids}
           />
         ) : (

containers/TagSetter/styles/index.js

@@ -21,6 +21,13 @@ export const Wrapper = styled.div`
   animation: ${Animate.fadeInRight} 0.2s linear;
 `
 
+export const SetterTitle = styled.div`
+  width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
 export const Divider = styled.div`
   border-top: 1px solid #e3eeed;
   margin-top: 15px;

stores/PreviewStore/index.js

@@ -5,14 +5,10 @@
 
 import { types as t, getParent } from 'mobx-state-tree'
 
-import { Community, Category, Tag } from '../SharedModel'
+import { Community, Category, Post } from '../SharedModel'
 import { markStates, TYPE, unholdPage, stripMobx } from '../../utils'
 
 // const debug = makeDebugger('S:PreviewStore')
-const EditTag = t.model('EditTag', {
-  partId: t.string,
-  tags: t.array(Tag),
-})
 
 const PreviewStore = t
   .model('PreviewStore', {
@@ -41,7 +37,7 @@ const PreviewStore = t
 
     editCommunity: t.maybe(Community),
     editCategory: t.maybe(Category),
-    editTag: t.maybe(EditTag),
+    editTag: t.maybe(Post),
     /* editCategory: t.maybe(SelectCommunity), */
   })
   .views(self => ({