refactor(cell): add timestamp cell

Author: mydearxym

components/ContentsCountCell/index.js

@@ -40,7 +40,6 @@ const ContentsCountCell = ({
 }
 
 ContentsCountCell.propTypes = {
-  // https://www.npmjs.com/package/prop-types
   data: PropTypes.shape({
     postsCount: PropTypes.number,
     jobsCount: PropTypes.number,

components/TimeStampCell/index.js

@@ -0,0 +1,50 @@
+/*
+ *
+ * TimeStampCell
+ *
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import TimeAgo from 'timeago-react'
+
+import { Wrapper, Content, Label, Count } from './styles'
+
+import { makeDebugger } from '../../utils'
+
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:TimeStampCell:index')
+/* eslint-enable no-unused-vars */
+
+const TimeStampCell = ({ data: { insertedAt, updatedAt } }) => (
+  <Wrapper>
+    <Content>
+      <Label>创建 /</Label>
+      <Count same>
+        <TimeAgo datetime={insertedAt} locale="zh_CN" />
+      </Count>
+    </Content>
+    <Content>
+      <Label>更新 /</Label>
+      <Count same={insertedAt === updatedAt}>
+        <TimeAgo datetime={updatedAt} locale="zh_CN" />
+      </Count>
+    </Content>
+  </Wrapper>
+)
+
+TimeStampCell.propTypes = {
+  data: PropTypes.shape({
+    insertedAt: PropTypes.string,
+    updatedAt: PropTypes.string,
+  }),
+}
+
+TimeStampCell.defaultProps = {
+  data: {
+    insertedAt: '',
+    updatedAt: '',
+  },
+}
+
+export default React.memo(TimeStampCell)

components/TimeStampCell/styles/index.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+// import Img from '../../Img'
+// import { theme } from '../../../utils'
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+export const Content = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const Label = styled.div`
+  font-size: 0.7rem;
+  margin-right: 5px;
+`
+export const Count = styled.div`
+  color: ${({ same }) => (same ? 'grey' : 'yellowgreen')};
+  font-size: 0.8rem;
+`

components/TimeStampCell/tests/index.test.js

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

components/index.js

@@ -41,6 +41,7 @@ export { default as PermissionCell } from './PermissionCell'
 export { default as ThreadsCell } from './ThreadsCell'
 
 export { default as ContentsCountCell } from './ContentsCountCell'
+export { default as TimeStampCell } from './TimeStampCell'
 // form
 export { default as FormItem } from './FormItem'
 export { default as FormInputer } from './FormInputer'

containers/CommunitiesContent/IndexContent.js

@@ -1,7 +1,4 @@
 import React from 'react'
-import TimeAgo from 'timeago-react'
-
-/* import { Pagination } from 'antd' */
 
 import { cutFrom } from '../../utils'
 import {
@@ -14,6 +11,7 @@ import {
   CategoriesCell,
   ThreadsCell,
   ContentsCountCell,
+  TimeStampCell,
 } from '../../components'
 
 import { CommunityIcon, OperationWrapper } from './styles'
@@ -118,21 +116,11 @@ const columns = [
     },
   },
   {
-    title: '创建时间',
+    title: '时间戳',
     width: 150,
-    dataIndex: 'insertedAt',
     align: 'center',
-    render: text => {
-      return <TimeAgo datetime={text} locale="zh_CN" />
-    },
-  },
-  {
-    title: '上次更新',
-    width: 150,
-    dataIndex: 'updatedAt',
-    align: 'center',
-    render: text => {
-      return <TimeAgo datetime={text} locale="zh_CN" />
+    render: (text, record) => {
+      return <TimeStampCell data={record} />
     },
   },
   {