use table record as source to simplfy set/unset categories

Author: mydearxym

components/CategoriesCell/index.js

@@ -24,12 +24,12 @@ import {
 // import { inject, observer } from 'mobx-react'
 // import Link from 'next/link'
 
-const CategoriesList = ({ categories, communityId, onDelete }) => (
+const CategoriesList = ({ source, onDelete }) => (
   <CategoryWrapper>
-    {categories.map(c => (
+    {source.categories.map(c => (
       <CategoryTag
         key={shortid.generate()}
-        onClick={onDelete.bind(this, communityId, c)}
+        onClick={onDelete.bind(this, source.id, c)}
       >
         {c.title}
         <DeleteCross>x</DeleteCross>
@@ -44,23 +44,19 @@ class CategoriesCell extends React.Component {
   componentWillUnmount() {}
 
   render() {
-    const { communityId, categories, onDelete, onAdd } = this.props
+    const { source, onDelete, onAdd } = this.props
 
     return (
       <div>
-        {R.isEmpty(categories) ? (
+        {R.isEmpty(source.categories) ? (
           <AddWrapper>
             <AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
-            <AddText onClick={onAdd.bind(this, communityId, [])}>添加</AddText>
+            <AddText onClick={onAdd.bind(this, source)}>添加</AddText>
           </AddWrapper>
         ) : (
           <Wrapper>
-            <CategoriesList
-              categories={categories}
-              onDelete={onDelete}
-              communityId={communityId}
-            />
-            <div onClick={onAdd.bind(this, communityId, categories)}>
+            <CategoriesList source={source} onDelete={onDelete} />
+            <div onClick={onAdd.bind(this, source)}>
               <AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
             </div>
           </Wrapper>
@@ -74,13 +70,7 @@ export default CategoriesCell
 
 CategoriesCell.propTypes = {
   // https://www.npmjs.com/package/prop-types
-  categories: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      title: PropTypes.string,
-    })
-  ),
-  communityId: PropTypes.number.isRequired,
+  source: PropTypes.object.isRequired,
   onDelete: PropTypes.func.isRequired,
   onAdd: PropTypes.func.isRequired,
 }

containers/CommunitiesContent/IndexContent.js

@@ -70,6 +70,7 @@ const columns = [
     render: (categoriesArray, record) => {
       return (
         <CategoriesCell
+          source={record}
           categories={categoriesArray}
           communityId={record.id}
           onDelete={logic.unsetCategory}
@@ -154,10 +155,7 @@ class IndexContent extends React.Component {
   }
 
   render() {
-    const {
-      data,
-      restProps: { communitiesLoading },
-    } = this.props
+    const { data, restProps: { communitiesLoading } } = this.props
 
     return (
       <div>

containers/CommunitiesContent/logic.js

@@ -95,13 +95,10 @@ export function unsetCategory(communityId, category) {
   })
 }
 
-export function setCategory(communityId, categories) {
+export function setCategory(source) {
   dispatchEvent(EVENT.NAV_SET_CATEGORY, {
     type: TYPE.PREVIEW_SET_CATEGORY,
-    data: {
-      communityId,
-      categories,
-    },
+    data: source,
   })
 }
 

containers/Preview/logic.js

@@ -59,8 +59,9 @@ const DataResolver = [
     match: asyncRes(EVENT.PREVIEW),
     action: res => {
       const event = res[EVENT.PREVIEW]
-      holdPage()
+
       preview.open(event.type)
+      holdPage()
     },
   },
   {
@@ -71,99 +72,86 @@ const DataResolver = [
     match: asyncRes(EVENT.NAV_EDIT),
     action: res => {
       const event = res[EVENT.NAV_EDIT]
-      holdPage()
 
-      debug('EVENT.NAV_EDIT: ', res)
       preview.open(event.type)
       loadDataForPreview(res[EVENT.NAV_EDIT])
+      holdPage()
     },
   },
   {
     match: asyncRes(EVENT.NAV_CREATE_POST),
     action: res => {
       const event = res[EVENT.NAV_CREATE_POST]
-      holdPage()
+
       preview.open(event.type)
+      holdPage()
     },
   },
   {
     match: asyncRes(EVENT.NAV_CREATE_COMMUNITY),
     action: res => {
       const event = res[EVENT.NAV_CREATE_COMMUNITY]
-      holdPage()
+
       preview.open(event.type)
+      holdPage()
     },
   },
   {
     match: asyncRes(EVENT.NAV_UPDATE_COMMUNITY),
     action: res => {
       const event = res[EVENT.NAV_UPDATE_COMMUNITY]
-      debug('get ', EVENT.NAV_UPDATE_COMMUNITY)
 
-      preview.markState({
-        editCommunity: event.data,
-      })
-      holdPage()
+      preview.markState({ editCommunity: event.data })
       preview.open(event.type)
+      holdPage()
     },
   },
   {
     match: asyncRes(EVENT.NAV_CREATE_TAG),
     action: res => {
-      debug('get ', EVENT.NAV_CREATE_TAG)
       const event = res[EVENT.NAV_CREATE_TAG]
-      holdPage()
+
       preview.open(event.type)
+      holdPage()
     },
   },
   {
     match: asyncRes(EVENT.NAV_CREATE_CATEGORY),
     action: res => {
-      debug('get ', EVENT.NAV_CREATE_CATEGORY)
       const event = res[EVENT.NAV_CREATE_CATEGORY]
-      holdPage()
+
       preview.open(event.type)
+      holdPage()
     },
   },
   {
     match: asyncRes(EVENT.NAV_UPDATE_CATEGORY),
     action: res => {
       const event = res[EVENT.NAV_UPDATE_CATEGORY]
-      holdPage()
-      preview.markState({
-        editCategory: event.data,
-      })
+
+      preview.markState({ editCategory: event.data })
       preview.open(event.type)
+      holdPage()
     },
   },
   {
     match: asyncRes(EVENT.NAV_SET_CATEGORY),
     action: res => {
       const event = res[EVENT.NAV_SET_CATEGORY]
-      preview.markState({
-        editCommunity: {
-          id: event.data.communityId,
-          categories: event.data.categories,
-        },
-      })
-      holdPage()
+
+      preview.markState({ editCommunity: event.data })
       preview.open(event.type)
+      holdPage()
     },
   },
   {
     match: asyncRes(EVENT.NAV_SET_TAG),
     action: res => {
       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: event.data,
-      })
-      holdPage()
+
+      preview.markState({ editTag: event.data })
       preview.open(event.type)
+      holdPage()
     },
   },
 ]