fix(frontend): auto-select the newly created strategy

Author: PotatoZhou

frontend/src/app/agent/components/agent-view/strategy-agent-area.tsx

@@ -1,6 +1,7 @@
 import { Plus } from "lucide-react";
-import { type FC, useEffect, useState } from "react";
+import { type FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router";
 import {
   useDeleteStrategy,
   useGetStrategyDetails,
@@ -13,7 +14,6 @@ import {
 import CreateStrategyModal from "@/app/agent/components/strategy-items/modals/create-strategy-modal";
 import { Button } from "@/components/ui/button";
 import type { AgentViewProps } from "@/types/agent";
-import type { Strategy } from "@/types/strategy";
 import {
   PortfolioPositionsGroup,
   StrategyComposeList,
@@ -38,9 +38,19 @@ const StrategyAgentArea: FC<AgentViewProps> = () => {
   const { t } = useTranslation();
   const { data: strategies = [], isLoading: isLoadingStrategies } =
     useGetStrategyList();
-  const [selectedStrategy, setSelectedStrategy] = useState<Strategy | null>(
-    null,
-  );
+
+  const navigate = useNavigate();
+  const { strategyId } = useParams();
+
+  useEffect(() => {
+    if (strategies.length > 0 && !strategyId) {
+      navigate(`/agent/StrategyAgent/Strategies/${strategies[0].strategy_id}`);
+    }
+  }, [strategies, strategyId, navigate]);
+
+  const selectedStrategy = strategyId
+    ? strategies.find((s) => s.strategy_id.toString() === strategyId) || null
+    : null;
 
   const { data: composes = [] } = useGetStrategyDetails(
     selectedStrategy?.strategy_id,
@@ -59,23 +69,6 @@ const StrategyAgentArea: FC<AgentViewProps> = () => {
   const { mutateAsync: stopStrategy } = useStopStrategy();
   const { mutateAsync: deleteStrategy } = useDeleteStrategy();
 
-  useEffect(() => {
-    if (strategies.length === 0) {
-      setSelectedStrategy(null);
-      return;
-    }
-
-    const hasSelectedStrategy =
-      selectedStrategy &&
-      strategies.some(
-        (strategy) => strategy.strategy_id === selectedStrategy.strategy_id,
-      );
-
-    if (!selectedStrategy || !hasSelectedStrategy) {
-      setSelectedStrategy(strategies[0]);
-    }
-  }, [strategies, selectedStrategy]);
-
   if (isLoadingStrategies) return null;
 
   return (
@@ -88,12 +81,17 @@ const StrategyAgentArea: FC<AgentViewProps> = () => {
           <TradeStrategyGroup
             strategies={strategies}
             selectedStrategy={selectedStrategy}
-            onStrategySelect={setSelectedStrategy}
             onStrategyStop={async (strategyId) =>
               await stopStrategy(strategyId)
             }
             onStrategyDelete={async (strategyId) => {
               await deleteStrategy(strategyId);
+              if (selectedStrategy?.strategy_id === strategyId) {
+                navigate("/agent/StrategyAgent/Strategies");
+              }
+            }}
+            onStrategyCreated={(strategyId) => {
+              navigate(`/agent/StrategyAgent/Strategies/${strategyId}`);
             }}
           />
         ) : (

frontend/src/app/agent/components/strategy-items/modals/create-strategy-modal.tsx

@@ -40,14 +40,17 @@ import type { CreateStrategy, Strategy } from "@/types/strategy";
 export interface CreateStrategyModelRef {
   open: (data?: CreateStrategy) => void;
 }
+
 interface CreateStrategyModalProps {
   children?: React.ReactNode;
   ref?: RefObject<CreateStrategyModelRef | null>;
+  onStrategyCreated?: (strategyId: string) => void;
 }
 
 const CreateStrategyModal: FC<CreateStrategyModalProps> = ({
   ref,
   children,
+  onStrategyCreated,
 }) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
@@ -145,13 +148,16 @@ const CreateStrategyModal: FC<CreateStrategyModalProps> = ({
         trading_config: value,
       };
 
-      const { code, msg } = await createStrategy(payload);
+      const { code, msg, data } = await createStrategy(payload);
       if (code !== 0) {
         setError(msg);
         return;
       }
 
       tracker.send("use", { agent_name: "StrategyAgent" });
+      if (data?.strategy_id) {
+        onStrategyCreated?.(data.strategy_id);
+      }
       resetAll();
     },
   });

frontend/src/app/agent/components/strategy-items/trade-strategy-group.tsx

@@ -1,6 +1,7 @@
 import { Copy, Eye, MoreVertical, Plus, TrendingUp } from "lucide-react";
 import { type FC, memo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
 import { useStrategyPerformance } from "@/api/strategy";
 import { DeleteStrategy, StrategyStatus } from "@/assets/svg";
 import {
@@ -50,9 +51,9 @@ interface TradeStrategyCardProps {
 interface TradeStrategyGroupProps {
   strategies: Strategy[];
   selectedStrategy?: Strategy | null;
-  onStrategySelect?: (strategy: Strategy) => void;
   onStrategyStop?: (strategyId: number) => void;
   onStrategyDelete?: (strategyId: number) => void;
+  onStrategyCreated?: (strategyId: string) => void;
 }
 
 const TradeStrategyCard: FC<TradeStrategyCardProps> = ({
@@ -65,6 +66,7 @@ const TradeStrategyCard: FC<TradeStrategyCardProps> = ({
   const { t } = useTranslation();
   const stockColors = useStockColors();
   const changeType = getChangeType(strategy.total_pnl_pct);
+  const navigate = useNavigate();
 
   const [isDeleting, setIsDeleting] = useState(false);
   const strategyDetailModalRef = useRef<StrategyDetailModalRef>(null);
@@ -76,7 +78,9 @@ const TradeStrategyCard: FC<TradeStrategyCardProps> = ({
 
   return (
     <div
-      onClick={onClick}
+      onClick={() => {
+        navigate(`/agent/StrategyAgent/Strategies/${strategy.strategy_id}`);
+      }}
       data-active={isSelected}
       className="flex cursor-pointer flex-col gap-2 rounded-lg border border-gradient border-solid px-3 py-4"
     >
@@ -271,11 +275,11 @@ const TradeStrategyCard: FC<TradeStrategyCardProps> = ({
 };
 
 const TradeStrategyGroup: FC<TradeStrategyGroupProps> = ({
-  strategies,
+  strategies = [],
   selectedStrategy,
-  onStrategySelect,
   onStrategyStop,
   onStrategyDelete,
+  onStrategyCreated,
 }) => {
   const { t } = useTranslation();
   const hasStrategies = strategies.length > 0;
@@ -291,7 +295,6 @@ const TradeStrategyGroup: FC<TradeStrategyGroupProps> = ({
               isSelected={
                 selectedStrategy?.strategy_id === strategy.strategy_id
               }
-              onClick={() => onStrategySelect?.(strategy)}
               onStop={() => onStrategyStop?.(strategy.strategy_id)}
               onDelete={() => onStrategyDelete?.(strategy.strategy_id)}
             />
@@ -316,7 +319,7 @@ const TradeStrategyGroup: FC<TradeStrategyGroupProps> = ({
       )}
 
       <div>
-        <CreateStrategyModal>
+        <CreateStrategyModal onStrategyCreated={onStrategyCreated}>
           <Button
             variant="outline"
             className="w-full gap-3 rounded-lg py-4 text-base"

frontend/src/routes.ts

@@ -21,6 +21,10 @@ export default [
   route("/ranking", "app/rank/board.tsx"),
 
   ...prefix("/agent", [
+    route(
+      "/StrategyAgent/Strategies/:strategyId?",
+      "app/agent/components/agent-view/strategy-agent-area.tsx",
+    ),
     route("/:agentName", "app/agent/chat.tsx"),
     route("/:agentName/config", "app/agent/config.tsx"),
   ]),