refactor(cheatsheet): rewrite with new convesion

Author: mydearxym

components/EmptyThread/index.js

@@ -34,7 +34,7 @@ const DescContent = ({ community, thread }) => (
   <React.Fragment>
     <div>
       如果你有 {community} 相关的优质
-      {translator[thread]}
+      {translator[thread] || thread}
       ，欢迎一起分享 / 交流
     </div>
     <div>
@@ -55,7 +55,7 @@ const EmptyThread = ({ community, thread }) => (
     <Text>
       <Title>
         {community} 社区内未找到符合相关条件的
-        {translator[thread]}
+        {translator[thread] || thread}
       </Title>
       <DescWrapper>
         <DescContent community={community} thread={thread} />

components/EmptyThread/styles/index.js

@@ -10,6 +10,7 @@ export const Wrapper = styled.div`
   width: 100%;
   height: 100%;
   margin-top: 10%;
+  margin-bottom: 30px;
 `
 
 export const Icon404 = styled(Img)`

components/LoadingEffects/CheatSheetLoading.js

@@ -1,28 +1,25 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Masonry from 'react-masonry-component'
 import R from 'ramda'
 import { withTheme } from 'styled-components'
 
-// import Loading, { Rect, Circle } from 'react-content-loader'
 import ContentLoader from 'react-content-loader'
 
+import { Wrapper, CheatsheetCard } from './styles'
+
 import { makeDebugger, uid } from '../../utils'
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('c:LoadingEffects:index')
 /* eslint-enable no-unused-vars */
 
-/* eslint-disable no-unused-vars */
 const LoadingBlock = ({ theme }) => (
-  /* eslint-enable no-unused-vars */
-
-  <div style={{ width: '45%', overflow: 'hidden', marginTop: 20, height: 180 }}>
+  <CheatsheetCard>
     <ContentLoader
       height={200}
       width={280}
       speed={2}
-      primaryColor="#f3f3f3"
-      secondaryColor="#ecebeb"
+      primaryColor={theme.loading.basic}
+      secondaryColor={theme.loading.animate}
     >
       <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
       <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
@@ -34,15 +31,15 @@ const LoadingBlock = ({ theme }) => (
       <rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
       <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
     </ContentLoader>
-  </div>
+  </CheatsheetCard>
 )
 
 const CheatSheetLoading = ({ column, theme }) => (
-  <Masonry>
+  <Wrapper>
     {R.range(0, column).map(() => (
       <LoadingBlock key={uid.gen()} theme={theme} />
     ))}
-  </Masonry>
+  </Wrapper>
 )
 
 CheatSheetLoading.propTypes = {

components/LoadingEffects/styles/index.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+
+// import { Img } from '../../../components'
+// import { theme } from '../../../utils'
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`
+export const CheatsheetCard = styled.div`
+  width: 44%;
+  overflow: hidden;
+  margin-top: 20px;
+  height: 180px;
+  margin-right: 50px;
+`

config/endpoint.js

@@ -28,3 +28,6 @@ export const GITHUB_ADDR = 'https://github.com/coderplanets/coderplanets_web'
 export const GITHUB_ME = 'https://github.com/mydearxym'
 export const ISSUE_ADDR = `${GITHUB_ADDR}/issues/new`
 export const MENTION_USER_ADDR = 'https://coderplanets.com/users/'
+
+export const COMMUNITY_WIKI =
+  'https://github.com/coderplanets/cps_cheatsheets/blob/master'

config/index.js

@@ -5,5 +5,6 @@ export {
   GITHUB_ADDR,
   GITHUB_ME,
   MENTION_USER_ADDR,
+  COMMUNITY_WIKI,
 } from './endpoint'
 export { ASSETS_ENDPOINT, ICON_BASE, ICON_CMD, DEFAULT_ICON } from './assets'

containers/CheatsheetThread/Cheatsheet.js

@@ -3,8 +3,16 @@ import Masonry from 'react-masonry-component'
 import Remarkable from 'remarkable'
 import remarkableemoj from 'remarkable-emoji'
 // import Prism from 'mastani-codehighlight'
+import { COMMUNITY_WIKI } from '../../config'
 
-import { Wrapper, CardWrapper } from './styles/cheatsheet'
+import {
+  Wrapper,
+  CardWrapper,
+  ErrorWrapper,
+  ErrorTitle,
+  ErrorLink,
+} from './styles/cheatsheet'
+import parser from './parser'
 import CheatSheetStyle from './styles/CheatsheetMarkStyles'
 
 import { uid } from '../../utils'
@@ -26,22 +34,41 @@ const Cards = ({ cards }) =>
     </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>
-)
+const Cheatsheet = ({ source, communityRaw }) => {
+  let data = null
+  try {
+    data = parser(source)
+    return (
+      <Wrapper>
+        {data.map(item => (
+          <CheatSheetStyle key={uid.gen()}>
+            <div
+              className="cheatsheet-body"
+              dangerouslySetInnerHTML={{
+                __html: md.render(item.header),
+              }}
+            />
+            <Masonry>
+              <Cards cards={item.cards} />
+            </Masonry>
+          </CheatSheetStyle>
+        ))}
+      </Wrapper>
+    )
+  } catch (e) {
+    return (
+      <ErrorWrapper>
+        <ErrorTitle>解析错误</ErrorTitle>
+        <ErrorLink
+          href={`${COMMUNITY_WIKI}/${communityRaw}.md`}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          查看: {`${communityRaw}.md`}
+        </ErrorLink>
+      </ErrorWrapper>
+    )
+  }
+}
 
 export default Cheatsheet

containers/CheatsheetThread/Note.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { DotDivider, ContributorList } from '../../components'
+import { DotDivider, ContributorList, Button } from '../../components'
 
 import {
   Wrapper,
@@ -9,18 +9,28 @@ import {
   Title,
   JoinText,
   ViewsText,
+  SyncWrapper,
 } from './styles/note'
 
-import fakeusers from './fakeusers'
+// import fakeusers from './fakeusers'
 
-const Note = () => (
+const Note = ({ onSync, contributors, views, addContributor }) => (
   <Wrapper>
     <Divider />
     <Text>
       <Title>本页贡献者</Title> <DotDivider /> <JoinText>参与编辑</JoinText>
-      <ViewsText>浏览: 244</ViewsText>
+      <ViewsText>浏览: {views}</ViewsText>
     </Text>
-    <ContributorList users={fakeusers} showAdder />
+    <ContributorList
+      users={contributors}
+      showAdder
+      addContributor={addContributor}
+    />
+    <SyncWrapper>
+      <Button size="small" type="primary" ghost onClick={onSync}>
+        同步 cheatseet
+      </Button>
+    </SyncWrapper>
   </Wrapper>
 )
 

containers/CheatsheetThread/index.js

@@ -10,43 +10,36 @@ import Prism from 'mastani-codehighlight'
 
 import { Wrapper } from './styles'
 
-// import { NotFound, CheatSheetLoading } from '../../components'
+import { EmptyThread, CheatSheetLoading } from '../../components'
 
 import Cheatsheet from './Cheatsheet'
 import Note from './Note'
 
-import { makeDebugger, storePlug } from '../../utils'
+import { makeDebugger, storePlug, TYPE } 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': {
+const renderView = (cheatsheetData, type, communityRaw) => {
+  switch (type) {
+    case TYPE.LOADING: {
       return <CheatSheetLoading />
     }
-    case '404': {
-      return <NotFound />
-    }
-    case 'empty': {
-      return <div>isEmpty</div>
+    case TYPE.NOT_FOUND: {
+      return <EmptyThread community={communityRaw} thread="cheatsheet" />
     }
-    case 'loaded': {
-      return <Cheatsheet source={source} />
+    default: {
+      return (
+        <Cheatsheet
+          source={cheatsheetData.readme}
+          communityRaw={communityRaw}
+        />
+      )
     }
-    case 'parse_error': {
-      return <h3>parse error</h3>
-    }
-    default:
-      return <div>default</div>
   }
 }
-*/
+// TODO: NOT_FOUND, parse_error
 
 class CheatsheetThreadContainer extends React.Component {
   componentWillMount() {
@@ -60,17 +53,19 @@ class CheatsheetThreadContainer extends React.Component {
 
   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>
+    const { cheatsheetData, curView, curCommunity } = cheatsheetThread
+    const communityRaw = curCommunity.raw
 
     return (
       <Wrapper>
-        <Cheatsheet source={sourceData} />
-        <Note />
+        {renderView(cheatsheetData, curView, communityRaw)}
+        <Note
+          onSync={logic.syncCheetsheetFromGithub}
+          contributors={cheatsheetData.contributors}
+          views={cheatsheetData.views}
+          addContributor={logic.addContributor}
+          curView={curView}
+        />
       </Wrapper>
     )
   }