Merge pull request #30 from kameiryohei/create-test-corseReview

テストの型修正と`/allPost/[id]`のfetchの処理を修正

__test__/CourseReview.test.tsx

@@ -28,7 +28,7 @@ describe("<CourseReview />", () => {
   });
 
   test("renders the component correctly", () => {
-    render(<CourseReview id={1} auth_id="123" />);
+    render(<CourseReview id={"1"} auth_id="123" />);
     expect(screen.getByText("クチコミを投稿")).toBeInTheDocument();
     expect(
       screen.getByPlaceholderText("ここに入力してください")
@@ -37,7 +37,7 @@ describe("<CourseReview />", () => {
   });
 
   test("shows validation error when submitting empty form", async () => {
-    render(<CourseReview id={1} auth_id="123" />);
+    render(<CourseReview id={"1"} auth_id="123" />);
     fireEvent.click(screen.getByText("投稿する"));
     await waitFor(() => {
       expect(screen.getByText("文字を入力してください")).toBeInTheDocument();
@@ -52,7 +52,7 @@ describe("<CourseReview />", () => {
       })
     ) as jest.Mock;
 
-    render(<CourseReview id={1} auth_id="123" />);
+    render(<CourseReview id={"1"} auth_id="123" />);
     fireEvent.change(screen.getByPlaceholderText("ここに入力してください"), {
       target: { value: "Test Review" },
     });
@@ -72,7 +72,7 @@ describe("<CourseReview />", () => {
       })
     ) as jest.Mock;
 
-    render(<CourseReview id={1} auth_id="123" />);
+    render(<CourseReview id={"1"} auth_id="123" />);
     fireEvent.change(screen.getByPlaceholderText("ここに入力してください"), {
       target: { value: "Test Review" },
     });
@@ -86,7 +86,7 @@ describe("<CourseReview />", () => {
   test("shows error toast when an exception occurs", async () => {
     global.fetch = jest.fn(() => Promise.reject("API is down")) as jest.Mock;
 
-    render(<CourseReview id={1} auth_id="123" />);
+    render(<CourseReview id={"1"} auth_id="123" />);
     fireEvent.change(screen.getByPlaceholderText("ここに入力してください"), {
       target: { value: "Test Review" },
     });

app/allPost/[id]/components/ParticleReview.tsx

@@ -1,29 +1,11 @@
-import { headers } from "next/headers";
+import { Post } from ".";
 import { ReviewType } from "../types/ReviewType";
-import { config } from "lib/config";
-import { Review } from ".";
 
 interface ParticleReviewProps {
-  id: string;
+  post: Post[];
 }
 
-async function getReviewData(id: string, host: string): Promise<Review> {
-  const res = await fetch(
-    `${config.apiPrefix}${host}/api/post/coursepost/${id}`,
-    {
-      cache: "no-store", //ssr
-      method: "GET",
-      headers: { "x-api-key": process.env.NEXT_PUBLIC_API_KEY || "" },
-    }
-  );
-  const data = await res.json();
-  return data;
-}
-
-const ParticleReview = async ({ id }: ParticleReviewProps) => {
-  const host = headers().get("host");
-  const ReviewData = await getReviewData(id, host!);
-  const { post } = ReviewData;
+const ParticleReview = async ({ post }: ParticleReviewProps) => {
   return (
     <div className="py-5">
       <p className="text-center text-base md:text-2xl">クチコミ一覧</p>

app/allPost/[id]/components/ReviewSection.tsx

@@ -1,11 +1,13 @@
 import CourseReview from "./CourseReview";
 import ParticleReview from "./ParticleReview";
+import { Post } from "../components/index";
 
 interface ReviewSectionProps {
   id: string;
   auth_id: string;
+  post: Post[];
 }
-const ReviewSection = ({ id, auth_id }: ReviewSectionProps) => {
+const ReviewSection = ({ id, auth_id, post }: ReviewSectionProps) => {
   return (
     <>
       <p className="font-semibold text-center text-2xl">
@@ -15,7 +17,7 @@ const ReviewSection = ({ id, auth_id }: ReviewSectionProps) => {
       </p>
       <div>
         <CourseReview id={id} auth_id={auth_id} />
-        <ParticleReview id={id} />
+        <ParticleReview post={post} />
       </div>
     </>
   );

app/allPost/[id]/components/UserInfoCard.tsx

@@ -1,7 +1,7 @@
-import { UserType } from "app/hooks/types/UserType";
+import { User } from ".";
 
 interface UserInfoCardProps {
-  user: UserType;
+  user: User;
 }
 
 const UserInfoCard = ({ user }: UserInfoCardProps) => {

app/allPost/[id]/components/index.ts

@@ -1,14 +1,38 @@
-export type Review = {
-  post: [
-    {
-      id: number;
-      createdAt: string;
-      updatedAt: string;
-      title: string;
-      content: string | null;
-      published: boolean;
-      authorId: number;
-      planId: number;
-    }
-  ];
-};
+export interface User {
+  id: number;
+  auth_id: string;
+  email: string;
+  name: string;
+  university: string;
+  faculty: string;
+  department: string;
+  grade: number;
+}
+
+interface Course {
+  id: number;
+  name: string;
+  content: string;
+  planId: number;
+}
+
+export interface Post {
+  id: number;
+  createdAt: string;
+  updatedAt: string;
+  title: string;
+  content: string | null;
+  published: boolean;
+  authorId: number | null;
+  planId: number;
+}
+
+export interface PlanDetail {
+  id: number;
+  title: string;
+  content: string;
+  userId: number;
+  user: User;
+  courses: Course[];
+  post: Post[];
+}

app/allPost/[id]/page.tsx

@@ -7,8 +7,9 @@ import PlanDetails from "./components/PlanDetails";
 import CourseListSection from "./components/CourseListSection";
 import ReviewSection from "./components/ReviewSection";
 import useSeverUser from "app/hooks/useSeverUser";
+import { PlanDetail } from "./components";
 
-async function getDetailData(id: string, host: string) {
+async function getDetailData(id: string, host: string): Promise<PlanDetail> {
   const res = await fetch(`${config.apiPrefix}${host}/api/plan/${id}`, {
     cache: "no-store", //ssr
     method: "GET",
@@ -21,7 +22,7 @@ async function getDetailData(id: string, host: string) {
 const SpecificPage = async ({ params }: { params: { id: string } }) => {
   const host = headers().get("host");
   const CourseData = await getDetailData(params.id, host!);
-  const { title, content, user, courses } = CourseData;
+  const { title, content, user, courses, post } = CourseData;
   const { session } = useSeverUser();
   const auth_id = await session();
   return (
@@ -61,7 +62,7 @@ const SpecificPage = async ({ params }: { params: { id: string } }) => {
         </div>
 
         {/* レビューセクション */}
-        <ReviewSection id={params.id} auth_id={auth_id!} />
+        <ReviewSection id={params.id} auth_id={auth_id!} post={post} />
       </div>
     </>
   );

app/api/plan/[id]/route.ts

@@ -13,6 +13,7 @@ export async function GET(
     include: {
       user: true,
       courses: true,
+      post: true,
     },
   });
   return NextResponse.json(CourseData);