fix(web): keep page number and page size when returning to table from detail

web/src/components/molecules/Asset/AssetList/index.tsx

@@ -31,6 +31,7 @@ type Props = {
   totalCount: number;
   page: number;
   pageSize: number;
+  searchTerm: string;
   onAssetItemSelect: (item: AssetItem) => void;
   onAssetSelect: (assetId: string) => void;
   onUploadModalCancel: () => void;
@@ -66,6 +67,7 @@ const AssetList: React.FC<Props> = ({
   totalCount,
   page,
   pageSize,
+  searchTerm,
   onAssetItemSelect,
   onAssetSelect,
   onUploadModalCancel,
@@ -146,6 +148,7 @@ const AssetList: React.FC<Props> = ({
             totalCount={totalCount}
             page={page}
             pageSize={pageSize}
+            searchTerm={searchTerm}
             onAssetItemSelect={onAssetItemSelect}
             onAssetSelect={onAssetSelect}
             onEdit={onEdit}

web/src/components/molecules/Asset/AssetListTable/index.tsx

@@ -35,6 +35,7 @@ type Props = {
   totalCount: number;
   page: number;
   pageSize: number;
+  searchTerm: string;
   onAssetItemSelect: (item: AssetItem) => void;
   onAssetSelect: (assetId: string) => void;
   onEdit: (assetId: string) => void;
@@ -60,6 +61,7 @@ const AssetListTable: React.FC<Props> = ({
   totalCount,
   page,
   pageSize,
+  searchTerm,
   onAssetItemSelect,
   onAssetSelect,
   onEdit,
@@ -253,10 +255,11 @@ const AssetListTable: React.FC<Props> = ({
           onSearch={(value: string) => {
             onSearchTerm(value);
           }}
+          defaultValue={searchTerm}
         />
       ),
     }),
-    [onSearchTerm, t],
+    [onSearchTerm, searchTerm, t],
   );
 
   const AlertOptions = useCallback(

web/src/components/molecules/Request/List/index.tsx

@@ -14,6 +14,7 @@ type Props = {
   selectedRequest: Request | undefined;
   onRequestSelect: (assetId: string) => void;
   onEdit: (requestId: string) => void;
+  searchTerm: string;
   onSearchTerm: (term?: string) => void;
   selection: {
     selectedRowKeys: Key[];
@@ -43,6 +44,7 @@ const RequestListMolecule: React.FC<Props> = ({
   selectedRequest,
   onRequestSelect,
   onEdit,
+  searchTerm,
   onSearchTerm,
   selection,
   setSelection,
@@ -67,6 +69,7 @@ const RequestListMolecule: React.FC<Props> = ({
             requests={requests}
             selection={selection}
             loading={loading}
+            searchTerm={searchTerm}
             onSearchTerm={onSearchTerm}
             onEdit={onEdit}
             onRequestDelete={onRequestDelete}

web/src/components/molecules/Request/Table/index.tsx

@@ -25,6 +25,7 @@ type Props = {
   selectedRequest: Request | undefined;
   onRequestSelect: (assetId: string) => void;
   onEdit: (requestId: string) => void;
+  searchTerm: string;
   onSearchTerm: (term?: string) => void;
   selection: {
     selectedRowKeys: Key[];
@@ -53,6 +54,7 @@ const RequestListTable: React.FC<Props> = ({
   selectedRequest,
   onRequestSelect,
   onEdit,
+  searchTerm,
   onSearchTerm,
   selection,
   setSelection,
@@ -254,10 +256,11 @@ const RequestListTable: React.FC<Props> = ({
           onSearch={(value: string) => {
             onSearchTerm(value);
           }}
+          defaultValue={searchTerm}
         />
       ),
     }),
-    [onSearchTerm, t],
+    [onSearchTerm, searchTerm, t],
   );
 
   const AlertOptions = useCallback(

web/src/components/organisms/Project/Asset/Asset/hooks.ts

@@ -1,6 +1,6 @@
 import { Ion } from "cesium";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
 
 import Notification from "@reearth-cms/components/atoms/Notification";
 import { viewerRef } from "@reearth-cms/components/molecules/Asset/Asset/AssetBody/Asset";
@@ -37,6 +37,7 @@ export default (assetId?: string) => {
   const t = useT();
   const navigate = useNavigate();
   const { workspaceId, projectId } = useParams();
+  const location = useLocation();
   const [selectedPreviewType, setSelectedPreviewType] = useState<PreviewType>("IMAGE");
   const [decompressing, setDecompressing] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
@@ -200,6 +201,16 @@ export default (assetId?: string) => {
     Ion.defaultAccessToken = config()?.cesiumIonAccessToken ?? Ion.defaultAccessToken;
   }, []);
 
+  const handleSave = useCallback(async () => {
+    if (assetId) {
+      await handleAssetUpdate(assetId, selectedPreviewType);
+    }
+  }, [assetId, handleAssetUpdate, selectedPreviewType]);
+
+  const handleBack = useCallback(() => {
+    navigate(`/workspace/${workspaceId}/project/${projectId}/asset/`, { state: location.state });
+  }, [location.state, navigate, projectId, workspaceId]);
+
   return {
     asset,
     assetFileExt,
@@ -213,9 +224,10 @@ export default (assetId?: string) => {
     handleAssetItemSelect,
     handleAssetDecompress,
     handleToggleCommentMenu,
-    handleAssetUpdate,
     handleTypeChange,
     handleModalCancel,
     handleFullScreen,
+    handleSave,
+    handleBack,
   };
 };

web/src/components/organisms/Project/Asset/Asset/index.tsx

@@ -1,5 +1,4 @@
-import { useCallback } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 import Loading from "@reearth-cms/components/atoms/Loading";
 import AssetWrapper from "@reearth-cms/components/molecules/Asset/Asset/AssetBody";
@@ -9,8 +8,7 @@ import useSettingsHooks from "@reearth-cms/components/organisms/Settings/General
 import useHooks from "./hooks";
 
 const Asset: React.FC = () => {
-  const navigate = useNavigate();
-  const { workspaceId, projectId, assetId } = useParams();
+  const { assetId } = useParams();
   const {
     asset,
     assetFileExt,
@@ -24,24 +22,15 @@ const Asset: React.FC = () => {
     handleAssetDecompress,
     handleAssetItemSelect,
     handleToggleCommentMenu,
-    handleAssetUpdate,
     handleTypeChange,
     handleModalCancel,
     handleFullScreen,
+    handleBack,
+    handleSave,
   } = useHooks(assetId);
 
   const { workspaceSettings } = useSettingsHooks();
 
-  const handleSave = useCallback(async () => {
-    if (assetId) {
-      await handleAssetUpdate(assetId, selectedPreviewType);
-    }
-  }, [assetId, handleAssetUpdate, selectedPreviewType]);
-
-  const handleBack = useCallback(() => {
-    navigate(`/workspace/${workspaceId}/project/${projectId}/asset/`);
-  }, [navigate, projectId, workspaceId]);
-
   return isLoading ? (
     <Loading spinnerSize="large" minHeight="100vh" />
   ) : (

web/src/components/organisms/Project/Asset/AssetList/hooks.ts

@@ -1,5 +1,5 @@
 import { useState, useCallback, Key, useMemo, useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
 
 import Notification from "@reearth-cms/components/atoms/Notification";
 import { UploadFile } from "@reearth-cms/components/atoms/Upload";
@@ -29,6 +29,13 @@ export default (isItemsRequired: boolean) => {
 
   const { workspaceId, projectId } = useParams();
   const navigate = useNavigate();
+  const location: {
+    state?: {
+      searchTerm?: string;
+      page: number;
+      pageSize: number;
+    } | null;
+  } = useLocation();
   const [selection, setSelection] = useState<{ selectedRowKeys: Key[] }>({
     selectedRowKeys: [],
   });
@@ -41,9 +48,9 @@ export default (isItemsRequired: boolean) => {
   const [uploadType, setUploadType] = useState<UploadType>("local");
   const [uploading, setUploading] = useState(false);
   const [collapsed, setCollapsed] = useState(true);
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-  const [searchTerm, setSearchTerm] = useState("");
+  const [page, setPage] = useState(location.state?.page ?? 1);
+  const [pageSize, setPageSize] = useState(location.state?.pageSize ?? 10);
+  const [searchTerm, setSearchTerm] = useState(location.state?.searchTerm ?? "");
 
   const [createAssetMutation] = useCreateAssetMutation();
   const [createAssetUploadMutation] = useCreateAssetUploadMutation();
@@ -255,7 +262,9 @@ export default (isItemsRequired: boolean) => {
   }, [refetch]);
 
   const handleNavigateToAsset = (assetId: string) => {
-    navigate(`/workspace/${workspaceId}/project/${projectId}/asset/${assetId}`);
+    navigate(`/workspace/${workspaceId}/project/${projectId}/asset/${assetId}`, {
+      state: { searchTerm, page, pageSize },
+    });
   };
 
   const handleAssetSelect = useCallback(
@@ -318,6 +327,7 @@ export default (isItemsRequired: boolean) => {
     page,
     pageSize,
     sort,
+    searchTerm,
     handleToggleCommentMenu,
     handleAssetItemSelect,
     handleAssetSelect,

web/src/components/organisms/Project/Asset/AssetList/index.tsx

@@ -20,6 +20,7 @@ const AssetList: React.FC = () => {
     totalCount,
     page,
     pageSize,
+    searchTerm,
     handleToggleCommentMenu,
     handleAssetItemSelect,
     handleAssetSelect,
@@ -59,6 +60,7 @@ const AssetList: React.FC = () => {
       totalCount={totalCount}
       page={page}
       pageSize={pageSize}
+      searchTerm={searchTerm}
       fileList={fileList}
       selection={selection}
       uploading={uploading}

web/src/components/organisms/Project/Content/ContentList/hooks.ts

@@ -75,11 +75,17 @@ export default () => {
 
   const navigate = useNavigate();
   const { modelId } = useParams();
-  const location: { state?: { searchTerm?: string; currentView: CurrentView } | null } =
-    useLocation();
+  const location: {
+    state?: {
+      searchTerm?: string;
+      currentView: CurrentView;
+      page: number;
+      pageSize: number;
+    } | null;
+  } = useLocation();
   const [searchTerm, setSearchTerm] = useState<string>(location.state?.searchTerm ?? "");
-  const [page, setPage] = useState<number>(1);
-  const [pageSize, setPageSize] = useState<number>(20);
+  const [page, setPage] = useState<number>(location.state?.page ?? 1);
+  const [pageSize, setPageSize] = useState<number>(location.state?.pageSize ?? 20);
   const [currentView, setCurrentView] = useState<CurrentView>({});
 
   const viewsRef = useRef<View[]>([]);
@@ -421,10 +427,19 @@ export default () => {
     (itemId: string) => {
       navigate(
         `/workspace/${currentWorkspace?.id}/project/${currentProject?.id}/content/${currentModel?.id}/details/${itemId}`,
-        { state: { searchTerm, currentView } },
+        { state: { searchTerm, currentView, page, pageSize } },
       );
     },
-    [navigate, currentWorkspace?.id, currentProject?.id, currentModel?.id, searchTerm, currentView],
+    [
+      navigate,
+      currentWorkspace?.id,
+      currentProject?.id,
+      currentModel?.id,
+      searchTerm,
+      currentView,
+      page,
+      pageSize,
+    ],
   );
 
   const [deleteItemMutation] = useDeleteItemMutation();

web/src/components/organisms/Project/Request/RequestDetails/hooks.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
 
 import Notification from "@reearth-cms/components/atoms/Notification";
 import { User } from "@reearth-cms/components/molecules/AccountSettings/types";
@@ -25,6 +25,7 @@ export default () => {
   const [currentProject] = useProject();
   const [currentWorkspace] = useWorkspace();
   const { requestId } = useParams();
+  const location = useLocation();
 
   const { data: userData } = useGetMeQuery();
   const { data: rawRequest, loading: requestLoading } = useGetRequestQuery({
@@ -139,8 +140,10 @@ export default () => {
   );
 
   const handleNavigateToRequestsList = useCallback(() => {
-    navigate(`/workspace/${currentWorkspace?.id}/project/${projectId}/request`);
-  }, [currentWorkspace?.id, projectId, navigate]);
+    navigate(`/workspace/${currentWorkspace?.id}/project/${projectId}/request`, {
+      state: location.state,
+    });
+  }, [navigate, currentWorkspace?.id, projectId, location.state]);
 
   const handleNavigateToItemEditForm = useCallback(
     (itemId: string, modelId?: string) => {

web/src/components/organisms/Project/Request/RequestList/hooks.ts

@@ -1,5 +1,5 @@
 import { Key, useCallback, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 
 import Notification from "@reearth-cms/components/atoms/Notification";
 import { Request } from "@reearth-cms/components/molecules/Request/types";
@@ -20,6 +20,13 @@ export default () => {
   const t = useT();
 
   const navigate = useNavigate();
+  const location: {
+    state?: {
+      searchTerm?: string;
+      page: number;
+      pageSize: number;
+    } | null;
+  } = useLocation();
   const [currentProject] = useProject();
   const [currentWorkspace] = useWorkspace();
   const [collapsedCommentsPanel, collapseCommentsPanel] = useState(true);
@@ -28,9 +35,9 @@ export default () => {
     selectedRowKeys: [],
   });
   const [selectedRequestId, setselectedRequestId] = useState<string>();
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-  const [searchTerm, setSearchTerm] = useState("");
+  const [page, setPage] = useState(location.state?.page ?? 1);
+  const [pageSize, setPageSize] = useState(location.state?.pageSize ?? 10);
+  const [searchTerm, setSearchTerm] = useState(location.state?.searchTerm ?? "");
 
   const [requestState, setRequestState] = useState<RequestState[]>(["WAITING"]);
   const [createdByMe, setCreatedByMe] = useState(false);
@@ -102,9 +109,11 @@ export default () => {
   const handleNavigateToRequest = useCallback(
     (requestId: string) => {
       if (!projectId || !currentWorkspace?.id || !requestId) return;
-      navigate(`/workspace/${currentWorkspace?.id}/project/${projectId}/request/${requestId}`);
+      navigate(`/workspace/${currentWorkspace?.id}/project/${projectId}/request/${requestId}`, {
+        state: { searchTerm, page, pageSize },
+      });
     },
-    [currentWorkspace?.id, navigate, projectId],
+    [currentWorkspace?.id, navigate, page, pageSize, projectId, searchTerm],
   );
 
   const [deleteRequestMutation] = useDeleteRequestMutation();
@@ -167,6 +176,7 @@ export default () => {
     handleRequestSelect,
     handleRequestsReload,
     handleRequestDelete,
+    searchTerm,
     handleSearchTerm,
     reviewedByMe,
     createdByMe,