refactor: later

Author: mydearxym

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['airbnb', 'plugin:react/recommended', 'prettier', 'prettier/react'],
-  plugins: ['prettier', 'react'],
+  plugins: ['prettier', 'react', 'cypress'],
   parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2016,
@@ -13,26 +13,34 @@ module.exports = {
     es6: true,
     node: true,
     jest: true,
+    'cypress/globals': true,
   },
   rules: {
     'arrow-body-style': 0,
-    'no-param-reassign': 0, // heavilly used in store.actions
-    'no-use-before-define': 0, // heavilly used in store.views
+    // need for _store init
+    'no-underscore-dangle': 0,
+    // heavilly used in store.actions
+    'no-param-reassign': 0,
+    // heavilly used in store.views
+    'no-use-before-define': 0,
+    // force-return is unneeded
     'consistent-return': 0,
-    'no-nested-ternary': 0, // TODO
-    'no-shadow': 0, //TODO: currently just for entry
-    'no-return-assign': 0, //TODO currently only for BookStore
+    'no-shadow': 0,
+    // error could be object for parse by upfloor
     'prefer-promise-reject-errors': 0,
     'react/jsx-no-bind': 0,
+    // allow JSX in js files
     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
     'react/forbid-prop-types': 0,
+    // no need sort
     'react/sort-comp': 0,
     'react/prop-types': [1, { skipUndeclared: true }],
     'jsx-a11y/href-no-hash': 'off',
     'jsx-a11y/no-static-element-interactions': 0,
     'jsx-a11y/click-events-have-key-events': 0,
-    'import/no-named-as-default': 0,
-    'import/no-named-as-default-member': 0,
+
+    // for cypress test usage
+    'no-unused-expressions': 0,
 
     'prettier/prettier': [
       'error',

components/MarkDownRender/index.js

@@ -0,0 +1,89 @@
+/*
+ *
+ * MarkDownRender
+ *
+ */
+import React from 'react'
+import R from 'ramda'
+import PropTypes from 'prop-types'
+
+import Remarkable from 'remarkable'
+import remarkableemoj from 'remarkable-emoji'
+import mentionsPlugin from 'remarkable-mentions'
+import Prism from 'mastani-codehighlight'
+
+import { MENTION_USER_ADDR } from '../../config'
+import MarkDownStyle from '../../containers/ThemeWrapper/MarkDownStyle'
+import { PreviewerContainer } from './styles'
+
+import { makeDebugger } from '../../utils'
+
+const md = new Remarkable('full', {
+  html: true,
+  breaks: false,
+})
+md.use(mentionsPlugin({ url: MENTION_USER_ADDR }))
+md.use(remarkableemoj)
+
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:MarkDownRender:index')
+/* eslint-enable no-unused-vars */
+
+class MarkDownRender extends React.Component {
+  state = {
+    body: '',
+  }
+
+  componentDidMount() {
+    Prism.highlightAll()
+    setTimeout(() => Prism.highlightAll(), 1000)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { body } = this.state
+
+    if (nextProps.body !== body) {
+      this.setState({ body: nextProps.body })
+      setTimeout(() => Prism.highlightAll(), 1000)
+    }
+  }
+
+  render() {
+    const { body } = this.props
+    /*
+       NOTE: the '---' in normal markdown will break the render process
+       this is the most mother fucking disgusting bug i ever seen
+     */
+    const safeBody = R.replace(/---(\r\n|\r|\n)/g, '----', body || '')
+
+    return (
+      <PreviewerContainer>
+        <MarkDownStyle>
+          <div className="markdown-body">
+            {/* eslint-disable react/no-danger */}
+            <div
+              id="typewriter-preview-container"
+              dangerouslySetInnerHTML={{
+                __html: md.render(safeBody),
+              }}
+            />
+            {/* eslint-enable react/no-danger */}
+          </div>
+        </MarkDownStyle>
+      </PreviewerContainer>
+    )
+  }
+}
+
+// TODO default props check
+
+MarkDownRender.propTypes = {
+  // https://www.npmjs.com/package/prop-types
+  body: PropTypes.string,
+}
+
+MarkDownRender.defaultProps = {
+  body: '',
+}
+
+export default MarkDownRender

components/MarkDownRender/styles/index.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+// bbst
+
+export const PreviewerContainer = styled.div``
+
+export const holder = 1

components/MarkDownRender/tests/index.test.js

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

components/index.js

@@ -11,6 +11,7 @@ export { default as BannerCountBrief } from './BannerCountBrief'
 export { default as MarkDownPreviewer } from './MarkDownPreviewer'
 export { default as ContentFilter } from './ContentFilter'
 export { default as FileUploader } from './FileUploader'
+export { default as MarkDownRender } from './MarkDownRender'
 
 export { default as StateTree } from './StateTree'
 export { default as StatusBox } from './StatusBox'

containers/Comments/CommentsList.js

@@ -3,16 +3,19 @@ import React from 'react'
 import TimeAgo from 'timeago-react'
 
 import { ICON_CMD } from '../../config'
+/* import { fakeUsers, getRandomInt, Global, prettyNum } from '../../utils' */
+import { Global, prettyNum, uid } from '../../utils'
 
 import {
   AvatarsRow,
   Button,
   SpaceGrow,
   Pagi,
   CommentLoading,
-  MarkDownPreviewer,
+  MarkDownRender,
 } from '../../components'
 
+import * as logic from './logic'
 import CommentsFilter from './CommentsFilter'
 
 import {
@@ -49,17 +52,10 @@ import {
   ReplyToFloor,
 } from './styles/comments_list'
 
-import * as logic from './logic'
-import { uid, Global, prettyNum, makeDebugger } from '../../utils'
-
-/* eslint-disable no-unused-vars */
-const debug = makeDebugger('C:CommentsList')
-/* eslint-enable no-unused-vars */
-
 const getSelection = () => {
   const selectText = Global.getSelection().toString()
   if (!R.isEmpty(selectText)) {
-    debug('getSelection', selectText)
+    /* console.log('getSelection', selectText) */
     // TODO: then use window.getSelection().getRangeAt(0).getBoundingClientRect() to draw a button
   }
 }
@@ -107,9 +103,11 @@ const ActionBottom = ({ data, accountInfo }) => {
 }
 
 const getAuthors = comment => {
+  /* eslint-disable no-return-assign */
   const replies = R.forEach(reply => {
     return (reply.author.extra_id = reply.id)
   }, R.clone(comment.replies))
+  /* eslint-enable */
 
   return R.pluck('author', replies)
 }
@@ -138,9 +136,7 @@ const Comment = ({ data, tobeDeleteId, accountInfo }) => (
                   total={data.repliesCount}
                 />
               </ReplyUsers>
-            ) : (
-              <div />
-            )}
+            ) : null}
           </CommentHeaderFirst>
           <TimeStamps>
             <TimeAgo datetime={data.insertedAt} locale="zh_CN" />
@@ -154,10 +150,8 @@ const Comment = ({ data, tobeDeleteId, accountInfo }) => (
               <ReplyToBody>{data.replyTo.body}</ReplyToBody>
               <ReplyToFloor>#{data.replyTo.floor}</ReplyToFloor>
             </ReplyBar>
-          ) : (
-            <div />
-          )}
-          <MarkDownPreviewer body={data.body} />
+          ) : null}
+          <MarkDownRender body={data.body} />
         </CommentContent>
         <CommentFooter>
           <Actions>
@@ -190,7 +184,7 @@ const Comment = ({ data, tobeDeleteId, accountInfo }) => (
 )
 
 const Lists = ({ entries, tobeDeleteId, accountInfo }) => (
-  <div>
+  <React.Fragment>
     {entries.map(c => (
       <div key={uid.gen()}>
         <Comment
@@ -200,48 +194,33 @@ const Lists = ({ entries, tobeDeleteId, accountInfo }) => (
         />
       </div>
     ))}
-  </div>
+  </React.Fragment>
 )
 
-const TotalCountText = ({ count }) => {
-  return (
-    <TotalCountWrapper>
-      {count > 0 ? (
-        <ListTitle id="lists-info">
-          收到 <TotalNum>{count}</TotalNum> 条评论:
-        </ListTitle>
-      ) : (
-        <div />
-      )}
-    </TotalCountWrapper>
-  )
-}
+const TotalCountText = ({ count }) => (
+  <TotalCountWrapper>
+    {count > 0 ? (
+      <ListTitle id="lists-info">
+        共收到 <TotalNum>{count}</TotalNum> 条评论:
+      </ListTitle>
+    ) : null}
+  </TotalCountWrapper>
+)
 
 const CommentsList = ({
-  entries,
   accountInfo,
-  restProps: {
-    totalCount,
-    pageSize,
-    pageNumber,
-    loading,
-    loadingFresh,
-    tobeDeleteId,
-    filterType,
-  },
+  pagedComments: { entries, totalCount, pageSize, pageNumber },
+  restProps: { loading, loadingFresh, tobeDeleteId, filterType },
 }) => (
-  <div>
+  <React.Fragment>
     <TotalHeader>
       <TotalCountText count={totalCount} />
-      <CommentsFilter filterType={filterType} />
+      <CommentsFilter filterType={filterType} show={totalCount >= 2} />
     </TotalHeader>
-
-    {loadingFresh ? (
+    {!loadingFresh ? null : (
       <CommentBlock>
         <CommentLoading />
       </CommentBlock>
-    ) : (
-      <div />
     )}
     <ListsContainer>
       {loading ? (
@@ -258,15 +237,17 @@ const CommentsList = ({
         />
       )}
     </ListsContainer>
-
     <Pagi
       left="-10px"
       pageNumber={pageNumber}
       pageSize={pageSize}
       totalCount={totalCount}
       onChange={logic.pageChange}
+      showBottomMsg
+      noMoreMsg="没有更多的评论了"
+      emptyMsg="目前还没有评论"
     />
-  </div>
+  </React.Fragment>
 )
 
 export default CommentsList

containers/CommunitiesBanner/logic.js

@@ -48,7 +48,6 @@ export const loadCategories = () =>
   sr71$.query(S.pagedCategories, { filter: {} })
 
 export function onAdd(thread) {
-  console.log('thread: ', thread)
   switch (thread) {
     case 'tags': {
       return dispatchEvent(EVENT.NAV_CREATE_TAG, {

containers/Header/schema.js

@@ -21,8 +21,6 @@ const user = gql`
       avatar
       bio
       fromGithub
-      company
-      education
       location
       qq
       weibo

containers/Preview/index.js

@@ -17,6 +17,7 @@ import ArticleViwer from '../ArticleViwer'
 import AccountViewer from '../AccountViewer'
 import AccountEditor from '../AccountEditor'
 import CommunityEditor from '../CommunityEditor'
+import ThreadEditor from '../ThreadEditor'
 import TagEditor from '../TagEditor'
 import CategoryEditor from '../CategoryEditor'
 import CategorySetter from '../CategorySetter'
@@ -102,7 +103,7 @@ const Viewer = ({
       return <CategorySetter editData={editCommunityData} />
     }
     case TYPE.PREVIEW_CREATE_THREAD: {
-      return <h3>PREVIEW_CREATE_THREAD</h3>
+      return <ThreadEditor />
     }
     case TYPE.PREVIEW_SET_THREAD: {
       return <ThreadSetter editData={editCommunityData} />

containers/Preview/logic.js

@@ -178,6 +178,7 @@ const DataResolver = [
     match: asyncRes(EVENT.NAV_CREATE_THREAD),
     action: res => {
       const event = res[EVENT.NAV_CREATE_THREAD]
+      console.log('NAV_CREATE_THREAD data: ', event.data)
 
       store.markState({ editCommunity: event.data })
       store.open(event.type)