【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",

import { memo, FC } from "react";

import Avatar from "@mui/material/Avatar";
import { Paper } from "@mui/material";

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

type Props = {
  user: User; // ユーザー情報{name, status, thumbnail, useID}
  size?: number; // アイコンの大きさ
};

export const UserIcon: FC<Props> = memo((props) => {
  const { user, size = 50 } = props;

  return (
    <>
      <Paper // アイコン周り外枠
        sx={{
          padding: "6px",
          margin: 1,
          borderRadius: "100%",
          bgcolor: "#757575",
          ...(user.status === "working" && { // 勤務中の場合
            bgcolor: "#70c4bc",
          }),
          ...(user.status === "notWorking" && { // 退勤中の場合
            bgcolor: "#ea8f8f",
          }),
          ...(user.status === undefined && { // 不明の場合
            bgcolor: "background.default",
          }),
        }}
      >
        <Avatar // アイコン
          alt={user.name}
          src={user.thumbnail}
          sx={{ width: size, height: size, border: 1 }}
        />
      </Paper>
    </>
  );
});

import { memo, FC } from "react";

import ListItemText from "@mui/material/ListItemText";
import ListItemIcon from "@mui/material/ListItemIcon";
import { MenuItem } from "@mui/material";

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

type Props = {
  user: User;
};

export const UserCard: FC<Props> = memo((props) => {
  const { user } = props; // ユーザー情報受け取り

  return (
    <>
      <MenuItem>
        <ListItemIcon>
          <UserIcon user={user} /> // アイコン
        </ListItemIcon>
        <ListItemText
          primary={user.name} // 名前
          primaryTypographyProps={{ fontSize: { xs: 20, md: 40 } }}
          secondary={ // 勤務状態
            user.status === "working"
              ? "勤務中"
              : user.status === "notWorking" && "退勤"
          }
        />
      </MenuItem>
    </>
  );
});

import { useEffect, useState } from "react";
import { memo, FC } from "react";

import Paper from "@mui/material/Paper";
import MenuList from "@mui/material/MenuList";
import { Box, Tab } from "@mui/material";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";

import { UserCard } from "../molecules/UserCard";
import { useAllUsers } from "../hooks/useAllUsers";

export const UserList: FC = memo(() => {
  const [value, setValue] = useState("1"); // タブ番号
  const { getAllUsers, users } = useAllUsers(); // カスタムフック

  const handleChange = (event: unknown, newValue: string) => { // タブ切り替え
    setValue(newValue);
  };

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

  return (
    <Paper
      sx={{
        width: `80%`,
        overflow: "auto",
        m: 1,
        borderRadius: 5,
        boxShadow: 10,
      }}
    >
      <Box sx={{ width: "100%", typography: "body1" }}>
        <TabContext value={value}>
          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
            <TabList
              onChange={handleChange} // 選択したタブに切り替える(valueを切り替え)
              aria-label="lab API tabs example"
              centered // 中央揃え
              variant="fullWidth" // 最大横幅
            >
             // タブ 
              <Tab label="メンバー一覧" value="1" />
              <Tab label="勤務中" value="2" />
              <Tab label="退勤" value="3" />
            </TabList>
          </Box>
           // 選択されたタブを表示(valueに応じて表示が変わる)
          <TabPanel value="1">
            <MenuList>
              {users.map((user) => (
                <UserCard user={user} key={user.userID} />
              ))}
            </MenuList>
          </TabPanel>
          <TabPanel value="2">
            <MenuList>
              {users.map(
                (user) =>
                  user.status === "working" && (
                    <UserCard user={user} key={user.userID} />
                  )
              )}
            </MenuList>
          </TabPanel>
          <TabPanel value="3">
            <MenuList>
              {users.map(
                (user) =>
                  user.status === "notWorking" && (
                    <UserCard user={user} key={user.userID} />
                  )
              )}
            </MenuList>
          </TabPanel>
        </TabContext>
      </Box>
    </Paper>
  );
});