Merge pull request #254 from medyo/fix-stores-hydration

feat: enhance remote config handling and local state management

Author: medyo

src/features/remoteConfig/api/getRemoteConfig.ts

@@ -1,7 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { axios } from 'src/lib/axios'
 import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query'
-import { useRemoteConfigStore } from '../stores/remoteConfig'
 import { RemoteConfig } from '../types'
 
 const getRemoteConfig = async (): Promise<RemoteConfig> => {
@@ -15,9 +14,6 @@ type UseGetRemoteConfigOptions = {
 }
 export const useGetRemoteConfig = ({ config }: UseGetRemoteConfigOptions = {}) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
-    onSuccess(remoteConfig) {
-      useRemoteConfigStore.getState().setRemoteConfig(remoteConfig)
-    },
     ...config,
     queryKey: ['remote-config', 'v2'],
     queryFn: () => getRemoteConfig(),

src/features/remoteConfig/providers/ConfigurationWrapper.tsx

@@ -1,13 +1,16 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import BeatLoader from 'react-spinners/BeatLoader'
 import { useAsyncError } from 'src/hooks/useAsyncError'
 import { useGetRemoteConfig } from '../api/getRemoteConfig'
+import { useRemoteConfigStore } from '../stores/remoteConfig'
 
 type ConfigurationWrapperProps = {
   children: React.ReactNode
 }
 
 export const ConfigurationWrapper = ({ children }: ConfigurationWrapperProps) => {
+  const setRemoteConfig = useRemoteConfigStore((s) => s.setRemoteConfig)
+
   const {
     isLoading,
     isError,
@@ -21,6 +24,12 @@ export const ConfigurationWrapper = ({ children }: ConfigurationWrapperProps) =>
   })
   const throwError = useAsyncError()
 
+  useEffect(() => {
+    if (remoteConfig) {
+      setRemoteConfig(remoteConfig)
+    }
+  }, [remoteConfig, setRemoteConfig])
+
   if (isLoading) {
     return (
       <div className="appLoading">

src/features/remoteConfig/stores/remoteConfig.ts

@@ -22,6 +22,9 @@ export const useRemoteConfigStore = create(
     {
       name: 'remote_config_storage',
       version: 2,
+      migrate: (state) => {
+        return state as RemoteConfigStore
+      },
     }
   )
 )

src/features/settings/components/TopicSettings.tsx

@@ -26,7 +26,8 @@ const CATEGORY_TO_ICON: Record<string, React.ReactNode> = {
 export const TopicSettings = () => {
   const { userSelectedTags, occupation, followTag, unfollowTag } = useUserPreferences()
 
-  const { tags } = useRemoteConfigStore()
+  const tags = useRemoteConfigStore((s) => s.tags)
+
   const [searchKeyword, setSearchKeyword] = useState<string>('')
   const filteredTags = useMemo(() => {
     if (searchKeyword.trim() === '') {

src/stores/preferences.ts

@@ -1,7 +1,8 @@
-import { Tag, useRemoteConfigStore } from 'src/features/remoteConfig'
-import { enhanceTags } from 'src/utils/DataEnhancement'
+import { Tag } from 'src/features/remoteConfig'
+import localStateStore from 'src/utils/LocalStateStorage'
+import { capitalize } from 'src/utils/String'
 import { create } from 'zustand'
-import { StateStorage, createJSONStorage, persist } from 'zustand/middleware'
+import { createJSONStorage, persist } from 'zustand/middleware'
 import {
   CardSettingsType,
   DNDDuration,
@@ -61,62 +62,6 @@ type UserPreferencesStoreActions = {
   setAdvStatus: (status: boolean) => void
 }
 
-const defaultStorage: StateStorage = {
-  getItem: (name: string) => {
-    const item = window.localStorage.getItem(name)
-    if (!item) {
-      return null
-    }
-
-    try {
-      let {
-        version,
-        state,
-      }: {
-        version: number
-        state: UserPreferencesState
-      } = JSON.parse(item)
-
-      const newState = {
-        ...state,
-      }
-      if (version == 0) {
-        const MAP_OLD_TAGS: Record<string, string> = {
-          'artificial-intelligence': 'artificial intelligence',
-          'machine-learning': 'machine learning',
-          cpp: 'c++',
-          csharp: 'c#',
-          'data-science': 'data science',
-          'objective-c': 'objectivec',
-        }
-
-        const stateTags = state.userSelectedTags as unknown as string[]
-        const newTags = stateTags.map((tag) => {
-          if (MAP_OLD_TAGS[tag]) {
-            return MAP_OLD_TAGS[tag]
-          }
-          return tag
-        })
-        newState.userSelectedTags = enhanceTags(useRemoteConfigStore.getState(), newTags)
-      }
-
-      return JSON.stringify({ state: newState, version })
-    } catch (e) {
-      return null
-    }
-  },
-  setItem: (name: string, value: string) => {
-    try {
-      window.localStorage.setItem(name, value)
-    } catch (e) {
-      window.localStorage.setItem(name, '')
-    }
-  },
-  removeItem: (name: string) => {
-    window.localStorage.removeItem(name)
-  },
-}
-
 export const useUserPreferences = create(
   persist<UserPreferencesState & UserPreferencesStoreActions>(
     (set, get) => ({
@@ -237,16 +182,41 @@ export const useUserPreferences = create(
     {
       name: 'preferences_storage',
       version: 1,
-      storage: createJSONStorage(() => defaultStorage),
+      storage: createJSONStorage(() => localStateStore),
       migrate: (persistedState, version) => {
         const state = persistedState as unknown as UserPreferencesState &
           UserPreferencesStoreActions
+
         if (version === 0) {
-          console.log('Migrating preferences_storage to version 1', state)
+          const previousTags = state.userSelectedTags as unknown as string[]
+
+          const MAP_OLD_TAGS: Record<string, string> = {
+            'artificial-intelligence': 'artificial intelligence',
+            'machine-learning': 'machine learning',
+            cpp: 'c++',
+            csharp: 'c#',
+            'data-science': 'data science',
+            'objective-c': 'objectivec',
+          }
+
+          const newTags = previousTags
+            .map((tag) => {
+              if (MAP_OLD_TAGS[tag]) {
+                return MAP_OLD_TAGS[tag]
+              }
+              return tag
+            })
+            .map((tag) => {
+              return {
+                label: capitalize(tag),
+                value: tag,
+              }
+            })
 
           return {
             ...state,
             onboardingCompleted: true,
+            userSelectedTags: newTags,
             occupation: state.onboardingResult?.title || '',
           }
         }

src/utils/LocalStateStorage.ts

@@ -0,0 +1,20 @@
+import { StateStorage } from 'zustand/middleware'
+
+const localStateStore: StateStorage = {
+  getItem: (name: string) => {
+    const value = localStorage.getItem(name)
+    return value ? value : null
+  },
+  setItem: (name: string, value: string) => {
+    try {
+      window.localStorage.setItem(name, value)
+    } catch (e) {
+      window.localStorage.setItem(name, '')
+    }
+  },
+  removeItem: (name: string) => {
+    window.localStorage.removeItem(name)
+  },
+}
+
+export default localStateStore

src/utils/String.ts

@@ -1,2 +1,7 @@
 export const pluralize = (count: number, noun: string, suffix = 's') =>
   `${count} ${noun}${count !== 1 ? suffix : ''}`
+
+export const capitalize = (s: string) => {
+  if (typeof s !== 'string') return ''
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}