diff --git a/apps/extension/src/contentscript/multitable-panel/multitable-panel.tsx b/apps/extension/src/contentscript/multitable-panel/multitable-panel.tsx index 007410b5..fa34a525 100644 --- a/apps/extension/src/contentscript/multitable-panel/multitable-panel.tsx +++ b/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() diff --git a/libs/engine/src/app/contexts/mutable-web-context/mutable-web-context.tsx b/libs/engine/src/app/contexts/mutable-web-context/mutable-web-context.tsx index bf9f4907..3f7303c4 100644 --- a/libs/engine/src/app/contexts/mutable-web-context/mutable-web-context.tsx +++ b/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(contextDefaultValues) diff --git a/libs/engine/src/app/contexts/mutable-web-context/mutable-web-provider.tsx b/libs/engine/src/app/contexts/mutable-web-context/mutable-web-provider.tsx index 332fb1d7..39f91dd4 100644 --- a/libs/engine/src/app/contexts/mutable-web-context/mutable-web-provider.tsx +++ b/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 = ({ config, defaultMutationId, modalApi, ch const { engine } = useEngine() - const { mutations, isLoading: isMutationsLoading } = useMutations(tree) - const [selectedMutationId, setSelectedMutationId] = useState(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 = ({ 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 = ({ 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 = ({ config, defaultMutationId, modalApi, ch switchMutation, switchPreferredSource, switchMutationVersion, - mutationVersions, } return ( diff --git a/libs/react-engine/src/mutation/index.ts b/libs/react-engine/src/mutation/index.ts index 11a60bc5..1f379ae9 100644 --- a/libs/react-engine/src/mutation/index.ts +++ b/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' diff --git a/libs/react-engine/src/mutation/use-get-mutation-version.ts b/libs/react-engine/src/mutation/use-get-mutation-version.ts new file mode 100644 index 00000000..7fcb09b6 --- /dev/null +++ b/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 } +} diff --git a/libs/react-engine/src/mutation/use-set-mutation-version.ts b/libs/react-engine/src/mutation/use-set-mutation-version.ts new file mode 100644 index 00000000..595795bb --- /dev/null +++ b/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 } +} diff --git a/libs/react-engine/src/mutation/use-set-preferred-source.ts b/libs/react-engine/src/mutation/use-set-preferred-source.ts index 349f296e..d52b7f55 100644 --- a/libs/react-engine/src/mutation/use-set-preferred-source.ts +++ b/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 } }