【React-TS + MUI】②メンバーリストのWEBアプリを作成してみた

$ node --version
v16.17.1
$ npm --version
8.15.0

"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.6",
"@mui/lab": "^5.0.0-alpha.102",
"@mui/material": "^5.10.7",
"@stoplight/prism-cli": "^4.10.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.8.4",

openapi: 3.0.3
info:
    title: UserList API
    version: 0.0.1
servers:
    - url: https://localhost:8000
      description: local dev environment

paths:
    /users:
        description: ユーザー一覧を返す
        get:
            responses:
                200:
                    description: OK
                    content:
                        application/json:
                            schema:
                                $ref: '#/components/schemas/Users'
                            examples: テストで実際に使用するデータ
                                Users:
                                    value:
                                        - name: 'AtsuyaShono'
                                          status: 'working'
                                          thumbnail: 'https://picsum.photos/200/300?random=0' // ランダムで画像取得
                                          userID: 'U037FC0HGGJ'
                                        - name: 'user1'
                                          status: 'working'
                                          thumbnail: 'https://picsum.photos/200/300?random=1'
                                          userId: 'U0XXXXXXXX1'
                                        ~~~~~省略~~~~~
components:
    schemas:
        Status:
            type: string
            enum: [working, notWorking, unknown]
        User:
            type: object
            properties:
                name: // 名前
                    type: string
                status: // 勤務状態
                    $ref: '#/components/schemas/Status'
                thumbnail: // アイコン画像URL
                    type: string
                    format: uri
                userID: // ユーザーID
                    type: string
        Users:
            type: array
            items:
                $ref: '#/components/schemas/User'

$ npx prism mock ./src/specfile.yml --port 8000

export type User = {
    name?: string; // 名前
    status?: string; // 勤務状態
    thumbnail?: string; // アイコン画像URL
    userID?: string; // ユーザーID
};

import axios from "axios";
import { useState } from "react";

import { User } from "../types/usertype";

export const useAllUsers = () => {
  const [users, setUsers] = useState<Array<User>>([]);

  const getAllUsers = () => {
    // GET メソッド
    axios.get<Array<User>>("http://localhost:8000/users").then((res) => {
      const data = res.data.map((user) => ({
        name: user.name,
        status: user.status,
        thumbnail: user.thumbnail,
        userID: user.userID,
      }));
      setUsers(data); // stateの更新
    });
  };

  return { getAllUsers, users }; // 別コンポーネントで使えるように'return'します
};

import { useEffect } from "react";
import { memo, FC } from "react";
import { useAllUsers } from "../hooks/useAllUsers";

export const MemberList: FC = memo(() => {
  const { getAllUsers, users } = useAllUsers(); // カスタムフック呼び出し

  useEffect(() => {
    getAllUsers(); // API取得
  }, []);

  return (
    <>
        // 表示
      {users.map((user) => (
        <>
          <p>{user.name}</p>
          <p>{user.status}</p>
          <p>{user.thumbnail}</p>
          <p>{user.userID}</p>
        </>
      ))}
    </>
  );
});