Merge branch 'sidebar-sort' into dev

Author: mydearxym

components/Tabber/BriefView.js

@@ -1,28 +1,23 @@
 import React from 'react'
-import R from 'ramda'
 
 import { Wrapper, TabItem } from './styles/brief_view'
 import TabIcon from './TabIcon'
 
-import { uid, Trans } from '../../utils'
+import { uid, Trans, sortByIndex } from '../../utils'
 
-const BriefView = ({ source, active, onChange }) => {
-  const sortedTabs = R.sort((a, b) => a.index - b.index, source)
-
-  return (
-    <Wrapper>
-      {sortedTabs.map(item => (
-        <TabItem
-          key={uid.gen()}
-          active={item.raw === active}
-          onClick={onChange.bind(this, item.raw)}
-        >
-          <TabIcon raw={item.raw} active={active} small />
-          {item.alias ? item.alias : Trans(item.title)}
-        </TabItem>
-      ))}
-    </Wrapper>
-  )
-}
+const BriefView = ({ source, active, onChange }) => (
+  <Wrapper>
+    {sortByIndex(source).map(item => (
+      <TabItem
+        key={uid.gen()}
+        active={item.raw === active}
+        onClick={onChange.bind(this, item.raw)}
+      >
+        <TabIcon raw={item.raw} active={active} small />
+        {item.alias ? item.alias : Trans(item.title)}
+      </TabItem>
+    ))}
+  </Wrapper>
+)
 
 export default BriefView

components/Tabber/NormalView.js

@@ -1,31 +1,26 @@
 import React from 'react'
-import R from 'ramda'
 import { Tabs } from 'antd'
 
 import { LableWrapper } from './styles'
 import TabIcon from './TabIcon'
-import { Trans } from '../../utils'
+import { Trans, sortByIndex } from '../../utils'
 
 const { TabPane } = Tabs
 
-const NormalView = ({ source, active, onChange }) => {
-  const sortedTabs = R.sort((a, b) => a.index - b.index, source)
-
-  return (
-    <Tabs onChange={onChange} activeKey={active}>
-      {sortedTabs.map(item => (
-        <TabPane
-          tab={
-            <LableWrapper>
-              <TabIcon raw={item.raw} active={active} />
-              {item.alias ? item.alias : Trans(item.title)}
-            </LableWrapper>
-          }
-          key={item.raw}
-        />
-      ))}
-    </Tabs>
-  )
-}
+const NormalView = ({ source, active, onChange }) => (
+  <Tabs onChange={onChange} activeKey={active}>
+    {sortByIndex(source).map(item => (
+      <TabPane
+        tab={
+          <LableWrapper>
+            <TabIcon raw={item.raw} active={active} />
+            {item.alias ? item.alias : Trans(item.title)}
+          </LableWrapper>
+        }
+        key={item.raw}
+      />
+    ))}
+  </Tabs>
+)
 
 export default NormalView

components/Tabber/index.js

@@ -4,21 +4,20 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import R from 'ramda'
 
 import NormalView from './NormalView'
 import BriefView from './BriefView'
 
 import { mapAlias } from './alias'
 
-import { makeDebugger, THREAD, C11N } from '../../utils'
+import { makeDebugger, THREAD, C11N, sortByIndex } from '../../utils'
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('c:Tabber:index')
 /* eslint-enable no-unused-vars */
 
 const Tabber = ({ source, active, onChange, layout, communityRaw }) => {
   const aliasSource = mapAlias(source, communityRaw)
-  const sortedSource = R.sort((a, b) => a.index - b.index, aliasSource)
+  const sortedSource = sortByIndex(aliasSource)
 
   return (
     <React.Fragment>

containers/Sidebar/index.js

@@ -20,14 +20,10 @@ const debug = makeDebugger('C:Sidebar:index')
 /* eslint-enable no-unused-vars */
 
 class SidebarContainer extends React.Component {
-  constructor(props) {
-    super(props)
-    const { sidebar } = props
-    logic.init(sidebar)
-  }
-
   componentDidMount() {
-    logic.loadCommunities()
+    const { sidebar } = this.props
+    logic.init(sidebar)
+    // logic.loadCommunities()
   }
 
   render() {

containers/Sidebar/logic.js

@@ -1,4 +1,4 @@
-// import R from 'ramda'
+import R from 'ramda'
 // const debug = makeDebugger('L:sidebar')
 import { arrayMove } from 'react-sortable-hoc'
 
@@ -17,7 +17,6 @@ import {
 /* import { GRAPHQL_ENDPOINT } from '../../config' */
 
 import S from './schema'
-
 import SR71 from '../../utils/network/sr71'
 
 const sr71$ = new SR71({
@@ -48,18 +47,38 @@ export function onCommunitySelect(community) {
   dispatchEvent(EVENT.COMMUNITY_CHANGE)
 }
 
+const mapIndexed = R.addIndex(R.map)
+
 export function onSortMenuEnd({ oldIndex, newIndex }) {
   const sortedCommunities = arrayMove(store.communitiesData, oldIndex, newIndex)
   // TODO: sync to server
+  setC11N(sortedCommunities)
   store.onSortCommunities(sortedCommunities)
 }
 
-export function loadCommunities() {
-  /* const user = BStore.get('user') */
+const setC11N = sortedCommunities => {
+  const { isLogin } = store
+  if (!isLogin) return store.authWarning()
+
+  // TODO: check login
+  sortedCommunities = R.reject(R.propEq('raw', 'home'), sortedCommunities)
+  const sidebarCommunitiesIndex = mapIndexed(
+    (c, index) => ({ community: c.raw, index }),
+    sortedCommunities
+  )
+
+  const { contentDivider } = store.accountInfo.customization
   const args = {
-    filter: { page: 1, size: 30 },
+    customization: {
+      contentDivider,
+    },
+    sidebarCommunitiesIndex,
   }
-  /* console.log('loadCommunities: ', GRAPHQL_ENDPOINT) */
+  sr71$.mutate(S.setCustomization, args)
+}
+
+export function loadCommunities() {
+  const args = { filter: { page: 1, size: 30 } }
   sr71$.query(S.subscribedCommunities, args)
 }
 
@@ -69,6 +88,10 @@ const DataSolver = [
     action: ({ subscribedCommunities }) =>
       store.loadCommunities(subscribedCommunities),
   },
+  {
+    match: asyncRes('setCustomization'),
+    action: () => loadCommunities(),
+  },
   {
     match: asyncRes(EVENT.LOGOUT),
     action: () => loadCommunities(),
@@ -101,9 +124,8 @@ const ErrSolver = [
 ]
 
 export function init(_store) {
-  if (store) return false
   store = _store
 
-  if (sub$) sub$.unsubscribe()
+  if (sub$) return false
   sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
 }

containers/Sidebar/schema.js

@@ -12,9 +12,26 @@ const subscribedCommunities = gql`
   }
 `
 
+const setCustomization = gql`
+  mutation(
+    $userId: ID
+    $customization: CustomizationInput!
+    $sidebarCommunitiesIndex: [CommunityIndex]
+  ) {
+    setCustomization(
+      userId: $userId
+      customization: $customization
+      sidebarCommunitiesIndex: $sidebarCommunitiesIndex
+    ) {
+      id
+    }
+  }
+`
+
 const schema = {
   // communities,
   subscribedCommunities,
+  setCustomization,
 }
 
 export default schema

containers/Sidebar/store.js

@@ -5,7 +5,7 @@
 
 import { types as t, getParent } from 'mobx-state-tree'
 import R from 'ramda'
-import { makeDebugger, markStates, stripMobx } from '../../utils'
+import { makeDebugger, markStates, stripMobx, sortByIndex } from '../../utils'
 /* import MenuItem from './MenuItemStore' */
 
 /* eslint-disable no-unused-vars */
@@ -48,10 +48,15 @@ const SidebarStore = t
     },
     get communitiesData() {
       const { subscribedCommunities } = self.root.account
-      return subscribedCommunities ? subscribedCommunities.entries : []
+      return subscribedCommunities
+        ? sortByIndex(subscribedCommunities.entries)
+        : []
     },
   }))
   .actions(self => ({
+    authWarning(options) {
+      self.root.authWarning(options)
+    },
     markRoute(query) {
       self.root.markRoute(query)
     },

containers/schemas/fragments/base.js

@@ -2,6 +2,7 @@ export const community = `
   id
   title
   raw
+  index
   desc
   logo
 `

stores/SharedModel/Community.js

@@ -19,6 +19,7 @@ export const Community = t.model('Community', {
   title: t.maybeNull(t.string),
   desc: t.optional(t.string, ''),
   raw: t.maybeNull(t.string),
+  index: t.optional(t.number, 1000000),
   logo: t.maybeNull(t.string),
   categories: t.optional(t.array(SimpleCategory), []),
   contributesDigest: t.optional(t.array(t.number), []),

utils/functions.js

@@ -24,7 +24,12 @@ export const mapKeys = R.curry((fn, obj) => {
 })
 
 export const sortByColor = source =>
-  source.sort((t1, t2) => TAG_COLOR_ORDER[t1.color] - TAG_COLOR_ORDER[t2.color])
+  R.sort(
+    (t1, t2) => TAG_COLOR_ORDER[t1.color] - TAG_COLOR_ORDER[t2.color],
+    source
+  )
+
+export const sortByIndex = source => R.sort((a, b) => a.index - b.index, source)
 
 /* eslint-disable */
 const log = (...args) => data => {