From 53ffe9cfaa2dbec42ac8bbef278acc379b8a7fdf Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Sat, 5 Aug 2023 15:21:43 +0900
Subject: [PATCH 1/3] Implement studies_order_by query params in studies list

---
 optuna_dashboard/ts/components/StudyList.tsx | 36 +++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/optuna_dashboard/ts/components/StudyList.tsx b/optuna_dashboard/ts/components/StudyList.tsx
index 108e3abc..82218a05 100644
--- a/optuna_dashboard/ts/components/StudyList.tsx
+++ b/optuna_dashboard/ts/components/StudyList.tsx
@@ -1,4 +1,5 @@
 import React, { FC, useEffect, useState } from "react"
+import { useNavigate, useLocation } from "react-router-dom"
 import { useRecoilValue } from "recoil"
 import { Link } from "react-router-dom"
 import {
@@ -56,10 +57,17 @@ export const StudyList: FC<{
     useDeleteStudyDialog()
   const [openRenameStudyDialog, renderRenameStudyDialog] =
     useRenameStudyDialog(studies)
-  const [sortBy, setSortBy] = useState<"id-asc" | "id-desc">("id-asc")
+
+  const navigate = useNavigate()
+  const location = useLocation()
+  const queryParams = new URLSearchParams(location.search)
+  const initialSortBy =
+    queryParams.get("studies_order_by") === "desc" ? "desc" : "asc"
+  const [sortBy, setSortBy] = useState(initialSortBy)
 
   let filteredStudies = studies.filter((s) => !studyFilter(s))
-  if (sortBy === "id-desc") {
+
+  if (sortBy === "desc") {
     filteredStudies = filteredStudies.reverse()
   }
 
@@ -67,6 +75,24 @@ export const StudyList: FC<{
     action.updateStudySummaries()
   }, [])
 
+  useEffect(() => {
+    const handlePopState = () => {
+      const params = new URLSearchParams(window.location.search)
+      setSortBy(params.get("studies_order_by") || "asc")
+    }
+    window.addEventListener("popstate", handlePopState)
+    return () => {
+      window.removeEventListener("popstate", handlePopState)
+    }
+  }, [])
+
+  useEffect(() => {
+    queryParams.set("studies_order_by", sortBy)
+    navigate(`${location.pathname}?${queryParams.toString()}`, {
+      replace: true,
+    })
+  }, [sortBy])
+
   const Select = styled(TextField)(({ theme }) => ({
     "& .MuiInputBase-input": {
       // vertical padding + font size from searchIcon
@@ -98,11 +124,11 @@ export const StudyList: FC<{
         select
         value={sortBy}
         onChange={(e) => {
-          setSortBy(e.target.value as "id-asc" | "id-desc")
+          setSortBy(e.target.value as "asc" | "desc")
         }}
       >
-        <MenuItem value={"id-asc"}>Sort ascending</MenuItem>
-        <MenuItem value={"id-desc"}>Sort descending</MenuItem>
+        <MenuItem value={"asc"}>Sort ascending</MenuItem>
+        <MenuItem value={"desc"}>Sort descending</MenuItem>
       </Select>
     </Box>
   )

From 2fd22833af0c52bb9d0f2d795b872adb63ce12bc Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Sat, 5 Aug 2023 15:36:52 +0900
Subject: [PATCH 2/3] Add type of useState

---
 optuna_dashboard/ts/components/StudyList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/optuna_dashboard/ts/components/StudyList.tsx b/optuna_dashboard/ts/components/StudyList.tsx
index 82218a05..56b65156 100644
--- a/optuna_dashboard/ts/components/StudyList.tsx
+++ b/optuna_dashboard/ts/components/StudyList.tsx
@@ -63,7 +63,7 @@ export const StudyList: FC<{
   const queryParams = new URLSearchParams(location.search)
   const initialSortBy =
     queryParams.get("studies_order_by") === "desc" ? "desc" : "asc"
-  const [sortBy, setSortBy] = useState(initialSortBy)
+  const [sortBy, setSortBy] = useState<"asc" | "desc">(initialSortBy)
 
   let filteredStudies = studies.filter((s) => !studyFilter(s))
 

From 26e7a7172a266f435b7792a0f2bae153bf544e8c Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Tue, 8 Aug 2023 10:29:31 +0900
Subject: [PATCH 3/3] Follow review comments

---
 optuna_dashboard/ts/components/StudyList.tsx | 26 +++++++-------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/optuna_dashboard/ts/components/StudyList.tsx b/optuna_dashboard/ts/components/StudyList.tsx
index 56b65156..fee9de4b 100644
--- a/optuna_dashboard/ts/components/StudyList.tsx
+++ b/optuna_dashboard/ts/components/StudyList.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from "react"
+import React, { FC, useEffect, useMemo, useState } from "react"
 import { useNavigate, useLocation } from "react-router-dom"
 import { useRecoilValue } from "recoil"
 import { Link } from "react-router-dom"
@@ -59,10 +59,13 @@ export const StudyList: FC<{
     useRenameStudyDialog(studies)
 
   const navigate = useNavigate()
-  const location = useLocation()
-  const queryParams = new URLSearchParams(location.search)
+  const useQuery = (): URLSearchParams => {
+    const { search } = useLocation()
+    return useMemo(() => new URLSearchParams(search), [search])
+  }
+  const query = useQuery()
   const initialSortBy =
-    queryParams.get("studies_order_by") === "desc" ? "desc" : "asc"
+    query.get("studies_order_by") === "desc" ? "desc" : "asc"
   const [sortBy, setSortBy] = useState<"asc" | "desc">(initialSortBy)
 
   let filteredStudies = studies.filter((s) => !studyFilter(s))
@@ -76,19 +79,8 @@ export const StudyList: FC<{
   }, [])
 
   useEffect(() => {
-    const handlePopState = () => {
-      const params = new URLSearchParams(window.location.search)
-      setSortBy(params.get("studies_order_by") || "asc")
-    }
-    window.addEventListener("popstate", handlePopState)
-    return () => {
-      window.removeEventListener("popstate", handlePopState)
-    }
-  }, [])
-
-  useEffect(() => {
-    queryParams.set("studies_order_by", sortBy)
-    navigate(`${location.pathname}?${queryParams.toString()}`, {
+    query.set("studies_order_by", sortBy)
+    navigate(`${location.pathname}?${query.toString()}`, {
       replace: true,
     })
   }, [sortBy])