From dd3be0cda5ffca0e0a634aa9c045aa44156714f7 Mon Sep 17 00:00:00 2001
From: takecchi <takecchi.kobayashi@gmail.com>
Date: Fri, 29 Mar 2024 01:04:35 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=AD=E3=83=BC=E4=B8=80?=
 =?UTF-8?q?=E8=A6=A7=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[username]/_components/Following.tsx      | 14 +++++
 .../_components/layouts/FollowList.tsx        | 44 +++++++++++++++
 .../(public)/[username]/following/page.tsx    | 36 +++++++++++--
 src/swr/client/follows.ts                     | 53 +++++++++++++++++++
 4 files changed, 144 insertions(+), 3 deletions(-)
 create mode 100644 src/app/(menu)/(public)/[username]/_components/Following.tsx
 create mode 100644 src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx
 create mode 100644 src/swr/client/follows.ts

diff --git a/src/app/(menu)/(public)/[username]/_components/Following.tsx b/src/app/(menu)/(public)/[username]/_components/Following.tsx
new file mode 100644
index 00000000..c749002e
--- /dev/null
+++ b/src/app/(menu)/(public)/[username]/_components/Following.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import FollowList from '@/app/(menu)/(public)/[username]/_components/layouts/FollowList';
+import { useFollowing } from '@/swr/client/follows';
+import { UserWithFollows } from '@cuculus/cuculus-api';
+
+/**
+ * フォロー一覧表示コンポーネント
+ * @param user
+ * @constructor
+ */
+export default function Following({ user }: { user: UserWithFollows }) {
+  return <FollowList follows={useFollowing(user.id)} />;
+}
diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx
new file mode 100644
index 00000000..7877a1ec
--- /dev/null
+++ b/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx
@@ -0,0 +1,44 @@
+import { SWRInfiniteResponse } from 'swr/infinite';
+import { FollowList } from '@cuculus/cuculus-api';
+import { CircularProgress } from '@mui/material';
+
+type Props = {
+  follows: SWRInfiniteResponse<FollowList | undefined, Error>;
+};
+
+/**
+ * フォロー/フォロワーリスト
+ * @param follows
+ * @constructor
+ */
+export default function FollowList({ follows }: Props) {
+  const { data, isLoading, size, setSize } = follows;
+
+  if (isLoading) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <CircularProgress />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div>現在のページ: {size}</div>
+      <button onClick={() => void setSize(size + 1)}>次のページへ</button>
+      {data?.map((follow, index) => (
+        <div key={index}>
+          {follow?.users.map((user) => (
+            <div key={user.id}>ユーザー名:{user.name}</div>
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}
diff --git a/src/app/(menu)/(public)/[username]/following/page.tsx b/src/app/(menu)/(public)/[username]/following/page.tsx
index acda81f8..08a45a79 100644
--- a/src/app/(menu)/(public)/[username]/following/page.tsx
+++ b/src/app/(menu)/(public)/[username]/following/page.tsx
@@ -1,10 +1,40 @@
-import ComingSoon from '@/app/(menu)/_components/main/ComingSoon';
 import PrimaryColumn from '@/app/(menu)/_components/main/PrimaryColumn';
+import { cache } from 'react';
+import { usersApi } from '@/libs/cuculus-client';
+import { notFound } from 'next/navigation';
+import Following from '@/app/(menu)/(public)/[username]/_components/Following';
+
+type Params = { params: { username: string } };
+
+const getUser = cache(async (username: string) => {
+  try {
+    return await usersApi.getUserByUsername(
+      { username },
+      {
+        next: {
+          revalidate: 300,
+        },
+      },
+    );
+  } catch {
+    return undefined;
+  }
+});
+
+/**
+ * フォロー一覧ページ
+ * @param params
+ */
+export default async function page({ params }: Params) {
+  const username = decodeURIComponent(params.username);
+  const user = await getUser(username);
+  if (!user) {
+    notFound();
+  }
 
-export default function page({}: { params: { userName: string } }) {
   return (
     <PrimaryColumn hideHeader={true}>
-      <ComingSoon />
+      <Following user={user} />
     </PrimaryColumn>
   );
 }
diff --git a/src/swr/client/follows.ts b/src/swr/client/follows.ts
new file mode 100644
index 00000000..0d89ffba
--- /dev/null
+++ b/src/swr/client/follows.ts
@@ -0,0 +1,53 @@
+import { useAuth } from '@/swr/client/auth';
+import { usersApi } from '@/libs/cuculus-client';
+import { getAuthorizationHeader } from '@/libs/auth';
+import useSWRInfinite from 'swr/infinite';
+import { FollowList } from '@cuculus/cuculus-api';
+
+// FIXME 確認用に一旦10件にしている
+const LIMIT = 10;
+
+type SWRKey = {
+  key: string;
+  authId?: number;
+  userId: number;
+  nextUntil?: Date;
+};
+
+/**
+ * フォロー一覧の取得
+ * @param userId
+ */
+export const useFollowing = (userId: number) => {
+  const { data: authId } = useAuth();
+  return useSWRInfinite<
+    FollowList | undefined,
+    Error,
+    (index: number, prev: FollowList | undefined) => SWRKey | null
+  >(
+    (index, previousPageData) => {
+      // 取得結果が空の場合は次のページがないと判断して終了
+      if (previousPageData && !previousPageData.users.length) {
+        return null;
+      }
+      return {
+        key: 'useFollowing',
+        authId,
+        userId,
+        nextUntil: previousPageData?.nextUntil,
+      };
+    },
+    async (args) => {
+      try {
+        return await usersApi.getUserFollowing(
+          { id: args.userId, until: args.nextUntil, limit: LIMIT },
+          {
+            headers: await getAuthorizationHeader(authId),
+          },
+        );
+      } catch (error) {
+        throw error;
+      }
+    },
+  );
+};