feat: トップページを準備 (#4)

Author: SatooRu65536

Diff for: src/components/pages/top/body.tsx

@@ -0,0 +1,20 @@
+import { type ReactElement } from 'react';
+import { type User } from '@/types/user';
+
+interface Props {
+  user: User<false>;
+}
+
+const TopBody = (props: Props): ReactElement => {
+  const { user } = props;
+
+  return (
+    <div key={user.id}>
+      <p>
+        {user.lastName} {user.firstName}
+      </p>
+    </div>
+  );
+};
+
+export default TopBody;

Diff for: src/components/pages/top/index.tsx

@@ -0,0 +1,18 @@
+import { useAtomValue } from 'jotai';
+import { type ReactElement } from 'react';
+import TopBody from './body';
+import { userAtomLoadable } from '@/stores/usersAtom';
+
+const TopPage = (): ReactElement => {
+  const users = useAtomValue(userAtomLoadable);
+
+  return (
+    <main>
+      {users.state === 'hasError' && <p>エラー</p>}
+      {users.state === 'loading' && <p>ローディング中</p>}
+      {users.state === 'hasData' && users.data.map((user) => <TopBody key={user.id} user={user} />)}
+    </main>
+  );
+};
+
+export default TopPage;

Diff for: src/pages/index.tsx

@@ -1,55 +1,6 @@
-import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
-import { Button, Flex } from 'antd';
-import { useAtom } from 'jotai';
 import { type ReactElement } from 'react';
-import styled from 'styled-components';
-import { countAtom } from '@/stores/counter';
+import TopPage from '@/components/pages/top';
 
-const Container = styled.div`
-  height: 100%;
-  width: 100%;
-  display: grid;
-  place-items: center;
-  place-content: center;
-`;
+const Page = (): ReactElement => <TopPage />;
 
-const Title = styled.p`
-  font-size: 2rem;
-  font-weight: bold;
-  text-align: center;
-  padding: 1rem;
-`;
-
-const IndexPage = (): ReactElement => {
-  const [count, setCount] = useAtom(countAtom);
-
-  return (
-    <Container>
-      <Flex align="center" gap="1rem" vertical>
-        <Title>Hello Vite + React SWC + React Router + styled-components + jotai + Antd!</Title>
-        <p>Count: {count}</p>
-        <Flex gap="0.5rem">
-          <Button
-            icon={<ReloadOutlined />}
-            onClick={() => {
-              setCount(0);
-            }}
-          >
-            Reset
-          </Button>
-          <Button
-            icon={<PlusOutlined />}
-            onClick={() => {
-              setCount((_prev) => _prev + 1);
-            }}
-            type="primary"
-          >
-            Increment
-          </Button>
-        </Flex>
-      </Flex>
-    </Container>
-  );
-};
-
-export default IndexPage;
+export default Page;

Diff for: src/stores/counter.ts

@@ -0,0 +1,46 @@
+import { atom } from 'jotai';
+import { loadable } from 'jotai/utils';
+import { type User } from '@/types/user';
+import { waitMs } from '@/utils/promise';
+
+const fetchUsers = async (): Promise<Array<User<false>>> => {
+  await waitMs(2000);
+
+  const users: Array<User<false>> = [
+    {
+      id: '',
+      firstName: 'さとる',
+      lastName: '佐藤',
+      firstNameKana: '',
+      lastNameKana: '',
+      skills: ['JavaScript', 'TypeScript', 'React'],
+      graduationYear: 2027,
+      slackName: '',
+      iconUrl: '',
+      type: 'active',
+      grade: 'B1',
+      position: '部員',
+      studentNumber: 'k23075',
+    },
+    {
+      id: '',
+      firstName: '邪馬',
+      lastName: '山田',
+      firstNameKana: '',
+      lastNameKana: '',
+      skills: ['JavaScript', 'TypeScript', 'React'],
+      graduationYear: 2027,
+      slackName: '',
+      iconUrl: '',
+      type: 'active',
+      grade: 'B1',
+      position: '部員',
+      studentNumber: 'k23075',
+    },
+  ];
+
+  return users;
+};
+
+const usersAtom = atom(async () => await fetchUsers());
+export const userAtomLoadable = loadable(usersAtom);

Diff for: src/stores/usersAtom.ts

@@ -0,0 +1,55 @@
+// 現役部員
+export interface ActiveUserProps {
+  type: 'active';
+  studentNumber: string;
+  position: string;
+  grade: string;
+}
+
+// OB・OG
+export interface OBOGMemberProps {
+  type: 'obog';
+  oldPosition: string;
+  oldStudentNumber: string;
+  employment: string;
+}
+
+// 外部
+export interface ExternalMember {
+  type: 'external';
+  school: string;
+  organization: string;
+}
+
+// 住所
+export interface Address {
+  postalCode: string;
+  address: string;
+}
+
+// 非公開情報
+export interface PrivateProps {
+  birthdate: string;
+  gender: string;
+  phoneNumber: string;
+  email: string;
+  currentAddress: Address;
+  homeAddress: Address;
+}
+
+// ユーザー
+export interface UserBase {
+  id: string;
+  firstName: string;
+  lastName: string;
+  firstNameKana: string;
+  lastNameKana: string;
+  skills: string[];
+  graduationYear: number;
+  slackName: string;
+  iconUrl: string;
+}
+
+export type User<WithPrivate extends boolean> = UserBase &
+  (ActiveUserProps | OBOGMemberProps | ExternalMember) &
+  (WithPrivate extends true ? PrivateProps : Record<never, never>);