- 아래는 전체 소스 코드 입니다.
- 올려주신 v9 소스코드 보고 현 강의 내용에 맞게 수정 했습니다.
import React, { Component } from 'react';
- 올려주신 v9 소스코드 보고 현 강의 내용에 맞게 수정 했습니다.
import React, { Component } from 'react';
import { FaRegSmileWink,FaPlus } from 'react-icons/fa';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
// import { } from 'react-icons/fa';
import {connect} from 'react-redux';
import { getDatabase, ref, onChildAdded, onValue, push, child, update, off } from "firebase/database";
export class ChatRooms extends Component {
state = {
show:false,
name : "",
description : "",
chatRoomsRef: ref(getDatabase(), "chatRooms"),
}
handleClose = () => this.setState({show:false});
handleShow = () => this.setState({show:true});
hanldeSubmit = (e) =>{
e.preventDefault();
const {name, description} = this.state;
if(this.isFormValid(name,description)){
this.addChatRomm();
}
}
addChatRomm = async() =>{
const key = push(this.state.chatRoomsRef).key;
const { name, description} = this.state;
const {user}=this.props;
const newChatRoom = {
id: key,
name : name ,
description : description,
createdBy : {
name : user.displayName,
image : user.photoURL
}
}
try{
await update(child(this.state.chatRoomsRef, key), newChatRoom)
this.setState({
name : "",
description : "",
show:false
})
console.log("chatRR",this.state.chatRoomsRef);
console.log("newC",newChatRoom);
console.log("key",key);
}
catch(error){
console.log(error);
}
}
isFormValid = (name, description) =>
name && description;
render() {
return <div>
<div style={{
position: 'relative', width:'100%',
display : 'flex', alignItems: 'center'
}}>
<FaRegSmileWink style={{
marginRight : 3
}}/>
CHAT ROOMS (1)
<FaPlus
onClick={this.handleShow}
style = {{
position: 'absolute',
right: 0 , cursor: 'pointer'
}}/>
</div>
{/*ADD CHAT ROOM MODAL*/}
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Create a Chat Room</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit={this.hanldeSubmit}>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>방 이름</Form.Label>
<Form.Control
onChange={(e)=>this.setState({name: e.target.value})}
type="text" placeholder="Enter a ChatRoom Name" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>방 설명</Form.Label>
<Form.Control
onChange={(e)=>this.setState({description: e.target.value})}
type="text" placeholder="Enter a ChatRoom Description" />
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
취소
</Button>
<Button variant="primary" onClick={this.hanldeSubmit}>
방 생성
</Button>
</Modal.Footer>
</Modal>
</div>;
}
}
const mapStateToProps = state =>{
return {
user : state.user.currentUser
}
}
export default connect(mapStateToProps) (ChatRooms);
