React-Redex-Firebase掲示板の作成-6(Firebaseからデータ取得をして表示)

2020年6月28日2021年1月24日

前回までにしたことでFirebaseにデータが登録出来ました。
そのデータを表示させていきましょう。

編集ファイル

src/store/reducers/rootReducer.js

reduxのstateとFirebaseのデータを同期します。

import projectReducer from './projectReducer';
import { combineReducers } from 'redux';
import { firestoreReducer } from 'redux-firestore';

const rootReducer = combineReducers({
	project: projectReducer,
	firestore: firestoreReducer
});

export default rootReducer;

src/components/dashboard/Dashboard.js

firestoreのデータを表示するよう編集します。

import React, { Component } from 'react';
import ProjectList from '../projects/ProjectList';
import { connect } from 'react-redux';
import { firestoreConnect } from 'react-redux-firebase';
import { compose } from 'redux';

class Dashboard extends Component {
	render() {
		const { projects } = this.props;
		return (
			<div className="container">
				<div className="row">
					<div className="col s12 m8">
						<ProjectList projects={projects} />
					</div>
				</div>
			</div>
		);
	};
}

const mapStateToProps = (state) => {
	return {
		projects: state.firestore.ordered.projects
	}
};

export default compose(
	connect(mapStateToProps),
	firestoreConnect([
		{ collection: 'projects' }
	])
)(Dashboard);

src/components/projects/ProjectSummary.js

momentの追加。日付時間のフォーマットを指定します。

import React from 'react';
import moment from 'moment';

const ProjectSummary = ({ project }) => {
	return (
		<div className="card">
			<div className="card-content black-text">
				<span className="card-title">{project.title}</span>
				<p>内容　：{project.content}</p>
				<p>投稿者：{project.authorFirstName}</p>
				<p>日付　：{moment(project.createdAt.toDate()).format('YYYY/MM/DD hh:mm:ss')}</p>
			</div>
		</div>
	);
}

export default ProjectSummary;

src/components/projects/CreateProject.js

handleSubmit関数に１行追加します。
新規作成後に初期画面の一覧表示画面へ戻す処理を加えます。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createProject } from '../../store/actions/projectActions'

class CreateProject extends Component {
	state = {
		title: '',
		content: ''
	}
	handleChange = (event) => {
		this.setState({
			[event.target.id]: event.target.value
		})
	}
	handleSubmit = (event) => {
		event.preventDefault()
		this.props.createProject(this.state)
		this.props.history.push('/') # 追加
	}
	render() {
		return (
			<div className="container">
				<form onSubmit={this.handleSubmit} className="white">
					<h5>新規作成</h5>
					<div className="input-field">
						<label htmlFor="title">タイトル</label>
						<input type="text" id="title" onChange={this.handleChange} />
					</div>
					<div className="input-field">
						<label htmlFor="content">内容</label>
						<input type="text" id="content" onChange={this.handleChange} />
					</div>
					<button className="btn grey">作成</button>
				</form>
			</div>
		);
	};
}

const mapDispatchToProps = (dispatch) => {
	return {
		createProject: (project) => dispatch(createProject(project))
	}
};

export default connect(null, mapDispatchToProps)(CreateProject);

実行1

yarn start にて実行して動きを見ていきましょう。

新規作成をして見ましょう。

画面が初期画面に移動して、
登録したデータが表示されたら成功です。

Firebaseからデータの取得に成功しました。

詳細ページに移動する為の処理を足していきます。

src/components/projects/ProjectDetails.js

詳細ページを表示する処理を書いていきます。

import React from 'react';
import { connect } from 'react-redux';
import { firestoreConnect } from 'react-redux-firebase';
import { compose } from 'redux';
import moment from 'moment';

const ProjectDetails = (props) => {
	const { project } = props;
	if (project) {
		return (
			<div className="container section">
				<div className="card">
					<div className="card-content">
						<span className="card-title">{project.title}</span>
						<p>{ project.content }</p>
					</div>
					<div className="card-action">
						<div>投稿者： {project.authorFirstName} {project.authorLastName}</div>
						<div>投稿日： {moment(project.createdAt.toDate()).format('YYYY/MM/DD hh:mm:ss')}</div>
					</div>
				</div>
			</div>
		)
	} else {
		return (
			<div className="container section center">
				<p>データロード中</p>
			</div>
		)
	}
};

const mapStateToProps = (state, ownProps) => {
	const id = ownProps.match.params.id;
	const projects = state.firestore.data.projects;
	const project = projects ? projects[id] : null;
	return {
		project: project
	}
};

export default compose(
	connect(mapStateToProps),
	firestoreConnect([
		{ collection: 'projects' }
	])
)(ProjectDetails);

src/components/projects/ProjectList.js

Link を追加して、詳細ページへ飛ぶよう準備します。

import React from 'react';
import ProjectSummary from './ProjectSummary';
import { Link } from 'react-router-dom';

const ProjectList = ({ projects }) => {
	return (
		<div className="section">
			{ projects && projects.map(project => {
				return (
					<Link to={"/project/"+project.id} key={project.id}>
						<ProjectSummary project={project} key={project.id}/>
					</Link>
				)
			})}
		</div>
	);
}

export default ProjectList;

src/App.js

Routeのpathの追加をします。

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Dashboard from './components/dashboard/Dashboard';
import CreateProject from './components/projects/CreateProject';
import ProjectDetails from './components/projects/ProjectDetails';

class App extends Component {
	render() {
		return (
			<BrowserRouter>
				<div>
					<Navbar />
					<Switch>
						<Route exact path="/" component={Dashboard} />
						<Route path="/create" component={CreateProject} />
						<Route path="/project/:id" component={ProjectDetails} />
					</Switch>
				</div>
			</BrowserRouter>
		);
	};
}

export default App;