From 49fcfb7969b63465e7727b0bd241057fcb3af5bf Mon Sep 17 00:00:00 2001
From: Philipp Giese <giese.philipp+git@gmail.com>
Date: Wed, 18 Dec 2024 15:27:24 +0100
Subject: [PATCH] implement clear transactions route

---
 .../ClearTransactions.spec.ts                 | 42 +++++++++++++++++--
 .../ClearTransactions.tsx                     | 21 +++++++++-
 .../index.tsx                                 |  3 +-
 .../useClearTransactions.ts                   |  7 +---
 .../src/panel/pages/$activeRouteId/index.tsx  |  2 +-
 5 files changed, 64 insertions(+), 11 deletions(-)
 rename extension/src/panel/pages/{ => $activeRouteId/clear-transactions.$newActiveRouteId}/useClearTransactions.ts (74%)

diff --git a/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/ClearTransactions.spec.ts b/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/ClearTransactions.spec.ts
index ff07d8645..4c46e7883 100644
--- a/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/ClearTransactions.spec.ts
+++ b/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/ClearTransactions.spec.ts
@@ -1,9 +1,45 @@
-import { describe, it, vi } from 'vitest'
+import { expectRouteToBe, render } from '@/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { action, ClearTransactions } from './ClearTransactions'
 
-vi.mock('')
+const { mockClearTransactions } = vi.hoisted(() => ({
+  mockClearTransactions: vi.fn(),
+}))
+
+vi.mock('./useClearTransactions', () => ({
+  useClearTransactions: () => mockClearTransactions,
+}))
 
 describe('Clear transactions', () => {
+  beforeEach(() => {
+    mockClearTransactions.mockResolvedValue(undefined)
+  })
+
   it('clears all transactions', async () => {
-    throw new Error('Fail')
+    await render('/test-route/clear-transactions/new-route', [
+      {
+        path: '/:activeRouteId/clear-transactions/:newActiveRouteId',
+        Component: ClearTransactions,
+        action,
+      },
+    ])
+
+    expect(mockClearTransactions).toHaveBeenCalled()
+  })
+
+  it('redirects to the new active route', async () => {
+    await render(
+      '/test-route/clear-transactions/new-route',
+      [
+        {
+          path: '/:activeRouteId/clear-transactions/:newActiveRouteId',
+          Component: ClearTransactions,
+          action,
+        },
+      ],
+      { inspectRoutes: ['/:activeRouteId'] },
+    )
+
+    await expectRouteToBe('/new-route')
   })
 })
diff --git a/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/ClearTransactions.tsx b/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/ClearTransactions.tsx
index 4429198a2..159200a54 100644
--- a/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/ClearTransactions.tsx
+++ b/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/ClearTransactions.tsx
@@ -1 +1,20 @@
-export const ClearTransactions = () => null
+import { useEffect } from 'react'
+import { redirect, useSubmit, type ActionFunctionArgs } from 'react-router'
+import { useClearTransactions } from './useClearTransactions'
+
+export const action = async ({ params }: ActionFunctionArgs) => {
+  const { newActiveRouteId } = params
+
+  return redirect(`/${newActiveRouteId}`)
+}
+
+export const ClearTransactions = () => {
+  const clearTransactions = useClearTransactions()
+  const submit = useSubmit()
+
+  useEffect(() => {
+    clearTransactions().then(() => submit(null, { method: 'post' }))
+  }, [clearTransactions, submit])
+
+  return null
+}
diff --git a/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/index.tsx b/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/index.tsx
index c30060118..d63a02767 100644
--- a/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/index.tsx
+++ b/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/index.tsx
@@ -1,6 +1,7 @@
-import { ClearTransactions as Component } from './ClearTransactions'
+import { action, ClearTransactions as Component } from './ClearTransactions'
 
 export const ClearTransactions = {
   path: 'clear-transactions/:newActiveRouteId',
   element: <Component />,
+  action,
 }
diff --git a/extension/src/panel/pages/useClearTransactions.ts b/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/useClearTransactions.ts
similarity index 74%
rename from extension/src/panel/pages/useClearTransactions.ts
rename to extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/useClearTransactions.ts
index 99511471b..e1bf2e23a 100644
--- a/extension/src/panel/pages/useClearTransactions.ts
+++ b/extension/src/panel/pages/$activeRouteId/clear-transactions.$newActiveRouteId/useClearTransactions.ts
@@ -8,8 +8,7 @@ export const useClearTransactions = () => {
   const provider = useProvider()
   const dispatch = useDispatch()
 
-  const hasTransactions = transactions.length > 0
-  const clearTransactions = useCallback(async () => {
+  return useCallback(async () => {
     if (transactions.length === 0) {
       return
     }
@@ -22,7 +21,5 @@ export const useClearTransactions = () => {
     if (provider instanceof ForkProvider) {
       await provider.deleteFork()
     }
-  }, [provider, transactions, dispatch])
-
-  return { hasTransactions, clearTransactions }
+  }, [dispatch, transactions, provider])
 }
diff --git a/extension/src/panel/pages/$activeRouteId/index.tsx b/extension/src/panel/pages/$activeRouteId/index.tsx
index 22cf9c6fa..b29babf00 100644
--- a/extension/src/panel/pages/$activeRouteId/index.tsx
+++ b/extension/src/panel/pages/$activeRouteId/index.tsx
@@ -8,7 +8,7 @@ export const ActiveRoute: RouteObject = {
   element: <Component />,
   loader,
   children: [
-    { path: '', loader: () => redirect('transactions') },
+    { index: true, loader: () => redirect('transactions') },
     Transactions,
     ClearTransactions,
   ],