From 2be88f3fd8eb556c91715ecafbe565de4c5dd163 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 11:50:30 +0900 Subject: [PATCH 1/3] feat: implement sectorInsight api --- .../dividend/_components/dividend-row.tsx | 4 +++- .../use-biggest-dividend-yield-stocks.ts | 21 +++++++++++++++++++ .../queries/use-coming-dividend-stocks.ts.ts | 21 +++++++++++++++++++ 3 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 src/state/queries/use-biggest-dividend-yield-stocks.ts create mode 100644 src/state/queries/use-coming-dividend-stocks.ts.ts diff --git a/src/app/(main)/report/dividend/_components/dividend-row.tsx b/src/app/(main)/report/dividend/_components/dividend-row.tsx index 4577ce1..90614f2 100644 --- a/src/app/(main)/report/dividend/_components/dividend-row.tsx +++ b/src/app/(main)/report/dividend/_components/dividend-row.tsx @@ -2,7 +2,9 @@ import { StockResponse } from "@/api/generated/endpoint.schemas"; import Image from "next/image"; import React from "react"; -export interface Dividend extends StockResponse {} +export interface Dividend extends StockResponse { + share?: number; +} export const DividendRow = React.memo(({ dividend }: { dividend: Dividend }) => { return ( diff --git a/src/state/queries/use-biggest-dividend-yield-stocks.ts b/src/state/queries/use-biggest-dividend-yield-stocks.ts new file mode 100644 index 0000000..dbf8dbd --- /dev/null +++ b/src/state/queries/use-biggest-dividend-yield-stocks.ts @@ -0,0 +1,21 @@ +import { getBiggestDividendYieldStocks } from "@/api/generated/endpoint"; +import { createQueryKeys } from "@lukemorales/query-key-factory"; +import { useQuery } from "@tanstack/react-query"; +import { StockDividendYieldResponse } from "../../api/generated/endpoint.schemas"; + +export const biggestDividendYieldStocksQueryKeys = createQueryKeys("biggest-dividend-yield-stocks"); + +export const useBiggestDividendYieldStocksQuery = () => { + const requestClient = async (): Promise => { + const { data } = await getBiggestDividendYieldStocks({ pageNumber: 1, pageSize: 5 }); + return data; + }; + + return useQuery({ + queryKey: [biggestDividendYieldStocksQueryKeys._def], + queryFn: () => requestClient(), + staleTime: Infinity, + gcTime: Infinity, + retry: 1, + }); +}; diff --git a/src/state/queries/use-coming-dividend-stocks.ts.ts b/src/state/queries/use-coming-dividend-stocks.ts.ts new file mode 100644 index 0000000..e550123 --- /dev/null +++ b/src/state/queries/use-coming-dividend-stocks.ts.ts @@ -0,0 +1,21 @@ +import { getUpComingDividendStocks } from "@/api/generated/endpoint"; +import { createQueryKeys } from "@lukemorales/query-key-factory"; +import { useQuery } from "@tanstack/react-query"; +import { UpcomingDividendResponse } from "../../api/generated/endpoint.schemas"; + +export const comingDividendStocksQueryKeys = createQueryKeys("coming-dividend-stocks"); + +export const useComingDividendStocksQuery = () => { + const requestClient = async (): Promise => { + const { data } = await getUpComingDividendStocks({ pageNumber: 1, pageSize: 5 }); + return data; + }; + + return useQuery({ + queryKey: [comingDividendStocksQueryKeys._def], + queryFn: () => requestClient(), + staleTime: Infinity, + gcTime: Infinity, + retry: 1, + }); +}; From 008750533bf03873998c0f7469dbebff4e2c4248 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 11:50:48 +0900 Subject: [PATCH 2/3] feat: connect api to ui on sector insight --- .../report/sector-detail/[sector]/page.tsx | 10 +- .../_components/dividend-list.tsx | 10 +- .../_components/sector-insights-item.tsx | 33 ++++-- .../_components/sector-insights.tsx | 105 ++++++------------ 4 files changed, 73 insertions(+), 85 deletions(-) diff --git a/src/app/(main)/report/sector-detail/[sector]/page.tsx b/src/app/(main)/report/sector-detail/[sector]/page.tsx index 807f4fb..b091e28 100644 --- a/src/app/(main)/report/sector-detail/[sector]/page.tsx +++ b/src/app/(main)/report/sector-detail/[sector]/page.tsx @@ -8,9 +8,13 @@ import { useQueryClient } from "@tanstack/react-query"; import { enteredStocksQueryKeys } from "@/state/queries/use-stocks-sector-ratio"; import { SectorRatioResponse } from "@/api/generated/endpoint.schemas"; import { DividendList } from "../_components/dividend-list"; +import { useComingDividendStocksQuery } from "../../../../../state/queries/use-coming-dividend-stocks.ts"; +import { useBiggestDividendYieldStocksQuery } from "../../../../../state/queries/use-biggest-dividend-yield-stocks"; const SectorDetailPage = React.memo(({ params }: { params: { sector: string } }) => { const queryClient = useQueryClient(); + const { data: comingDividendStocks } = useComingDividendStocksQuery(); + const { data: biggestDividendYieldStocks } = useBiggestDividendYieldStocksQuery(); const data = React.useMemo( () => @@ -45,7 +49,11 @@ const SectorDetailPage = React.memo(({ params }: { params: { sector: string } }) />
- + +
); }); diff --git a/src/app/(main)/report/sector-detail/_components/dividend-list.tsx b/src/app/(main)/report/sector-detail/_components/dividend-list.tsx index 57ca43c..f5f9b0c 100644 --- a/src/app/(main)/report/sector-detail/_components/dividend-list.tsx +++ b/src/app/(main)/report/sector-detail/_components/dividend-list.tsx @@ -1,12 +1,18 @@ import React from "react"; import { StockShareResponse } from "@/api/generated/endpoint.schemas"; +import { DividendRow } from "../../dividend/_components/dividend-row"; export const DividendList = React.memo(({ dividendList }: { dividendList: StockShareResponse[] }) => { return (
{dividendList.map((dividend, idx) => ( - <> - // + ))}
); 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 9c62cb2..051ecba 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 @@ -1,13 +1,14 @@ import { formatDateStringToMonthDay } from "@/utils/date"; import Image from "next/image"; -import React from "react"; +import { useRouter } from "next/navigation"; +import React, { useCallback } from "react"; -export interface InsightsStock { +interface InsightsStock { stockId: string; ticker: string; logoUrl: string; - exDividendDate: string; - sectorRatio?: number; + exDividendDate?: string; + dividendYield?: number; } interface SectorInsightsItemProps { @@ -19,6 +20,15 @@ interface SectorInsightsItemProps { type InsightsType = "Date" | "Rate"; export const SectorInsightsItem = React.memo(({ title, stocks, type }: SectorInsightsItemProps) => { + const router = useRouter(); + + const handleItemClick = useCallback( + (id: string) => { + router.push(`/stock/${id}`); + }, + [router] + ); + return (

{title}

@@ -26,10 +36,17 @@ export const SectorInsightsItem = React.memo(({ title, stocks, type }: SectorIns
{stocks.map((stock, idx) => { return ( -
+
{ + handleItemClick(stock.stockId); + }} + >
{stock.ticker}
{stock.ticker}

- {type === "Date" && formatDateStringToMonthDay(stock.exDividendDate)} + {type === "Date" && stock.exDividendDate && formatDateStringToMonthDay(stock.exDividendDate)} {type === "Rate" && - `${stock.sectorRatio !== undefined ? (stock.sectorRatio * 100).toFixed(0) : 0}%`} + `${stock.dividendYield !== undefined ? Math.floor(stock.dividendYield * 100) / 100 : 0}%`}

diff --git a/src/app/(main)/report/sector-detail/_components/sector-insights.tsx b/src/app/(main)/report/sector-detail/_components/sector-insights.tsx index 6429bf1..70602e9 100644 --- a/src/app/(main)/report/sector-detail/_components/sector-insights.tsx +++ b/src/app/(main)/report/sector-detail/_components/sector-insights.tsx @@ -1,78 +1,35 @@ import React from "react"; -import { InsightsStock, SectorInsightsItem } from "./sector-insights-item"; +import { SectorInsightsItem } from "./sector-insights-item"; +import { StockDividendYieldResponse, UpcomingDividendResponse } from "../../../../../api/generated/endpoint.schemas"; -const dummyExDividendList: InsightsStock[] = [ - { - stockId: "3fa85f64-5717-4562-b3fc-2c963f66afa6", - ticker: "string", - logoUrl: "string", - exDividendDate: "2024-02-23T07:21:48.256Z", - }, - { - stockId: "3fa85f64-5717-4562-b3fc-2c963f66afa6", - ticker: "string", - logoUrl: "string", - exDividendDate: "2024-02-23T07:21:48.256Z", - }, - { - stockId: "3fa85f64-5717-4562-b3fc-2c963f66afa6", - ticker: "string", - logoUrl: "string", - exDividendDate: "2024-02-23T07:21:48.256Z", - }, - { - stockId: "3fa85f64-5717-4562-b3fc-2c963f66afa6", - ticker: "string", - logoUrl: "string", - exDividendDate: "2024-02-23T07:21:48.256Z", - }, -]; -const dummyTopDividendList: InsightsStock[] = [ - { - stockId: "3fa85f64-5717-4562-b3fc-2c963f66afa6", - ticker: "string", - logoUrl: "string", - exDividendDate: "2024-02-23T07:21:48.256Z", - sectorRatio: 0.49, - }, - { - stockId: "3fa85f64-5717-4562-b3fc-2c963f66afa6", - ticker: "string", - logoUrl: "string", - exDividendDate: "2024-02-23T07:21:48.256Z", - sectorRatio: 0.49, - }, - { - stockId: "3fa85f64-5717-4562-b3fc-2c963f66afa6", - ticker: "string", - logoUrl: "string", - exDividendDate: "2024-02-23T07:21:48.256Z", - sectorRatio: 0.49, - }, - { - stockId: "3fa85f64-5717-4562-b3fc-2c963f66afa6", - ticker: "string", - logoUrl: "string", - exDividendDate: "2024-02-23T07:21:48.256Z", - sectorRatio: 0.49, - }, -]; +interface SectorInsightsProps { + comingDividendStocks?: UpcomingDividendResponse[]; + biggestDividendYieldStocks?: StockDividendYieldResponse[]; +} -export const SectorInsights = React.memo(() => { - return ( - <> -
-

Sector Insights

-

- {`Last updated `} - {`${"2024/01/27 21:38"}`}{" "} -

-
+export const SectorInsights = React.memo( + ({ comingDividendStocks, biggestDividendYieldStocks }: SectorInsightsProps) => { + if (!comingDividendStocks && !biggestDividendYieldStocks) return null; -
- - -
- - ); -}); + return ( + <> +
+

Sector Insights

+

+ {`Last updated `} + {`${"2024/01/27 21:38"}`}{" "} +

+
+ +
+ {comingDividendStocks && ( + + )} + {biggestDividendYieldStocks && ( + + )} +
+ + ); + } +); From d734004883b58a12ae561ee8bfe48e3854a55741 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:25:27 +0900 Subject: [PATCH 3/3] fix: optional logourl on Image tag --- src/app/(main)/report/dividend/_components/dividend-row.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(main)/report/dividend/_components/dividend-row.tsx b/src/app/(main)/report/dividend/_components/dividend-row.tsx index 90614f2..acbe9b1 100644 --- a/src/app/(main)/report/dividend/_components/dividend-row.tsx +++ b/src/app/(main)/report/dividend/_components/dividend-row.tsx @@ -9,7 +9,7 @@ export interface Dividend extends StockResponse { export const DividendRow = React.memo(({ dividend }: { dividend: Dividend }) => { return (
- {dividend.companyName} + {dividend.companyName}

{dividend.companyName}