★前回の記事
yucatio.hatenablog.com
Material-UIのコンポーネントで囲まれていない文字列をTypographyで囲っていきます。
なお、一部はこの後のページでMaterial-UIのコンポーネントに変換するので、変換しない文字列もあります。
NoMatchページ
始めにNoMatch.jsを変更します。variantにh2を指定します。
src/components/NoMatch.js({/* xxx */}のコメントは実行前に削除してください)
import Typography from '@material-ui/core/Typography'
const NoMatch = () => (
<Typography variant="h2">ページが見つかりません</Typography> {/* 変更 */}
)
実行結果です。
"最近の更新”と”データがありません”の文字列をTypographyで囲みます。
src/components/dashboard/recentUpdatedTodos/index.js
import Typography from '@material-ui/core/Typography'
const RecentUpdatedList = (todos) => {
if (isEmpty(todos)) {
return <Typography variant="body1">データがありません。</Typography>
}
}
let RecentUpdatedTodos = ({todos}) => {
return (
<div>
<Typography variant="h5">最近の更新</Typography> {/* 変更 */}
{RecentUpdatedList(todos)}
</div>
)
}
実行結果です。
タスク一覧の文字列をTypographyに変更する前にコンポーネントの順番を変更します。
タスク追加フォーム
“{ユーザ名}のタスク一覧”
タスク一覧
という順番から
“{ユーザ名}のタスク一覧”
タスク追加フォーム
タスク一覧
という順番に変更します。
ユーザ名を表示するのコンポーネントはTitleという名前のコンポーネントにします。
src/components/todos/Title.js(新規作成)
import React from 'react'
import { compose } from 'redux'
import { connect } from 'react-redux'
import { firebaseConnect } from 'react-redux-firebase'
import PropTypes from 'prop-types'
const Title = ({displayName, isOwnTodos}) => {
const name = isOwnTodos ? 'あなた' : `${displayName} さん`;
return (
<React.Fragment>
{displayName && <div>{name}のタスク一覧</div>}
</React.Fragment>
)
}
Title.propTypes = {
displayName: PropTypes.string,
isOwnTodos: PropTypes.bool.isRequired,
}
const firebaseQueries = ({uid}) => (
[
{path: `users/${uid}/displayName`, type: 'once'},
]
)
const mapStateToProps = ({firebase: {data : {users}}}, {uid}) => ({
displayName: users && users[uid] && users[uid].displayName,
})
export default compose(
firebaseConnect(firebaseQueries),
connect(
mapStateToProps
))(Title)
src/components/todos/index.js
import Title from './Title'
class TodoComponent extends React.Component {
render() {
const {isOwnTodos, match: { params: {uid}}} = this.props;
return (
<div>
<Title isOwnTodos={isOwnTodos} uid={uid} /> {/* 追加 */}
{isOwnTodos && <AddTodo uid={uid} />}
<Notice />
<VisibleTodoList uid={uid} isOwnTodos={isOwnTodos} />
<Footer />
</div>
)
}
}
src/containers/todos/VisibleTodoList.js
const mapStateToProps = ({visibilityFilter, firebase: {data : {users, todos}}}, {uid}) => {
return {
todos: getVisibleTodos(todos && todos[uid], visibilityFilter)
}
}
const firebaseQueries = ({uid}) => (
[
`todos/${uid}`
]
)
src/components/todos/TodoList.js
const TodoList = ({todos, isOwnTodos, onTodoClick}) => {
return (
{
}
<List>
{Object.keys(todos).map(
(key) => (
<Todo
key={key}
isOwnTodos={isOwnTodos}
{...todos[key]}
onClick={isOwnTodos ? (() => onTodoClick(key)) : (() => {})} />
)
)}
</List>
{}
)
}
TodoList.propTypes = {
isOwnTodos: PropTypes.bool.isRequired,
}
以上でユーザ名の表示をタスク追加フォームの上に移動することができました。
タスク一覧画面
"{ユーザ名}のタスク一覧"と"タスクがありません"の文字列をTypographyで囲みます。"{ユーザ名}のタスク一覧"の方は、gutterBottomを指定して、下に余白を設定しています。
src/components/todos/Title.js({/* xxx */}のコメントは実行前に削除してください)
import Typography from '@material-ui/core/Typography'
const Title = ({displayName, isOwnTodos}) => {
const name = isOwnTodos ? 'あなた' : `${displayName} さん`;
return (
<React.Fragment>
{displayName && <Typography variant="h5" gutterBottom>{name}のタスク一覧</Typography>} {/* 変更 */}
</React.Fragment>
)
}
src/components/todos/TodoList.js
import Typography from '@material-ui/core/Typography'
const TodoList = ({todos, isOwnTodos, onTodoClick}) => {
if (isEmpty(todos)) {
return <Typography variant="body1">タスクがありません。</Typography>
}
}
実行結果です。
以上で通常のテキストをTypographyに変更できました。
参考
★次回の記事
yucatio.hatenablog.com
★目次
yucatio.hatenablog.com
