Merge pull request #89 from su-its/feat/user-card/update-data

UserCardでAPIから取得したデータを使用

typing-app/__test__/components/UserCard.test.tsx

@@ -0,0 +1,37 @@
+import { UserCardPresenter } from "@/components/molecules/UserCard";
+import { describe, expect, it } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import type { User } from "@/types/user";
+
+describe("UserCard", () => {
+  const mockUser: User = {
+    handleName: "しずっぴー",
+    studentNumber: "B1234567",
+    id: "1",
+  };
+
+  it("renders UserCard", () => {
+    const userCard = render(<UserCardPresenter user={mockUser} />);
+
+    const avatar = screen.getByRole("img");
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it("renders UserCard with user data", () => {
+    const userCard = render(<UserCardPresenter user={mockUser} />);
+
+    const name = screen.getByText(/名前:/);
+    const studentNumber = screen.getByText(/学籍番号:/);
+    expect(name).toHaveTextContent(mockUser.handleName);
+    expect(studentNumber).toHaveTextContent(mockUser.studentNumber);
+  });
+
+  it("renders UserCard with default data", () => {
+    const userCard = render(<UserCardPresenter user={null as any} />);
+
+    const name = screen.getByText(/名前:/);
+    const studentNumber = screen.getByText(/学籍番号:/);
+    expect(name).toHaveTextContent("ログインしていません");
+    expect(studentNumber).toHaveTextContent("未ログイン");
+  });
+});

typing-app/src/app/actions.ts

@@ -45,12 +45,12 @@ export async function logout() {
 
 export async function getCurrentUser() {
   const userStr = cookies().get("user")?.value;
-  if (!userStr) return null;
+  if (!userStr) return undefined;
 
   function isValidUser(o: any): o is User {
     return o && typeof o.id === "string" && typeof o.studentNumber === "string" && typeof o.handleName == "string";
   }
 
   const user = JSON.parse(userStr) as User;
-  return isValidUser(user) ? user : null;
+  return isValidUser(user) ? user : undefined;
 }

typing-app/src/components/molecules/UserCard.tsx

@@ -1,29 +1,33 @@
 import React from "react";
 import { Avatar, Box, Text, HStack, VStack } from "@chakra-ui/react";
+import { getCurrentUser } from "@/app/actions";
+import type { User } from "@/types/user";
 
-const UserCard: React.FC = () => {
-  // モックのユーザー情報
-  const user = {
-    name: "テストユーザー",
-    studentId: "24AB1234",
-    avatarUrl: "https://avatars.githubusercontent.com/u/12345678?v=4",
-  };
+interface UserCardPresenterProps {
+  user?: User;
+}
 
+export const UserCardPresenter = ({ user }: UserCardPresenterProps) => {
   return (
-    user && (
-      <Box bg={"blue.600"} p={5}>
-        <HStack spacing={4}>
-          <Avatar src={user.avatarUrl} maxW="100px" borderRadius="9" />
-          <VStack align="start">
-            <Text fontSize="lg" fontWeight="bold" color={"white"}>
-              名前: {user.name}
-            </Text>
-            <Text color={"white"}>学籍番号: {user.studentId}</Text>
-          </VStack>
-        </HStack>
-      </Box>
-    )
+    <HStack spacing={4} bg="blue.600">
+      <Avatar
+        src={"https://www.shizuoka.ac.jp/cms/files/shizudai/MASTER/0100/uISrbYCb_VL033_r03.png"}
+        boxSize="100px"
+        borderRadius="0"
+      />
+      <VStack align="start" paddingRight="8px">
+        <Text fontSize="lg" fontWeight="bold" color="white">
+          名前: {user ? user.handleName : "ログインしていません"}
+        </Text>
+        <Text color="white">学籍番号: {user ? user.studentNumber : "未ログイン"}</Text>
+      </VStack>
+    </HStack>
   );
 };
 
+const UserCard = async () => {
+  const user = await getCurrentUser();
+  return <UserCardPresenter user={user} />;
+};
+
 export default UserCard;