我々が作成したアクターがフォローしているアクターのリストを表示するページを作成しましょう。

まずsrc/views.tsxファイルを開き、<FollowingList>コンポーネントを追加します:

export interface FollowingListProps {
  following: Actor[];
}

export const FollowingList: FC<FollowingListProps> = ({ following }) => (
  <>
    <h2>Following</h2>
    <ul>
      {following.map((actor) => (
        <li key={actor.id}>
          <ActorLink actor={actor} />
        </li>
      ))}
    </ul>
  </>
);

次に、src/app.tsxファイルを開き、先ほど定義した<FollowingList>コンポーネントをインポートします:

import {
  FollowerList,
  FollowingList,  // 追加
  Home,
  Layout,
  PostList,
  PostPage,
  Profile,
  SetupForm,
} from "./views.tsx";

そしてGET /users/{username}/followingリクエストに対するハンドラーを追加します:

app.get("/users/:username/following", async (c) => {
  const following = db
    .prepare<unknown[], Actor>(
      `
      SELECT following.*
      FROM follows
      JOIN actors AS followers ON follows.follower_id = followers.id
      JOIN actors AS following ON follows.following_id = following.id
      JOIN users ON users.id = followers.user_id
      WHERE users.username = ?
      ORDER BY follows.created DESC
      `,
    )
    .all(c.req.param("username"));
  return c.html(
    <Layout>
      <FollowingList following={following} />
    </Layout>,
  );
});

正しく実装されたかどうか確認するために、ウェブブラウザでhttp://localhost:8000/users/johndoe/followingページを開いてみましょう:

フォローリスト