set / unset categories && refactor

Author: mydearxym

components/CategoriesCell/index.js

@@ -19,41 +19,40 @@ import {
   AddIcon,
   AddText,
 } from './styles'
+
 import { ICON_ASSETS } from '../../config'
 
 // import { inject, observer } from 'mobx-react'
 // import Link from 'next/link'
 
-const CategoriesList = ({ categories, communityId, onDelete }) => {
-  return (
-    <CategoryWrapper>
-      {categories.map(c => (
-        <CategoryTag
-          key={shortid.generate()}
-          onClick={onDelete.bind(this, communityId, c)}
-        >
-          {c.title}
-          <DeleteCross>x</DeleteCross>
-        </CategoryTag>
-      ))}
-    </CategoryWrapper>
-  )
-}
+const CategoriesList = ({ categories, communityId, onDelete }) => (
+  <CategoryWrapper>
+    {categories.map(c => (
+      <CategoryTag
+        key={shortid.generate()}
+        onClick={onDelete.bind(this, communityId, c)}
+      >
+        {c.title}
+        <DeleteCross>x</DeleteCross>
+      </CategoryTag>
+    ))}
+  </CategoryWrapper>
+)
 
 class CategoriesCell extends React.Component {
   componentDidMount() {}
 
   componentWillUnmount() {}
 
   render() {
-    const { communityId, categories, onDelete } = this.props
+    const { communityId, categories, onDelete, onAdd } = this.props
 
     return (
       <div>
         {R.isEmpty(categories) ? (
           <AddWrapper>
             <AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
-            <AddText>添加</AddText>
+            <AddText onClick={onAdd.bind(this, communityId, [])}>添加</AddText>
           </AddWrapper>
         ) : (
           <Wrapper>
@@ -62,7 +61,9 @@ class CategoriesCell extends React.Component {
               onDelete={onDelete}
               communityId={communityId}
             />
-            <AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
+            <div onClick={onAdd.bind(this, communityId, categories)}>
+              <AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
+            </div>
           </Wrapper>
         )}
       </div>
@@ -82,6 +83,7 @@ CategoriesCell.propTypes = {
   ),
   communityId: PropTypes.number.isRequired,
   onDelete: PropTypes.func.isRequired,
+  onAdd: PropTypes.func.isRequired,
 }
 
 CategoriesCell.defaultProps = {

components/CommunityCell/index.js

@@ -5,32 +5,76 @@
  */
 
 import React from 'react'
+import R from 'ramda'
 import PropTypes from 'prop-types'
 
+import shortid from 'shortid'
+
+import ReactTooltip from 'react-tooltip'
 import { makeDebugger } from '../../utils'
 import { Wrapper, Logo, Title } from './styles'
 
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('c:CommunityCell:index')
 /* eslint-enable no-unused-vars */
 
-// TODO: array version
-const CommunityCell = ({ data }) => (
-  <Wrapper>
-    <Logo src={data.logo} />
-    <Title>{data.title}</Title>
-  </Wrapper>
+const tooltipOffset = JSON.stringify({ top: 1 })
+
+const renderContent = (data, array) => {
+  if (!R.isEmpty(data)) {
+    return (
+      <Wrapper>
+        <Logo src={data.logo} />
+        <Title>{data.title}</Title>
+      </Wrapper>
+    )
+  } else if (!R.isEmpty(array)) {
+    return (
+      <Wrapper>
+        {array.map(c => (
+          <Wrapper key={shortid.generate()}>
+            <div
+              data-tip={c.title}
+              data-for="community_cell"
+              data-offset={tooltipOffset}
+            >
+              <Logo src={c.logo} />
+            </div>
+          </Wrapper>
+        ))}
+      </Wrapper>
+    )
+  }
+  return <div />
+}
+
+// TODO: array version && tooltip
+const CommunityCell = ({ data, array }) => (
+  <div>
+    {renderContent(data, array)}
+    <ReactTooltip effect="solid" place="bottom" id="community_cell" />
+  </div>
 )
 
 CommunityCell.propTypes = {
   // https://www.npmjs.com/package/prop-types
   data: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    logo: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-  }).isRequired,
+    id: PropTypes.string,
+    logo: PropTypes.string,
+    title: PropTypes.string,
+  }),
+
+  array: PropTypes.arrayOf(
+    PropTypes.shape({
+      logo: PropTypes.string,
+      title: PropTypes.string,
+    })
+  ),
 }
 
-CommunityCell.defaultProps = {}
+CommunityCell.defaultProps = {
+  array: [],
+  data: {},
+}
 
 export default CommunityCell

containers/CategoryEditor/index.js

@@ -29,17 +29,26 @@ const debug = makeDebugger('C:CategoryEditor')
 
 class CategoryEditorContainer extends React.Component {
   componentWillMount() {
-    logic.init(this.props.categoryEditor)
+    const { categoryEditor, editData } = this.props
+
+    logic.init(categoryEditor, editData)
+  }
+
+  componentWillUnmount() {
+    logic.uninit()
   }
 
   render() {
     const { categoryEditor } = this.props
-    const { mutating, categoryData } = categoryEditor
+    const { mutating, categoryData, isEdit } = categoryEditor
 
     return (
       <Wrapper>
         coderplanets
-        <h2>创建社区分类</h2>
+        <h2>
+          {isEdit ? '编辑' : '创建'}
+          社区分类
+        </h2>
         <Divider />
         <FormInputer
           label="名称:"

containers/CategoryEditor/logic.js

@@ -36,7 +36,13 @@ export const mutateConfirm = () => {
   const fargs = castArgs(args, requiredArgs)
 
   debug('fargs --> ', fargs)
-  sr71$.mutate(S.createCategory, fargs)
+  if (categoryEditor.isEdit) {
+    return sr71$.mutate(
+      S.updateCategory,
+      castArgs(args, ['id', ...requiredArgs])
+    )
+  }
+  return sr71$.mutate(S.createCategory, fargs)
 }
 
 export function cancleMutate() {
@@ -47,24 +53,52 @@ export function cancleMutate() {
   closePreviewer()
 }
 
+const initEditData = editData => {
+  categoryEditor.markState({
+    category: editData,
+    isEdit: true,
+  })
+}
+
+export function cancleEdit() {
+  categoryEditor.markState({
+    category: {},
+    isEdit: false,
+  })
+  /* closePreviewer() */
+}
 // ###############################
 // Data & Error handlers
 // ###############################
 const DataSolver = [
   {
     match: asyncRes('createCategory'),
     action: () => {
-      debug('createCategory done!')
+      closePreviewer(TYPE.GATEGORIES_REFRESH)
+    },
+  },
+  {
+    match: asyncRes('updateCategory'),
+    action: () => {
       closePreviewer(TYPE.GATEGORIES_REFRESH)
     },
   },
 ]
 
 const ErrSolver = []
 
-export function init(selectedStore) {
+export function init(selectedStore, editData) {
   categoryEditor = selectedStore
   debug(categoryEditor)
   if (sub$) sub$.unsubscribe()
   sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
+
+  if (editData) {
+    initEditData(editData)
+  }
+}
+
+export function uninit() {
+  cancleEdit()
+  /* cancleLoading() */
 }

containers/CategoryEditor/schema.js

@@ -7,9 +7,17 @@ const createCategory = gql`
     }
   }
 `
+const updateCategory = gql`
+  mutation($id: ID!, $title: String!) {
+    updateCategory(id: $id, title: $title) {
+      id
+    }
+  }
+`
 
 const schema = {
   createCategory,
+  updateCategory,
 }
 
 export default schema

containers/CategorySetter/index.js

@@ -0,0 +1,71 @@
+/*
+ *
+ * CategorySetter
+ *
+ */
+
+import React from 'react'
+import { inject, observer } from 'mobx-react'
+import R from 'ramda'
+
+import shortid from 'shortid'
+
+// import Link from 'next/link'
+import { makeDebugger, storePlug } from '../../utils'
+
+import { Wrapper, Divider, CategoryWrapper, CategoryTag } from './styles'
+
+import * as logic from './logic'
+
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('C:CategorySetter')
+/* eslint-enable no-unused-vars */
+
+const CategoriesList = ({ communityId, categories, selectedCids }) => (
+  <CategoryWrapper>
+    {categories.map(c => (
+      <CategoryTag
+        key={shortid.generate()}
+        active={R.contains(c.id, selectedCids)}
+        onClick={logic.onAdd.bind(this, communityId, c.id, selectedCids)}
+      >
+        {c.title}
+      </CategoryTag>
+    ))}
+  </CategoryWrapper>
+)
+
+class CategorySetterContainer extends React.Component {
+  componentWillMount() {
+    logic.init(this.props.categorySetter)
+  }
+
+  render() {
+    /* const mutating = false */
+    const { categorySetter, editData } = this.props
+    const { pagedCategories } = categorySetter
+
+    const selectedCids = R.pluck('id', editData.categories)
+
+    return (
+      <Wrapper>
+        coderplanets
+        <h2>设置社区分类</h2>
+        <Divider />
+        {pagedCategories ? (
+          <CategoriesList
+            communityId={editData.id}
+            categories={pagedCategories.entries}
+            selectedCids={selectedCids}
+          />
+        ) : (
+          <div />
+        )}
+      </Wrapper>
+    )
+  }
+}
+
+export default inject(storePlug('categorySetter'))(
+  observer(CategorySetterContainer)
+)