From f06344ff8d16cda08c745a65753c20d5566091a6 Mon Sep 17 00:00:00 2001
From: DimaAmega <dima.amega1@gmail.com>
Date: Thu, 26 Dec 2024 01:09:37 +0400
Subject: [PATCH] wip: better `useFetcher`

---
 .../src/router-utils/components/link.tsx      | 43 +++++++++++++++---
 .../src/router-utils/fetchers.tsx             | 40 ++++++++++-------
 .../src/router-utils/hooks.tsx                | 11 ++++-
 .../src/router-utils/types.ts                 | 12 ++++-
 ui/service/src/routes/components.tsx          | 44 +++----------------
 ui/service/src/routes/hooks.tsx               |  4 ++
 .../src/routes/src/project/project-main.tsx   |  1 +
 .../routes/src/projects-list/components.tsx   | 26 +++++------
 .../src/reports-list/reports-list-main.tsx    | 19 ++++----
 .../test-suites-list-main.tsx                 | 14 +++---
 ui/service/src/routes/types.tsx               |  2 +
 ui/service/vite.config.ts                     |  2 +-
 12 files changed, 122 insertions(+), 96 deletions(-)
 create mode 100644 ui/service/src/routes/hooks.tsx

diff --git a/ui/packages/evidently-ui-lib/src/router-utils/components/link.tsx b/ui/packages/evidently-ui-lib/src/router-utils/components/link.tsx
index 9c6d02ad92..bda5d07df6 100644
--- a/ui/packages/evidently-ui-lib/src/router-utils/components/link.tsx
+++ b/ui/packages/evidently-ui-lib/src/router-utils/components/link.tsx
@@ -8,6 +8,8 @@ import {
   type TypographyProps
 } from '@mui/material'
 import { Link as ReactRouterLink } from 'react-router-dom'
+import type { GetParams, MatchAny } from 'router-utils/types'
+import { replaceParamsInLink } from 'router-utils/utils'
 
 export type RouterLinkTemplateComponentProps =
   | ({
@@ -20,7 +22,7 @@ export type RouterLinkTemplateComponentProps =
       type: 'tab'
     } & RLT)
 
-export const RouterLinkTemplate = (props: RouterLinkTemplateComponentProps) => {
+const RouterLinkTemplate = (props: RouterLinkTemplateComponentProps) => {
   return props.type === 'button' ? (
     <RLBComponent {...props} />
   ) : props.type === 'tab' ? (
@@ -30,12 +32,12 @@ export const RouterLinkTemplate = (props: RouterLinkTemplateComponentProps) => {
   )
 }
 
-export type RLB = {
+type RLB = {
   to: string
   title?: string
 } & ButtonProps
 
-export const RLBComponent = ({ to, title, ...buttonProps }: RLB) => {
+const RLBComponent = ({ to, title, ...buttonProps }: RLB) => {
   return (
     <Button component={ReactRouterLink} to={to} {...buttonProps}>
       {title}
@@ -43,13 +45,13 @@ export const RLBComponent = ({ to, title, ...buttonProps }: RLB) => {
   )
 }
 
-export type RLL = {
+type RLL = {
   children?: React.ReactNode
   to: string
   title?: string
 } & TypographyProps
 
-export const RLLComponent = ({ children, to, title, ...typographyProps }: RLL) => {
+const RLLComponent = ({ children, to, title, ...typographyProps }: RLL) => {
   return (
     <Link component={ReactRouterLink} to={to}>
       <>
@@ -60,10 +62,37 @@ export const RLLComponent = ({ children, to, title, ...typographyProps }: RLL) =
   )
 }
 
-export type RLT = {
+type RLT = {
   to: string
 } & TabProps
 
-export const RLTComponent = ({ to, ...tabProps }: RLT) => {
+const RLTComponent = ({ to, ...tabProps }: RLT) => {
   return <Tab component={ReactRouterLink} to={to} {...tabProps} />
 }
+
+export const CreateRouterLinkComponent = <M extends MatchAny>() => {
+  const Component = <K extends M['path']>({
+    to,
+    paramsToReplace,
+    query,
+    ...props
+  }: RouterLinkTemplateComponentProps & {
+    to: K
+    paramsToReplace: GetParams<K>
+    query?: Extract<M, { path: K }>['loader']['query']
+  }) => {
+    const searchParams =
+      query &&
+      new URLSearchParams(
+        Object.fromEntries(Object.entries(query).filter(([_, v]) => v)) as Record<string, string>
+      )
+
+    const toActual = [replaceParamsInLink(paramsToReplace, to), searchParams]
+      .filter(Boolean)
+      .join('?')
+
+    return <RouterLinkTemplate {...props} to={toActual} />
+  }
+
+  return Component
+}
diff --git a/ui/packages/evidently-ui-lib/src/router-utils/fetchers.tsx b/ui/packages/evidently-ui-lib/src/router-utils/fetchers.tsx
index 6dbd2762dd..cc5b2249ce 100644
--- a/ui/packages/evidently-ui-lib/src/router-utils/fetchers.tsx
+++ b/ui/packages/evidently-ui-lib/src/router-utils/fetchers.tsx
@@ -1,25 +1,24 @@
 import { useCallback, useMemo } from 'react'
-import type { GetParams, MatchWithAction } from '~/router-utils/types'
+import type { GetParams, MatchAny, MatchWithAction } from '~/router-utils/types'
 import { useFetcher } from '~/shared-dependencies/react-router-dom'
 import { REST_PARAMS_FOR_FETCHER_SUBMIT } from '~/utils/index'
 import { replaceParamsInLink } from './utils'
 
 export const useSubmitFetcherGeneral = <M extends MatchWithAction, K extends keyof M['action']>({
-  actionPath,
-  action
+  action,
+  path,
+  provideParams
 }: {
   action: K
-  actionPath: ({ data }: { data: M['action'][K]['requestData'] }) => {
-    path: M['path']
-    params: GetParams<M['path']>
-  }
+  path: M['path']
+  provideParams: ({ data }: { data: M['action'][K]['requestData'] }) => GetParams<M['path']>
 }) => {
   const originalFetcher = useFetcher<M['action'][K]['returnType']>()
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: fine
   const submit = useCallback(
     (data: M['action'][K]['requestData']) => {
-      const { params, path } = actionPath({ data })
+      const params = provideParams({ data })
 
       originalFetcher.submit(
         // @ts-ignore
@@ -30,7 +29,7 @@ export const useSubmitFetcherGeneral = <M extends MatchWithAction, K extends key
         }
       )
     },
-    [originalFetcher]
+    [originalFetcher, path]
   )
 
   const fetcher = useMemo(
@@ -42,14 +41,21 @@ export const useSubmitFetcherGeneral = <M extends MatchWithAction, K extends key
 }
 
 // Helper function to infer K
-export const createUseSubmitFetcherGeneral = <M extends MatchWithAction>() => {
-  const hook = <K extends keyof M['action']>(args: {
-    action: K
-    actionPath: ({ data }: { data: M['action'][K]['requestData'] }) => {
-      path: M['path']
-      params: GetParams<M['path']>
-    }
-  }) => useSubmitFetcherGeneral<M, K>(args)
+export const createUseSubmitFetcherGeneral = <M extends MatchAny>() => {
+  type MatchesWithAction = Extract<M, MatchWithAction>
+
+  const hook = <
+    Path extends MatchesWithAction['path'],
+    ActionName extends keyof Extract<MatchesWithAction, { path: Path }>['action']
+  >(args: {
+    action: ActionName
+    path: Path
+    provideParams: ({
+      data
+    }: {
+      data: Extract<MatchesWithAction, { path: Path }>['action'][ActionName]['requestData']
+    }) => GetParams<Extract<MatchesWithAction, { path: Path }>['path']>
+  }) => useSubmitFetcherGeneral<Extract<MatchesWithAction, { path: Path }>, ActionName>(args)
 
   return hook
 }
diff --git a/ui/packages/evidently-ui-lib/src/router-utils/hooks.tsx b/ui/packages/evidently-ui-lib/src/router-utils/hooks.tsx
index 6c57dc53cd..1c53816e75 100644
--- a/ui/packages/evidently-ui-lib/src/router-utils/hooks.tsx
+++ b/ui/packages/evidently-ui-lib/src/router-utils/hooks.tsx
@@ -3,13 +3,14 @@ import {
   type NavigateOptions,
   useFetchers,
   useLoaderData,
+  useMatch,
   useMatches,
   useNavigation,
   useParams,
   useRevalidator,
   useSearchParams
 } from 'react-router-dom'
-import type { MatchWithLoader } from '~/router-utils/types'
+import type { MatchAny, MatchWithLoader } from '~/router-utils/types'
 import type { CrumbDefinition, HandleWithCrumb } from '~/router-utils/utils'
 
 export const useCurrentRouteParams = <
@@ -121,3 +122,11 @@ export const useCrumbsFromHandle = () => {
 
   return { crumbs }
 }
+
+export const createUseMatchRouter = <M extends MatchAny>() => {
+  const hook = <K extends M['path']>({ path }: { path: K }) => {
+    return Boolean(useMatch({ path, end: false }))
+  }
+
+  return hook
+}
diff --git a/ui/packages/evidently-ui-lib/src/router-utils/types.ts b/ui/packages/evidently-ui-lib/src/router-utils/types.ts
index 07582a75a8..d2417b929b 100644
--- a/ui/packages/evidently-ui-lib/src/router-utils/types.ts
+++ b/ui/packages/evidently-ui-lib/src/router-utils/types.ts
@@ -60,8 +60,8 @@ type ExtractAction<T extends RouteExtended> = T['actions'] extends Record<
     T['lazy'] extends (args: any) => Promise<infer R>
     ? R extends RouteExtended
       ? ExtractAction<R>
-      : ProvideActionInfo<undefined, undefined>
-    : ProvideActionInfo<undefined, undefined>
+      : undefined
+    : undefined
 
 type IsIndex<T extends RouteExtended> = T['index'] extends true
   ? true
@@ -130,6 +130,14 @@ export type Match<Path extends string, L, A> = {
   params: { [Z in ExtractParams<Path>]: string }
 }
 
+export type MatchAny = Match<
+  string,
+  // biome-ignore lint/suspicious/noExplicitAny: fine
+  ProvideLoaderInfo<Partial<Record<string, string>>, any>,
+  // biome-ignore lint/suspicious/noExplicitAny: fine
+  Record<string, ProvideActionInfo<any, any>> | undefined
+>
+
 export type MatchWithAction = Match<
   string,
   // biome-ignore lint/suspicious/noExplicitAny: fine
diff --git a/ui/service/src/routes/components.tsx b/ui/service/src/routes/components.tsx
index 44249e45b8..1494671123 100644
--- a/ui/service/src/routes/components.tsx
+++ b/ui/service/src/routes/components.tsx
@@ -1,41 +1,7 @@
-import {
-  RouterLinkTemplate,
-  type RouterLinkTemplateComponentProps
-} from 'evidently-ui-lib/router-utils/components/link'
+import { CreateRouterLinkComponent } from 'evidently-ui-lib/router-utils/components/link'
+import { createUseMatchRouter } from 'evidently-ui-lib/router-utils/hooks'
+import type { Routes } from 'routes/types'
 
-import type { GetParams } from 'evidently-ui-lib/router-utils/types'
-import { useMatch } from 'evidently-ui-lib/shared-dependencies/react-router-dom'
-import type { GetRouteByPath, Routes } from './types'
+export const RouterLink = CreateRouterLinkComponent<Routes>()
 
-import { replaceParamsInLink } from 'evidently-ui-lib/router-utils/utils'
-
-type Paths = Routes['path']
-
-type RouterLinkProps<K extends Paths> = RouterLinkTemplateComponentProps & {
-  to: K
-  paramsToReplace: GetParams<K>
-  query?: GetRouteByPath<K>['loader']['query']
-}
-
-export const RouterLink = <K extends Paths>({
-  to,
-  paramsToReplace,
-  query,
-  ...props
-}: RouterLinkProps<K>) => {
-  const searchParams =
-    query &&
-    new URLSearchParams(
-      Object.fromEntries(Object.entries(query).filter(([_, v]) => v)) as Record<string, string>
-    )
-
-  const toActual = [replaceParamsInLink(paramsToReplace, to), searchParams]
-    .filter(Boolean)
-    .join('?')
-
-  return <RouterLinkTemplate {...props} to={toActual} />
-}
-
-export const useMatchRouter = <K extends Paths>({ path }: { path: K }) => {
-  return Boolean(useMatch({ path, end: false }))
-}
+export const useMatchRouter = createUseMatchRouter<Routes>()
diff --git a/ui/service/src/routes/hooks.tsx b/ui/service/src/routes/hooks.tsx
new file mode 100644
index 0000000000..928114ffc0
--- /dev/null
+++ b/ui/service/src/routes/hooks.tsx
@@ -0,0 +1,4 @@
+import { createUseSubmitFetcherGeneral } from 'evidently-ui-lib/router-utils/fetchers'
+import type { Routes } from 'routes/types'
+
+export const useSubmitFetcher = createUseSubmitFetcherGeneral<Routes>()
diff --git a/ui/service/src/routes/src/project/project-main.tsx b/ui/service/src/routes/src/project/project-main.tsx
index fcff5d0081..ea91a43b25 100644
--- a/ui/service/src/routes/src/project/project-main.tsx
+++ b/ui/service/src/routes/src/project/project-main.tsx
@@ -52,6 +52,7 @@ const TABS = {
 
 export const Component = () => {
   const { loaderData: project, params } = useCurrentRouteParams<CurrentRoute>()
+
   const isReports = useMatchRouter({ path: '/:projectId/reports' })
   const isTestSuites = useMatchRouter({ path: '/:projectId/test-suites' })
 
diff --git a/ui/service/src/routes/src/projects-list/components.tsx b/ui/service/src/routes/src/projects-list/components.tsx
index 3b64eef08c..2ce006c4a6 100644
--- a/ui/service/src/routes/src/projects-list/components.tsx
+++ b/ui/service/src/routes/src/projects-list/components.tsx
@@ -3,19 +3,17 @@ import type { StrictID } from 'evidently-ui-lib/api/types/utils'
 import { AddNewProjectButton, ProjectCard } from 'evidently-ui-lib/components/ProjectCard'
 import { useState } from 'react'
 
-import { createUseSubmitFetcherGeneral } from 'evidently-ui-lib/router-utils/fetchers'
 import { useOnSubmitEnd } from 'evidently-ui-lib/router-utils/hooks'
 import { RouterLink } from '~/routes/components'
-import type { CurrentRoute } from './projects-list-main'
-
-const useFetcher = createUseSubmitFetcherGeneral<CurrentRoute>()
+import { useSubmitFetcher } from '~/routes/hooks'
 
 export const ProjectCardWrapper = ({ project }: { project: StrictID<ProjectModel> }) => {
   const [mode, setMode] = useState<'edit' | 'view'>('view')
 
-  const deleteProjectFetcher = useFetcher({
-    actionPath: () => ({ path: '/?index', params: {} }),
-    action: 'delete-project'
+  const deleteProjectFetcher = useSubmitFetcher({
+    path: '/?index',
+    action: 'delete-project',
+    provideParams: () => ({})
   })
 
   useOnSubmitEnd({
@@ -27,9 +25,10 @@ export const ProjectCardWrapper = ({ project }: { project: StrictID<ProjectModel
     }
   })
 
-  const editProjectFetcher = useFetcher({
-    actionPath: () => ({ path: '/?index', params: {} }),
-    action: 'edit-project'
+  const editProjectFetcher = useSubmitFetcher({
+    path: '/?index',
+    action: 'edit-project',
+    provideParams: () => ({})
   })
 
   useOnSubmitEnd({
@@ -67,9 +66,10 @@ const LinkToProject = ({ name, projectId }: { name: string; projectId: string })
 )
 
 export const AddNewProjectWrapper = () => {
-  const createProjectFetcher = useFetcher({
-    actionPath: () => ({ path: '/?index', params: {} }),
-    action: 'create-project'
+  const createProjectFetcher = useSubmitFetcher({
+    path: '/?index',
+    action: 'create-project',
+    provideParams: () => ({})
   })
 
   const [opened, setOpened] = useState<boolean>(false)
diff --git a/ui/service/src/routes/src/reports-list/reports-list-main.tsx b/ui/service/src/routes/src/reports-list/reports-list-main.tsx
index fc4578312b..be712219f2 100644
--- a/ui/service/src/routes/src/reports-list/reports-list-main.tsx
+++ b/ui/service/src/routes/src/reports-list/reports-list-main.tsx
@@ -4,7 +4,6 @@ import type { GetRouteByPath } from '~/routes/types'
 
 import { clientAPI } from '~/api'
 
-import { createUseSubmitFetcherGeneral } from 'evidently-ui-lib/router-utils/fetchers'
 import {
   useCurrentRouteParams,
   useIsAnyLoaderOrActionRunning
@@ -12,6 +11,7 @@ import {
 import { SnapshotsListTemplate } from 'evidently-ui-lib/routes-components/snapshots'
 import { getReports, getSnapshotsActions } from 'evidently-ui-lib/routes-components/snapshots/data'
 import { RouterLink } from '~/routes/components'
+import { useSubmitFetcher } from '~/routes/hooks'
 
 ///////////////////
 //    ROUTE
@@ -31,21 +31,22 @@ export const loadData = ({ params }: loadDataArgs) => {
 
 export const actions = getSnapshotsActions({ api: clientAPI })
 
-const useFetcher = createUseSubmitFetcherGeneral<CurrentRoute>()
-
+// type OOO = GetRouteByPath<'/:projectId/reports/:snapshotId'>['']
 export const Component = () => {
   const { loaderData: reports, params } = useCurrentRouteParams<CurrentRoute>()
 
   const { projectId } = params
 
-  const deleteSnapshotFetcher = useFetcher({
-    actionPath: () => ({ path: '/:projectId/reports/?index', params: { projectId } }),
-    action: 'delete-snapshot'
+  const deleteSnapshotFetcher = useSubmitFetcher({
+    path: '/:projectId/reports/?index',
+    action: 'delete-snapshot',
+    provideParams: () => ({ projectId })
   })
 
-  const reloadSnapshotsFetcher = useFetcher({
-    actionPath: () => ({ path: '/:projectId/reports/?index', params: { projectId } }),
-    action: 'reload-snapshots'
+  const reloadSnapshotsFetcher = useSubmitFetcher({
+    path: '/:projectId/reports/?index',
+    action: 'reload-snapshots',
+    provideParams: () => ({ projectId })
   })
 
   const disabled = useIsAnyLoaderOrActionRunning()
diff --git a/ui/service/src/routes/src/test-suites-list/test-suites-list-main.tsx b/ui/service/src/routes/src/test-suites-list/test-suites-list-main.tsx
index 275537d94c..71962478fd 100644
--- a/ui/service/src/routes/src/test-suites-list/test-suites-list-main.tsx
+++ b/ui/service/src/routes/src/test-suites-list/test-suites-list-main.tsx
@@ -4,7 +4,6 @@ import type { GetRouteByPath } from '~/routes/types'
 
 import { clientAPI } from '~/api'
 
-import { createUseSubmitFetcherGeneral } from 'evidently-ui-lib/router-utils/fetchers'
 import {
   useCurrentRouteParams,
   useIsAnyLoaderOrActionRunning
@@ -15,6 +14,7 @@ import {
   getTestSuites
 } from 'evidently-ui-lib/routes-components/snapshots/data'
 import { RouterLink } from '~/routes/components'
+import { useSubmitFetcher } from '~/routes/hooks'
 
 ///////////////////
 //    ROUTE
@@ -33,21 +33,21 @@ export const loadData = ({ params }: loadDataArgs) => {
 
 export const actions = getSnapshotsActions({ api: clientAPI })
 
-const useFetcher = createUseSubmitFetcherGeneral<CurrentRoute>()
-
 export const Component = () => {
   const { loaderData: reports, params } = useCurrentRouteParams<CurrentRoute>()
 
   const { projectId } = params
 
-  const deleteSnapshotFetcher = useFetcher({
+  const deleteSnapshotFetcher = useSubmitFetcher({
+    path: '/:projectId/test-suites/?index',
     action: 'delete-snapshot',
-    actionPath: () => ({ path: '/:projectId/test-suites/?index', params: { projectId } })
+    provideParams: () => ({ projectId })
   })
 
-  const reloadSnapshotsFetcher = useFetcher({
+  const reloadSnapshotsFetcher = useSubmitFetcher({
+    path: '/:projectId/test-suites/?index',
     action: 'reload-snapshots',
-    actionPath: () => ({ path: '/:projectId/test-suites/?index', params: { projectId } })
+    provideParams: () => ({ projectId })
   })
 
   const disabled = useIsAnyLoaderOrActionRunning()
diff --git a/ui/service/src/routes/types.tsx b/ui/service/src/routes/types.tsx
index 94e57abd2a..2e17b00b5d 100644
--- a/ui/service/src/routes/types.tsx
+++ b/ui/service/src/routes/types.tsx
@@ -10,6 +10,8 @@ import type { routes } from '~/routes/routes'
 
 export type Routes = GetMatches<typeof routes>
 
+export type Paths = Routes['path']
+
 export type GetRouteByPath<K extends Routes['path']> = Extract<Routes, { path: K }>
 
 export type __TESTS_ROUTE_STRUCTURE = Expect<ExpectEqActuall<GetRouteStructure<typeof routes>>>
diff --git a/ui/service/vite.config.ts b/ui/service/vite.config.ts
index a22b9882a7..df792a2904 100644
--- a/ui/service/vite.config.ts
+++ b/ui/service/vite.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
   server: {
     port: 3000,
     proxy: {
-      '/api': 'https://demo.evidentlyai.com'
+      '/api': 'http://127.0.0.1:8000'
     }
   },
   build: {