Implement studies_order_by query params in studies list

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>
   )