onSuccess/onError handlers

src/views/Generator/Generator.hooks.ts

@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import invariant from 'tiny-invariant'
 
 import { useToast } from '@/store/ui/useToast'
@@ -7,8 +7,8 @@ import { GeneratorFileData } from '@/types/generator'
 import { useMutation, useQuery } from '@tanstack/react-query'
 import { queryClient } from '@/utils/query'
 import log from 'electron-log/renderer'
-import { getRoutePath } from '@/routeMap'
 import { harToProxyData } from '@/utils/harToProxyData'
+import { ProxyData } from '@/types'
 
 export function useGeneratorParams() {
   const { fileName } = useParams()
@@ -19,10 +19,15 @@ export function useGeneratorParams() {
   }
 }
 
-export function useRecordingFile(fileName?: string) {
-  const showToast = useToast()
-  const setRecording = useGeneratorStore((store) => store.setRecording)
-
+export function useRecordingFile({
+  fileName,
+  onSuccess,
+  onError,
+}: {
+  fileName?: string
+  onSuccess?: (recording: ProxyData[]) => void
+  onError?: (error: unknown) => void
+}) {
   return useQuery({
     queryKey: ['har', fileName],
     enabled: !!fileName,
@@ -32,40 +37,41 @@ export function useRecordingFile(fileName?: string) {
         if (!fileName) return []
         const har = await window.studio.har.openFile(fileName)
         const recording = harToProxyData(har)
-        setRecording(recording)
+        onSuccess?.(recording)
+
         return recording
       } catch (error) {
-        showToast({
-          title: 'Failed to load recording',
-          status: 'error',
-          description: 'Select another recording in the sidebar',
-        })
+        onError?.(error)
         log.error(error)
+
         throw error
       }
     },
   })
 }
 
-export function useGeneratorFile(fileName: string) {
-  const showToast = useToast()
-  const navigate = useNavigate()
-  const setGenerator = useGeneratorStore((store) => store.setGenerator)
-
+export function useGeneratorFile({
+  fileName,
+  onSuccess,
+  onError,
+}: {
+  fileName: string
+  onSuccess?: (generator: GeneratorFileData) => void
+  onError?: (error: unknown) => void
+}) {
   return useQuery({
     queryKey: ['generator', fileName],
     queryFn: async () => {
       try {
         const generator = await window.studio.generator.loadGenerator(fileName)
-        setGenerator(generator)
+        onSuccess?.(generator)
+
         return generator
       } catch (error) {
-        showToast({
-          title: 'Failed to load generator',
-          status: 'error',
-        })
         log.error(error)
-        navigate(getRoutePath('home'), { replace: true })
+        onError?.(error)
+
+        throw error
       }
     },
   })
@@ -114,7 +120,7 @@ export function useSaveGeneratorFile(fileName: string) {
 
 export function useIsGeneratorDirty(fileName: string) {
   const generatorState = useGeneratorStore(selectGeneratorData)
-  const { data } = useGeneratorFile(fileName)
+  const { data } = useGeneratorFile({ fileName })
 
   // Comparing data without `scriptName`, which is saved to disk in the background
   // and should not be considered as a change

src/views/Generator/Generator.tsx

@@ -1,6 +1,6 @@
 import { Allotment } from 'allotment'
 import { useEffect, useState } from 'react'
-import { useBlocker } from 'react-router-dom'
+import { useBlocker, useNavigate } from 'react-router-dom'
 import { Box, ScrollArea } from '@radix-ui/themes'
 
 import {
@@ -21,13 +21,28 @@ import { GeneratorControls } from './GeneratorControls'
 import { UnsavedChangesDialog } from './UnsavedChangesDialog'
 import { RuleEditor } from './RuleEditor'
 import { getFileNameWithoutExtension } from '@/utils/file'
+import { useToast } from '@/store/ui/useToast'
+import { getRoutePath } from '@/routeMap'
 
 export function Generator() {
   const selectedRule = useGeneratorStore(selectSelectedRule)
+  const setGenerator = useGeneratorStore((store) => store.setGenerator)
+  const showToast = useToast()
+  const navigate = useNavigate()
 
   const { fileName } = useGeneratorParams()
 
-  const { isLoading } = useGeneratorFile(fileName)
+  const { isLoading } = useGeneratorFile({
+    fileName,
+    onSuccess: setGenerator,
+    onError: () => {
+      showToast({
+        title: 'Failed to load generator',
+        status: 'error',
+      })
+      navigate(getRoutePath('home'), { replace: true })
+    },
+  })
 
   const { mutateAsync: saveGenerator } = useSaveGeneratorFile(fileName)
 

src/views/Generator/RecordingSelector.tsx

@@ -8,15 +8,35 @@ import { getFileNameWithoutExtension } from '@/utils/file'
 import { useToast } from '@/store/ui/useToast'
 import log from 'electron-log/renderer'
 import { useRecordingFile } from './Generator.hooks'
+import { useEffect } from 'react'
 
 export function RecordingSelector() {
   const recordings = useStudioUIStore((store) => [...store.recordings.values()])
   const recordingPath = useGeneratorStore((store) => store.recordingPath)
 
   const setRecordingPath = useGeneratorStore((store) => store.setRecordingPath)
+  const setRecording = useGeneratorStore((store) => store.setRecording)
   const showToast = useToast()
 
-  useRecordingFile(recordingPath)
+  const { data } = useRecordingFile({
+    fileName: recordingPath,
+    onSuccess: (recording) => {
+      setRecording(recording)
+    },
+    onError: () => {
+      showToast({
+        title: 'Failed to load recording',
+        description: 'Select another recording in the sidebar.',
+        status: 'error',
+      })
+    },
+  })
+
+  useEffect(() => {
+    if (data) {
+      setRecording(data)
+    }
+  }, [data, setRecording])
 
   const selectedRecording = recordings.find(
     (recording) => recording.fileName === recordingPath

src/views/RecordingPreviewer/RecordingPreviewer.tsx

@@ -15,11 +15,13 @@ import { useProxyDataGroups } from '@/hooks/useProxyDataGroups'
 import { EmptyMessage } from '@/components/EmptyMessage'
 import { useCreateGenerator } from '@/hooks/useCreateGenerator'
 import { useRecordingFile } from '../Generator/Generator.hooks'
+import { useToast } from '@/store/ui/useToast'
 
 export function RecordingPreviewer() {
   const [selectedRequest, setSelectedRequest] = useState<ProxyData | null>(null)
   const { fileName } = useParams()
   const navigate = useNavigate()
+  const showToast = useToast()
   const createTestGenerator = useCreateGenerator()
   // TODO: https://github.com/grafana/k6-studio/issues/277
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -29,7 +31,16 @@ export function RecordingPreviewer() {
   const isDiscardable = Boolean(state?.discardable)
   invariant(fileName, 'fileName is required')
 
-  const { data: proxyData = [], isLoading } = useRecordingFile(fileName)
+  const { data: proxyData = [], isLoading } = useRecordingFile({
+    fileName,
+    onError: () => {
+      showToast({
+        status: 'error',
+        title: 'Failed to load recording',
+      })
+      navigate(getRoutePath('home'), { replace: true })
+    },
+  })
 
   const groups = useProxyDataGroups(proxyData ?? [])