[React]~Admin画面7:Linkページの実装~

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

前回は、ユーザー一覧を実装をしました。今回は、Linkページの実装をします。

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

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

<目次>

前回

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

事前準備

フォルダ/ファイル

touch react-admin/src/models/link.ts
touch react-admin/src/pages/Links.tsx

1 2	touch react-admin/src/models/link.ts touch react-admin/src/pages/Links.tsx

Link画面

以前、Link APIを作成しました。

[golang]fiber API9~Admin: Link APIの作成~

[golang]fiber API10~Admin: Order APIの実装~

このAPIは、ユーザーとオーダーした商品をLinkさせるための APIです。

リクエスト時に、ユーザーのIDを紐付けて飛ばし、該当するLinkデータを取得します。

// linkController.go
func Link(ctx *fiber.Ctx) error {
	id, _ := strconv.Atoi(ctx.Params("id"))

	var links []models.Link

	database.DB.Where("user_id = ?", id).Find(&links)

	for i, link := range links {
		var orders []models.Order
		database.DB.Where("code = ? and complete = true", link.Code).Find(&orders)

		links[i].Orders = orders
	}
	return ctx.JSON(links)
}

// linkController.go

func Link(ctx *fiber.Ctx) error {

id, _ := strconv.Atoi(ctx.Params("id"))

var links []models.Link

database.DB.Where("user_id = ?", id).Find(&links)

for i, link := range links {

var orders []models.Order

database.DB.Where("code = ? and complete = true", link.Code).Find(&orders)

links[i].Orders = orders

}

return ctx.JSON(links)

}

今回は、ユーザーがオーダーした情報を確認できるLinkページを作成します。

LinkPropsの作成

Linkのモデルを作成しましょう。

// models/link.ts
export interface Link {
	id: string
	code: string
	orders: any[]
}

// models/link.ts

export interface Link {

id: string

code: string

orders: any[]

}

Linkページの作成

続いて、Linkページを作成します。

なお、前回実装したUsersとほぼ同じであるため、説明は割愛します。

// pages/Links.tsx
import { useEffect, useState } from 'react'
import {
	Table,
	TableBody,
	TableRow,
	TableHead,
	TableCell,
	TableFooter,
	TablePagination
} from '@material-ui/core'
import { Link } from '../models/link'
import Layout from '../components/Layout'
import axios from 'axios'

const Links = (props: any) => {
	const [links, setLinks] = useState<Link[]>([])
	const [page, setPage] = useState(0)
	const perPage = 10

	let linksUrl = `users/${props.match.params.id}/links`

	useEffect(() => {
		(
			async () => {
				const { data } = await axios.get(linksUrl)
				setLinks(data)
			}
		)()
	}, [])

	return (
		<Layout>
			<Table className="table table-striped table-sm">
				<TableHead>
					<TableRow>
						<TableCell>#</TableCell>
						<TableCell>Code</TableCell>
						<TableCell>Count</TableCell>
						<TableCell>Revenue</TableCell>
					</TableRow>
				</TableHead>
				<TableBody>
					{/* perPageごとにユーザーをスライス */}
					{links.slice(page * perPage, (page + 1) * perPage).map(link => {
						return (
							<TableRow key={link.id}>
								<TableCell>{link.id}</TableCell>
								<TableCell>{link.code}</TableCell>
								<TableCell>{link.orders.length}</TableCell>
								<TableCell>{link.orders.reduce((s, o) => s + o.total, 0)}</TableCell>
							</TableRow>
						)
					})}
				</TableBody>
				<TableFooter>
					<TableRow>
						<TablePagination
						count={links.length}
						page={page}
						onChangePage={(e, newPage) => setPage(newPage)}
						rowsPerPageOptions={[]}
						rowsPerPage={perPage}
						></TablePagination>
					</TableRow>
				</TableFooter>
			</Table>
		</Layout>
	)
}
export default Links

// pages/Links.tsx

import { useEffect, useState } from 'react'

import {

Table,

TableBody,

TableRow,

TableHead,

TableCell,

TableFooter,

TablePagination

} from '@material-ui/core'

import { Link } from '../models/link'

import Layout from '../components/Layout'

import axios from 'axios'

const Links = (props: any) => {

const [links, setLinks] = useState<Link[]>([])

const [page, setPage] = useState(0)

const perPage = 10

let linksUrl = `users/${props.match.params.id}/links`

useEffect(() => {

(

async () => {

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

setLinks(data)

}

)()

}, [])

return (

<TableCell>Count</TableCell>

<TableCell>Revenue</TableCell>

</TableRow>

</TableHead>

{/* perPageごとにユーザーをスライス */}

{links.slice(page * perPage, (page + 1) * perPage).map(link => {

return (

<TableCell>{link.orders.length}</TableCell>

<TableCell>{link.orders.reduce((s, o) => s + o.total, 0)}</TableCell>

</TableRow>

)

})}

</TableBody>

<TablePagination

count={links.length}

page={page}

onChangePage={(e, newPage) => setPage(newPage)}

rowsPerPageOptions={[]}

rowsPerPage={perPage}

></TablePagination>

</TableRow>

</TableFooter>

</Table>

</Layout>

)

}

export default Links

ルートの追加

「let linksUrl = users/${props.match.params.id}/links」は、Link APIのエンドポイントであり、真ん中の「${props.match.params.id}」は、Reactのルートに指定したidを渡せます。

App.tsxにルートを追加しましょう。

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

function App() {
  return (
    <div className="App">
      <BrowserRouter>
...
        <Route path={'/users/:id/links'} component={Links}></Route>
      </BrowserRouter>
    </div>
  );
}

export default App;

// App.tsx

....

import Links from './pages/Links'

function App() {

return (

...

</BrowserRouter>

</div>

);

}

export default App;

パスの中に「:id」を指定しており、これにより、先ほど示した「${props.match.params.id}」からIDとして取得できるようになります。

Linkページへのリンク

ユーザー情報の取得時に、IDも取得できるので、UserページからLinkページに遷移できるようにリンクを貼りましょう。

// pages/Users.tsx
....
import {
	Button,
	Table,
	TableBody,
	TableRow,
	TableHead,
	TableCell,
	TableFooter,
	TablePagination
} from '@material-ui/core
...
const Users = () => {
	....
	return (
		<Layout>
			<Table className="table table-striped table-sm">
				<TableHead>...</TableHead>
				<TableBody>
					{users.slice(page * perPage, (page + 1) * perPage).map(user => {
						return (
							<TableRow key={user.id}>
								<TableCell>{user.id}</TableCell>
								<TableCell>{user.first_name} {user.last_name}</TableCell>
								<TableCell>{user.email}</TableCell>
								<TableCell>
									<Button
										variant="contained"
										color="primary"
										href={`users/${user.id}/links`}
								 	>View</Button>
								</TableCell>
							</TableRow>
						)
					})}
				</TableBody>
				<TableFooter>
					<TableRow>
						<TablePagination...></TablePagination>
					</TableRow>
				</TableFooter>
			</Table>
		</Layout>
	)
}

export default Users

// pages/Users.tsx

....

import {

Button,

Table,

TableBody,

TableRow,

TableHead,

TableCell,

TableFooter,

TablePagination

} from '@material-ui/core

...

const Users = () => {

....

return (

{users.slice(page * perPage, (page + 1) * perPage).map(user => {

return (

<TableCell>{user.first_name} {user.last_name}</TableCell>

<TableCell>{user.email}</TableCell>

<Button

variant="contained"

color="primary"

href={`users/${user.id}/links`}

>View</Button>

</TableCell>

</TableRow>

)

})}

</TableBody>

<TablePagination...></TablePagination>

</TableRow>

</TableFooter>

</Table>

</Layout>

)

}

export default Users

テーブルの最終列に「Button」を追加し、Linkページに飛べるようにしました。

検証

「http://localhost:3000/users」をブラウザから開き、VIEWボタンを押下すると、Linkページが表示されるようになります。

OKですね。

テーブルにデータが表示されない場合は、データが保存されていないのだと思います。

データを保存するページを作ると思うので、そこまでお待ちいただくか、APIへリクエストを送って、データを保存してから検証を行ってみてください。

登録するデータは結構あるので、大変かと思いますが…

[golang]fiber API作成~まとめ~

次回

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

[React]~Admin画面8:Productページの実装~

Reactまとめ

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

React~記事まとめ~

参考書籍

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

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

楽天で購入

ソースコード

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

Link.tsx

// models/link.ts
export interface Link {
	id: string
	code: string
	orders: any[]
}

// models/link.ts

export interface Link {

id: string

code: string

orders: any[]

}

App.tsx

// App.tsx
import './App.css';
import {BrowserRouter, Route} from 'react-router-dom'
import {RedirectToUsers} from './components/RedirectToUsers'
import Users from './pages/Users'
import Login from './pages/Login'
import Register from './pages/Register'
import Links from './pages/Links'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route path={'/'} exact component={RedirectToUsers}></Route>
        <Route path={'/login'} component={Login}></Route>
        <Route path={'/register'} component={Register}></Route>
        <Route path={'/users'} exact component={Users}></Route>
        <Route path={'/users/:id/links'} component={Links}></Route>
      </BrowserRouter>
    </div>
  );
}

export default App;

// App.tsx

import './App.css';

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

import {RedirectToUsers} from './components/RedirectToUsers'

import Users from './pages/Users'

import Login from './pages/Login'

import Register from './pages/Register'

import Links from './pages/Links'

function App() {

return (

</BrowserRouter>

</div>

);

}

export default App;

Users.tsx

// pages/Users.tsx
import { useEffect, useState } from 'react'
import { UserProps } from '../models/user'
import {
	Button,
	Table,
	TableBody,
	TableRow,
	TableHead,
	TableCell,
	TableFooter,
	TablePagination
} from '@material-ui/core'
import Layout from '../components/Layout'
import axios from 'axios'

const Users = () => {
	const [users, setUsers] = useState<UserProps[]>([])

	// ページ情報のState
	const [page, setPage] = useState(0)
	const perPage = 10

	let ambassadorsUrl = 'ambassadors'

	useEffect(() => {
		(
			async () => {
				const { data } = await axios.get(ambassadorsUrl)
				setUsers(data)
			}
		)()
	}, [])

	return (
		<Layout>
			<Table className="table table-striped table-sm">
				<TableHead>
					<TableRow>
						<TableCell>#</TableCell>
						<TableCell>Name</TableCell>
						<TableCell>Name</TableCell>
						<TableCell>Actions</TableCell>
					</TableRow>
				</TableHead>
				<TableBody>
					{/* perPageごとにユーザーをスライス */}
					{users.slice(page * perPage, (page + 1) * perPage).map(user => {
						return (
							<TableRow key={user.id}>
								<TableCell>{user.id}</TableCell>
								<TableCell>{user.first_name} {user.last_name}</TableCell>
								<TableCell>{user.email}</TableCell>
								<TableCell>
									<Button
										variant="contained"
										color="primary"
										href={`users/${user.id}/links`}
								 	>View</Button>
								</TableCell>
							</TableRow>
						)
					})}
				</TableBody>
				<TableFooter>
					<TableRow>
						<TablePagination
						count={users.length}
						page={page}
						onChangePage={(e, newPage) => setPage(newPage)}
						rowsPerPageOptions={[]}
						rowsPerPage={perPage}
						></TablePagination>
					</TableRow>
				</TableFooter>
			</Table>
		</Layout>
	)
}

export default Users

// pages/Users.tsx

import { useEffect, useState } from 'react'

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

import {

Button,

Table,

TableBody,

TableRow,

TableHead,

TableCell,

TableFooter,

TablePagination

} from '@material-ui/core'

import Layout from '../components/Layout'

import axios from 'axios'

const Users = () => {

const [users, setUsers] = useState<UserProps[]>([])

// ページ情報のState

const [page, setPage] = useState(0)

const perPage = 10

let ambassadorsUrl = 'ambassadors'

useEffect(() => {

(

async () => {

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

setUsers(data)

}

)()

}, [])

return (

<TableCell>Actions</TableCell>

</TableRow>

</TableHead>

{/* perPageごとにユーザーをスライス */}

{users.slice(page * perPage, (page + 1) * perPage).map(user => {

return (

<TableCell>{user.first_name} {user.last_name}</TableCell>

<TableCell>{user.email}</TableCell>

<Button

variant="contained"

color="primary"

href={`users/${user.id}/links`}

>View</Button>

</TableCell>

</TableRow>

)

})}

</TableBody>

<TablePagination

count={users.length}

page={page}

onChangePage={(e, newPage) => setPage(newPage)}

rowsPerPageOptions={[]}

rowsPerPage={perPage}

></TablePagination>

</TableRow>

</TableFooter>

</Table>

</Layout>

)

}

export default Users

Links.tsx

// pages/Links.tsx
import { useEffect, useState } from 'react'
import {
	Table,
	TableBody,
	TableRow,
	TableHead,
	TableCell,
	TableFooter,
	TablePagination
} from '@material-ui/core'
import { Link } from '../models/link'
import Layout from '../components/Layout'
import axios from 'axios'

const Links = (props: any) => {
	const [links, setLinks] = useState<Link[]>([])
	const [page, setPage] = useState(0)
	const perPage = 10

	let linksUrl = `users/${props.match.params.id}/links`

	useEffect(() => {
		(
			async () => {
				const { data } = await axios.get(linksUrl)
				setLinks(data)
			}
		)()
	}, [])

	return (
		<Layout>
			<Table className="table table-striped table-sm">
				<TableHead>
					<TableRow>
						<TableCell>#</TableCell>
						<TableCell>Code</TableCell>
						<TableCell>Count</TableCell>
						<TableCell>Revenue</TableCell>
					</TableRow>
				</TableHead>
				<TableBody>
					{/* perPageごとにユーザーをスライス */}
					{links.slice(page * perPage, (page + 1) * perPage).map(link => {
						return (
							<TableRow key={link.id}>
								<TableCell>{link.id}</TableCell>
								<TableCell>{link.code}</TableCell>
								<TableCell>{link.orders.length}</TableCell>
								<TableCell>{link.orders.reduce((s, o) => s + o.total, 0)}</TableCell>
							</TableRow>
						)
					})}
				</TableBody>
				<TableFooter>
					<TableRow>
						<TablePagination
						count={links.length}
						page={page}
						onChangePage={(e, newPage) => setPage(newPage)}
						rowsPerPageOptions={[]}
						rowsPerPage={perPage}
						></TablePagination>
					</TableRow>
				</TableFooter>
			</Table>
		</Layout>
	)
}

export default Links

// pages/Links.tsx

import { useEffect, useState } from 'react'

import {

Table,

TableBody,

TableRow,

TableHead,

TableCell,

TableFooter,

TablePagination

} from '@material-ui/core'

import { Link } from '../models/link'

import Layout from '../components/Layout'

import axios from 'axios'

const Links = (props: any) => {

const [links, setLinks] = useState<Link[]>([])

const [page, setPage] = useState(0)

const perPage = 10

let linksUrl = `users/${props.match.params.id}/links`

useEffect(() => {

(

async () => {

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

setLinks(data)

}

)()

}, [])

return (

<TableCell>Count</TableCell>

<TableCell>Revenue</TableCell>

</TableRow>

</TableHead>

{/* perPageごとにユーザーをスライス */}

{links.slice(page * perPage, (page + 1) * perPage).map(link => {

return (

<TableCell>{link.orders.length}</TableCell>

<TableCell>{link.orders.reduce((s, o) => s + o.total, 0)}</TableCell>

</TableRow>

)

})}

</TableBody>

<TablePagination

count={links.length}

page={page}

onChangePage={(e, newPage) => setPage(newPage)}

rowsPerPageOptions={[]}

rowsPerPage={perPage}

></TablePagination>

</TableRow>

</TableFooter>

</Table>

</Layout>

)

}

export default Links

月	火	水	木	金	土	日
			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]~Admin画面7:Linkページの実装~

前回

事前準備

フォルダ/ファイル

Link画面

LinkPropsの作成

Linkページの作成

ルートの追加

Linkページへのリンク

検証

次回

Reactまとめ

参考書籍

ソースコード

Link.tsx

App.tsx

Users.tsx

Links.tsx

シェア！

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

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

前回

事前準備

フォルダ/ファイル

Link画面

LinkPropsの作成

Linkページの作成

ルートの追加

Linkページへのリンク

検証

次回

Reactまとめ

参考書籍

ソースコード

Link.tsx

App.tsx

Users.tsx

Links.tsx

シェア！

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

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

[golang]fiber API3~Checkout: Email送信の実…

Kubernetes(k8s)を学ぼう! ArgoCD編〜最高のデプロイ方法…

Django開発~ショッピングカート構築編2~商品一覧作成②

[golang]Echo APIのErrorメッセージをカスタマイズする

Django開発~ブログ構築編8~レビュー機能

Go言語とPostgreSQLで遊ぼう!~環境構築編~

Django~記事まとめ~

React~基礎編~Stateパターン

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

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