Firebase | RESTAPIの作成とFirestoreでデータを取得する

■REST APIを作る
■firestoreを使う準備
参考元

■REST APIを作る

・dataset.jsをjsonファイルに変える
・Cloud Functionでhttps関数の作成
・デプロイ
・curlコマンドでAPIを叩く

Firestoreを確認するとデータが追加されている。

■firestoreを使う準備

・Firebase Consoleからプロジェクトの設定値を取得
・config.jsに設定値を貼り付けてexport
・index.jsでさらにexport
・Firestoreを使うコンポーネントでimport
・componentDidMount()でデータセット

import React from "react";
import "./assets/styles/style.css";
import { AnswersList, Chats } from "./components/index";
import { db } from "./firebase/index";
import { getNodeText } from "@testing-library/react";
import FormDialog from "./components/Forms/FormDialog";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      answers: [],
      chats: [],
      currentId: "init",
      dataset: {},
      open: false,
    };
    this.selectAnswer = this.selectAnswer.bind(this);
    this.handleClickOpen = this.handleClickOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  displayNextQuestion = (nextQuestionId) => {
    const chats = this.state.chats;
    chats.push({
      text: this.state.dataset[nextQuestionId].question,
      type: "question",
    });

    this.setState({
      answers: this.state.dataset[nextQuestionId].answers,
      chats: chats,
      currentId: nextQuestionId,
    });
  };

  selectAnswer = (selectedAnswer, nextQuestionId) => {
    switch (true) {
      case nextQuestionId === "init":
        this.displayNextQuestion(nextQuestionId);
        break;

      case nextQuestionId === "contact":
        this.handleClickOpen();
        break;

      case /^https:*/.test(nextQuestionId):
        const a = document.createElement("a");
        a.href = nextQuestionId;
        a.target = "_target";
        a.click();
        break;
      default:
        const chats = this.state.chats;
        chats.push({
          text: selectedAnswer,
          type: "answer",
        });

        this.setState({
          chats: chats,
        });

        setTimeout(() => this.displayNextQuestion(nextQuestionId), 1000);
        break;
    }
  };

  handleClickOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  initDataset = (dataset) => {
    this.setState({dataset: dataset})
  }



  componentDidMount() {
    (async () => {
      const dataset = this.state.dataset
      await db.collection("questions").get().then(snapshots => { 
        snapshots.forEach(doc => {
          const id = doc.id
          const data = doc.data()
          dataset[id] = data
        })
      })

      this.initDataset(dataset)
      const initAnswer = "";
      this.selectAnswer(initAnswer, this.state.currentId);
  
      
    })()
  }

  componentDidUpdate() {
    const scrollArea = document.getElementById("scroll-area");
    if (scrollArea) {
      scrollArea.scrollTop = scrollArea.scrollHeight;
    }
  }

  render() {
    return (
      <section className="c-section">
        <div className="c-box">
          <Chats chats={this.state.chats} />
          <AnswersList
            answers={this.state.answers}
            select={this.selectAnswer}
          />
          <FormDialog open={this.state.open} handleClose={this.handleClose} />
        </div>
      </section>
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

import React from "react";

import "./assets/styles/style.css";

import { AnswersList, Chats } from "./components/index";

import { db } from "./firebase/index";

import { getNodeText } from "@testing-library/react";

import FormDialog from "./components/Forms/FormDialog";

export default class App extends React.Component {

constructor(props) {

super(props);

this.state = {

answers: [],

chats: [],

currentId: "init",

dataset: {},

open: false,

};

this.selectAnswer = this.selectAnswer.bind(this);

this.handleClickOpen = this.handleClickOpen.bind(this);

this.handleClose = this.handleClose.bind(this);

}

displayNextQuestion = (nextQuestionId) => {

const chats = this.state.chats;

chats.push({

text: this.state.dataset[nextQuestionId].question,

type: "question",

});

this.setState({

answers: this.state.dataset[nextQuestionId].answers,

chats: chats,

currentId: nextQuestionId,

});

};

selectAnswer = (selectedAnswer, nextQuestionId) => {

switch (true) {

case nextQuestionId === "init":

this.displayNextQuestion(nextQuestionId);

break;

case nextQuestionId === "contact":

this.handleClickOpen();

break;

case /^https:*/.test(nextQuestionId):

const a = document.createElement("a");

a.href = nextQuestionId;

a.target = "_target";

a.click();

break;

default:

const chats = this.state.chats;

chats.push({

text: selectedAnswer,

type: "answer",

});

this.setState({

chats: chats,

});

setTimeout(() => this.displayNextQuestion(nextQuestionId), 1000);

break;

}

};

handleClickOpen = () => {

this.setState({ open: true });

};

handleClose = () => {

this.setState({ open: false });

};

initDataset = (dataset) => {

this.setState({dataset: dataset})

}

componentDidMount() {

(async () => {

const dataset = this.state.dataset

await db.collection("questions").get().then(snapshots => {

snapshots.forEach(doc => {

const id = doc.id

const data = doc.data()

dataset[id] = data

})

this.initDataset(dataset)

const initAnswer = "";

this.selectAnswer(initAnswer, this.state.currentId);

})()

}

componentDidUpdate() {

const scrollArea = document.getElementById("scroll-area");

if (scrollArea) {

scrollArea.scrollTop = scrollArea.scrollHeight;

}

render() {

return (

<AnswersList

answers={this.state.answers}

select={this.selectAnswer}

</div>

</section>

);

}

参考元

トラハック - YouTube

都内で小さな Web アプリケーション開発会社を経営しています。React と …