Material-UIのTypographyを使用する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

Material-UIのコンポーネントで囲まれていない文字列をTypographyで囲っていきます。 なお、一部はこの後のページでMaterial-UIのコンポーネントに変換するので、変換しない文字列もあります。

f:id:yucatio:20190428221446p:plain

NoMatchページ

始めにNoMatch.jsを変更します。variantにh2を指定します。

src/components/NoMatch.js({/* xxx */}のコメントは実行前に削除してください)

import Typography from '@material-ui/core/Typography'  // 追加

const NoMatch = () => (
  <Typography variant="h2">ページが見つかりません</Typography>  {/* 変更 */}
)

実行結果です。

f:id:yucatio:20181203122618p:plain

ダッシュボード画面

"最近の更新”と”データがありません”の文字列を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>
  )
}

実行結果です。

f:id:yucatio:20181203122636p:plain

タスク一覧のコンポーネントの順番変更

タスク一覧の文字列をTypographyに変更する前にコンポーネントの順番を変更します。

タスク追加フォーム
“{ユーザ名}のタスク一覧”
タスク一覧

という順番から

“{ユーザ名}のタスク一覧”
タスク追加フォーム
タスク一覧

という順番に変更します。

f:id:yucatio:20181203123320p:plain

ユーザ名を表示するのコンポーネント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>  // 変更
  }
  // 略
}

実行結果です。

f:id:yucatio:20181206165612p:plain

f:id:yucatio:20181203123256p:plain

以上で通常のテキストをTypographyに変更できました。

参考

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com