我々が作成したアクターがフォローしているアクターのリストを表示するページを作成しましょう。
まず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ページを開いてみましょう：
