Merge pull request #65 from Nexters/feat/uuid

fix: fix build error

src/app/(main)/report/dividend/monthly/page.tsx → src/app/(main)/report/[id]/dividend/monthly/page.tsx

@@ -5,9 +5,11 @@ import { Header } from "./_components/header";
 import { DividendAccordion } from "./_components/dividend-accordion";
 import { useMonthlyDividendMutation } from "@/state/queries/use-monthly-dividend-mutation";
 import { Loader2Icon } from "lucide-react";
+import { useParams } from "next/navigation";
 
 const MonthlyDividendPage = React.memo(() => {
-  const { mutate: mutateMonthlyDividend, data: monthlyDividendData } = useMonthlyDividendMutation();
+  const { id } = useParams<{ id: string }>();
+  const { mutate: mutateMonthlyDividend, data: monthlyDividendData } = useMonthlyDividendMutation(id);
 
   React.useEffect(() => {
     mutateMonthlyDividend();
@@ -24,7 +26,7 @@ const MonthlyDividendPage = React.memo(() => {
   return (
     <div className="flex size-full flex-col items-center justify-start">
       <Header />
-      <DividendAccordion monthlyDividendList={monthlyDividendData} />
+      <DividendAccordion monthlyDividendList={monthlyDividendData.data} />
     </div>
   );
 });

src/app/(main)/report/dividend/yearly/page.tsx → src/app/(main)/report/[id]/dividend/yearly/page.tsx

@@ -6,19 +6,21 @@ import { DividendList } from "./_components/dividend-list";
 import { useYearlyDividendMutation } from "@/state/queries/use-yearly-dividend-mutation";
 import { YearlyDividendResponse } from "@/api/generated/endpoint.schemas";
 import { Loader2Icon } from "lucide-react";
+import { useParams } from "next/navigation";
 
 const YearlyDividendPage = React.memo(() => {
-  const { mutate: mutateYearlyDividend, data: yearlyDividendData } = useYearlyDividendMutation();
+  const { id } = useParams<{ id: string }>();
+  const { mutate: mutateYearlyDividend, data: yearlyDividendData } = useYearlyDividendMutation(id);
 
   React.useEffect(() => {
     mutateYearlyDividend();
   }, [mutateYearlyDividend]);
 
   const yearlyDividends: YearlyDividendResponse = React.useMemo(() => {
     return {
-      totalDividend: yearlyDividendData?.totalDividend ?? 0,
+      totalDividend: yearlyDividendData?.data.totalDividend ?? 0,
       dividends:
-        yearlyDividendData?.dividends.sort((a, b) => {
+        yearlyDividendData?.data.dividends.sort((a, b) => {
           return b.totalDividend - a.totalDividend;
         }) ?? [],
     };

src/app/(main)/report/sector-detail/[sector]/page.tsx → src/app/(main)/report/[id]/sector-detail/[sector]/page.tsx

@@ -3,36 +3,35 @@
 import React from "react";
 import { Header } from "../_components/header";
 import { Loader2Icon } from "lucide-react";
-import { useQueryClient } from "@tanstack/react-query";
-import { enteredStocksQueryKeys } from "@/state/queries/use-stocks-sector-ratio-mutation";
-import { SectorRatioResponse } from "@/api/generated/endpoint.schemas";
+import { useStocksSectorRatioMutation } from "@/state/queries/use-stocks-sector-ratio-mutation";
 import { DividendList } from "../_components/dividend-list";
 import { SectorInsights } from "../_components/sector-insights";
-import { useComingDividendStocksQuery } from "../../../../../state/queries/use-coming-dividend-stocks-query";
-import { useBiggestDividendYieldStocksQuery } from "../../../../../state/queries/use-biggest-dividend-yield-stocks-query";
+import { useComingDividendStocksQuery } from "../../../../../../state/queries/use-coming-dividend-stocks-query";
+import { useBiggestDividendYieldStocksQuery } from "../../../../../../state/queries/use-biggest-dividend-yield-stocks-query";
+import { useParams } from "next/navigation";
+import { GetBiggestDividendYieldStocksSector, GetUpComingDividendStocksSector } from "@/api/generated/endpoint.schemas";
 
 const SectorDetailPage = React.memo(({ params }: { params: { sector: string } }) => {
-  const queryClient = useQueryClient();
-
-  const { data: comingDividendStocks } = useComingDividendStocksQuery(params.sector);
-  const { data: biggestDividendYieldStocks } = useBiggestDividendYieldStocksQuery(params.sector);
-
-  const data = React.useMemo(
-    () =>
-      queryClient
-        .getQueriesData({})
-        .find(([queryKey]) => enteredStocksQueryKeys._def === queryKey)?.[1] as SectorRatioResponse[],
-    [queryClient]
+  const { id } = useParams<{ id: string }>();
+  const { data: comingDividendStocks } = useComingDividendStocksQuery(params.sector as GetUpComingDividendStocksSector);
+  const { data: biggestDividendYieldStocks } = useBiggestDividendYieldStocksQuery(
+    params.sector as GetBiggestDividendYieldStocksSector
   );
 
+  const { data, mutate } = useStocksSectorRatioMutation(id);
+
   const sectorValue = React.useMemo(() => {
     return params.sector.split("%20").join(" ");
   }, [params.sector]);
 
   const sectorData = React.useMemo(() => {
-    return data?.find((each) => each.sectorValue === sectorValue);
+    return data?.data.find((each) => each.sectorValue === sectorValue);
   }, [data, sectorValue]);
 
+  React.useEffect(() => {
+    mutate();
+  }, [mutate]);
+
   if (!sectorData) {
     return (
       <div className="flex size-full items-center justify-center">

src/app/(main)/report/sector-detail/_components/header.tsx → src/app/(main)/report/[id]/sector-detail/_components/header.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useSearchParams } from "next/navigation";
-import { DONUT_CHART_COLORS, LARGE_ICONS } from "../../_data";
+import { DONUT_CHART_COLORS, LARGE_ICONS } from "../../../_data";
 
 interface HeaderProps {
   sectorName: string;

src/app/(main)/report/sector-detail/_components/sector-insights.tsx → src/app/(main)/report/[id]/sector-detail/_components/sector-insights.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { SectorInsightsItem } from "./sector-insights-item";
-import { StockDividendYieldResponse, UpcomingDividendResponse } from "../../../../../api/generated/endpoint.schemas";
-import { formatDate } from "../../../../../utils/date";
+import { StockDividendYieldResponse, UpcomingDividendResponse } from "../../../../../../api/generated/endpoint.schemas";
+import { formatDate } from "../../../../../../utils/date";
 
 interface SectorInsightsProps {
   comingDividendStocks?: UpcomingDividendResponse;

src/app/(main)/report/sector-list/_components/sector-list.tsx → src/app/(main)/report/[id]/sector-list/_components/sector-list.tsx

@@ -1,19 +1,20 @@
 "use client";
 
 import React from "react";
-import { SectorRow } from "../../_components/sector-row";
-import { DONUT_CHART_COLORS, ICONS } from "../../_data";
-import { Sector } from "../../_components/sector-focus";
-import { useRouter } from "next/navigation";
+import { SectorRow } from "../../../_components/sector-row";
+import { DONUT_CHART_COLORS, ICONS } from "../../../_data";
+import { Sector } from "../../../_components/sector-focus";
+import { useParams, useRouter } from "next/navigation";
 
 export const SectorList = React.memo(({ sectorList }: { sectorList: Sector[] }) => {
   const router = useRouter();
+  const { id } = useParams<{ id: string }>();
 
   const onSectorClick = React.useCallback(
     (sector: Sector, idx: number) => {
-      router.push(`/report/sector-detail/${sector.sectorValue}?i=${idx}`);
+      router.push(`/report/${id}/sector-detail/${sector.sectorValue}?i=${idx}`);
     },
-    [router]
+    [id, router]
   );
 
   return (

src/app/(main)/report/_components/annual-dividend.tsx

@@ -1,7 +1,7 @@
 import { YearlyDividendResponse } from "@/api/generated/endpoint.schemas";
 import BubbleChart from "@/components/common/bubble-chart/bubble-chart";
 import { Button } from "@/components/common/button/button";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import React from "react";
 
 interface AnnualDividendProps {
@@ -12,10 +12,11 @@ const bubbleStyles = ["absolute bottom-3 left-0", "absolute right-0 top-0", "abs
 
 export const AnnualDividend = ({ data }: AnnualDividendProps) => {
   const router = useRouter();
+  const { id } = useParams<{ id: string }>();
 
   const handleButtonClick = React.useCallback(() => {
-    router.push("/report/dividend/yearly");
-  }, [router]);
+    router.push(`/report/${id}/dividend/yearly`);
+  }, [id, router]);
 
   if (data.dividends.length === 1) {
     return (

src/app/(main)/report/_components/monthly-dividend.tsx

@@ -4,7 +4,7 @@ import React, { useCallback, useMemo, useState } from "react";
 import { MonthlyDividendResponse } from "@/api/generated/endpoint.schemas";
 import { BarChart, EventProps } from "@tremor/react";
 import { Button as ShadcnButton } from "@/components/ui/button";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { Button } from "@/components/common/button/button";
 
 const COLORS = ["navy-700"];
@@ -19,6 +19,8 @@ interface MonthlyDividendProps {
 export const MonthlyDividend = React.memo(({ data }: MonthlyDividendProps) => {
   const [halfToggleState, setHalfToggleState] = useState<halfToggleType>("first");
   const router = useRouter();
+  const { id } = useParams<{ id: string }>();
+
   const [showTooltip, setShowToolTip] = useState<boolean>(true);
   const monthlyDividends = React.useMemo(
     () =>
@@ -45,7 +47,7 @@ export const MonthlyDividend = React.memo(({ data }: MonthlyDividendProps) => {
   };
 
   const handleCheckMonthlyClick = () => {
-    router.push(`/report/dividend/monthly`);
+    router.push(`/report/${id}/dividend/monthly`);
   };
 
   const shownChartData = useMemo(() => {

src/app/(main)/report/_components/sector-focus.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { DonutChart } from "@tremor/react";
 import { SectorRow } from "./sector-row";
 import { SectorRatioResponse } from "@/api/generated/endpoint.schemas";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { DONUT_CHART_COLORS, ICONS } from "../_data";
 
 export interface Sector extends SectorRatioResponse {
@@ -14,6 +14,7 @@ export interface Sector extends SectorRatioResponse {
 
 export const SectorFocus = React.memo(({ data }: { data: Sector[] }) => {
   const router = useRouter();
+  const { id } = useParams<{ id: string }>();
 
   const sectors: Sector[] = React.useMemo(() => {
     if (data.length > 4)
@@ -32,14 +33,14 @@ export const SectorFocus = React.memo(({ data }: { data: Sector[] }) => {
 
   const onSectorClick = React.useCallback(
     (sector: Sector, idx: number) => {
-      router.push(`/report/sector-detail/${sector.sectorValue}?i=${idx}`);
+      router.push(`/report/${id}/sector-detail/${sector.sectorValue}?i=${idx}`);
     },
-    [router]
+    [id, router]
   );
 
   const onExtraSectorClick = React.useCallback(() => {
-    router.push("/report/sector-list");
-  }, [router]);
+    router.push(`/report/${id}/sector-list`);
+  }, [id, router]);
 
   return (
     <div className="flex flex-col gap-6 px-5 py-8">

src/state/queries/use-biggest-dividend-yield-stocks-query.ts

@@ -1,11 +1,11 @@
 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";
+import { GetBiggestDividendYieldStocksSector, StockDividendYieldResponse } from "../../api/generated/endpoint.schemas";
 
 export const biggestDividendYieldStocksQueryKeys = createQueryKeys("biggest-dividend-yield-stocks");
 
-export const useBiggestDividendYieldStocksQuery = (sector: string) => {
+export const useBiggestDividendYieldStocksQuery = (sector: GetBiggestDividendYieldStocksSector) => {
   const requestClient = async (): Promise<StockDividendYieldResponse> => {
     const { data } = await getBiggestDividendYieldStocks({ sector, pageNumber: 1, pageSize: 5 });
     return data;

src/state/queries/use-coming-dividend-stocks-query.ts

@@ -1,11 +1,11 @@
 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";
+import { GetUpComingDividendStocksSector, UpcomingDividendResponse } from "../../api/generated/endpoint.schemas";
 
 export const comingDividendStocksQueryKeys = createQueryKeys("coming-dividend-stocks");
 
-export const useComingDividendStocksQuery = (sector: string) => {
+export const useComingDividendStocksQuery = (sector: GetUpComingDividendStocksSector) => {
   const requestClient = async (): Promise<UpcomingDividendResponse> => {
     const { data } = await getUpComingDividendStocks({ sector, pageNumber: 1, pageSize: 5 });
     return data;