feat: implement api on stock detail page

Nexters · Feb 28, 2024 · 3232115 · 3232115
1 parent 0087505
commit 3232115
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 21 deletions.
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
@@ -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);
               }}
             >
               <div className="flex flex-col gap-4">

diff --git 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
       <div className="mb-2 flex w-full justify-between gap-2">
         <div className="flex flex-1 flex-col items-center justify-between gap-2 bg-grey-50 p-4">
           <p className="text-body3 text-grey-500">Dividend Yield</p>
-          <p className="text-h5 text-grey-800">{`${dividendYield ?? 0}%`}</p>
+          <p className="text-h5 text-grey-800">{`${dividendYield?.toFixed(2) ?? 0}%`}</p>
         </div>
         <div className="flex flex-1 flex-col items-center justify-between bg-grey-50 p-4">
           <p className="text-body3 text-grey-500">Dividend per Share</p>
-          <p className="text-h5 text-grey-800">{`${dividendPerShare ?? 0}$`}</p>
+          <p className="text-h5 text-grey-800">{`${dividendPerShare?.toFixed(2) ?? 0}$`}</p>
         </div>
       </div>
 

diff --git a/src/app/(main)/stock/[id]/_components/investment-tip.tsx b/src/app/(main)/stock/[id]/_components/investment-tip.tsx
@@ -9,33 +9,35 @@ interface InvestmentTipProps {
 }
 
 export const InvestmentTip = React.memo(({ exDividendDate, earliestPaymentDate }: InvestmentTipProps) => {
+  if (exDividendDate === null && earliestPaymentDate === null) return null;
+
   return (
     <div className="flex w-full flex-col border-b border-grey-200 px-5 py-8">
       <h4 className="mb-6 text-h4 text-grey-800">Investment Tip</h4>
 
       <div className="flex w-full flex-col gap-5">
-        <div className="flex items-center justify-between">
-          {exDividendDate && (
+        {exDividendDate && (
+          <div className="flex items-center justify-between">
             <>
               <div className="flex items-center gap-3">
                 <InfoCalendar />
                 <h6 className="text-h6 text-grey-500">{"Ex-Dividend Date"}</h6>
               </div>
               <p className="text-h5 text-grey-800">{formatDateStringToMonthDay(exDividendDate)}</p>
             </>
-          )}
-        </div>
-        <div className="flex items-center justify-between">
-          {earliestPaymentDate && (
+          </div>
+        )}
+        {earliestPaymentDate && (
+          <div className="flex items-center justify-between">
             <>
               <div className="flex items-center gap-3">
                 <InfoDate />
                 <h6 className="text-h6 text-grey-500">{"Approaching Payment Date"}</h6>
               </div>
               <p className="text-h5 text-grey-800">{formatDateStringToMonthDay(earliestPaymentDate)}</p>
             </>
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </div>
   );

diff --git 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<boolean>(false);
+  const { data } = useStockByTickerQuery(params.id);
   const handleInfoClick = () => {
     setShowStockInfo((prevState) => !prevState);
   };
@@ -43,23 +46,29 @@ export default function StockPage({ params }: { params: { id: string } }) {
     };
   }, []);
 
+  if (!data) {
+    return (
+      <div className="flex size-full items-center justify-center">
+        <Loader2Icon className="animate-spin" />
+      </div>
+    );
+  }
+
+  console.log("data:", data);
   return (
     <DrawerPrimitive open={showStockInfo}>
       <DrawerPortal>
         <DrawerOverlay onClick={() => setShowStockInfo(false)} />
         <StockInfoDrawer handleInfoClick={handleInfoClick} />
       </DrawerPortal>
       <div className="flex h-full w-full flex-col pt-2.5">
-        <Header stock={dummyStock} handleInfoClick={handleInfoClick} />
+        <Header stock={data} handleInfoClick={handleInfoClick} />
         <div className="h-4 bg-grey-100" />
-        <InvestmentTip
-          exDividendDate={dummyStock.exDividendDate}
-          earliestPaymentDate={dummyStock.earliestPaymentDate}
-        />
+        <InvestmentTip exDividendDate={data.exDividendDate} earliestPaymentDate={data.earliestPaymentDate} />
         <DividendInfo
-          dividendPerShare={dummyStock.dividendPerShare}
-          dividendYield={dummyStock.dividendYield}
-          dividendMonths={dummyStock.dividendMonths}
+          dividendPerShare={data.dividendPerShare}
+          dividendYield={data.dividendYield}
+          dividendMonths={data.dividendMonths}
         />
       </div>
     </DrawerPrimitive>

diff --git a/src/state/queries/get-stock-by-ticker.ts.ts 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<StockDetailResponse> => {
+    const { data } = await getStockByTicker(tickerName);
+    return data;
+  };
+
+  return useQuery({
+    queryKey: [stockByTickerQueryKeys._def],
+    queryFn: () => requestClient(),
+    staleTime: Infinity,
+    gcTime: Infinity,
+    retry: 1,
+  });
+};