refactor(cheatsheet): UI / UX refactor

Author: mydearxym

components/CommunityContent/index.js

@@ -13,7 +13,8 @@ import ReposThread from '../../containers/ReposThread'
 import WikiThread from '../../containers/WikiThread'
 import JobsThread from '../../containers/JobsThread'
 import UsersThread from '../../containers/UsersThread'
-import CheatSheetPaper from '../../containers/CheatSheetPaper'
+import CheatsheetThread from '../../containers/CheatsheetThread'
+// import CheatSheetPaper from '../../containers/CheatSheetPaper'
 
 import { Wrapper } from './styles'
 import { makeDebugger, ROUTE } from '../../utils'
@@ -42,8 +43,9 @@ const ComunityContent = ({ curRoute }) => {
     case ROUTE.WIKI: {
       return <WikiThread />
     }
-    case 'cheatsheet': {
-      return <CheatSheetPaper />
+    case ROUTE.CHEATSHEET: {
+      // return <CheatSheetPaper />
+      return <CheatsheetThread />
     }
     default: {
       return <div>default</div>

components/ContributorList/index.js

@@ -0,0 +1,67 @@
+/*
+ *
+ * ContributorList
+ *
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Maybe from '../Maybe'
+import Popover from '../Popover'
+import GithubUserCard from '../GithubUserCard'
+import AvatarAdder from '../../containers/AvatarAdder'
+
+import { Wrapper, AvatarLink, Avatar, CardWrapper } from './styles'
+
+import { makeDebugger, uid } from '../../utils'
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:ContributorList:index')
+/* eslint-enable no-unused-vars */
+
+const ContributorList = ({ users, showAdder, addContributor }) => (
+  <Wrapper>
+    {users.map(user => (
+      <Popover
+        content={
+          <CardWrapper>
+            <GithubUserCard user={user} />
+          </CardWrapper>
+        }
+        placement="bottom"
+        trigger="hover"
+        key={uid.gen()}
+      >
+        <AvatarLink>
+          <Avatar src={user.avatar} />
+        </AvatarLink>
+      </Popover>
+    ))}
+
+    <Maybe test={showAdder}>
+      <AvatarAdder onConfirm={addContributor} />
+    </Maybe>
+  </Wrapper>
+)
+
+ContributorList.propTypes = {
+  users: PropTypes.arrayOf(
+    PropTypes.shape({
+      avatar: PropTypes.string,
+      nickname: PropTypes.string,
+      bio: PropTypes.string,
+      company: PropTypes.string,
+      location: PropTypes.string,
+      htmlUrl: PropTypes.string,
+    })
+  ).isRequired,
+  addContributor: PropTypes.func,
+  showAdder: PropTypes.bool,
+}
+
+ContributorList.defaultProps = {
+  addContributor: debug,
+  showAdder: false,
+}
+
+export default ContributorList

containers/WikiThread/styles/avatar_list.js renamed to components/ContributorList/styles/index.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
-import Img from '../../../components/Img'
-/* import { theme } from '../../../utils' */
+import Img from '../../Img'
+// import { theme } from '../../../utils'
 
 export const Wrapper = styled.div`
   display: flex;

components/ContributorList/tests/index.test.js

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

components/index.js

@@ -43,6 +43,7 @@ export { default as SectionLabel } from './SectionLabel'
 export { default as BuyMeChuanChuan } from './BuyMeChuanChuan'
 export { default as VideoSourceInfo } from './VideoSourceInfo'
 
+export { default as ContributorList } from './ContributorList'
 export { default as GithubRepoPage } from './GithubRepoPage'
 export { default as GithubUserCard } from './GithubUserCard'
 

containers/AvatarAdder/AdderPanel.js

@@ -2,7 +2,8 @@ import React from 'react'
 
 import { ICON_CMD } from '../../config'
 
-import { GithubUserCard, Maybe } from '../../components'
+import Maybe from '../../components/Maybe'
+import GithubUserCard from '../../components/GithubUserCard'
 
 import {
   Wrapper,

containers/AvatarAdder/index.js

@@ -3,15 +3,13 @@
  * AvatarAdder
  *
  */
-
 import React from 'react'
 import { inject, observer } from 'mobx-react'
 import PropTypes from 'prop-types'
 
-import { Popover } from '../../components'
+import Popover from '../../components/Popover'
 
 import { Wrapper, AddText } from './styles'
-
 import AdderPanel from './AdderPanel'
 
 import { makeDebugger, storePlug } from '../../utils'

containers/AvatarAdder/styles/adder_panel.js

@@ -1,6 +1,5 @@
 import styled from 'styled-components'
 
-// import { Input } from 'antd'
 import Img from '../../../components/Img'
 import { theme } from '../../../utils'
 

containers/CheatsheetThread/Cheatsheet.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import Masonry from 'react-masonry-component'
+import Remarkable from 'remarkable'
+import remarkableemoj from 'remarkable-emoji'
+// import Prism from 'mastani-codehighlight'
+
+import { Wrapper, CardWrapper } from './styles/cheatsheet'
+import CheatSheetStyle from './styles/CheatsheetMarkStyles'
+
+import { uid } from '../../utils'
+
+const md = new Remarkable()
+md.use(remarkableemoj)
+
+const Cards = ({ cards }) =>
+  cards.map(item => (
+    <CardWrapper key={uid.gen()}>
+      <CheatSheetStyle>
+        <div
+          className="cheatsheet-body"
+          dangerouslySetInnerHTML={{
+            __html: md.render(item),
+          }}
+        />
+      </CheatSheetStyle>
+    </CardWrapper>
+  ))
+
+const Cheatsheet = ({ source }) => (
+  <Wrapper>
+    {source.map(item => (
+      <CheatSheetStyle key={uid.gen()}>
+        <div
+          className="cheatsheet-body"
+          dangerouslySetInnerHTML={{
+            __html: md.render(item.header),
+          }}
+        />
+        <Masonry>
+          <Cards cards={item.cards} />
+        </Masonry>
+      </CheatSheetStyle>
+    ))}
+  </Wrapper>
+)
+
+export default Cheatsheet

containers/CheatsheetThread/Note.js

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { DotDivider, ContributorList } from '../../components'
+
+import {
+  Wrapper,
+  Divider,
+  Text,
+  Title,
+  JoinText,
+  ViewsText,
+} from './styles/note'
+
+import fakeusers from './fakeusers'
+
+const Note = () => (
+  <Wrapper>
+    <Divider />
+    <Text>
+      <Title>本页贡献者</Title> <DotDivider /> <JoinText>参与编辑</JoinText>
+      <ViewsText>浏览: 244</ViewsText>
+    </Text>
+    <ContributorList users={fakeusers} showAdder />
+  </Wrapper>
+)
+
+export default Note

containers/CheatsheetThread/fakeusers.js

@@ -0,0 +1,28 @@
+const fakeusers = [
+  {
+    avatar: 'https://avatars2.githubusercontent.com/u/6184465?v=4',
+    nickname: 'nickname',
+    bio: 'bio',
+    company: 'company',
+    location: 'location',
+    htmlUrl: 'https://avatars2.githubusercontent.com/u/6184465?v=4',
+  },
+  {
+    avatar: 'https://avatars2.githubusercontent.com/u/6184465?v=4',
+    nickname: 'nickname',
+    bio: 'bio',
+    company: 'company',
+    location: 'location',
+    htmlUrl: 'https://avatars2.githubusercontent.com/u/6184465?v=4',
+  },
+  {
+    avatar: 'https://avatars2.githubusercontent.com/u/6184465?v=4',
+    nickname: 'nickname',
+    bio: 'bio',
+    company: 'company',
+    location: 'location',
+    htmlUrl: 'https://avatars2.githubusercontent.com/u/6184465?v=4',
+  },
+]
+
+export default fakeusers

containers/CheatsheetThread/index.js

@@ -0,0 +1,81 @@
+/*
+ *
+ * CheatsheetThread
+ *
+ */
+
+import React from 'react'
+import { inject, observer } from 'mobx-react'
+import Prism from 'mastani-codehighlight'
+
+import { Wrapper } from './styles'
+
+// import { NotFound, CheatSheetLoading } from '../../components'
+
+import Cheatsheet from './Cheatsheet'
+import Note from './Note'
+
+import { makeDebugger, storePlug } from '../../utils'
+import * as logic from './logic'
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('C:CheatsheetThread')
+/* eslint-enable no-unused-vars */
+
+/*
+const renderContent = (source, state, errMsg) => {
+  switch (state) {
+    case 'init': {
+      return <div>init la</div>
+    }
+    case 'loading': {
+      return <CheatSheetLoading />
+    }
+    case '404': {
+      return <NotFound />
+    }
+    case 'empty': {
+      return <div>isEmpty</div>
+    }
+    case 'loaded': {
+      return <Cheatsheet source={source} />
+    }
+    case 'parse_error': {
+      return <h3>parse error</h3>
+    }
+    default:
+      return <div>default</div>
+  }
+}
+*/
+
+class CheatsheetThreadContainer extends React.Component {
+  componentWillMount() {
+    const { cheatsheetThread } = this.props
+    logic.init(cheatsheetThread)
+  }
+
+  componentDidMount() {
+    Prism.highlightAll()
+  }
+
+  render() {
+    const { cheatsheetThread } = this.props
+    const { sourceData /* state, errMsg */ } = cheatsheetThread
+
+    // console.log('sourceData --> ', sourceData)
+    // <div>{renderContent(source, state, errMsg)}</div>
+
+    // <div>{renderContent(sourceData, state, errMsg)}</div>
+
+    return (
+      <Wrapper>
+        <Cheatsheet source={sourceData} />
+        <Note />
+      </Wrapper>
+    )
+  }
+}
+
+export default inject(storePlug('cheatsheetThread'))(
+  observer(CheatsheetThreadContainer)
+)

containers/CheatsheetThread/lang.js

@@ -0,0 +1,13 @@
+/*
+ * CheatsheetThread Langs
+ *
+ * This contains all the text for the CheatsheetThread component.
+ */
+import { defineMessages } from 'react-intl'
+
+export default defineMessages({
+  header: {
+    id: 'containers.CheatsheetThread.header',
+    defaultMessage: 'This is the CheatsheetThread component !',
+  },
+})