feat(BadContentReport): add report for bad content

Author: mydearxym

components/BadContentRepot/Content.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Button } from 'antd'
+
+import { ICON_CMD } from '../../config'
+
+import SectionLabel from '../SectionLabel'
+import { Wrapper, Divider } from './styles/content'
+
+const Content = () => (
+  <Wrapper>
+    <Divider />
+    <SectionLabel
+      title="侵权举报"
+      iconSrc={`${ICON_CMD}/police1.svg`}
+      desc="该内容侵犯了我的版权, 或包含盗版 / 违规转载等。"
+      addonNode={
+        <Button size="small" type="primary" ghost>
+          是的, 去举报
+        </Button>
+      }
+    />
+    <Divider />
+    <SectionLabel
+      title="违法信息举报"
+      iconSrc={`${ICON_CMD}/police2.svg`}
+      desc="该内容涉及政治，色情，暴力，民族宗教, 地域攻击等违法信息。"
+      addonNode={
+        <Button size="small" type="primary" ghost>
+          是的, 去举报
+        </Button>
+      }
+    />
+  </Wrapper>
+)
+
+export default Content

components/BadContentRepot/index.js

@@ -0,0 +1,68 @@
+/*
+ *
+ * BadContentRepot
+ *
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { ICON_CMD } from '../../config'
+
+import Modal from '../Modal'
+import { Wrapper, Title, Icon } from './styles'
+import Content from './Content'
+
+import { makeDebugger } from '../../utils'
+
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:BadContentRepot:index')
+/* eslint-enable no-unused-vars */
+
+class BadContentRepot extends React.Component {
+  state = {
+    show: false,
+  }
+
+  componentDidMount() {}
+
+  componentWillUnmount() {}
+
+  toggleModal() {
+    const { show } = this.state
+    this.setState({ show: !show })
+  }
+
+  render() {
+    const { title } = this.props
+    const { show } = this.state
+
+    return (
+      <React.Fragment>
+        <Modal
+          width="500px"
+          show={show}
+          showCloseBtn
+          onClose={this.toggleModal.bind(this)}
+        >
+          <Content />
+        </Modal>
+        <Wrapper onClick={this.toggleModal.bind(this)}>
+          <Icon src={`${ICON_CMD}/flag.svg`} />
+          <Title>{title}</Title>
+        </Wrapper>
+      </React.Fragment>
+    )
+  }
+}
+
+BadContentRepot.propTypes = {
+  // https://www.npmjs.com/package/prop-types
+  title: PropTypes.string,
+}
+
+BadContentRepot.defaultProps = {
+  title: '举报内容',
+}
+
+export default BadContentRepot

components/BadContentRepot/styles/content.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+// import { Img } from '../../../components'
+// import { theme } from '../../../utils'
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+`
+export const Divider = styled.div`
+  margin-top: 30px;
+`

components/BadContentRepot/styles/index.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+import Img from '../../Img'
+import { theme } from '../../../utils'
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+export const Title = styled.div`
+  color: ${theme('thread.articleDigest')};
+  ${Wrapper}:hover & {
+    color: ${theme('thread.articleTitle')};
+  }
+  &:hover {
+    cursor: pointer;
+  }
+`
+export const Icon = styled(Img)`
+  fill: ${theme('thread.articleDigest')};
+  width: 16px;
+  height: 16px;
+  display: block;
+  margin-right: 3px;
+  ${Wrapper}:hover & {
+    color: ${theme('thread.articleTitle')};
+  }
+  &:hover {
+    cursor: pointer;
+  }
+`

components/BadContentRepot/tests/index.test.js

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

components/index.js

@@ -56,6 +56,7 @@ export { default as ThreadSelector } from './ThreadSelector'
 export { default as CommunityList } from './CommunityList'
 export { default as AuthorCard } from './AuthorCard'
 export { default as ContentSourceCard } from './ContentSourceCard'
+export { default as BadContentRepot } from './BadContentRepot'
 
 // loading component
 export {

containers/JobContent/SideCards.js

@@ -1,12 +1,20 @@
 import React from 'react'
 
-import { AuthorCard, ContentSourceCard } from '../../components'
-import { Wrapper } from './styles/side_cards'
+import {
+  AuthorCard,
+  ContentSourceCard,
+  BadContentRepot,
+} from '../../components'
+
+import { Wrapper, ReportWrapper } from './styles/side_cards'
 
 const SideCards = ({ data }) => (
   <Wrapper>
     <AuthorCard user={data.author} />
     <ContentSourceCard data={data} />
+    <ReportWrapper>
+      <BadContentRepot />
+    </ReportWrapper>
   </Wrapper>
 )
 

containers/JobContent/styles/side_cards.js

@@ -7,4 +7,6 @@ export const Wrapper = styled.div`
   flex-direction: column;
   width: 22%;
 `
-export const holder = 1
+export const ReportWrapper = styled.div`
+  padding: 0 10px;
+`

containers/PostContent/SideCards.js

@@ -1,12 +1,19 @@
 import React from 'react'
 
-import { AuthorCard, ContentSourceCard } from '../../components'
-import { Wrapper } from './styles/side_cards'
+import {
+  AuthorCard,
+  ContentSourceCard,
+  BadContentRepot,
+} from '../../components'
+import { Wrapper, ReportWrapper } from './styles/side_cards'
 
 const SideCards = ({ data }) => (
   <Wrapper>
     <AuthorCard user={data.author} />
     <ContentSourceCard data={data} />
+    <ReportWrapper>
+      <BadContentRepot />
+    </ReportWrapper>
   </Wrapper>
 )
 

containers/PostContent/styles/side_cards.js

@@ -7,4 +7,6 @@ export const Wrapper = styled.div`
   flex-direction: column;
   width: 22%;
 `
-export const holder = 1
+export const ReportWrapper = styled.div`
+  padding: 0 10px;
+`