[React]~Ambassador画面5:StatsとRankingの実装~

こんにちは、KOUKIです。

Reactで画面開発をハンズオン形式で紹介しています。

今回は、StatsとRankingの実装をします。

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

[React/NextJS]~画面開発まとめ~

前回

前回は、ヘッダーコンポーネントの実装を行いました。

[React]~Ambassador画面4:ヘッダーコンポーネントの実装~

事前準備

ファイル

touch react-ambassador/src/pages/Stats.tsx
touch react-ambassador/src/pages/Rankings.tsx

1 2	touch react-ambassador/src/pages/Stats.tsx touch react-ambassador/src/pages/Rankings.tsx

Stats

Stats APIは、以下の記事で作成しています。

[golang]fiber API10~Ambassador: LinkとStatsの実装~

ページの作成

ページの実装を行います。

// pages/Stats.tsx
import { useEffect, useState } from "react"
import Layout from '../components/Layout'
import axios from 'axios'

const Stats = () => {
	const statsUrl = 'stats'
	const [stats, setStats] = useState([])

	useEffect(() => {
		(
			async () => {
				const { data } = await axios.get(statsUrl)
				if (data) {
					setStats(data)
				}
			}
		)()
	}, [])

	return (
		<Layout>
			<div className="table-responsive">
				<table className="table table-striped table-sm">
					<thead>
						<tr>
							<th>#</th>
							<th>Name</th>
							<th>Revenue</th>
						</tr>
					</thead>
				</table>
			</div>
		</Layout>
	)
}

export default Stats

// pages/Stats.tsx

import { useEffect, useState } from "react"

import Layout from '../components/Layout'

import axios from 'axios'

const Stats = () => {

const statsUrl = 'stats'

const [stats, setStats] = useState([])

useEffect(() => {

(

async () => {

const { data } = await axios.get(statsUrl)

if (data) {

setStats(data)

}

)()

}, [])

return (

<thead>

<tr>

<th>Revenue</th>

</tr>

</thead>

</table>

</div>

</Layout>

)

}

export default Stats

tableのbodyは、この後実装します。

ルートの追加

Statsページのルートを追加iします。

// App.tsx
...
import Stats from './pages/Stats'

function App() {
  return (
    <BrowserRouter>
...
      <Route path={'/stats'} component={Stats} />
    </BrowserRouter>
  );
}

export default App;

// App.tsx

...

import Stats from './pages/Stats'

function App() {

return (

...

</BrowserRouter>

);

}

export default App;

ナビゲーションへの追加

Statsページのリンクをナビゲーションに追加します。

// components/Nav.tsx
...

const Nav = (props: any) => {
...
	if (props.user?.id) {
		menu = (
			<div className="col-md-3 text-end">
				<Link to={'/stats'} className="btn me-2">Stats</Link> // 追加
				<Link to={'/profile'} className="btn btn-primary">
					{props.user.first_name} {props.user.last_name}
				</Link>
				<a
					href="#" className="btn btn-outline-primary me-2"
					onClick={logout}
				>
					logout
				</a>
			</div>
		)
	} else {
		...
       }
)(Nav)

// components/Nav.tsx

...

const Nav = (props: any) => {

...

if (props.user?.id) {

menu = (

<Link to={'/stats'} className="btn me-2">Stats</Link> // 追加

{props.user.first_name} {props.user.last_name}

</Link>

href="#" className="btn btn-outline-primary me-2"

onClick={logout}

logout

</a>

</div>

)

} else {

...

}

)(Nav)

ページの表示

下記のコマンドで、dockerコンテナを立ち上げます。

docker-compose up

1	docker-compose up

ブラウザから「http://localhost:4000/stats」へアクセスしましょう。

Tableの作成

画面の表示が確認できたら、Tableを作成しましょう。

// pages/Stats.tsx
...

const Stats = () => {
...
	return (
		<Layout>
			<div className="table-responsive">
				<table className="table table-striped table-sm">
					<thead>
...
					</thead>
					<tbody>
						{stats.map((s: { code: string, revenue: number }, index) => {
                        return (
                            <tr key={index}>
                                <td>{`http://localhost:5000/${s.code}`}</td>
                                <td>{s.code}</td>
                                <td>{s.revenue}</td>
                            </tr>
                        )})}
					</tbody>
				</table>
			</div>
		</Layout>
	)
}

export default Stats

// pages/Stats.tsx

...

const Stats = () => {

...

return (

<thead>

...

</thead>

<tbody>

{stats.map((s: { code: string, revenue: number }, index) => {

return (

<td>{`http://localhost:5000/${s.code}`}</td>

<td>{s.revenue}</td>

</tr>

)})}

</tbody>

</table>

</div>

</Layout>

)

}

export default Stats

この記事を参考にStatsにデータを追加後、画面を表示してみましょう。

Ranking

次は、Raningの実装に入ります。

Rankings APIは、次の記事で実装しました。

[golang]fiber API11~Ambassador: RankingとRedis Sortの実装~

ページの作成

Statsページとほぼ同じなので、サクッと作ってしまいます。

// pages/Rankings.tsx
import { useEffect, useState } from "react"
import Layout from '../components/Layout'
import axios from 'axios'

const Rankings = () => {
	const rankingsUrl = 'rankings'
	const [rankings, setRankings] = useState([])

	useEffect(() => {
		(
			async () => {
				const { data } = await axios.get(rankingsUrl)
				if (data) {
					setRankings(data)
				}
			}
		)()
	}, [])

	return (
		<Layout>
			<div className="table-responsive">
				<table className="table table-striped table-sm">
					<thead>
						<tr>
							<th>#</th>
							<th>Name</th>
							<th>Revenue</th>
						</tr>
					</thead>
					<tbody>
						{Object.keys(rankings).map((key: any, index) => {
							return (
								<tr key={key}>
									<td>{index + 1}</td>
									<td>{key}</td>
									<td>{rankings[key]}</td>
								</tr>
							)
						})}
					</tbody>
				</table>
			</div>
		</Layout>
	)
}

export default Rankings

// pages/Rankings.tsx

import { useEffect, useState } from "react"

import Layout from '../components/Layout'

import axios from 'axios'

const Rankings = () => {

const rankingsUrl = 'rankings'

const [rankings, setRankings] = useState([])

useEffect(() => {

(

async () => {

const { data } = await axios.get(rankingsUrl)

if (data) {

setRankings(data)

}

)()

}, [])

return (

<thead>

<tr>

<th>Revenue</th>

</tr>

</thead>

<tbody>

{Object.keys(rankings).map((key: any, index) => {

return (

<td>{index + 1}</td>

<td>{rankings[key]}</td>

</tr>

)

})}

</tbody>

</table>

</div>

</Layout>

)

}

export default Rankings

ルートの追加

// App.tsx
...
import Rankings from './pages/Rankings'

function App() {
  return (
    <BrowserRouter>
...
      <Route path={'/rankings'} component={Rankings} />
    </BrowserRouter>
  );
}

export default App;

// App.tsx

...

import Rankings from './pages/Rankings'

function App() {

return (

...

</BrowserRouter>

);

}

export default App;

ナビゲーションの追加

// components/Nav.tsx
...

const Nav = (props: any) => {
....
	if (props.user?.id) {
		menu = (
			<div className="col-md-3 text-end">
				<Link to={'/rankings'} className="btn me-2">Rankings</Link> // 追加
				<Link to={'/stats'} className="btn me-2">Stats</Link>
...
		)
	} else {
...
	}
...
}
....

// components/Nav.tsx

...

const Nav = (props: any) => {

....

if (props.user?.id) {

menu = (

<Link to={'/rankings'} className="btn me-2">Rankings</Link> // 追加

<Link to={'/stats'} className="btn me-2">Stats</Link>

...

)

} else {

...

}

...

}

....

データ投入

RankingデータはRedisに格納しているのですが、データが🈳になっている場合が考えられるので、以下のコマンドでデータを投入してください。

docker-compose run --rm backend sh -c "go run src/commands/redis/updateRankings.go"

1	docker-compose run --rm backend sh -c "go run src/commands/redis/updateRankings.go"

ページの表示

ブラウザから「http://localhost:4000/rankings」へアクセスして、ページを表示しましょう。

次回

次回は、Productsの実装をしましょう。

[React]~Ambassador画面6:Productページの実装~

Reactまとめ

学習

[React/NextJS]~画面開発まとめ~

React~記事まとめ~

参考書籍

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

React.js＆Next.js超入門第2版【電子書籍】[ 掌田津耶乃 ]
価格：2970円 (2021/6/26時点)

楽天で購入

ソースコード

Stats.tsx

// pages/Stats.tsx
import { useEffect, useState } from "react"
import Layout from '../components/Layout'
import axios from 'axios'

const Stats = () => {
	const statsUrl = 'stats'
	const [stats, setStats] = useState([])

	useEffect(() => {
		(
			async () => {
				const { data } = await axios.get(statsUrl)
				if (data) {
					setStats(data)
				}
			}
		)()
	}, [])

	return (
		<Layout>
			<div className="table-responsive">
				<table className="table table-striped table-sm">
					<thead>
						<tr>
							<th>#</th>
							<th>Name</th>
							<th>Revenue</th>
						</tr>
					</thead>
					<tbody>
						{stats.map((s: { code: string, revenue: number }, index) => {
                        return (
                            <tr key={index}>
                                <td>{`http://localhost:5000/${s.code}`}</td>
                                <td>{s.code}</td>
                                <td>{s.revenue}</td>
                            </tr>
                        )})}
					</tbody>
				</table>
			</div>
		</Layout>
	)
}

export default Stats

// pages/Stats.tsx

import { useEffect, useState } from "react"

import Layout from '../components/Layout'

import axios from 'axios'

const Stats = () => {

const statsUrl = 'stats'

const [stats, setStats] = useState([])

useEffect(() => {

(

async () => {

const { data } = await axios.get(statsUrl)

if (data) {

setStats(data)

}

)()

}, [])

return (

<thead>

<tr>

<th>Revenue</th>

</tr>

</thead>

<tbody>

{stats.map((s: { code: string, revenue: number }, index) => {

return (

<td>{`http://localhost:5000/${s.code}`}</td>

<td>{s.revenue}</td>

</tr>

)})}

</tbody>

</table>

</div>

</Layout>

)

}

export default Stats

Rankings.tsx

// pages/Rankings.tsx
import { useEffect, useState } from "react"
import Layout from '../components/Layout'
import axios from 'axios'

const Rankings = () => {
	const rankingsUrl = 'rankings'
	const [rankings, setRankings] = useState([])

	useEffect(() => {
		(
			async () => {
				const { data } = await axios.get(rankingsUrl)
				if (data) {
					setRankings(data)
				}
			}
		)()
	}, [])

	return (
		<Layout>
			<div className="table-responsive">
				<table className="table table-striped table-sm">
					<thead>
						<tr>
							<th>#</th>
							<th>Name</th>
							<th>Revenue</th>
						</tr>
					</thead>
					<tbody>
						{Object.keys(rankings).map((key: any, index) => {
							return (
								<tr key={key}>
									<td>{index + 1}</td>
									<td>{key}</td>
									<td>{rankings[key]}</td>
								</tr>
							)
						})}
					</tbody>
				</table>
			</div>
		</Layout>
	)
}

export default Rankings

// pages/Rankings.tsx

import { useEffect, useState } from "react"

import Layout from '../components/Layout'

import axios from 'axios'

const Rankings = () => {

const rankingsUrl = 'rankings'

const [rankings, setRankings] = useState([])

useEffect(() => {

(

async () => {

const { data } = await axios.get(rankingsUrl)

if (data) {

setRankings(data)

}

)()

}, [])

return (

<thead>

<tr>

<th>Revenue</th>

</tr>

</thead>

<tbody>

{Object.keys(rankings).map((key: any, index) => {

return (

<td>{index + 1}</td>

<td>{rankings[key]}</td>

</tr>

)

})}

</tbody>

</table>

</div>

</Layout>

)

}

export default Rankings

App.tsx

// App.tsx
import { BrowserRouter, Route } from 'react-router-dom'
import ProductsFrontend from './pages/ProductsFrontend'
import Login from './pages/Login'
import Register from './pages/Register'
import Profile from './pages/Profile'
import Stats from './pages/Stats'
import Rankings from './pages/Rankings'
import './App.css';

function App() {
  return (
    <BrowserRouter>
      <Route path={'/'} exact component={ProductsFrontend} />
      <Route path={'/login'} component={Login} />
      <Route path={'/register'} component={Register} />
      <Route path={'/profile'} component={Profile} />
      <Route path={'/stats'} component={Stats} />
      <Route path={'/rankings'} component={Rankings} />
    </BrowserRouter>
  );
}

export default App;

// App.tsx

import { BrowserRouter, Route } from 'react-router-dom'

import ProductsFrontend from './pages/ProductsFrontend'

import Login from './pages/Login'

import Register from './pages/Register'

import Profile from './pages/Profile'

import Stats from './pages/Stats'

import Rankings from './pages/Rankings'

import './App.css';

function App() {

return (

</BrowserRouter>

);

}

export default App;

Nav.tsx

// components/Nav.tsx
import { Dispatch } from 'react'
import { connect } from 'react-redux'
import { User } from '../models/user'
import { Link } from 'react-router-dom'
import axios from 'axios'
import { setUserAction } from '../redux/actions/setUserAction'

const Nav = (props: any) => {
	const logout = async () => {
		await axios.post('logout')
		props.setUser(null)
	}

	let menu

	if (props.user?.id) {
		menu = (
			<div className="col-md-3 text-end">
				<Link to={'/rankings'} className="btn me-2">Rankings</Link>
				<Link to={'/stats'} className="btn me-2">Stats</Link>
				<Link to={'/profile'} className="btn btn-primary">
					{props.user.first_name} {props.user.last_name}
				</Link>
				<a
					href="#" className="btn btn-outline-primary me-2"
					onClick={logout}
				>
					logout
				</a>
			</div>
		)
	} else {
		menu = (
			<div className="col-md-3 text-end">
				<Link to={'/login'} className="btn btn-outline-primary me-2">Login</Link>
				<Link to={'/register'} className="btn btn-primary">Sign-up</Link>
			</div>
		)
	}


	return (
		<div className="container">
			<header className="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">

			<ul className="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
				<li><a href="#" className="nav-link px-2 link-secondary">Frontend</a></li>
				<li><a href="#" className="nav-link px-2 link-dark">Backend</a></li>
			</ul>
			{menu}
			</header>
  		</div>
	)
}

export default connect(
	(state: {user: User}) => ({
		user: state.user
	}),
  (dispatch: Dispatch<any>) => ({
    setUser: (user: User) => dispatch(setUserAction(user))
  })
)(Nav)

// components/Nav.tsx

import { Dispatch } from 'react'

import { connect } from 'react-redux'

import { User } from '../models/user'

import { Link } from 'react-router-dom'

import axios from 'axios'

import { setUserAction } from '../redux/actions/setUserAction'

const Nav = (props: any) => {

const logout = async () => {

await axios.post('logout')

props.setUser(null)

}

let menu

if (props.user?.id) {

menu = (

<Link to={'/rankings'} className="btn me-2">Rankings</Link>

<Link to={'/stats'} className="btn me-2">Stats</Link>

{props.user.first_name} {props.user.last_name}

</Link>

href="#" className="btn btn-outline-primary me-2"

onClick={logout}

logout

</a>

</div>

)

} else {

menu = (

<Link to={'/login'} className="btn btn-outline-primary me-2">Login</Link>

</div>

)

}

return (

<li><a href="#" className="nav-link px-2 link-secondary">Frontend</a></li>

<li><a href="#" className="nav-link px-2 link-dark">Backend</a></li>

</ul>

{menu}

</header>

</div>

)

}

export default connect(

(state: {user: User}) => ({

user: state.user

}),

(dispatch: Dispatch<any>) => ({

setUser: (user: User) => dispatch(setUserAction(user))

})

)(Nav)

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

[React]~Ambassador画面5:StatsとRankingの実装~

前回

事前準備

ファイル

Stats

ページの作成

ルートの追加

ナビゲーションへの追加

ページの表示

Tableの作成

Ranking

ページの作成

ルートの追加

ナビゲーションの追加

データ投入

ページの表示

次回

Reactまとめ

参考書籍

ソースコード

Stats.tsx

Rankings.tsx

App.tsx

Nav.tsx

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

前回

事前準備

ファイル

Stats

ページの作成

ルートの追加

ナビゲーションへの追加

ページの表示

Tableの作成

Ranking

ページの作成

ルートの追加

ナビゲーションの追加

データ投入

ページの表示

次回

Reactまとめ

参考書籍

ソースコード

Stats.tsx

Rankings.tsx

App.tsx

Nav.tsx

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Go言語でメール送信ができない件

[Go言語]Mementoパターンを学ぼう!

Go言語でバリデーション処理を勉強しよう!

[Go言語]デザインパターン ~まとめ~

JMeterの'Cannot allocate memory' (errno…

Django開発~ブログ構築編6~django-tables2

Bootstrap ~基礎編~

[React]~Ambassador画面: React環境構築~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル