Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FeedPage・ページネーション #25

Merged
merged 10 commits into from
Mar 28, 2024
Merged

Conversation

IwaseMio
Copy link
Collaborator

概要

FeedPageのページネーションを実装しました。

CLIENT_IDとCLIENT_SECRET

実装した内容

UI

Screen_recording_20240324_185038.webm

動作確認

参考

その他

@IwaseMio IwaseMio self-assigned this Mar 24, 2024
@IwaseMio IwaseMio linked an issue Mar 24, 2024 that may be closed by this pull request
Copy link
Collaborator

@KobayashiYoh KobayashiYoh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

コメントしました
修正は任意です

Comment on lines 8 to 9
QiitaRepository.fetchQiitaItems();
QiitaRepository.fetchQiitaItems(PaginatedDataTable.defaultRowsPerPage);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ビルドの度にこのメソッドが実行されているので、削除しちゃってもいいかもしれないです。

Comment on lines 28 to 40
void fetchArticles() async {
// QiitaRepositoryから記事データを非同期で取得
List<Article> fetchedArticles = await QiitaRepository.fetchQiitaItems();
// 取得した記事データをステートにセット
setState(() {
articles = fetchedArticles;
});
if (!isLoading) {
setState(() {
isLoading = true;
});
List<Article> fetchedArticles =
await QiitaRepository.fetchQiitaItems(currentPage);
setState(() {
articles.addAll(fetchedArticles);
isLoading = false;
});
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isLoadingはこういう風に使うとインデントが深くならずに済みますよ

  void fetchArticles() async {
    if (isLoading) return;
    setState(() {
      isLoading = true;
    });
    List<Article> fetchedArticles =
        await QiitaRepository.fetchQiitaItems(currentPage);
    setState(() {
      articles.addAll(fetchedArticles);
      isLoading = false;
    });
  }

Comment on lines 42 to 48
void _scrollListener() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
// 最下部にスクロールした時に次のページを読み込む
currentPage++; // 次のページ番号を更新
fetchArticles();
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

難しくて苦戦するポイントですが、しっかり実装できています✨
しかも1日足らずで!

Comment on lines 71 to 76
@override
void dispose() {
_scrollController.dispose(); // スクロールコントローラーを破棄
super.dispose();
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

大事です👍

Comment on lines 27 to 29
static Future<List<Article>> fetchQiitaItems() async {
final url = Uri.parse('${Urls.qiitaBaseUrl}/items');
static Future<List<Article>> fetchQiitaItems(int page) async {
final url = Uri.parse('${Urls.qiitaBaseUrl}/items?page=$page');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

引数とページネーションについてしっかり理解できています👍

@KobayashiYoh
Copy link
Collaborator

しっかり修正できています👍
一次レビューLGTMです!

@taka392
Copy link
Contributor

taka392 commented Mar 26, 2024

LGTMです🎉
全体的に可読性の高い(フォルダ構成やエラーハンドリング等)記述ができていて素晴らしいです。

何点か気になった箇所があるので下記に記しておきます。
修正は任意です。


isLoading フラグの制御

  • フラグの制御: isLoading フラグを使用してデータの読み込み中かどうかを管理していますが、現在の実装ではスクロール中にもデータを読み込もうとします。これを防ぐために、データの読み込みが完了するまで新しいリクエストを行わないように制御する必要があります。
 void _scrollListener() {
  if (_scrollController.position.pixels ==
      _scrollController.position.maxScrollExtent &&
      !isLoading) { // isLoading フラグをチェックして新しいリクエストを行わないようにする
    // 最下部にスクロールした時に次のページを読み込む
    currentPage++; // 次のページ番号を更新
    fetchArticles();
  }
} 

@KobayashiYoh KobayashiYoh merged commit 198fc35 into main Mar 28, 2024
1 check passed
@KobayashiYoh
Copy link
Collaborator

merged👍

別ブランチで以下のissueにも対応してもらえると!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

FeedPage・ページネーション
3 participants