313일차 - React & Android Push

 

시간이 없어서 빠르게

핵심만 적으려고 한다.

 

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

 

이 순서로 개발할 예정이다.

오늘 팀 프로젝트 회의날이라

여기까지만 하고

얼른 밥먹고 준비해야겠다.