refactor: don't load all mutations in the engine

apps/extension/src/contentscript/multitable-panel/multitable-panel.tsx

@@ -19,10 +19,7 @@ export const MultitablePanel: FC = () => {
   const { accountId, networkId } = useWallet()
   const { connectWallet } = useConnectWallet()
   const { disconnectWallet } = useDisconnectWallet()
-  const { tree, mutations, selectedMutationId, switchMutation } = useMutableWeb()
-
-  // The notch can be opened from the extension's context menu on websites without any mutation
-  if (mutations.length === 0) return null
+  const { tree, selectedMutationId, switchMutation } = useMutableWeb()
 
   const handleToggleOverlay = () => {
     Background.toggleSidePanel()

libs/engine/src/app/contexts/mutable-web-context/mutable-web-context.tsx

@@ -9,7 +9,6 @@ export type MutableWebContextState = {
   config: NearConfig
   engine: Engine
   tree: IContextNode | null
-  mutations: MutationDto[]
   mutationApps: AppInstanceWithSettings[]
   activeApps: AppInstanceWithSettings[]
   selectedMutation: MutationDto | null
@@ -18,14 +17,12 @@ export type MutableWebContextState = {
   switchMutation: (mutationId: string | null) => void
   switchPreferredSource: (mutationId: string, source: EntitySourceType | null) => void
   switchMutationVersion: (mutationId: string, version?: string | null) => void
-  mutationVersions: { [key: string]: string | null }
 }
 
 export const contextDefaultValues: MutableWebContextState = {
   config: null as any as NearConfig, // ToDo
   engine: null as any as Engine, // ToDo
   tree: null,
-  mutations: [],
   mutationApps: [],
   activeApps: [],
   isLoading: false,
@@ -34,7 +31,6 @@ export const contextDefaultValues: MutableWebContextState = {
   switchMutation: () => undefined,
   switchPreferredSource: () => undefined,
   switchMutationVersion: () => undefined,
-  mutationVersions: {},
 }
 
 export const MutableWebContext = createContext<MutableWebContextState>(contextDefaultValues)

libs/engine/src/app/contexts/mutable-web-context/mutable-web-provider.tsx

@@ -2,10 +2,13 @@ import { EngineConfig, EntitySourceType, getNearConfig, utils } from '@mweb/back
 import { useCore } from '@mweb/react'
 import {
   useEngine,
+  useGetMutationVersion,
   useMutation,
   useMutationApps,
   useMutationParsers,
-  useMutations,
+  usePreferredSource,
+  useSetMutationVersion,
+  useSetPreferredSource,
 } from '@mweb/react-engine'
 import React, { FC, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { ModalContextState } from '../modal-context/modal-context'
@@ -28,40 +31,13 @@ const MutableWebProvider: FC<Props> = ({ config, defaultMutationId, modalApi, ch
 
   const { engine } = useEngine()
 
-  const { mutations, isLoading: isMutationsLoading } = useMutations(tree)
-
   const [selectedMutationId, setSelectedMutationId] = useState<string | null>(null)
-  const [preferredSources, setPreferredSources] = useState<{
-    [key: string]: EntitySourceType | null
-  }>({})
-  const [mutationVersions, setMutationVersions] = useState<{
-    [key: string]: string | null
-  }>({})
+  const { preferredSource } = usePreferredSource(selectedMutationId)
+  const { setPreferredSource: switchPreferredSource } = useSetPreferredSource()
+  const { mutationVersion } = useGetMutationVersion(selectedMutationId)
+  const { setMutationVersion: switchMutationVersion } = useSetMutationVersion()
 
-  useEffect(() => {
-    const fn = async () => {
-      const localMutations = mutations.filter((mut) => mut.source === EntitySourceType.Local)
-      const newPreferredSources: { [key: string]: EntitySourceType | null } = {}
-      const newMutationVersions: { [key: string]: string | null } = {}
-
-      await Promise.all([
-        ...localMutations.map((mut) =>
-          engine.mutationService
-            .getPreferredSource(mut.id)
-            .then((source) => (newPreferredSources[mut.id] = source))
-        ),
-        ...mutations.map((mut) =>
-          engine.mutationService
-            .getMutationVersion(mut.id)
-            .then((version) => (newMutationVersions[mut.id] = version))
-        ),
-      ])
-
-      setPreferredSources(newPreferredSources)
-      setMutationVersions(newMutationVersions)
-    }
-    fn()
-  }, [engine, mutations])
+  // ToDo: merge mutationId, source, version to one state
 
   const getMutationToBeLoaded = useCallback(async () => {
     const favoriteMutation = await engine.mutationService.getFavoriteMutation()
@@ -72,31 +48,31 @@ const MutableWebProvider: FC<Props> = ({ config, defaultMutationId, modalApi, ch
 
   const { mutation: selectedMutation, isMutationLoading: isSelectedMutationLoading } = useMutation(
     selectedMutationId,
-    selectedMutationId ? preferredSources[selectedMutationId] : undefined,
-    selectedMutationId ? mutationVersions[selectedMutationId] : undefined
+    selectedMutationId ? preferredSource : undefined,
+    selectedMutationId ? mutationVersion : undefined
   )
 
   useEffect(() => {
     getMutationToBeLoaded().then((favoriteMutationId) => {
       // ToDo: move it to the separate useEffect ?
       if (defaultMutationId && favoriteMutationId && defaultMutationId !== favoriteMutationId) {
-        const hasMutation = mutations.some((mutation) => mutation.id === defaultMutationId)
-
-        if (hasMutation) {
-          modalApi.notify(
-            mutationSwitched({
-              fromMutationId: favoriteMutationId,
-              toMutationId: defaultMutationId,
-              onBack: () => switchMutation(favoriteMutationId),
-            })
-          )
-        } else {
-          modalApi.notify(
-            mutationDisabled({
-              onBack: () => switchMutation(favoriteMutationId),
-            })
-          )
-        }
+        engine.mutationService.getMutation(defaultMutationId).then((mutationToSwitch) => {
+          if (mutationToSwitch) {
+            modalApi.notify(
+              mutationSwitched({
+                fromMutationId: favoriteMutationId,
+                toMutationId: defaultMutationId,
+                onBack: () => switchMutation(favoriteMutationId),
+              })
+            )
+          } else {
+            modalApi.notify(
+              mutationDisabled({
+                onBack: () => switchMutation(favoriteMutationId),
+              })
+            )
+          }
+        })
       }
 
       switchMutation(defaultMutationId ?? favoriteMutationId)
@@ -146,55 +122,12 @@ const MutableWebProvider: FC<Props> = ({ config, defaultMutationId, modalApi, ch
     [selectedMutationId]
   )
 
-  // ToDo: move to separate hook
-  const switchPreferredSource = useCallback(
-    async (mutationId: string, source: EntitySourceType | null) => {
-      try {
-        const mut = mutations.find(
-          (m) => m.id === mutationId && m.source === EntitySourceType.Local
-        )
-        if (!mut) return
-        setPreferredSources((oldPrefferedSources) => ({
-          ...oldPrefferedSources,
-          [mutationId]: source,
-        }))
-        await engine.mutationService.setPreferredSource(mutationId, source)
-      } catch (err) {
-        console.error(err)
-      }
-    },
-    [engine, mutations]
-  )
-
-  // ToDo: move to separate hook
-  const switchMutationVersion = useCallback(
-    async (mutationId: string, version?: string | null) => {
-      try {
-        const mut = mutations.find((m) => m.id === mutationId)
-        if (!mut) return
-        setMutationVersions((oldMutationVersions) => ({
-          ...oldMutationVersions,
-          [mutationId]: version ?? null,
-        }))
-        await engine.mutationService.setMutationVersion(mutationId, version)
-      } catch (err) {
-        console.error(err)
-      }
-    },
-    [engine, mutations]
-  )
-
-  const isLoading =
-    isMutationsLoading ||
-    isMutationAppsLoading ||
-    isMutationParsersLoading ||
-    isSelectedMutationLoading
+  const isLoading = isMutationAppsLoading || isMutationParsersLoading || isSelectedMutationLoading
 
   const state: MutableWebContextState = {
     config: nearConfig,
     engine,
     tree,
-    mutations,
     mutationApps,
     activeApps,
     selectedMutation,
@@ -203,7 +136,6 @@ const MutableWebProvider: FC<Props> = ({ config, defaultMutationId, modalApi, ch
     switchMutation,
     switchPreferredSource,
     switchMutationVersion,
-    mutationVersions,
   }
 
   return (

libs/react-engine/src/mutation/index.ts

@@ -2,6 +2,7 @@ export * from './use-create-mutation'
 export * from './use-delete-local-mutation'
 export * from './use-edit-mutation'
 export * from './use-favorite-mutation'
+export * from './use-get-mutation-version'
 export * from './use-mutation-versions'
 export * from './use-mutation'
 export * from './use-mutations-last-usage'
@@ -10,5 +11,6 @@ export * from './use-preferred-source'
 export * from './use-remove-mutation-from-recents'
 export * from './use-save-mutation'
 export * from './use-set-favorite-mutation'
+export * from './use-set-mutation-version'
 export * from './use-set-preferred-source'
 export * from './use-update-mutation-last-usage'

libs/react-engine/src/mutation/use-get-mutation-version.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query'
+import { useEngine } from '../engine'
+
+export const useGetMutationVersion = (mutationId: string | null) => {
+  const { engine } = useEngine()
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['selectedMutationVersion', mutationId],
+    queryFn: () =>
+      mutationId ? engine.mutationService.getMutationVersion(mutationId) : Promise.resolve(null),
+    initialData: null,
+  })
+
+  return { mutationVersion: data, isLoading, error }
+}

libs/react-engine/src/mutation/use-set-mutation-version.ts

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useEngine } from '../engine'
+
+export function useSetMutationVersion() {
+  const queryClient = useQueryClient()
+  const { engine } = useEngine()
+
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: ({ mutationId, version }: { mutationId: string; version?: string | null }) =>
+      engine.mutationService.setMutationVersion(mutationId, version),
+    onSuccess: (_, { mutationId, version }) => {
+      queryClient.setQueryData(['selectedMutationVersion', mutationId], version)
+    },
+  })
+
+  const setMutationVersion = (mutationId: string, version: string | null = null) => {
+    mutate({ mutationId, version })
+  }
+
+  return { setMutationVersion, isLoading: isPending, error }
+}

libs/react-engine/src/mutation/use-set-preferred-source.ts

@@ -14,5 +14,9 @@ export function useSetPreferredSource() {
     },
   })
 
-  return { setFavoriteMutation: mutate, isLoading: isPending, error }
+  const setPreferredSource = (mutationId: string, source: EntitySourceType | null) => {
+    mutate({ mutationId, source })
+  }
+
+  return { setPreferredSource, isLoading: isPending, error }
 }