313일차 - React & Android Push
2021. 11. 7. 19:11ㆍDiary/300~400
시간이 없어서 빠르게
핵심만 적으려고 한다.
1. fbase.js
2. UserList.js
3. App.js
import { db } from "./fbase";
import React from "react";
import {collection, getDocs} from "firebase/firestore/lite";
import UserList from "./UserList";
class App extends React.Component {
state = {
isLoading: true,
data: [],
isClicked: true,
}
onRead = async () => {
const query = await getDocs(collection(db, 'User'));
query.forEach((doc) => {
this.state.data.push(doc.data())
this.setState({isLoading: false})
});
}
onSelect = () => {
if(this.state.isClicked === true) {
this.setState({isClicked: false})
}else if(this.state.isClicked === false) {
this.setState({isClicked: true})
}
}
onSubmit = (title, content) => {
// API 설정 예정.
}
componentDidMount() {
this.onRead()
}
render() {
const { isLoading, data, isClicked } = this.state;
console.log({data})
return (
<div className="App">
<table>
<thead>
<tr>
<th>리액트 테이블</th>
</tr>
</thead>
<tbody>
<tr>
<td>모델 번호</td>
<td>생성 날짜</td>
</tr>
{
isLoading ? (
console.log()
) : (
data.map((kk, index) =>
<UserList
key = { kk.fcmToken }
fcmToken = { kk.fcmToken }
phoneModel = { kk.phoneModel }
createdAt = { kk.createdAt }
/>
)
)
}
</tbody>
</table>
<button onClick={ this.onSelect }> 선택 완료 </button>
<div className="select-container">
{
isClicked ? (
console.log("비활성화")
) : (
<div style={{ display: "flex", flexDirection: "column"}}>
<input type="text" className="title_input"/>
<input type="text" className="content_input"/>
<input type="text" className="image_input"/>
<input type="text" className="link_input"/>
<button className="submit_btn" onClick={this.onSubmit("sdfsdf", "dcdc")}> 보내기 </button>
</div>
)
}
</div>
</div>
);
}
}
export default App;
4. 웹페이지 결과
< PostMan 테스트 >
개발 순차
1. React FCM Push API 테스트
2. React Image Upload
3. CheckBox
4. Design
이 순서로 개발할 예정이다.
오늘 팀 프로젝트 회의날이라
여기까지만 하고
얼른 밥먹고 준비해야겠다.
'Diary > 300~400' 카테고리의 다른 글
315일차 - Firebase 호스팅 & 음성 인식 (TTS, STT) (0) | 2021.11.09 |
---|---|
314일차 - React & Fcm Push 웹페이지 완성 (0) | 2021.11.08 |
312일차 - Android Kotlin & Firebase Fcm & Cloud Firestore (0) | 2021.11.06 |
311일차 - 현재 상황 및 React, Firebase 연동 계획 (0) | 2021.11.05 |
310일차 - 볼만한 유튜브 강의 영상 (0) | 2021.11.04 |