現在、Electronではじめるアプリ開発という本でElectronについて学習しています。
その中にチャットアプリを作るところがあるのですが、アプリ自体は動くのにチャットルームの作成処理が正しく動作していないようなのです。
下記はチャットルームの作成処理を行なっているファイルのコードになります。
JavaScript
1const React = require("react"); 2import { hashHistory } from "react-router"; 3import RoomItem from "./RoomItem"; 4import firebase from "firebase/firebase-browser"; 5 6const ICON_CHAT_STYLE = { 7 fontSize: 120, 8 color: "#DDD" 9}; 10 11const FORM_STYLE = { 12 display: "flex" 13}; 14 15const BUTTON_STYLE = { 16 marginLeft: 10 17}; 18 19export default class Rooms extends React.Component { 20 constructor(props) { 21 super(props); 22 this.state = { 23 roomName: "", 24 rooms: [] 25 }; 26 this.db = firebase.database(); 27 this.handleOnChangeRoomName = this.handleOnChangeRoomName.bind(this); 28 this.handleOnSubmit= this.handleOnSubmit.bind(this); 29 } 30 31 componentDidMount() { 32 // コンポーネントの初期化時にチャットルームの一覧を取得 33 this.fetchRooms(); 34 } 35 36 handleOnChangeRoomName(e) { 37 this.setState({ 38 roomName: e.target.value 39 }); 40 } 41 42 // 新規チャットルームの作成処理 43 handleOnSubmit(e) { 44 const { roomName } = this.state; 45 e.preventDefault(); 46 if (!roomName.length) { 47 return; 48 } 49 // Firebaseデータベースに新規チャットルームのデータを作成 50 const newRoomRef = this.db.ref("/chatrooms").push(); 51 const newRoom = { 52 description: roomName 53 }; 54 // 作成したチャットルームのdescriptionを更新 55 newRoomRef.update(newRoom).then(() => { 56 // 状態を再初期化 57 this.setState({ roomName: "" }); 58 // チャットルーム一覧を再取得 59 return this.fetchRooms().then(() => { 60 // 右ペインを作成した詳細画面に遷移させる 61 hashHistory.push(`/rooms/${newRoomRef.key}`); 62 }); 63 }); 64 } 65 66 // チャットルーム一覧の取得処理 67 fetchRooms() { 68 // Firebaseデータベースからチャットルームを20件取得 69 return this.db.ref("/chatrooms").limitToLast(20).once("value").then(snapshot => { 70 const rooms = []; 71 snapshot.forEach(item => { 72 // データベースから取得したデータをオブジェクトとして取り出す 73 rooms.push(Object.assign({ key: item.key }, item.val())); 74 }); 75 // 取得したオブジェクトの配列をコンポーネントのstateにセット 76 this.setState({ rooms }); 77 }); 78 } 79 80 // 左ペイン(チャットルーム一覧)の描画処理 81 renderRoomList() { 82 const { roomId } = this.props.params; 83 const { rooms, roomName } = this.state; 84 return ( 85 <div className="list-group"> 86 {rooms.map(r => <RoomItem room={r} key={r.key} selected={r.key === roomId} /> )} 87 <div className="list-group-header"> 88 <form style={FORM_STYLE} onSubmit={this.handleOnSubmit}> 89 <input 90 type="text" 91 className="form-control" 92 placeholder="New room" 93 onChange={this.handleOnChangeRoomName} 94 value={roomName} 95 /> 96 <button className="btn btn-default" style={BUTTON_STYLE}> 97 <span className="icon icon-plus" /> 98 </button> 99 </form> 100 </div> 101 </div> 102 ); 103 } 104 105 // 右ペイン(チャットルーム詳細)の描画処理 106 renderRoom() { 107 if (this.props.children) { 108 return this.props.children; 109 } else { 110 return ( 111 <div className="text-center"> 112 <div style={ICON_CHAT_STYLE}> 113 <span className="icon icon-chat" /> 114 </div> 115 <p> 116 Join a chat room from the sidebar or create your chat room. 117 </p> 118 </div> 119 ); 120 } 121 } 122 123 render() { 124 return ( 125 <div className="pane-group"> 126 <div className="pane-sm sidebar">{this.renderRoomList()}</div> 127 <div className="pane">{this.renderRoom()}</div> 128 </div> 129 ); 130 } 131} 132
調べてもなかなか答えが得られず・・・。
初歩的な質問になってしまい大変恐縮ですが、ご教授いただけませんでしょうか。
よろしくお願いいたします。
あなたの回答
tips
プレビュー