From 3232115c97f29949f05af45c1a3146a277e0362c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EC=A7=84=EB=A6=AC/=EC=8A=A4=ED=86=A0=EC=96=B4?= =?UTF-8?q?=ED=94=84=EB=A1=A0=ED=8A=B8=ED=8C=80?= Date: Wed, 28 Feb 2024 12:09:29 +0900 Subject: [PATCH] feat: implement api on stock detail page --- .../_components/sector-insights-item.tsx | 6 ++--- .../stock/[id]/_components/dividend-info.tsx | 4 +-- .../stock/[id]/_components/investment-tip.tsx | 18 +++++++------ src/app/(main)/stock/[id]/page.tsx | 25 +++++++++++++------ src/state/queries/get-stock-by-ticker.ts.ts | 21 ++++++++++++++++ 5 files changed, 53 insertions(+), 21 deletions(-) create mode 100644 src/state/queries/get-stock-by-ticker.ts.ts diff --git a/src/app/(main)/report/sector-detail/_components/sector-insights-item.tsx b/src/app/(main)/report/sector-detail/_components/sector-insights-item.tsx index 051ecba..11819fe 100644 --- a/src/app/(main)/report/sector-detail/_components/sector-insights-item.tsx +++ b/src/app/(main)/report/sector-detail/_components/sector-insights-item.tsx @@ -23,8 +23,8 @@ export const SectorInsightsItem = React.memo(({ title, stocks, type }: SectorIns const router = useRouter(); const handleItemClick = useCallback( - (id: string) => { - router.push(`/stock/${id}`); + (ticker: string) => { + router.push(`/stock/${ticker}`); }, [router] ); @@ -41,7 +41,7 @@ export const SectorInsightsItem = React.memo(({ title, stocks, type }: SectorIns className="rounded-lg border border-grey-200 p-4" style={{ minWidth: 119, maxWidth: 119 }} onClick={() => { - handleItemClick(stock.stockId); + handleItemClick(stock.ticker); }} >
diff --git a/src/app/(main)/stock/[id]/_components/dividend-info.tsx b/src/app/(main)/stock/[id]/_components/dividend-info.tsx index 4f275a8..4ca257f 100644 --- a/src/app/(main)/stock/[id]/_components/dividend-info.tsx +++ b/src/app/(main)/stock/[id]/_components/dividend-info.tsx @@ -16,11 +16,11 @@ export const DividendInfo = React.memo(({ dividendYield, dividendPerShare, divid

Dividend Yield

-

{`${dividendYield ?? 0}%`}

+

{`${dividendYield?.toFixed(2) ?? 0}%`}

Dividend per Share

-

{`${dividendPerShare ?? 0}$`}

+

{`${dividendPerShare?.toFixed(2) ?? 0}$`}

diff --git a/src/app/(main)/stock/[id]/_components/investment-tip.tsx b/src/app/(main)/stock/[id]/_components/investment-tip.tsx index fc7b4e1..9c6f334 100644 --- a/src/app/(main)/stock/[id]/_components/investment-tip.tsx +++ b/src/app/(main)/stock/[id]/_components/investment-tip.tsx @@ -9,13 +9,15 @@ interface InvestmentTipProps { } export const InvestmentTip = React.memo(({ exDividendDate, earliestPaymentDate }: InvestmentTipProps) => { + if (exDividendDate === null && earliestPaymentDate === null) return null; + return (

Investment Tip

-
- {exDividendDate && ( + {exDividendDate && ( +
<>
@@ -23,10 +25,10 @@ export const InvestmentTip = React.memo(({ exDividendDate, earliestPaymentDate }

{formatDateStringToMonthDay(exDividendDate)}

- )} -
-
- {earliestPaymentDate && ( +
+ )} + {earliestPaymentDate && ( +
<>
@@ -34,8 +36,8 @@ export const InvestmentTip = React.memo(({ exDividendDate, earliestPaymentDate }

{formatDateStringToMonthDay(earliestPaymentDate)}

- )} -
+
+ )}
); diff --git a/src/app/(main)/stock/[id]/page.tsx b/src/app/(main)/stock/[id]/page.tsx index cca27de..507faa5 100644 --- a/src/app/(main)/stock/[id]/page.tsx +++ b/src/app/(main)/stock/[id]/page.tsx @@ -7,6 +7,8 @@ import { StockDetailResponse } from "@/api/generated/endpoint.schemas"; import { DividendInfo } from "./_components/dividend-info"; import { DrawerOverlay, DrawerPortal, Drawer as DrawerPrimitive } from "@/components/ui/drawer"; import { StockInfoDrawer } from "./_components/stock-drawer"; +import { useStockByTickerQuery } from "../../../../state/queries/get-stock-by-ticker.ts"; +import { Loader2Icon } from "lucide-react"; const dummyStock: StockDetailResponse = { stockId: "41b8b18f-6f4f-460c-a978-ff300c1a08f1", @@ -27,6 +29,7 @@ const dummyStock: StockDetailResponse = { export default function StockPage({ params }: { params: { id: string } }) { const [showStockInfo, setShowStockInfo] = React.useState(false); + const { data } = useStockByTickerQuery(params.id); const handleInfoClick = () => { setShowStockInfo((prevState) => !prevState); }; @@ -43,6 +46,15 @@ export default function StockPage({ params }: { params: { id: string } }) { }; }, []); + if (!data) { + return ( +
+ +
+ ); + } + + console.log("data:", data); return ( @@ -50,16 +62,13 @@ export default function StockPage({ params }: { params: { id: string } }) {
-
+
- +
diff --git a/src/state/queries/get-stock-by-ticker.ts.ts b/src/state/queries/get-stock-by-ticker.ts.ts new file mode 100644 index 0000000..9c8ce30 --- /dev/null +++ b/src/state/queries/get-stock-by-ticker.ts.ts @@ -0,0 +1,21 @@ +import { getStockByTicker } from "@/api/generated/endpoint"; +import { createQueryKeys } from "@lukemorales/query-key-factory"; +import { useQuery } from "@tanstack/react-query"; +import { StockDetailResponse } from "../../api/generated/endpoint.schemas"; + +export const stockByTickerQueryKeys = createQueryKeys("stock-by-ticker"); + +export const useStockByTickerQuery = (tickerName: string) => { + const requestClient = async (): Promise => { + const { data } = await getStockByTicker(tickerName); + return data; + }; + + return useQuery({ + queryKey: [stockByTickerQueryKeys._def], + queryFn: () => requestClient(), + staleTime: Infinity, + gcTime: Infinity, + retry: 1, + }); +};