refactor(tags): add color to tags cell

Author: mydearxym

components/TagsCell/TagsList.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+// import { ICON_CMD } from '../../config'
+// import { Wrapper } from './styles'
+import { Wrapper, TagWrapper, ColorDot, DeleteCross } from './styles/tags_list'
+import { uid } from '../../utils'
+
+const TagsList = ({ source, onDelete }) => (
+  <Wrapper>
+    {source.tags.map(c => (
+      <TagWrapper key={uid.gen()} onClick={onDelete.bind(this, source.id, c)}>
+        <ColorDot bg={c.color} />
+        <div>{c.title}</div>
+        <DeleteCross>x</DeleteCross>
+      </TagWrapper>
+    ))}
+  </Wrapper>
+)
+
+export default TagsList

components/TagsCell/index.js

@@ -12,54 +12,26 @@ import { ICON_CMD } from '../../config'
 
 // import { inject, observer } from 'mobx-react'
 // import Link from 'next/link'
+import TagsList from './TagsList'
 import AdderCell from '../AdderCell'
 
-import {
-  Wrapper,
-  ListWrapper,
-  TagWrapper,
-  DeleteCross,
-  AddIcon,
-} from './styles'
-
-import { uid } from '../../utils'
-
-const TagsList = ({ source, onDelete }) => (
-  <ListWrapper>
-    {source.tags.map(c => (
-      <TagWrapper key={uid.gen()} onClick={onDelete.bind(this, source.id, c)}>
-        {c.title}
-        <DeleteCross>x</DeleteCross>
-      </TagWrapper>
-    ))}
-  </ListWrapper>
+import { Wrapper, AddIcon } from './styles'
+
+const TagsCell = ({ thread, source, onDelete, onAdd }) => (
+  <React.Fragment>
+    {R.isEmpty(source.tags) ? (
+      <AdderCell onAdd={onAdd.bind(this, thread, source)} />
+    ) : (
+      <Wrapper>
+        <TagsList source={source} onDelete={onDelete} />
+        <div onClick={onAdd.bind(this, thread, source)}>
+          <AddIcon src={`${ICON_CMD}/plus.svg`} />
+        </div>
+      </Wrapper>
+    )}
+  </React.Fragment>
 )
 
-class TagsCell extends React.Component {
-  componentDidMount() {}
-
-  componentWillUnmount() {}
-
-  render() {
-    const { thread, source, onDelete, onAdd } = this.props
-
-    return (
-      <React.Fragment>
-        {R.isEmpty(source.tags) ? (
-          <AdderCell onAdd={onAdd.bind(this, thread, source)} />
-        ) : (
-          <Wrapper>
-            <TagsList source={source} onDelete={onDelete} />
-            <div onClick={onAdd.bind(this, thread, source)}>
-              <AddIcon src={`${ICON_CMD}/plus.svg`} />
-            </div>
-          </Wrapper>
-        )}
-      </React.Fragment>
-    )
-  }
-}
-
 export default TagsCell
 
 TagsCell.propTypes = {

components/TagsCell/styles/index.js

@@ -1,45 +1,12 @@
 import styled from 'styled-components'
 
 import Img from '../../Img'
-import { animate } from '../../../utils'
 
-export const UnsetText = styled.div`
-  color: tomato;
-`
 export const Wrapper = styled.div`
   display: flex;
   justify-content: left;
   align-items: center;
 `
-export const ListWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`
-
-export const TagWrapper = 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;
-  margin-bottom: 6px;
-  &:hover {
-    border: 1px solid #97dbfc;
-  }
-`
-
-export const DeleteCross = styled.div`
-  margin-left: 8px;
-  &:hover {
-    cursor: pointer;
-    animation: ${animate.pulseRule};
-  }
-`
-
 export const AddIcon = styled(Img)`
   width: 15px;
   height: 15px;

components/TagsCell/styles/tags_list.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components'
+
+// import Img from '../../Img'
+import { animate } from '../../../utils'
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`
+
+export const ColorDot = styled.div`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: red;
+  margin-right: 6px;
+  background: ${({ bg }) => bg || 'wheat'};
+`
+
+export const TagWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  background: #e4f7fe;
+  border: 1px dashed #97dbfc;
+  color: #0692fa;
+  padding-right: 10px;
+  padding-left: 4px;
+  padding-right: 6px;
+  border-radius: 3px;
+  margin-right: 7px;
+  margin-bottom: 6px;
+  &:hover {
+    border: 1px solid #97dbfc;
+  }
+`
+
+export const DeleteCross = styled.div`
+  margin-left: 8px;
+  &:hover {
+    cursor: pointer;
+    animation: ${animate.pulseRule};
+  }
+`