Reactチャットアプリで相手の名前を取得する方法

Question

import React, { useState, useEffect } from "react";
import Input from "../../components/UI/ChatUI/Input/Input";
import MessagesChat from "../../../src/components/UI/ChatUI/Messages/Messages";
import "./Chat.css";
import Sidebar from "../../components/UI/Sidebar/Sidebar";
import Midlebar from "../../components/UI/ChatUI/Midlebar/Midlebar";
import { Col, Row } from "react-bootstrap";
// import axios from "../../axios";
import ScroolToBottom from "react-scroll-to-bottom";
import { css } from "glamor";

const Chat = () => {
  const [Message, setMessage] = useState("");
  const [Name, setName] = useState("");
  const [messages, setMessages] = useState([]);

  const submitHandler = event => {
    event.preventDefault();
    addIngredientHandler({ name: Name, text: Message });
  };

  useEffect(() => {
    const name = localStorage.getItem("name");
    setName(name);
  }, []);

  useEffect(() => {
    fetch("https://react-hooks-update-676a6.firebaseio.com/ingredients.json")
      .then(response => response.json())
      .then(responseData => {
        console.log(responseData);
        const loadedIngredients = [];
        for (const key in responseData) {
          loadedIngredients.push({
            id: key,
            name: responseData[key].name,
            text: responseData[key].text
          });
        }
        setMessages(loadedIngredients);
      });
  }, []);

  const ROOT_CSS = css({
    height: 600,
    width: 650
  });

  const addIngredientHandler = text => {
    fetch("https://react-hooks-update-676a6.firebaseio.com/ingredients.json", {
      method: "POST",
      body: JSON.stringify(text),
      headers: { "Content-Type": "application/json" }
    })
      .then(response => {
        return response.json();
      })
      .then(responseData => {
        setMessages(prevIngredients => [
          ...prevIngredients,
          { id: responseData.name, ...text }
        ]);
      });
  };

  return (
    <div>
      <Row style={{ width: "100%" }}>
        <Col md={3}>
          <div style={{ paddingLeft: "30px" }}>
            <Sidebar />
          </div>
        </Col>
        <Col md={3}>
          <div>
            <Midlebar />
          </div>
        </Col>
        <Col md={6}>
          <div style={{ textAlign: "right" }}>
            <div className="chatContainer">
              <ScroolToBottom className={ROOT_CSS}>
                <MessagesChat messages={messages} />
              </ScroolToBottom>
              <form onSubmit={submitHandler}>
                <Input
                  Message={Message}
                  setMessage={setMessage}
                  submitHandler={submitHandler}
                />
              </form>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  );
};
export default Chat;

import React from "react";
import "./Messages.css";
const Messages = ({ messages }) => (
  <div>
    {messages.map(i => (
      <div key={i}>
        <div className="messageContainer justifyEnd">
          <div className="messageBox backgroundBlue">
            <p className="messageText colorWhite">{i.text}</p>
          </div>
          <p className="sentText pr-10">{i.name}</p>
        </div>
        <div className="messageContainer justifyStart">
          <p className="sentText pl-10 ">相手</p>
          <div className="messageBox backgroundLight">
            <p className="messageText colorDark">久美子よ</p>
          </div>
        </div>
      </div>
    ))}
  </div>
);
export default Messages;

現在Firebaseを使ってチャットアプリを作っているのですが、相手の名前をどうしても取得することができません。
自分の名前に関しましては、signup時にLocalStorageに保管してそれをとってきて取得できるのですが本来チャットアプリを開発する際はどのようにして相手の名前を取得することができるのでしょうか？

Answer 1

本来チャットアプリを開発する際はどのようにして相手の名前を取得

「本来」がどうだかは分かりませんが、多くの場合、メッセージ取得の際に名前など表示に必要な情報を一通り含んだデータを取得するように思います。
たとえばTwitterなどは（チャットとは少し違いますが）ツイートを取得するAPIを叩くと、ツイート1つ1つに発言者のアカウント情報をかなり事細かに付与した姿で値を返してきます。

Comments

[21212121]

なるほどです。
フロント側の問題ではなくサーバー側の問題なんですね！
バックエンド担当者と話し合ってみます。
ご回答ありがとうございます。

[thyda.eiqau]

「サーバー側の問題」というのは含蓄のある表現だと思いますが、フロントが必要とする値を返すようにバックエンドがデザインされているのにもかかわらずデザイン通り動いていないのであればバックエンド側の修正が必要です。
そもそも適切にデザインされていないのであればデザインが悪いので、仕様書を作った人と、仕様書を読んでもその問題に気づかなかったコーダーの問題です。