refactor: reuse existing mutation editor

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

@@ -1,24 +1,19 @@
-import { EntityId, EntitySourceType, MutationWithSettings } from '@mweb/backend'
-import { useQueryClient } from '@tanstack/react-query'
-import { useMemo } from 'react'
+import { EntityId, EntitySourceType } from '@mweb/backend'
+import { useQuery } from '@tanstack/react-query'
+import { useEngine } from '../engine'
 
 export const useMutation = (
   mutationId: EntityId | undefined | null,
   source: EntitySourceType = EntitySourceType.Origin
 ) => {
-  const queryClient = useQueryClient()
+  const { engine } = useEngine()
 
-  // ToDo: check it out
-  const mutations = queryClient.getQueryData<MutationWithSettings[]>(['mutations']) ?? []
-
-  const mutation = useMemo(
-    () =>
-      mutationId
-        ? mutations.find((mutation) => mutation.id === mutationId && mutation.source === source) ??
-          null
-        : null,
-    [mutations, mutationId, source]
-  )
+  const { data: mutation } = useQuery({
+    queryKey: ['mutation', { mutationId, source }],
+    queryFn: () =>
+      mutationId ? engine.mutationService.getMutation(mutationId, source) : Promise.resolve(null),
+    initialData: null,
+  })
 
   return { mutation }
 }

libs/shared-components/src/mini-overlay/assets/icons/bell.tsx

@@ -8,14 +8,14 @@ const Bell = () => {
         d="M15.4375 9.81818C15.4375 8.9502 15.0898 8.11777 14.471 7.50402C13.8521 6.89026 13.0127 6.54546 12.1375 6.54546C11.2623 6.54546 10.4229 6.89026 9.80405 7.50402C9.18518 8.11777 8.8375 8.9502 8.8375 9.81818C8.8375 13.6364 7.1875 14.7273 7.1875 14.7273H17.0875C17.0875 14.7273 15.4375 13.6364 15.4375 9.81818Z"
         fill="#7A818B"
         stroke="#7A818B"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M13.089 16.9091C12.9923 17.0744 12.8535 17.2116 12.6866 17.307C12.5196 17.4024 12.3302 17.4526 12.1375 17.4526C11.9448 17.4526 11.7555 17.4024 11.5885 17.307C11.4215 17.2116 11.2827 17.0744 11.186 16.9091"
         stroke="#7A818B"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

libs/shared-components/src/mini-overlay/pages/edit-mutation.tsx

@@ -0,0 +1,40 @@
+import { EntitySourceType } from '@mweb/backend'
+import { useApplications, useMutation, useMutations, usePreferredSource } from '@mweb/react-engine'
+import React, { FC, useMemo } from 'react'
+import { useNavigate, useParams } from 'react-router'
+import { useEngine } from '../../contexts/engine-context'
+import { MutationEditorModal } from '../../multitable-panel/components/mutation-editor-modal'
+
+const EditMutation: FC = () => {
+  const navigate = useNavigate()
+  const params = useParams()
+  const mutationId = `${params.authorId}/mutation/${params.localId}`
+
+  const { loggedInAccountId } = useEngine()
+  const { applications } = useApplications()
+  const { preferredSource } = usePreferredSource(mutationId)
+  const { mutation: baseMutation } = useMutation(mutationId, preferredSource ?? undefined) // ToDo: fix
+  const { mutations, isLoading } = useMutations(null) // ToDo: need context?
+
+  const localMutations = useMemo(
+    () => mutations.filter((m) => m.source === EntitySourceType.Local),
+    [mutations]
+  )
+
+  if (isLoading) {
+    // ToDo: loader
+    return null
+  }
+
+  return (
+    <MutationEditorModal
+      apps={applications}
+      baseMutation={baseMutation}
+      localMutations={localMutations}
+      loggedInAccountId={loggedInAccountId}
+      onClose={() => navigate(-1)}
+    />
+  )
+}
+
+export default EditMutation