feat: refactor stock history type, update API calls with base URL and auth

Author: DigHuang

frontend/src/api/stock.ts

@@ -1,6 +1,11 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { API_QUERY_KEYS, USER_LANGUAGE } from "@/constants/api";
+import {
+  API_QUERY_KEYS,
+  USER_LANGUAGE,
+  VALUECELL_BACKEND_URL,
+} from "@/constants/api";
 import { type ApiResponse, apiClient } from "@/lib/api-client";
+import { useSystemStore } from "@/store/system-store";
 import type {
   Stock,
   StockDetail,
@@ -64,7 +69,10 @@ export const useGetStockPrice = (params: { ticker: string }) =>
     queryKey: API_QUERY_KEYS.STOCK.stockPrice(Object.values(params)),
     queryFn: () =>
       apiClient.get<ApiResponse<StockPrice>>(
-        `watchlist/asset/${params.ticker}/price`,
+        `${useSystemStore.getState().access_token ? VALUECELL_BACKEND_URL : ""}/watchlist/asset/${params.ticker}/price`,
+        {
+          requiresAuth: !!useSystemStore.getState().access_token,
+        },
       ),
     select: (data) => data.data,
     enabled: !!params.ticker,
@@ -79,8 +87,11 @@ export const useGetStockHistory = (params: {
   useQuery({
     queryKey: API_QUERY_KEYS.STOCK.stockHistory(Object.values(params)),
     queryFn: () =>
-      apiClient.get<ApiResponse<StockHistory>>(
-        `watchlist/asset/${params.ticker}/price/historical?interval=${params.interval}&start_date=${params.start_date}&end_date=${params.end_date}`,
+      apiClient.get<ApiResponse<StockHistory[]>>(
+        `${VALUECELL_BACKEND_URL}/watchlist/asset/${params.ticker}/price/historical?interval=${params.interval}&start_date=${params.start_date}&end_date=${params.end_date}`,
+        {
+          requiresAuth: true,
+        },
       ),
     select: (data) => data.data,
     enabled: !!params.ticker,
@@ -91,7 +102,10 @@ export const useGetStockDetail = (params: { ticker: string }) =>
     queryKey: API_QUERY_KEYS.STOCK.stockDetail(Object.values(params)),
     queryFn: () =>
       apiClient.get<ApiResponse<StockDetail>>(
-        `watchlist/asset/${params.ticker}`,
+        `${useSystemStore.getState().access_token ? VALUECELL_BACKEND_URL : ""}/watchlist/asset/${params.ticker}`,
+        {
+          requiresAuth: !!useSystemStore.getState().access_token,
+        },
       ),
     select: (data) => data.data,
     enabled: !!params.ticker,

frontend/src/api/system.ts

@@ -24,7 +24,7 @@ export interface DefaultTickersResponse {
 export const useBackendHealth = () => {
   return useQuery({
     queryKey: ["backend-health"],
-    queryFn: () => apiClient.get<boolean>("/healthz/"),
+    queryFn: () => apiClient.get<boolean>("/healthz"),
     retry: false,
     refetchInterval: (query) => {
       return query.state.status === "error" ? 2000 : 10000;

frontend/src/app/home/components/stock-list.tsx

@@ -13,8 +13,7 @@ function StockList() {
   const { data: stockList } = useGetWatchlist();
 
   const stockData = useMemo(() => {
-    const allStocks = stockList?.flatMap((group) => group.items) ?? [];
-    return allStocks;
+    return stockList?.flatMap((group) => group.items) ?? [];
   }, [stockList]);
 
   // Extract stock symbol (e.g., AAPL) from path like /stock/AAPL
@@ -30,8 +29,6 @@ function StockList() {
         symbol: stock.symbol,
         companyName: stock.display_name,
         price: stockPrice?.price_formatted ?? "N/A",
-        currency: stockPrice?.currency ?? "USD",
-        changeAmount: stockPrice?.change ?? 0,
         changePercent: stockPrice?.change_percent,
       }),
       [stock, stockPrice],

frontend/src/app/home/stock.tsx

@@ -1,11 +1,7 @@
 import BackButton from "@valuecell/button/back-button";
-import { memo, useMemo } from "react";
+import { memo } from "react";
 import { useNavigate, useParams } from "react-router";
-import {
-  useGetStockDetail,
-  useGetStockPrice,
-  useRemoveStockFromWatchlist,
-} from "@/api/stock";
+import { useGetStockDetail, useRemoveStockFromWatchlist } from "@/api/stock";
 import TradingViewAdvancedChart from "@/components/tradingview/tradingview-advanced-chart";
 import { Button } from "@/components/ui/button";
 import type { Route } from "./+types/stock";
@@ -16,15 +12,6 @@ function Stock() {
   // Use stockId as ticker to fetch real data from API
   const ticker = stockId || "";
 
-  // Fetch current stock price data
-  const {
-    data: stockPriceData,
-    isLoading: isPriceLoading,
-    error: priceError,
-  } = useGetStockPrice({
-    ticker,
-  });
-
   // Fetch stock detail data
   const {
     data: stockDetailData,
@@ -34,36 +21,20 @@ function Stock() {
     ticker,
   });
 
-  const removeStockMutation = useRemoveStockFromWatchlist();
+  const { mutateAsync: removeStockMutation, isPending: isRemovingStock } =
+    useRemoveStockFromWatchlist();
 
   const handleRemoveStock = async () => {
     try {
-      await removeStockMutation.mutateAsync(ticker);
+      await removeStockMutation(ticker);
       navigate(-1);
     } catch (error) {
       console.error("Failed to remove stock from watchlist:", error);
     }
   };
 
-  // Create stock info from API data
-  const stockInfo = useMemo(() => {
-    if (!stockPriceData) return null;
-
-    // Use display name from detail data if available, otherwise use ticker
-    const companyName = stockDetailData?.display_name || ticker;
-
-    return {
-      symbol: ticker,
-      companyName,
-      price: stockPriceData.price_formatted,
-      changePercent: stockPriceData.change_percent,
-      currency: stockPriceData.currency,
-      changeAmount: stockPriceData.change,
-    };
-  }, [stockPriceData, stockDetailData, ticker]);
-
   // Handle loading states
-  if (isPriceLoading || isDetailLoading) {
+  if (isDetailLoading) {
     return (
       <div className="flex h-96 items-center justify-center">
         <div className="text-gray-500 text-lg">Loading stock data...</div>
@@ -72,39 +43,31 @@ function Stock() {
   }
 
   // Handle error states
-  if (priceError || detailError) {
+  if (detailError) {
     return (
       <div className="flex h-96 items-center justify-center">
         <div className="text-lg text-red-500">
-          Error loading stock data:{" "}
-          {priceError?.message || detailError?.message}
+          Error loading stock data: {detailError?.message}
         </div>
       </div>
     );
   }
 
-  // Handle no data found
-  if (!stockInfo || !stockPriceData) {
-    return (
-      <div className="flex h-96 items-center justify-center">
-        <div className="text-gray-500 text-lg">Stock {stockId} not found</div>
-      </div>
-    );
-  }
-
   return (
     <div className="flex flex-col gap-8 bg-white px-8 py-6">
       <div className="flex flex-col gap-4">
         <BackButton />
         <div className="flex items-center gap-2">
-          <span className="font-bold text-lg">{stockInfo.companyName}</span>
+          <span className="font-bold text-lg">
+            {stockDetailData?.display_name ?? ticker}
+          </span>
           <Button
             variant="secondary"
             className="ml-auto text-neutral-400"
             onClick={handleRemoveStock}
-            disabled={removeStockMutation.isPending}
+            disabled={isRemovingStock}
           >
-            {removeStockMutation.isPending ? "Removing..." : "Remove"}
+            {isRemovingStock ? "Removing..." : "Remove"}
           </Button>
         </div>
       </div>

frontend/src/components/valuecell/menus/stock-menus.tsx

@@ -1,13 +1,10 @@
 import { Link, type LinkProps } from "react-router";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { cn, formatChange, getChangeType } from "@/lib/utils";
 import { useStockColors } from "@/store/settings-store";
-import type { StockCurrency } from "@/types/stock";
 
 interface Stock {
   symbol: string;
   companyName: string;
-  currency: StockCurrency;
   price: string;
   changePercent?: number;
   icon?: string;
@@ -37,10 +34,6 @@ interface StockMenuGroupHeaderProps
   children: React.ReactNode;
 }
 
-interface StockIconProps extends React.HTMLAttributes<HTMLDivElement> {
-  stock: Stock;
-}
-
 interface StockMenuListItemProps extends LinkProps {
   stock: Stock;
   isActive?: boolean;
@@ -96,25 +89,6 @@ function StockMenuGroupHeader({
   );
 }
 
-function StockIcon({ className, stock, ...props }: StockIconProps) {
-  return (
-    <div
-      className={cn(
-        "flex size-10 items-center justify-center rounded-full",
-        className,
-      )}
-      {...props}
-    >
-      <Avatar className="size-full">
-        <AvatarImage src={stock.icon} alt={stock.symbol} />
-        <AvatarFallback className="font-medium text-muted-foreground text-xs">
-          {stock.symbol.slice(0, 2)}
-        </AvatarFallback>
-      </Avatar>
-    </div>
-  );
-}
-
 function StockMenuListItem({
   className,
   stock,
@@ -136,9 +110,6 @@ function StockMenuListItem({
       {...props}
     >
       <div className="flex flex-1 items-center gap-2.5 truncate">
-        {/* icon */}
-        {/* <StockIcon stock={stock} /> */}
-
         {/* stock info */}
         <div className="flex flex-col items-start gap-1">
           <p className="font-semibold text-foreground text-sm leading-tight">
@@ -172,5 +143,4 @@ export {
   StockMenuGroup,
   StockMenuGroupHeader,
   StockMenuListItem,
-  StockIcon,
 };

frontend/src/root.tsx

@@ -32,7 +32,7 @@ const queryClient = new QueryClient({
       staleTime: 5 * 60 * 1000, // Global default 5 minutes fresh time
       gcTime: 30 * 60 * 1000, // Global default 30 minutes garbage collection time
       refetchOnWindowFocus: false, // Don't refetch on window focus by default
-      retry: 2, // Default retry 2 times on failure
+      retry: 1, // Default retry 1 times on failure
     },
     mutations: {
       retry: 1, // Default retry 1 time for mutations

frontend/src/types/stock.ts

@@ -44,22 +44,12 @@ export type StockInterval =
   | "1mo"; // 1 month
 
 export interface StockHistory {
-  ticker: string;
-  interval: StockInterval;
-  prices: {
-    ticker: string;
-    price: number;
-    timestamp: string;
-    open_price: number;
-    high_price: number;
-    low_price: number;
-    close_price: number;
-    volume: number;
-    change: number;
-    change_percent?: number;
-    currency: StockCurrency;
-    source: string;
-  }[];
+  time: string;
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+  volume: number;
 }
 
 export interface StockDetail {