refactor: replace jotai hook with jojoo

Signed-off-by: Innei <i@innei.in>

package.json

@@ -59,7 +59,7 @@
     "framer-motion": "^10.16.1",
     "idb-keyval": "6.2.1",
     "immer": "^10.0.2",
-    "jojoo": "0.0.3",
+    "jojoo": "0.0.7",
     "jotai": "2.4.0",
     "js-cookie": "3.0.5",
     "markdown-to-jsx": "npm:@innei/markdown-to-jsx@7.2.1-beta.0",

src/app.static.config.ts

@@ -2,7 +2,7 @@ export const appStaticConfig = {
   ai: {
     summary: {
       enabled: true,
-      providers: ['xlog', 'openai'],
+      providers: ['openai', 'xlog'],
     },
   },
 }

src/atoms/css-media.ts

@@ -1,10 +1,6 @@
-import { atom, useAtomValue } from 'jotai'
+import { createAtomHooks } from 'jojoo/react'
+import { atom } from 'jotai'
 
-import { jotaiStore } from '~/lib/store'
-
-const cssPrintMediaAtom = atom(false)
-
-export const useIsPrintMode = () => useAtomValue(cssPrintMediaAtom)
-
-export const setIsPrintMode = (status: boolean) =>
-  jotaiStore.set(cssPrintMediaAtom, status)
+export const [, , useIsPrintMode, , , setIsPrintMode] = createAtomHooks(
+  atom(false),
+)

src/atoms/online.ts

@@ -1,13 +1,8 @@
-import { atom, useAtomValue } from 'jotai'
+import { createAtomHooks } from 'jojoo/react'
+import { setStore } from 'jojoo'
+import { atom } from 'jotai'
 
 import { jotaiStore } from '~/lib/store'
 
-const onlineCountAtom = atom(0)
-
-export const setOnlineCount = (count: number) => {
-  jotaiStore.set(onlineCountAtom, count)
-}
-
-export const useOnlineCount = () => {
-  return useAtomValue(onlineCountAtom)
-}
+setStore(jotaiStore)
+export const [, , useOnlineCount, , , setOnlineCount] = createAtomHooks(atom(0))

src/lib/store.ts

@@ -1,3 +1,7 @@
-import { createStore } from 'jotai'
+import { setStore } from 'jojoo'
+import { createStore } from 'jotai/vanilla'
 
-export const jotaiStore = createStore()
+const jotaiStore = createStore()
+setStore(jotaiStore)
+
+export { jotaiStore }

src/providers/note/CurrentNoteDataProvider.tsx

@@ -1,35 +1,34 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
+import { createModelDataProvider } from 'jojoo/react'
 import { useEffect } from 'react'
 import { useSearchParams } from 'next/navigation'
 
 import { type NoteWrappedPayload } from '@mx-space/api-client'
 
 import { queries } from '~/queries/definition'
 
-import { createDataProvider } from '../internal/createDataProvider'
-
 const {
-  CurrentDataProvider,
-  CurrentDataAtomProvider,
-  getGlobalCurrentData: getCurrentData,
-  setGlobalCurrentData: setCurrentData,
-  useCurrentDataSelector,
-  useSetCurrentData,
-} = createDataProvider<NoteWrappedPayload>()
+  ModelDataProvider,
+  ModelDataAtomProvider,
+  getGlobalModelData: getModelData,
+  setGlobalModelData: setModelData,
+  useModelDataSelector,
+  useSetModelData,
+} = createModelDataProvider<NoteWrappedPayload>()
 
 export {
-  CurrentDataProvider as CurrentNoteDataProvider,
-  CurrentDataAtomProvider as CurrentNoteDataAtomProvider,
-  getCurrentData as getCurrentNoteData,
-  setCurrentData as setCurrentNoteData,
-  useCurrentDataSelector as useCurrentNoteDataSelector,
-  useSetCurrentData as useSetCurrentNoteData,
+  ModelDataProvider as CurrentNoteDataProvider,
+  ModelDataAtomProvider as CurrentNoteDataAtomProvider,
+  getModelData as getCurrentNoteData,
+  setModelData as setCurrentNoteData,
+  useModelDataSelector as useCurrentNoteDataSelector,
+  useSetModelData as useSetCurrentNoteData,
 }
 
 export const SyncNoteDataAfterLoggedIn = () => {
-  const nid = useCurrentDataSelector((data) => data?.data.nid)
+  const nid = useModelDataSelector((data) => data?.data.nid)
   const password = useSearchParams().get('password')
   const { data } = useQuery({
     ...queries.note.byNid(nid?.toString() || '', password),
@@ -38,7 +37,7 @@ export const SyncNoteDataAfterLoggedIn = () => {
 
   useEffect(() => {
     if (data) {
-      setCurrentData((draft) => {
+      setModelData((draft) => {
         draft.data = data.data
       })
     }

src/providers/page/CurrentPageDataProvider.tsx

@@ -1,30 +1,30 @@
 'use client'
 
+import { createModelDataProvider } from 'jojoo/react'
 import type { PageModel } from '@mx-space/api-client'
 
 import { isClientSide, isDev } from '~/lib/env'
 
-import { createDataProvider } from '../internal/createDataProvider'
-
 const {
-  CurrentDataProvider,
-  getGlobalCurrentData: getCurrentData,
-  setGlobalCurrentData: setCurrentData,
-  useCurrentDataSelector,
-  CurrentDataAtomProvider,
-} = createDataProvider<PageModel>()
+  ModelDataProvider,
+  getGlobalModelData: getModelData,
+  setGlobalModelData: setModelData,
+  useModelDataSelector,
+  ModelDataAtomProvider,
+} = createModelDataProvider<PageModel>()
 
 declare global {
   interface Window {
-    getCurrentPageData: typeof getCurrentData
+    getCurrentPageData: typeof getModelData
   }
 }
-if (isDev && isClientSide) window.getCurrentPageData = getCurrentData
+
+if (isDev && isClientSide) window.getCurrentPageData = getModelData
 
 export {
-  CurrentDataProvider as CurrentPageDataProvider,
-  getCurrentData as getCurrentPageData,
-  setCurrentData as setCurrentPageData,
-  useCurrentDataSelector as useCurrentPageDataSelector,
-  CurrentDataAtomProvider as CurrentPageDataAtomProvider,
+  ModelDataProvider as CurrentPageDataProvider,
+  getModelData as getCurrentPageData,
+  setModelData as setCurrentPageData,
+  useModelDataSelector as useCurrentPageDataSelector,
+  ModelDataAtomProvider as CurrentPageDataAtomProvider,
 }

src/providers/post/CurrentPostDataProvider.tsx

@@ -1,30 +1,29 @@
 'use client'
 
+import { createModelDataProvider } from 'jojoo/react'
 import type { PostModel } from '@mx-space/api-client'
 
 import { isClientSide, isDev } from '~/lib/env'
 
-import { createDataProvider } from '../internal/createDataProvider'
-
 const {
-  CurrentDataProvider,
-  CurrentDataAtomProvider,
-  getGlobalCurrentData,
-  setGlobalCurrentData,
-  useCurrentDataSelector,
-} = createDataProvider<PostModel>()
+  ModelDataProvider,
+  ModelDataAtomProvider,
+  getGlobalModelData,
+  setGlobalModelData,
+  useModelDataSelector,
+} = createModelDataProvider<PostModel>()
 
 declare global {
   interface Window {
-    getCurrentPostData: typeof getGlobalCurrentData
+    getModelPostData: typeof getGlobalModelData
   }
 }
-if (isDev && isClientSide) window.getCurrentPostData = getGlobalCurrentData
+if (isDev && isClientSide) window.getModelPostData = getGlobalModelData
 
 export {
-  CurrentDataProvider as CurrentPostDataProvider,
-  CurrentDataAtomProvider as CurrentPostDataAtomProvider,
-  getGlobalCurrentData as getGlobalCurrentPostData,
-  setGlobalCurrentData as setGlobalCurrentPostData,
-  useCurrentDataSelector as useCurrentPostDataSelector,
+  ModelDataProvider as CurrentPostDataProvider,
+  ModelDataAtomProvider as CurrentPostDataAtomProvider,
+  getGlobalModelData as getGlobalCurrentPostData,
+  setGlobalModelData as setGlobalCurrentPostData,
+  useModelDataSelector as useCurrentPostDataSelector,
 }