手動で index するのではなく、Queue (中身は Array) を使う (#472)

<!--変更したい場合は、`/.github/pull_request_template.md` を修正して下さい。-->
# PRの概要
closes #458 
<!-- 変更の目的 もしくは 関連する Issue 番号 -->
<!-- 以下のように書くと Issue にリンクでき、マージ時に自動で Issue を閉じられる-->
<!-- closes #1 -->

## 具体的な変更内容
<!-- ビューの変更がある場合はスクショによる比較などがあるとわかりやすい -->

## 影響範囲
<!-- この関数を変更したのでこの機能にも影響がある、など -->

## 動作要件
<!-- 動作に必要な 環境変数 / 依存関係 / DBの更新 など -->

## 補足
<!-- レビューをする際に見てほしい点、ローカル環境で試す際の注意点、など -->

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

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

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

web/app/home/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import CloseIcon from "@mui/icons-material/Close";
+import type { User } from "common/types";
 import { motion, useAnimation } from "framer-motion";
 import { useCallback, useEffect, useState } from "react";
 import { MdThumbUp } from "react-icons/md";
@@ -12,26 +13,35 @@ import FullScreenCircularProgress from "~/components/common/FullScreenCircularPr
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 
 export default function Home() {
-  const { data: recommended, error } = useRecommended();
-  const [nth, setNth] = useState<number>(0);
-  const displayedUser = recommended?.[nth];
-  const nextUser = recommended?.[nth + 1];
+  const { data, error } = useRecommended();
   const controls = useAnimation();
   const [clickedButton, setClickedButton] = useState<string>("");
   const {
     state: { data: myId },
   } = useMyID();
 
-  const reject = useCallback(() => {
-    if (!displayedUser) return;
-    recommended?.push(displayedUser);
-    setNth((n) => n + 1);
-  }, [displayedUser, recommended]);
+  const [_, rerender] = useState({});
+  const [recommended, setRecommended] = useState<Queue<User>>(
+    () => new Queue([]),
+  );
+  useEffect(() => {
+    if (data) setRecommended(new Queue(data));
+  }, [data]);
 
+  const displayedUser = recommended.peek(1);
+  const nextUser = recommended.peek(2);
+  const reject = useCallback(() => {
+    const current = recommended.pop();
+    if (!current) return;
+    recommended.push(current);
+    rerender({});
+  }, [recommended]);
   const accept = useCallback(async () => {
-    setNth((n) => n + 1);
-    if (displayedUser?.id) request.send(displayedUser.id);
-  }, [displayedUser?.id]);
+    const current = recommended.pop();
+    if (!current) return;
+    request.send(current.id);
+    rerender({});
+  }, [recommended]);
 
   const onClickClose = useCallback(() => {
     setClickedButton("cross");
@@ -61,12 +71,6 @@ export default function Home() {
       });
   }, [controls, accept]);
 
-  useEffect(() => {
-    if (!displayedUser) {
-      setNth(0);
-    }
-  }, [displayedUser]);
-
   if (recommended == null) {
     return <FullScreenCircularProgress />;
   }
@@ -144,3 +148,23 @@ const CloseIconStyled = () => <CloseIcon className="text-4xl text-gray-500" />;
 const FavoriteIconStyled = () => (
   <MdThumbUp className="text-3xl text-primary" />
 );
+
+class Queue<T> {
+  private store: T[];
+  constructor(initial: T[]) {
+    this.store = initial;
+  }
+  push(top: T): void {
+    this.store.push(top);
+  }
+  // peek(1) to peek the next elem to be popped, peek(2) peeks the second next element to be popped.
+  peek(nth: number): T | undefined {
+    return this.store[nth - 1];
+  }
+  pop(): T | undefined {
+    return this.store.shift();
+    // yes, I know what you want to say, it has O(n) time complexity.
+    // it doesn't really matter if there is only like 100 people in home queue at most.
+    // if you really care about performance, why don't you go and limit the amount of people to fetch? that probably has significantly more impact to the performance.
+  }
+}