From 798a433029210b79aa45dea31701f2d0a52eb30b Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Mon, 16 Jan 2023 14:42:12 +0900
Subject: [PATCH] Avoid to call useState in collapseBody

---
 optuna_dashboard/ts/action.ts                 |  2 +-
 optuna_dashboard/ts/apiClient.ts              |  2 +-
 optuna_dashboard/ts/components/TrialTable.tsx | 34 +++++++------------
 optuna_dashboard/ts/types/index.d.ts          |  1 +
 4 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/optuna_dashboard/ts/action.ts b/optuna_dashboard/ts/action.ts
index 75ce6be4..72154514 100644
--- a/optuna_dashboard/ts/action.ts
+++ b/optuna_dashboard/ts/action.ts
@@ -288,7 +288,7 @@ export const actionCreator = () => {
   const tellTrial = (
     studyId: number,
     trialId: number,
-    state: TrialState,
+    state: TrialStateFinished,
     values?: string[]
   ): Promise<void> => {
     const message =
diff --git a/optuna_dashboard/ts/apiClient.ts b/optuna_dashboard/ts/apiClient.ts
index f3f0a907..58215826 100644
--- a/optuna_dashboard/ts/apiClient.ts
+++ b/optuna_dashboard/ts/apiClient.ts
@@ -220,7 +220,7 @@ export const saveTrialNoteAPI = (
 export const tellTrialAPI = (
   studyId: number,
   trialId: number,
-  state: TrialState,
+  state: TrialStateFinished,
   values?: string[]
 ): Promise<void> => {
   const req: { state: TrialState; values?: string[] } = {
diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx
index 673250c9..43973e79 100644
--- a/optuna_dashboard/ts/components/TrialTable.tsx
+++ b/optuna_dashboard/ts/components/TrialTable.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FC, FormEvent, MouseEvent, useState } from "react"
+import React, {ChangeEvent, createRef, FC, FormEvent, MouseEvent, useState} from "react"
 import {
   Typography,
   Grid,
@@ -274,33 +274,28 @@ export const TrialTable: FC<{
   ]
 
   const collapseBody = (index: number) => {
-    const objectiveValuesLength = studyDetail?.directions.length
-    const [objectiveValues, setObjectiveValues] = useState(
-      Array(objectiveValuesLength).fill("")
-    )
+    const objectiveFormRefs = studyDetail?.directions.map(d => createRef<HTMLInputElement>())
     const handleSubmit = (e: FormEvent<HTMLFormElement>): void => {
+      if (objectiveFormRefs === undefined) {
+        return
+      }
+
       e.preventDefault()
       const studyId = (studyDetail as StudyDetail).id
       const trialId = trials[index].number
+      const objectiveValues = objectiveFormRefs.map(ref => ref.current ? ref.current.value : "")
+      console.dir(objectiveValues)
       action.tellTrial(
         studyId,
         trialId,
-        "Complete" as TrialState,
+        "Complete",
         objectiveValues
       )
     }
-    const handleChangeValue = (
-      index: number,
-      e: ChangeEvent<HTMLInputElement>
-    ): void => {
-      const newValues = [...objectiveValues]
-      newValues[index] = e.target.value
-      setObjectiveValues(newValues)
-    }
     const handleFailTrial = (e: MouseEvent<HTMLButtonElement>): void => {
       const studyId = (studyDetail as StudyDetail).id
       const trialId = trials[index].number
-      action.tellTrial(studyId, trialId, "Fail" as TrialState)
+      action.tellTrial(studyId, trialId, "Fail")
     }
 
     return (
@@ -333,7 +328,7 @@ export const TrialTable: FC<{
             />
           </Box>
         </Grid>
-        {trials[index].state === ("Running" as TrialState) ? (
+        {trials[index].state === "Running" ? (
           <Grid item xs={12}>
             <Box margin={1}>
               <Typography variant="h6" gutterBottom component="div">
@@ -342,16 +337,13 @@ export const TrialTable: FC<{
               <form onSubmit={handleSubmit}>
                 <Box margin={1}>
                   <Stack direction="row" spacing={1}>
-                    {objectiveValues.map((value, i) => (
+                    {objectiveFormRefs !== undefined && objectiveFormRefs.map((ref, i) => (
                       <TextField
                         id={`objective-${i}`}
                         key={`objective-${i}`}
                         label={`Objective ${i}`}
                         type="number"
-                        value={objectiveValues[i]}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                          handleChangeValue(i, e)
-                        }
+                        inputRef={ref}
                       />
                     ))}
                   </Stack>
diff --git a/optuna_dashboard/ts/types/index.d.ts b/optuna_dashboard/ts/types/index.d.ts
index c58928cd..e8c64c54 100644
--- a/optuna_dashboard/ts/types/index.d.ts
+++ b/optuna_dashboard/ts/types/index.d.ts
@@ -10,6 +10,7 @@ declare const URL_PREFIX: string
 type TrialValueNumber = number | "inf" | "-inf"
 type TrialIntermediateValueNumber = number | "inf" | "-inf" | "nan"
 type TrialState = "Running" | "Complete" | "Pruned" | "Fail" | "Waiting"
+type TrialStateFinished = "Complete" | "Fail" | "Pruned"
 type StudyDirection = "maximize" | "minimize" | "not_set"
 
 type FloatDistribution = {