[React]~Admin画面6:ユーザー一覧の実装~

こんにちは、KOUKIです。Reactで画面開発を行なっています。

前回は、ログイン認証とログアウトを実装しました。今回は、ユーザー一覧を実装したいと思います。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

前回

事前準備

フォルダ/ファイル

モジュール

ユーザー一覧の作成

「http://localhost:8000/api/admin/ambassadors」へリクエストを飛ばすと、ユーザー一覧が取得できます。
※API開発編で実装しました

この機能を利用して、ユーザー一覧を表示する画面を作成しましょう。

ユーザー情報の取得

Users.tsxに、ユーザー情報を取得する処理を実装します。

実装の流れとしては、以下のような感じです。

  1. userStateで、ユーザーの状態を管理する機能を設定する
  2. useEffectで、ページが表示・リダイレクトされたタイミングでユーザー情報を取得する
  3. axiosでユーザー情報を取得する
  4. setUserで、ユーザー情報をReactアプリに格納 -> users変数からいつでも取り出し可能になる

一覧を作成する

User.tsxのLayoutの中身を実装します。

先ほど、ユーザー情報をusers変数に配列形式でセットしたので、これを使ってユーザー一覧を作成します。

リダイレクトコンポーネントの作成

ユーザーページは、「http://localhost:3000」および「http://localhost:3000/users」にアクセスした時に表示されるようにしたいと思います。

そこで、前者にアクセスした時は、後者へリダイレクトするためのコンポーネントを作成しましょう。

ルーティングの設定

続いて、ルーティングの設定をします。

Menuの変更

Menuの変更もしておきます。

変更点は、以下です。

  • Dashboard -> Usersに変更
  • aタグ -> NavLinkに変更

画面表示

「http://localhost:3000」にアクセスして、画面を表示してみましょう。

Dockerが起動していない場合は、下記のコマンドで起動してください。

一覧が表示されれば、OKです。

ユーザー情報を登録していない場合は、以下の記事を参考にしてください。

Material-UIの導入

Material-UIを導入しましょう。

フォントリンクの追加

Material-UIでは、Robotoフォントが推奨されているようなので、publicフォルダにあるindex.htmlにリンクを追加します。

ユーザー一覧の変更

Table Componentを参考に、先ほど実装したユーザー一覧を書き換えましょう。

paginationの実装

Material-UIには、Paginationも提供されています。

本アプリにも実装しましょう。

Paginationを実装するために、以下のことを行いました。

  1. useStateで、Pageの状態管理用の変数を用意
  2. テーブル作成時、sliceメソッドを使ってユーザーをページごとに分離
  3. TablePaginationでPaginationを作成

結構、簡単に実装できますね。

次回

次回は、Linkページを実装をしましょう。

Reactまとめ

参考書籍


ソースコード

ここまで実装したソースコードを下記に記載します。

Menu.tsx

App.tsx

Users.tsx

RedirectToUsers.tsx

index.html

コメントを残す