[React]~Admin画面12:Profileの実装~

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

前回は、Orderページを実装しました。今回は、Prifileを実装します。

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

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

<目次>

前回

[React]~Admin画面11:Orderページの実装~

事前準備

touch react-admin/src/pages/Profile.tsx

1	touch react-admin/src/pages/Profile.tsx

Profileページ

ページテンプレート

Profileページのテンプレートを作成します。

// pages/Profile.tsx
import Layout from '../components/Layout'

const Profile = () => {
	return (
		<Layout>
			Profile
		</Layout>
	)
}
export default Profile

// pages/Profile.tsx

import Layout from '../components/Layout'

const Profile = () => {

return (

Profile

</Layout>

)

}

export default Profile

ルートの作成

Profileページへのルートを作成します。

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

function App() {
  return (
    <div className="App">
      <BrowserRouter>
...
        <Route path={'/profile'} component={Profile}></Route>
      </BrowserRouter>
    </div>
  );
}
export default App;

// App.tsx

...

import Profile from './pages/Profile'

function App() {

return (

...

</BrowserRouter>

</div>

);

}

export default App;

ページ遷移の確認

「docker-compose up」でDockerを起動し、「http://localhost:3000」にアクセスしましょう。

そこからユーザー名「test test」にクリックするとProfileページに飛べます。

Profileページの作成

Profileページの中身を実装します。

// pages/Profile.tsx
import { SyntheticEvent, useEffect, useState } from 'react'
import {
	Button,
	TextField
} from '@material-ui/core'
import Layout from '../components/Layout'
import axios from 'axios'

const Profile = () => {
	const [first_name, setFirstName] = useState("")
	const [last_name, setLastName] = useState("")
	const [email, setEmail] = useState("")
	const [password, setPassword] = useState("")
	const [password_confirm, setPasswordConfirm] = useState("")

	const userUrl = 'user'

	useEffect(() => {
		(
			async () => {
				const { data } = await axios.get(userUrl)
				setFirstName(data.first_name)
				setLastName(data.last_name)
				setEmail(data.email)
			}
		)()
	}, [])

	const infoSubmit = async(e: SyntheticEvent) => {
		e.preventDefault()
	}

	const passwordSubmit = async(e: SyntheticEvent) => {
		e.preventDefault()
	}

	return (
		<Layout>
			<h3>Account Information</h3>
			<form onSubmit={infoSubmit}>
				<div className="mb-3">
					<TextField
						label="First Name"
						onChange={e => setFirstName(e.target.value)}
						value={first_name} />
				</div>
				<div className="mb-3">
					<TextField
						label="Last Name"
						onChange={e => setLastName(e.target.value)}
						value={last_name} />
				</div>
				<div className="mb-3">
					<TextField
						label="Email"
						onChange={e => setEmail(e.target.value)}
						value={email} />
				</div>
				<Button
					variant="contained"
					color="primary"
					type="submit">
						Submit
				</Button>
			</form>

			<h3 className="mt-4">Change Password</h3>
			<form onSubmit={passwordSubmit}>
				<div className="mb-3">
					<TextField
						label="Password"
						type="password"
						onChange={e => setPassword(e.target.value)} />
				</div>
				<div className="mb-3">
					<TextField
						label="Password Confirm"
						type="password"
						onChange={e => setPasswordConfirm(e.target.value)} />
				</div>
				<Button
					variant="contained"
					color="primary"
					type="submit">
						Submit
				</Button>
			</form>
		</Layout>
	)
}
export default Profile

// pages/Profile.tsx

import { SyntheticEvent, useEffect, useState } from 'react'

import {

Button,

TextField

} from '@material-ui/core'

import Layout from '../components/Layout'

import axios from 'axios'

const Profile = () => {

const [first_name, setFirstName] = useState("")

const [last_name, setLastName] = useState("")

const [email, setEmail] = useState("")

const [password, setPassword] = useState("")

const [password_confirm, setPasswordConfirm] = useState("")

const userUrl = 'user'

useEffect(() => {

(

async () => {

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

setFirstName(data.first_name)

setLastName(data.last_name)

setEmail(data.email)

}

)()

}, [])

const infoSubmit = async(e: SyntheticEvent) => {

e.preventDefault()

}

const passwordSubmit = async(e: SyntheticEvent) => {

e.preventDefault()

}

return (

<h3>Account Information</h3>

<TextField

label="First Name"

onChange={e => setFirstName(e.target.value)}

value={first_name} />

</div>

<TextField

label="Last Name"

onChange={e => setLastName(e.target.value)}

value={last_name} />

</div>

<TextField

label="Email"

onChange={e => setEmail(e.target.value)}

value={email} />

</div>

<Button

variant="contained"

color="primary"

type="submit">

Submit

</Button>

</form>

<h3 className="mt-4">Change Password</h3>

<TextField

label="Password"

type="password"

onChange={e => setPassword(e.target.value)} />

</div>

<TextField

label="Password Confirm"

type="password"

onChange={e => setPasswordConfirm(e.target.value)} />

</div>

<Button

variant="contained"

color="primary"

type="submit">

Submit

</Button>

</form>

</Layout>

)

}

export default Profile

ユーザー情報/パスワードの変更ができる画面を用意しました。

また、useEffectを使って、Profileページが開いたタイミングでAPIからユーザー情報を取得し、画面に表示する処理も入れています。

infoSubmit処理

infoSubmitは、ユーザー情報の変更を行いたいときに使用します。

// pages/Profile.tsx
...
const Profile = () => {
...
	const userInfo = 'info'
...
	const infoSubmit = async(e: SyntheticEvent) => {
		e.preventDefault()

		await axios.put(userInfo, {
			first_name,
			last_name,
			email
		})
	}

...
}

export default Profile

// pages/Profile.tsx

...

const Profile = () => {

...

const userInfo = 'info'

...

const infoSubmit = async(e: SyntheticEvent) => {

e.preventDefault()

await axios.put(userInfo, {

first_name,

last_name,

})

}

...

}

export default Profile

項目にupdateをつけて、SUBMITボタンを押下してみましょう。

ページをリダイレクトすると、ユーザー情報が更新されたことがわかります。

passwordSubmit処理

passwordSubmitは、パスワードの変更を行いたい時に使用します。

// pages/Profile.tsx
...

const Profile = () => {
...
	const userPassword = 'password'
...
	const passwordSubmit = async(e: SyntheticEvent) => {
		e.preventDefault()

		await axios.put(userPassword, {
			password,
			password_confirm
		})
	}
...
}

export default Profile

// pages/Profile.tsx

...

const Profile = () => {

...

const userPassword = 'password'

...

const passwordSubmit = async(e: SyntheticEvent) => {

e.preventDefault()

await axios.put(userPassword, {

password,

password_confirm

})

}

...

}

export default Profile

こちらはパスワードの変更が確認できるように、一旦ログアウトしてから更新されたか確認してみてください。

次回

次回は、Reduxの導入を行います。

[React]~Admin画面13:Reduxの導入~

Reactまとめ

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

React~記事まとめ~

参考書籍

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

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

楽天で購入

ソースコード

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

Profile.tsx

// pages/Profile.tsx
import { SyntheticEvent, useEffect, useState } from 'react'
import {
	Button,
	TextField
} from '@material-ui/core'
import Layout from '../components/Layout'
import axios from 'axios'

const Profile = () => {
	const [first_name, setFirstName] = useState("")
	const [last_name, setLastName] = useState("")
	const [email, setEmail] = useState("")
	const [password, setPassword] = useState("")
	const [password_confirm, setPasswordConfirm] = useState("")

	const userUrl = 'user'
	const userInfo = 'info'
	const userPassword = 'password'

	useEffect(() => {
		(
			async () => {
				const { data } = await axios.get(userUrl)
				setFirstName(data.first_name)
				setLastName(data.last_name)
				setEmail(data.email)
			}
		)()
	}, [])

	const infoSubmit = async(e: SyntheticEvent) => {
		e.preventDefault()

		await axios.put(userInfo, {
			first_name,
			last_name,
			email
		})
	}

	const passwordSubmit = async(e: SyntheticEvent) => {
		e.preventDefault()

		await axios.put(userPassword, {
			password,
			password_confirm
		})
	}

	return (
		<Layout>
			<h3>Account Information</h3>
			<form onSubmit={infoSubmit}>
				<div className="mb-3">
					<TextField
						label="First Name"
						onChange={e => setFirstName(e.target.value)}
						value={first_name} />
				</div>
				<div className="mb-3">
					<TextField
						label="Last Name"
						onChange={e => setLastName(e.target.value)}
						value={last_name} />
				</div>
				<div className="mb-3">
					<TextField
						label="Email"
						onChange={e => setEmail(e.target.value)}
						value={email} />
				</div>
				<Button
					variant="contained"
					color="primary"
					type="submit">
						Submit
				</Button>
			</form>

			<h3 className="mt-4">Change Password</h3>
			<form onSubmit={passwordSubmit}>
				<div className="mb-3">
					<TextField
						label="Password"
						type="password"
						onChange={e => setPassword(e.target.value)} />
				</div>
				<div className="mb-3">
					<TextField
						label="Password Confirm"
						type="password"
						onChange={e => setPasswordConfirm(e.target.value)} />
				</div>
				<Button
					variant="contained"
					color="primary"
					type="submit">
						Submit
				</Button>
			</form>
		</Layout>
	)
}
export default Profile

100

101

102

103

104

105

// pages/Profile.tsx

import { SyntheticEvent, useEffect, useState } from 'react'

import {

Button,

TextField

} from '@material-ui/core'

import Layout from '../components/Layout'

import axios from 'axios'

const Profile = () => {

const [first_name, setFirstName] = useState("")

const [last_name, setLastName] = useState("")

const [email, setEmail] = useState("")

const [password, setPassword] = useState("")

const [password_confirm, setPasswordConfirm] = useState("")

const userUrl = 'user'

const userInfo = 'info'

const userPassword = 'password'

useEffect(() => {

(

async () => {

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

setFirstName(data.first_name)

setLastName(data.last_name)

setEmail(data.email)

}

)()

}, [])

const infoSubmit = async(e: SyntheticEvent) => {

e.preventDefault()

await axios.put(userInfo, {

first_name,

last_name,

})

}

const passwordSubmit = async(e: SyntheticEvent) => {

e.preventDefault()

await axios.put(userPassword, {

password,

password_confirm

})

}

return (

<h3>Account Information</h3>

<TextField

label="First Name"

onChange={e => setFirstName(e.target.value)}

value={first_name} />

</div>

<TextField

label="Last Name"

onChange={e => setLastName(e.target.value)}

value={last_name} />

</div>

<TextField

label="Email"

onChange={e => setEmail(e.target.value)}

value={email} />

</div>

<Button

variant="contained"

color="primary"

type="submit">

Submit

</Button>

</form>

<h3 className="mt-4">Change Password</h3>

<TextField

label="Password"

type="password"

onChange={e => setPassword(e.target.value)} />

</div>

<TextField

label="Password Confirm"

type="password"

onChange={e => setPasswordConfirm(e.target.value)} />

</div>

<Button

variant="contained"

color="primary"

type="submit">

Submit

</Button>

</form>

</Layout>

)

}

export default Profile

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'
import Products from './pages/products/Products'
import ProductForm from './pages/products/ProductForm'
import Orders from './pages/Orders'
import Profile from './pages/Profile'

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>
        <Route path={'/products'} exact component={Products}></Route>
        <Route path={'/products/create'} component={ProductForm}></Route>
        <Route path={'/products/:id/edit'} component={ProductForm}></Route>
        <Route path={'/orders'} exact component={Orders}></Route>
        <Route path={'/profile'} component={Profile}></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'

import Products from './pages/products/Products'

import ProductForm from './pages/products/ProductForm'

import Orders from './pages/Orders'

import Profile from './pages/Profile'

function App() {

return (

</BrowserRouter>

</div>

);

}

export default App;

月	火	水	木	金	土	日
						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画面12:Profileの実装~

前回

事前準備

Profileページ

ページテンプレート

ルートの作成

ページ遷移の確認

Profileページの作成

infoSubmit処理

passwordSubmit処理

次回

Reactまとめ

参考書籍

ソースコード

Profile.tsx

App.tsx

シェア！

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

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

前回

事前準備

Profileページ

ページテンプレート

ルートの作成

ページ遷移の確認

Profileページの作成

infoSubmit処理

passwordSubmit処理

次回

Reactまとめ

参考書籍

ソースコード

Profile.tsx

App.tsx

シェア！

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

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

Django REST frameworkでアプリケーション開発 ～カスタム…

Bootstrap~記事まとめ~

CSSでNETFLIXのモバイルナビゲーションをスタイリングしよう!

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

[Go言語]text/templateの使い方メモ

[初学者向け]Helmを学ぼう!~Helm Chartの依存/ライブラリ化/…

Django開発~ショッピングカート構築編5~ページネーションの導入

[Go言語, Python] Singletonパターンを学ぼう！

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

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

Django REST frameworkでアプリケーション開発～カスタム…