★前回の記事
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}) => { // #2 return { // displayName: users && users[uid] && users[uid].displayName, を削除 todos: getVisibleTodos(todos && todos[uid], visibilityFilter) } } const firebaseQueries = ({uid}) => ( [ // {path: `users/${uid}/displayName`, type: 'once'}, を削除 `todos/${uid}` ] )
src/components/todos/TodoList.js
const TodoList = ({todos, isOwnTodos, onTodoClick}) => { // displayNameを削除 // 略 // const name = isOwnTodos ? 'あなた' : `${displayName} さん`; を削除 return ( {/* <div> {displayName && <div>{name}のタスク一覧</div>} の削除 */} <List> {Object.keys(todos).map( (key) => ( <Todo key={key} isOwnTodos={isOwnTodos} {...todos[key]} onClick={isOwnTodos ? (() => onTodoClick(key)) : (() => {})} /> ) )} </List> {/* </div> の削除 */} ) } TodoList.propTypes = { // displayName: PropTypes.string, は削除 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に変更できました。
参考
★次回の記事
★目次