unset category

Author: mydearxym

components/CategoriesCell/index.js

@@ -0,0 +1,89 @@
+/*
+ *
+ * CategoriesCell
+ *
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import R from 'ramda'
+
+import shortid from 'shortid'
+
+import {
+  Wrapper,
+  CategoryWrapper,
+  CategoryTag,
+  AddWrapper,
+  DeleteCross,
+  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>
+  )
+}
+
+class CategoriesCell extends React.Component {
+  componentDidMount() {}
+
+  componentWillUnmount() {}
+
+  render() {
+    const { communityId, categories, onDelete } = this.props
+
+    return (
+      <div>
+        {R.isEmpty(categories) ? (
+          <AddWrapper>
+            <AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
+            <AddText>添加</AddText>
+          </AddWrapper>
+        ) : (
+          <Wrapper>
+            <CategoriesList
+              categories={categories}
+              onDelete={onDelete}
+              communityId={communityId}
+            />
+            <AddIcon src={`${ICON_ASSETS}/cmd/plus.svg`} />
+          </Wrapper>
+        )}
+      </div>
+    )
+  }
+}
+
+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,
+  onDelete: PropTypes.func.isRequired,
+}
+
+CategoriesCell.defaultProps = {
+  categories: [],
+}

components/CategoriesCell/styles/index.js

@@ -0,0 +1,70 @@
+import styled from 'styled-components'
+
+import { Animate } from '../../../utils'
+
+import { Img } from '../../../components'
+
+export const UnsetText = styled.div`
+  color: tomato;
+`
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+export const CategoryWrapper = styled.div`
+  display: flex;
+`
+
+export const CategoryTag = styled.div`
+  display: flex;
+  align-items: center;
+  background: #e4f7fe;
+  border: 1px dashed #97dbfc;
+  color: #0692fa;
+  padding: 0 10px;
+  padding-right: 6px;
+  border-radius: 3px;
+  margin-right: 7px;
+  &:hover {
+    border: 1px solid #97dbfc;
+  }
+`
+
+export const DeleteCross = styled.div`
+  margin-left: 8px;
+  &:hover {
+    cursor: pointer;
+    animation: ${Animate.pulse} 0.3s linear;
+  }
+`
+
+export const AddWrapper = Wrapper.extend``
+
+export const AddIcon = styled(Img)`
+  width: 15px;
+  height: 15px;
+  display: block;
+  fill: lightgrey;
+  &:hover {
+    cursor: pointer;
+    fill: #646479;
+  }
+  ${AddWrapper}:hover & {
+    cursor: pointer;
+    fill: #646479;
+    animation: ${Animate.pulse} 0.3s linear;
+  }
+`
+
+export const AddText = styled.div`
+  margin-left: 5px;
+  color: lightgrey;
+  ${AddWrapper}:hover & {
+    cursor: pointer;
+    color: #646479;
+  }
+  transition: color 0.2s linear;
+`
+
+export const Holder = styled.div``

components/CategoriesCell/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import CategoriesCell from '../index'
+
+describe('TODO <CategoriesCell />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})

components/index.js

@@ -28,6 +28,7 @@ export { default as SexCell } from './SexCell'
 export { default as FormInputer } from './FormInputer'
 export { default as FormSelector } from './FormSelector'
 export { default as TagColorSelector } from './TagColorSelector'
+export { default as CategoriesCell } from './CategoriesCell'
 
 // loading component
 export {

containers/CommunitiesContent/IndexContent.js

@@ -9,6 +9,7 @@ import {
   Button,
   Space,
   Popconfirm,
+  CategoriesCell,
 } from '../../components'
 
 import { CommunityIcon, OperationWrapper } from './styles'
@@ -61,14 +62,21 @@ const columns = [
       return <div>{cutFrom(text, 10)}</div>
     },
   },
-  /*
-     {
-     title: '类别',
-     width: 150,
-     align: 'center',
-     dataIndex: 'category',
-     },
-   */
+  {
+    title: '类别',
+    width: 350,
+    align: 'center',
+    dataIndex: 'categories',
+    render: (categoriesArray, record) => {
+      return (
+        <CategoriesCell
+          categories={categoriesArray}
+          communityId={record.id}
+          onDelete={logic.unsetCategory}
+        />
+      )
+    },
+  },
   {
     title: '订阅人数',
     width: 150,

containers/CommunitiesContent/logic.js

@@ -88,6 +88,13 @@ export function onDelete(record) {
   sr71$.mutate(S.deleteCommunity, { id: record.id })
 }
 
+export function unsetCategory(communityId, category) {
+  sr71$.mutate(S.unsetCategory, {
+    communityId,
+    categoryId: category.id,
+  })
+}
+
 /* when error occured cancle all the loading state */
 const cancleLoading = () => {
   communitiesContent.markState({
@@ -141,7 +148,12 @@ const DataSolver = [
       closePreviewer(TYPE.COMMUNITIES_REFRESH)
     },
   },
-
+  {
+    match: asyncRes('unsetCategory'),
+    action: () => {
+      loadCommunities()
+    },
+  },
   {
     match: asyncRes(EVENT.LOGOUT),
     action: () => loadCommunities(),

containers/CommunitiesContent/schema.js

@@ -111,13 +111,21 @@ const deleteCommunity = gql`
     }
   }
 `
+const unsetCategory = gql`
+  mutation($categoryId: ID!, $communityId: ID!) {
+    unsetCategory(categoryId: $categoryId, communityId: $communityId) {
+      id
+    }
+  }
+`
 
 const schema = {
   pagedCommunities,
   pagedTags,
   pagedCategories,
   pagedPosts,
   deleteCommunity,
+  unsetCategory,
 }
 
 export default schema

containers/CommunityEditor/index.js

@@ -46,12 +46,16 @@ class CommunityEditorContainer extends React.Component {
       error,
       warn,
       statusMsg,
+      isEdit,
     } = communityEditor
 
     return (
       <Wrapper>
         coderplanets
-        <h2>创建社区</h2>
+        <h2>
+          {isEdit ? '编辑' : '创建'}
+          社区
+        </h2>
         <Divider />
         <div>
           {communityData.logo ? (

containers/ThemeWrapper/AntOverWrite.js

@@ -363,6 +363,9 @@ const AntOverWrite = styled.div`
     border: 1px solid #707084;
     background: #707084;
   }
+  .ant-tag .anticon-cross {
+    color: gold;
+  }
 `
 
 export default AntOverWrite

utils/scripts/generators/component/class.js.hbs

@@ -9,15 +9,12 @@ import PropTypes from 'prop-types'
 
 // import { inject, observer } from 'mobx-react'
 // import Link from 'next/link'
-// import styled from 'styled-components'
 
 {{#if wantMessages}}
 import { FormattedMessage } from 'react-intl'
 import messages from './messages'
 {{/if}}
 
-// @inject('')
-// @observer
 class {{ properCase name }} extends React.Component {
   componentDidMount() {}
 
@@ -26,17 +23,18 @@ class {{ properCase name }} extends React.Component {
   render() {
     return (
       <div>
-      {{#if wantMessages}}
-        <FormattedMessage {...messages.header} />
-      {{/if}}
+        <h3>{{ properCase name }} class component!</h3>
+        {{#if wantMessages}}
+          <FormattedMessage {...messages.header} />
+        {{/if}}
       </div>
     )
   }
 }
 
 export default {{ properCase name }}
 
-Index.propTypes = {
+{{ properCase name }}.propTypes = {
   // https://www.npmjs.com/package/prop-types
 }