refactor(communityCell): up to date

Author: mydearxym

components/CommunityCell/CommunitiesLogoList.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+// import { ICON_CMD } from '../../config'
+import { Wrapper, CommunityLogo } from './styles/communities_logo_list'
+
+import { uid } from '../../utils'
+
+const tooltipOffset = JSON.stringify({ top: 1 })
+const CommunitiesLogoList = ({ array }) => (
+  <Wrapper>
+    {array.map(c => (
+      <Wrapper key={uid.gen()}>
+        <div
+          data-tip={c.title}
+          data-for="community_cell"
+          data-offset={tooltipOffset}
+        >
+          <CommunityLogo src={c.logo} />
+        </div>
+      </Wrapper>
+    ))}
+  </Wrapper>
+)
+
+export default CommunitiesLogoList

components/CommunityCell/index.js

@@ -12,6 +12,7 @@ import ReactTooltip from 'react-tooltip'
 import { ICON_CMD } from '../../config'
 
 import AdderCell from '../AdderCell'
+import CommunitiesLogoList from './CommunitiesLogoList'
 
 import {
   Wrapper,
@@ -29,31 +30,13 @@ import { uid, makeDebugger } from '../../utils'
 const debug = makeDebugger('c:CommunityCell:index')
 /* eslint-enable no-unused-vars */
 
-const tooltipOffset = JSON.stringify({ top: 1 })
-
 const SingleCommunity = ({ community }) => (
   <Wrapper>
     <CommunityLogo src={community.logo} />
     <Title>{community.title}</Title>
   </Wrapper>
 )
 
-const CommunitiesLogoArray = ({ array }) => (
-  <Wrapper>
-    {array.map(c => (
-      <Wrapper key={uid.gen()}>
-        <div
-          data-tip={c.title}
-          data-for="community_cell"
-          data-offset={tooltipOffset}
-        >
-          <CommunityLogo src={c.logo} />
-        </div>
-      </Wrapper>
-    ))}
-  </Wrapper>
-)
-
 const CommunitiesSetter = ({ array, source, thread, onDelete }) => (
   <Wrapper>
     {array.map(c => (
@@ -91,7 +74,7 @@ const renderContent = props => {
   if (!R.isEmpty(array)) {
     return (
       <Wrapper>
-        <CommunitiesLogoArray array={array} />
+        <CommunitiesLogoList array={array} />
       </Wrapper>
     )
   }

components/CommunityCell/styles/communities_logo_list.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+
+import Img from '../../Img'
+import { theme } from '../../../utils'
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 300px;
+`
+
+export const CommunityLogo = styled(Img)`
+  fill: ${theme('thread.articleTitle')};
+  width: 22px;
+  height: 22px;
+  margin-bottom: 4px;
+  display: block;
+  margin-right: 5px;
+`

containers/CommunitiesContent/CategoriesContent.js

@@ -111,8 +111,6 @@ const columns = [
 
 class CategoriesContent extends React.Component {
   componentDidMount() {
-    logic.loadCategories()
-
     setTimeout(() => {
       ReactTooltip.rebuild()
     }, 2000)

containers/CommunitiesContent/index.js

@@ -65,9 +65,14 @@ const renderChildContent = (curRoute, store, restProps) => {
 class CommunitiesContentContainer extends React.Component {
   componentDidMount() {
     const { communitiesContent } = this.props
+
     logic.init(communitiesContent)
   }
 
+  componentWillUnmount() {
+    logic.uninit()
+  }
+
   render() {
     const { communitiesContent } = this.props
     const { curRoute } = communitiesContent

containers/CommunitiesContent/logic.js

@@ -20,8 +20,6 @@ import { PAGE_SIZE } from '../../config'
 import S from './schema'
 import SR71 from '../../utils/network/sr71'
 
-let sub$ = null
-
 const sr71$ = new SR71({
   resv_event: [EVENT.LOGOUT, EVENT.LOGIN, EVENT.PREVIEW_CLOSE],
 })
@@ -30,6 +28,7 @@ const sr71$ = new SR71({
 const debug = makeDebugger('L:CommunitiesContent')
 /* eslint-enable no-unused-vars */
 
+let sub$ = null
 let store = null
 
 const commonFilter = page => {
@@ -56,6 +55,7 @@ export function loadCommunities(page = 1) {
 export function loadCategories(page = 1) {
   scrollIntoEle(TYPE.APP_HEADER_ID)
   /* const size = PAGE_SIZE.COMMON */
+  console.log('the fuck store: ', store)
   store.markRoute({ page })
   store.markState({ categoriessLoading: true })
 
@@ -395,10 +395,18 @@ const ErrSolver = [
   },
 ]
 
-export function init(selectedStore) {
-  if (store) return false
-  store = selectedStore
+export function init(_store) {
+  store = _store
 
-  if (sub$) sub$.unsubscribe()
+  if (sub$) return loadCategories()
   sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
+
+  loadCategories()
+}
+
+export function uninit() {
+  if (!sub$) return false
+  debug('===== do uninit')
+  sub$.unsubscribe()
+  sub$ = null
 }

stores/RouteStore/index.js

@@ -40,34 +40,27 @@ const RouteStore = t
     // /racket/jobs ..
 
     markRoute(query) {
-      if (!onClient || R.isEmpty(query)) return false
+      if (!onClient) return false
       const { mainPath, subPath, page } = query
+      query = R.pickBy(v => !R.isEmpty(v), query)
 
-      if (mainPath) {
-        self.mainPath = mainPath
-      }
-      if (subPath) {
-        self.subPath = subPath
-      }
+      if (mainPath) self.mainPath = mainPath
+      if (subPath) self.subPath = subPath
 
-      if (page && String(page) === '1') {
-        query = R.omit(['page'], query)
-      }
+      if (page && String(page) === '1') query = R.omit(['page'], query)
 
       const allQueryString = serializeQuery(query)
       const queryString = serializeQuery(R.omit(['mainPath', 'subPath'], query))
 
       const url = `/${allQueryString}`
-      let asPath = `/${self.mainPath}/${self.subPath}${queryString}`
-      if (self.subPath === 'index' || self.mainPath === self.subPath) {
-        asPath = `/${self.mainPath}${queryString}`
-      }
+      const asPath = `/${self.mainPath}/${self.subPath}${queryString}`
 
       // NOTE: shallow option only works for same page url
       // if page is diffrent, it will cause page reload
-      Router.push(url, asPath, {
-        shallow: true,
-      })
+      /* console.log('push url: ', url) */
+      Router.push(url, asPath, { shallow: true })
+      // see: https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page
+      /* return Global.history.pushState({}, null, url) */
     },
     markState(sobj) {
       markStates(sobj, self)