SWR キャッシュによる UX の改善となんか挙動に文句言われたので SQL 書き直した (#340)

# PRの概要
closes #302 
useSWR を Friend ページと Chat ページに適用

## 具体的な変更内容
Friend + Chat。
Settings の Course は難しくて一旦パス。
Home は SWR と相性が悪い (すると Twitter みたいに出てきた人がすぐ流れるようになる) ので Skeleton UI
などにする予定。
あとなんか Home 触ってたら #301 と #296  も直ったので、 close #301 and close #296  。

## 影響範囲
Home 以外すべてのページとHome。

## 動作要件
なし。

## レビューリクエストを出す前にチェック！

- [x] 改めてセルフレビューしたか
- [x] 手動での動作検証を行ったか
- [x] server の機能追加ならば、テストを書いたか
  - 理由: server の機能追加ではない
- [x] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 間違った使い方は存在しない
- [x] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

Author: aster-void

server/prisma/sql/recommend.sql

@@ -1,7 +1,33 @@
-SELECT recv.id AS recv, COUNT(recv_enroll) AS overlap FROM "User" recv
-INNER JOIN "Enrollment" recv_enroll ON recv_enroll."userId" = recv.id
-INNER JOIN "Course" course ON recv_enroll."courseId" = course.id
-INNER JOIN "Enrollment" req_enroll ON req_enroll."courseId" = course.id
-WHERE req_enroll."userId" = $1 AND recv.id <> $1
-GROUP BY recv.id
-ORDER BY overlap DESC LIMIT $2 OFFSET $3;
+SELECT recv.id, 
+    (SELECT COUNT(*) FROM "Enrollment" recv_enroll
+    INNER JOIN "Enrollment" req_enroll
+    ON recv_enroll."courseId" = req_enroll."courseId" 
+    WHERE recv_enroll."userId" = recv.id
+    AND req_enroll."userId" = $1)
+AS overlap FROM "User" recv
+WHERE recv.id <> $1
+
+AND NOT EXISTS (
+    SELECT * FROM "Relationship" rel
+    WHERE rel."sendingUserId" IN ($1, recv.id) AND rel."receivingUserId" IN ($1, recv.id)
+    AND status = 'MATCHED'
+)
+
+AND NOT EXISTS (
+    SELECT * FROM  "Relationship" rel_pd
+    WHERE rel_pd."sendingUserId" = $1 AND rel_pd."receivingUserId" = recv.id
+    AND status = 'PENDING'
+)
+
+ORDER BY overlap DESC
+LIMIT $2 OFFSET $3;
+
+-- SELECT recv.id AS recv, COUNT(recv_enroll) AS overlap FROM "User" recv
+-- LEFT JOIN "Relationship" rel ON (rel."sendingUserId" = recv.id AND rel."receivingUserId" = $1) OR (rel."sendingUserId" = $1 AND rel."sendingUserId" = recv.id)
+-- LEFT JOIN "Enrollment" recv_enroll ON recv_enroll."userId" = recv.id
+-- INNER JOIN "Course" course ON recv_enroll."courseId" = course.id
+-- INNER JOIN "Enrollment" req_enroll ON req_enroll."courseId" = course.id
+-- WHERE req_enroll."userId" = $1 AND recv.id <> $1
+-- AND rel.status != 'MATCHED'
+-- GROUP BY recv.id
+-- ORDER BY overlap DESC LIMIT $2 OFFSET $3;

server/src/database/users.ts

@@ -108,3 +108,39 @@ export async function getAllUsers(): Promise<Result<User[]>> {
     return Err(e);
   }
 }
+
+// TODO: FIXME: currently also showing users that the requester has already sent request to, to not change behavior.
+// but this is probably not ideal. consider only showing people with no relation.
+// (or just remove this function and use recommended() instead)
+export async function unmatched(id: UserID): Promise<Result<User[]>> {
+  return prisma.user
+    .findMany({
+      where: {
+        AND: [
+          {
+            receivingUsers: {
+              none: {
+                sendingUserId: id,
+                status: "MATCHED",
+              },
+            },
+          },
+          {
+            sendingUsers: {
+              none: {
+                receivingUserId: id,
+                status: "MATCHED",
+              },
+            },
+          },
+          {
+            NOT: {
+              id: id,
+            },
+          },
+        ],
+      },
+    })
+    .then((res) => Ok(res))
+    .catch((err) => Err(err));
+}

server/src/functions/engines/recommendation.ts

@@ -13,7 +13,7 @@ export async function recommendedTo(
     const result = await prisma.$queryRawTyped(sql(user, limit, offset));
     return Promise.all(
       result.map(async (res) => {
-        const user = await getUserByID(res.recv);
+        const user = await getUserByID(res.id);
         if (!user.ok) throw new Error("not found"); // this shouldn't happen
         return {
           count: Number.parseInt(res.overlap?.toString() ?? "0"),

server/src/router/users.ts

@@ -15,6 +15,7 @@ import {
   deleteUser,
   getUser,
   getUserByID,
+  unmatched,
   updateUser,
 } from "../database/users";
 import { safeGetUserId } from "../firebase/auth/db";
@@ -37,7 +38,7 @@ router.get("/recommended", async (req, res) => {
   const recommended = await recommendedTo(u.value, 20, 0); // とりあえず 20 人
 
   if (recommended.ok) {
-    res.send(recommended.value);
+    res.send(recommended.value.map((entry) => entry.u));
   } else {
     res.status(500).send(recommended.error);
   }

web/src/api/chat/chat.ts

@@ -49,6 +49,7 @@ export async function updateMessage(
     );
   return res.json();
 }
+
 // 自身の参加しているすべての Room (DM グループチャットともに) の概要 (Overview) の取得 (メッセージの履歴を除く)
 export async function overview(): Promise<RoomOverview[]> {
   const res = await credFetch("GET", endpoints.roomOverview);
@@ -73,7 +74,7 @@ export async function sendDM(
   return res.json();
 }
 
-// 相手のIDを指定して、
+// WARNING: don't use this outside of api/
 export async function getDM(friendId: UserID): Promise<DMRoom> {
   const res = await credFetch("GET", endpoints.dmWith(friendId));
   if (res.status === 401) throw new ErrUnauthorized();

web/src/api/chat/hooks.ts

@@ -1,42 +1,25 @@
+import { useCallback } from "react";
 import { z } from "zod";
 // import { useCallback, useEffect, useState } from "react";
-import type { RoomOverview } from "../../common/types";
-import { RoomOverviewSchema } from "../../common/zod/schemas";
+import type { Message, RoomOverview } from "../../common/types";
+import { MessageSchema, RoomOverviewSchema } from "../../common/zod/schemas";
 import { type Hook, useSWR } from "../../hooks/useSWR";
+import type { UserID } from "../internal/endpoints";
 // import type { Hook } from "../share/types";
 import * as chat from "./chat";
 
 const OverviewListSchema = z.array(RoomOverviewSchema);
 export function useRoomsOverview(): Hook<RoomOverview[]> {
   return useSWR("useRoomsOverview", chat.overview, OverviewListSchema);
 }
-// export function useRoomsOverview(): Hook<RoomOverview[]> {
-//   const [data, setData] = useState<RoomOverview[] | null>(null);
-//   const [error, setError] = useState<Error | null>(null);
-//   const [loading, setLoading] = useState<boolean>(true);
 
-//   const reload = useCallback(async () => {
-//     setLoading(true);
-//     try {
-//       const data = await chat.overview();
-//       setData(data);
-//       setError(null);
-//       setLoading(false);
-//     } catch (e) {
-//       setData(null);
-//       setError(e as Error);
-//       setLoading(false);
-//     }
-//   }, []);
-
-//   useEffect(() => {
-//     reload();
-//   }, [reload]);
-
-//   return {
-//     data,
-//     error,
-//     loading,
-//     reload,
-//   };
-// }
+const MessageListSchema = z.array(MessageSchema);
+// 相手のIDを指定して、
+export function useMessages(friendId: UserID): Hook<Message[]> {
+  const key = `chat::dm::${friendId}`;
+  const fetcher = useCallback(
+    async () => (await chat.getDM(friendId)).messages,
+    [friendId],
+  );
+  return useSWR(key, fetcher, MessageListSchema);
+}

web/src/api/hooks.ts

@@ -38,6 +38,17 @@ export const user = (userId: UserID) => {
  **/
 export const users = `${origin}/users`;
 
+/**
+ * [v] 実装済み
+ * GET -> get top N users recommended to me.
+ * - statuses:
+ *   - 200: good.
+ *     - body: User[]
+ *   - 401: auth error.
+ *   - 500: internal error
+ **/
+export const recommendedUsers = `${origin}/users/recommended`;
+
 /**
  * [v] 実装済み
  * GET -> get info of me.
@@ -358,8 +369,7 @@ export const picture = `${origin}/picture`;
 export default {
   user,
   me,
-  coursesMine,
-  coursesMineOverlaps,
+  recommendedUsers,
   userByGUID,
   userExists,
   users,
@@ -381,6 +391,8 @@ export default {
   sharedRooms,
   roomInvite,
   message,
+  coursesMine,
+  coursesMineOverlaps,
   pictureOf,
   picture,
 };

web/src/api/internal/endpoints.ts

@@ -1,31 +1,57 @@
+import { z } from "zod";
 import type { GUID, UpdateUser, User, UserID } from "../common/types";
 import { parseUser } from "../common/zod/methods.ts";
+import { UserIDSchema, UserSchema } from "../common/zod/schemas.ts";
 import { credFetch } from "../firebase/auth/lib.ts";
+import { useAuthorizedData } from "../hooks/useData.ts";
+import { type Hook, useSWR } from "../hooks/useSWR.ts";
 import endpoints from "./internal/endpoints.ts";
+import type { Hook as UseHook } from "./share/types.ts";
 
-// TODO: migrate to safe functions
+const UserListSchema = z.array(UserSchema);
 
-//全てのユーザ情報を取得する
-export async function all(): Promise<User[]> {
-  const res = await credFetch("GET", endpoints.users);
-  const users = await res.json();
-  const safeUsers: User[] = users.map((user: User) => parseUser(user));
-  return safeUsers;
+export function useRecommended(): UseHook<User[]> {
+  const url = endpoints.recommendedUsers;
+  return useAuthorizedData<User[]>(url);
+}
+export function useMatched(): Hook<User[]> {
+  return useSWR("users::matched", matched, UserListSchema);
+}
+export function usePendingToMe(): Hook<User[]> {
+  return useSWR("users::pending::to-me", pendingToMe, UserListSchema);
+}
+export function usePendingFromMe(): Hook<User[]> {
+  return useSWR("users::pending::from-me", pendingFromMe, UserListSchema);
 }
 
-export async function matched(): Promise<User[]> {
+async function matched(): Promise<User[]> {
   const res = await credFetch("GET", endpoints.matchedUsers);
   return res.json();
 }
+async function pendingToMe(): Promise<User[]> {
+  const res = await credFetch("GET", endpoints.pendingRequestsToMe);
+  return await res.json();
+}
+async function pendingFromMe(): Promise<User[]> {
+  const res = await credFetch("GET", endpoints.pendingRequestsFromMe);
+  return await res.json();
+}
 
 // 自身のユーザー情報を取得する
-export async function aboutMe(): Promise<User> {
+export function useAboutMe(): Hook<User> {
+  return useSWR("users::aboutMe", aboutMe, UserSchema);
+}
+
+async function aboutMe(): Promise<User> {
   const res = await credFetch("GET", endpoints.me);
   return res.json();
 }
 
 // 自身のユーザーIDを取得する
-export async function getMyId(): Promise<UserID> {
+export function useMyID(): Hook<UserID> {
+  return useSWR("users::myId", getMyId, UserIDSchema);
+}
+async function getMyId(): Promise<UserID> {
   const me = await aboutMe();
   return me.id;
 }
@@ -41,17 +67,6 @@ export async function remove(): Promise<void> {
   await credFetch("DELETE", endpoints.me);
 }
 
-//指定した id のユーザ情報を除いた全てのユーザ情報を取得する
-export async function except(id: UserID): Promise<User[]> {
-  try {
-    const data = await all();
-    return data.filter((user: User) => user.id !== id);
-  } catch (err) {
-    console.error("Error fetching data:", err);
-    throw err;
-  }
-}
-
 /**
  * Google アカウントの uid を用いて CourseMate ユーザの情報とステータスコードを取得する。
  * @param guid Google アカウントの uid
@@ -88,13 +103,12 @@ export async function getByGUID(
 
 //指定した guid のユーザが存在するかどうかを取得する
 export async function exists(guid: GUID): Promise<boolean> {
-  try {
-    const res = await credFetch("GET", endpoints.userExists(guid));
-    if (res.status === 404) return false;
-    return true;
-  } catch {
-    return false;
-  }
+  const res = await credFetch("GET", endpoints.userExists(guid));
+  if (res.status === 404) return false;
+  if (res.status === 200) return true;
+  throw new Error(
+    `Unexpected status code: expected 200 or 404, got ${res.status}`,
+  );
 }
 
 // 指定した id のユーザ情報を取得する
@@ -108,16 +122,3 @@ export async function create(userdata: Omit<User, "id">): Promise<User> {
   const res = await credFetch("POST", endpoints.users, userdata);
   return await res.json();
 }
-
-export default {
-  get,
-  aboutMe,
-  getByGUID,
-  all,
-  matched,
-  except,
-  exists,
-  create,
-  update,
-  remove,
-};