refactor(mobx): use new useStore arch & update mobx deps

config/version.ts

@@ -1 +1 @@
-export const APP_VERSION = '1.2.49'
+export const APP_VERSION = '1.2.50'

package.json

@@ -38,7 +38,7 @@
     }
   },
   "dependencies": {
-    "@formkit/auto-animate": "^1.0.0-beta.6",
+    "@formkit/auto-animate": "^0.8.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
@@ -55,11 +55,11 @@
     "graphql": "^16.6.0",
     "markdown-to-jsx": "^7.2.1",
     "mastani-codehighlight": "0.0.7",
-    "mobx": "^6.7.0",
-    "mobx-react": "^7.6.0",
-    "mobx-state-tree": "^5.1.6",
+    "mobx-react": "^9.0.0",
+    "mobx-react-lite": "^4.0.5",
+    "mobx-state-tree": "^5.3.0",
     "nanoid": "^3.1.12",
-    "next": "^14.0.0",
+    "next": "^14.0.1",
     "next-compose-plugins": "^2.2.0",
     "next-i18next": "4.4.1",
     "next-pwa": "^5.6.0",

src/containers/Route/index.js

@@ -4,17 +4,18 @@
  *
  */
 
-import React from 'react'
 import { useRouter } from 'next/router'
+import { observer } from 'mobx-react-lite'
 
-import { bond } from '@/mobx'
+import { useStore } from './store'
 import { useInit } from './logic'
 
-const RouteContainer = ({ route }) => {
+const Route = () => {
+  const store = useStore()
   const router = useRouter()
-  useInit(route, router)
+  useInit(store, router)
 
   return <div />
 }
 
-export default bond(RouteContainer, 'route')
+export default observer(Route)

src/containers/Route/store.ts

@@ -8,7 +8,7 @@ import { merge, pickBy, omit, isEmpty } from 'ramda'
 import type { TRootStore, TRoute } from '@/spec'
 import { PAGE_SIZE } from '@/config'
 
-import { T, getParent, Instance, markStates } from '@/mobx'
+import { T, getParent, Instance, markStates, useMobxContext } from '@/mobx'
 import { Global } from '@/helper'
 import { isClientSide } from '@/utils/ssr'
 import { serializeQuery } from '@/utils/route'
@@ -103,5 +103,6 @@ const RouteStore = T.model('RouteStore', {
   }))
 
 export type TStore = Instance<typeof RouteStore>
+export const useStore = (): TStore => useMobxContext().store.route
 
 export default RouteStore

src/containers/content/CommunityContent/AboutContent.tsx

@@ -3,30 +3,27 @@
  */
 
 import { FC } from 'react'
+import { observer } from 'mobx-react-lite'
 import useMobileDetect from '@groupher/use-mobile-detect-hook'
 
 import useBannerLayout from '@/hooks/useBannerLayout'
 import useMetric from '@/hooks/useMetric'
 
-import { bond } from '@/mobx'
 import { BANNER_LAYOUT } from '@/constant/layout'
 
 import AboutThread from '@/containers/thread/AboutThread'
 import CommunityDigest from '@/widgets/CommunityDigest'
 
-import type { TStore } from './store'
+import { useStore } from './store'
 import { useInit } from './logic'
 
 import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper, MobileCardsWrapper } from './styles'
 
-type TProps = {
-  communityContent?: TStore
-}
-
 /**
  * only for AboutThread, but link to the common communityContent store
  */
-const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
+const AboutContent: FC = () => {
+  const store = useStore()
   useInit(store)
 
   const metric = useMetric()
@@ -55,4 +52,4 @@ const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
   )
 }
 
-export default bond(CommunityContentContainer, 'communityContent') as FC<TProps>
+export default observer(AboutContent)

src/containers/content/CommunityContent/ChangeLogContent.tsx

@@ -8,25 +8,21 @@ import useMobileDetect from '@groupher/use-mobile-detect-hook'
 import useMetric from '@/hooks/useMetric'
 import useBannerLayout from '@/hooks/useBannerLayout'
 
-import { bond } from '@/mobx'
 import { BANNER_LAYOUT } from '@/constant/layout'
 
 import ChangelogThread from '@/containers/thread/ChangelogThread'
 import CommunityDigest from '@/widgets/CommunityDigest'
 
-import type { TStore } from './store'
+import { useStore } from './store'
 import { useInit } from './logic'
 
 import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper, MobileCardsWrapper } from './styles'
 
-type TProps = {
-  communityContent?: TStore
-}
-
 /**
  * only for AboutThread, but link to the common communityContent store
  */
-const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
+const ChangelogContent: FC = () => {
+  const store = useStore()
   useInit(store)
   const metric = useMetric()
   const bannerLayout = useBannerLayout()
@@ -55,4 +51,4 @@ const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
   )
 }
 
-export default bond(CommunityContentContainer, 'communityContent') as FC<TProps>
+export default ChangelogContent

src/containers/content/CommunityContent/DashboardContent.tsx

@@ -3,17 +3,14 @@
  */
 
 import { FC } from 'react'
+import { observer } from 'mobx-react-lite'
 import useMobileDetect from '@groupher/use-mobile-detect-hook'
 
-import type { TMetric } from '@/spec'
-import METRIC from '@/constant/metric'
-
-import { bond } from '@/mobx'
-
+import useMetric from '@/hooks/useMetric'
 import DashboardThread from '@/containers//thread/DashboardThread'
 import CommunityDigest from '@/widgets/CommunityDigest'
 
-import type { TStore } from './store'
+import { useStore } from './store'
 import { useInit } from './logic'
 
 import {
@@ -23,16 +20,13 @@ import {
   MobileCardsWrapper,
 } from './styles/dashboard_content'
 
-type TProps = {
-  communityContent?: TStore
-  metric?: TMetric
-}
-
 /**
  * only for AboutThread, but link to the common communityContent store
  */
-const DashboardContainer: FC<TProps> = ({ communityContent: store, metric = METRIC.DASHBOARD }) => {
+const DashboardContent: FC = () => {
+  const store = useStore()
   useInit(store)
+  const metric = useMetric()
 
   const { isMobile } = useMobileDetect()
 
@@ -56,4 +50,4 @@ const DashboardContainer: FC<TProps> = ({ communityContent: store, metric = METR
   )
 }
 
-export default bond(DashboardContainer, 'communityContent') as FC<TProps>
+export default observer(DashboardContent)

src/containers/content/CommunityContent/DocContent.tsx

@@ -3,29 +3,25 @@
  */
 
 import { FC } from 'react'
+import { observer } from 'mobx-react-lite'
 import useMobileDetect from '@groupher/use-mobile-detect-hook'
 
-import { bond } from '@/mobx'
 import { BANNER_LAYOUT } from '@/constant/layout'
-
+import useMetric from '@/hooks/useMetric'
 import useBannerLayout from '@/hooks/useBannerLayout'
 import DocThread from '@/containers//thread/DocThread'
 import CommunityDigest from '@/widgets/CommunityDigest'
 
-import type { TStore } from './store'
+import { useStore } from './store'
 import { useInit } from './logic'
 
 import { Wrapper, InnerWrapper, SidebarWrapper, ContentWrapper, MobileCardsWrapper } from './styles'
-import useMetric from '@/hooks/useMetric'
-
-type TProps = {
-  communityContent?: TStore
-}
 
 /**
  * only for AboutThread, but link to the common communityContent store
  */
-const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
+const DocContent: FC = () => {
+  const store = useStore()
   useInit(store)
   const metric = useMetric()
 
@@ -55,4 +51,4 @@ const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
   )
 }
 
-export default bond(CommunityContentContainer, 'communityContent') as FC<TProps>
+export default observer(DocContent)

src/containers/content/CommunityContent/KanbanContent.tsx

@@ -3,28 +3,25 @@
  */
 
 import { FC } from 'react'
+import { observer } from 'mobx-react-lite'
 
-import { bond } from '@/mobx'
 import { BANNER_LAYOUT } from '@/constant/layout'
 import useBannerLayout from '@/hooks/useBannerLayout'
 import useMetric from '@/hooks/useMetric'
 
 import KanbanThread from '@/containers//thread/KanbanThread'
 import CommunityDigest from '@/widgets/CommunityDigest'
 
-import type { TStore } from './store'
+import { useStore } from './store'
 import { useInit } from './logic'
 
 import { Wrapper, InnerWrapper, SidebarWrapper, ContentWrapper, MobileCardsWrapper } from './styles'
 
-type TProps = {
-  communityContent?: TStore
-}
-
 /**
  * only for AboutThread, but link to the common communityContent store
  */
-const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
+const KanbanContent: FC = () => {
+  const store = useStore()
   useInit(store)
   const bannerLayout = useBannerLayout()
   const metric = useMetric()
@@ -48,4 +45,4 @@ const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
   )
 }
 
-export default bond(CommunityContentContainer, 'communityContent') as FC<TProps>
+export default observer(KanbanContent)

src/containers/content/CommunityContent/PostContent.tsx

@@ -3,8 +3,8 @@
  */
 
 import { FC } from 'react'
+import { observer } from 'mobx-react-lite'
 
-import { bond } from '@/mobx'
 import { BANNER_LAYOUT } from '@/constant/layout'
 // import { THREAD } from '@/constant/thread'
 import useMetric from '@/hooks/useMetric'
@@ -15,19 +15,16 @@ import CommunityDigest from '@/widgets/CommunityDigest'
 import { Br } from '@/widgets/Common'
 // import SidebarLayoutHeader from '@/widgets/SidebarLayoutHeader'
 
-import type { TStore } from './store'
+import { useStore } from './store'
 import { useInit } from './logic'
 
 import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper, MobileCardsWrapper } from './styles'
 
-type TProps = {
-  communityContent?: TStore
-}
-
 /**
  * only for AboutThread, but link to the common communityContent store
  */
-const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
+const PostContent: FC = () => {
+  const store = useStore()
   useInit(store)
   const metric = useMetric()
   const bannerLayout = useBannerLayout()
@@ -61,4 +58,4 @@ const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
   )
 }
 
-export default bond(CommunityContentContainer, 'communityContent') as FC<TProps>
+export default observer(PostContent)