Fix broken create batch modal button from blank slate

latitude-dev · Oct 1, 2024 · 8fdf13a · 8fdf13a
1 parent 7e73cca
commit 8fdf13a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 27 deletions.
diff --git a/...itUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/Actions/index.tsx b/...itUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/Actions/index.tsx
@@ -1,9 +1,8 @@
 'use client'
 
-import { useCallback, useState } from 'react'
-
 import { EvaluationDto } from '@latitude-data/core/browser'
 import { TableWithHeader, useCurrentDocument } from '@latitude-data/web-ui'
+import { useToggleModal } from '$/hooks/useToogleModal'
 
 import CreateBatchEvaluationModal from './CreateBatchEvaluationModal'
 import LiveEvaluationToggle from './LiveEvaluationToggle'
@@ -20,9 +19,7 @@ export function Actions({
   documentUuid: string
 }) {
   const document = useCurrentDocument()
-  const [open, setOpen] = useState(false)
-  const onClose = useCallback(() => setOpen(false), [])
-  const onOpen = useCallback(() => setOpen(true), [])
+  const { open, onClose, onOpen } = useToggleModal()
   return (
     <div className='flex flex-row items-center gap-4'>
       <LiveEvaluationToggle

diff --git a/...]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx b/...]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx
@@ -5,12 +5,7 @@ import {
   DocumentLogWithMetadata,
   EvaluationResultWithMetadata,
 } from '@latitude-data/core/repositories'
-import {
-  Button,
-  Icon,
-  Modal,
-  ReactStateDispatch,
-} from '@latitude-data/web-ui'
+import { Button, Icon, Modal, ReactStateDispatch } from '@latitude-data/web-ui'
 import useProviderLogs from '$/stores/providerLogs'
 import useSWR from 'swr'
 

diff --git a/...cuments/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx b/...cuments/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx
@@ -16,12 +16,12 @@ import {
   EventArgs,
   useSockets,
 } from '$/components/Providers/WebsocketsProvider/useSockets'
-import { DocumentRoutes, ROUTES } from '$/services/routes'
+import { useToggleModal } from '$/hooks/useToogleModal'
 import useEvaluationResultsWithMetadata from '$/stores/evaluationResultsWithMetadata'
 import { useProviderLog } from '$/stores/providerLogs'
-import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 
+import CreateBatchEvaluationModal from '../Actions/CreateBatchEvaluationModal'
 import { EvaluationResultInfo } from './EvaluationResultInfo'
 import { EvaluationResultsTable } from './EvaluationResultsTable'
 import { EvaluationStatusBanner } from './EvaluationStatusBanner'
@@ -41,6 +41,7 @@ export function EvaluationResults({
   const [selectedResult, setSelectedResult] = useState<
     EvaluationResultWithMetadata | undefined
   >(undefined)
+  const { open, onClose, onOpen } = useToggleModal()
   const { data: providerLog } = useProviderLog(selectedResult?.providerLogId)
   const searchParams = useSearchParams()
   const page = searchParams.get('page')
@@ -89,20 +90,9 @@ export function EvaluationResults({
             <TableBlankSlate
               description='There are no evaluation results yet. Run the evaluation or, if you already have, wait a few seconds for the first results to stream in.'
               link={
-                <Link
-                  href={
-                    ROUTES.projects
-                      .detail({ id: project.id })
-                      .commits.detail({ uuid: commit.uuid })
-                      .documents.detail({ uuid: document.documentUuid })
-                      [DocumentRoutes.evaluations].detail(evaluation.id)
-                      .createBatch
-                  }
-                >
-                  <TableBlankSlate.Button>
-                    Run the evaluation
-                  </TableBlankSlate.Button>
-                </Link>
+                <TableBlankSlate.Button onClick={onOpen}>
+                  Run the evaluation
+                </TableBlankSlate.Button>
               }
             />
           )}
@@ -127,6 +117,14 @@ export function EvaluationResults({
           </div>
         )}
       </div>
+      <CreateBatchEvaluationModal
+        open={open}
+        onClose={onClose}
+        document={document}
+        evaluation={evaluation}
+        projectId={project.id.toString()}
+        commitUuid={commit.uuid}
+      />
     </div>
   )
 }
diff --git a/apps/web/src/hooks/useToogleModal.ts b/apps/web/src/hooks/useToogleModal.ts
@@ -0,0 +1,11 @@
+import { useCallback, useState } from 'react'
+
+export function useToggleModal({
+  initialState = false,
+}: { initialState?: boolean } = {}) {
+  const [open, setOpen] = useState(initialState)
+  const onClose = useCallback(() => setOpen(false), [])
+  const onOpen = useCallback(() => setOpen(true), [])
+
+  return { open, onClose, onOpen }
+}