チャットApp(書き込みフォーム)

今回は書き込みフォームです。コンポーネントで作ります。components/compo/chatform.tsxを作り、そこに書き込んでいきます。

chatform.tsx

import { FC, useState } from "react";
import BasicTextField from "../atom/textbox";
import ContainerDiv from "../atom/containerDiv";
import BasicButton from "../atom/button";
import { makeStyles, createStyles } from "@material-ui/core";
import { setChatToFirestore, ChatType } from "../../functions/database";
const useStyles = makeStyles(() => createStyles({
   span: {
       height: "5px",
   }
}))
type Props = {
   roomid: string,
   user: firebase.User,
}
const ChatForm:FC<Props> = (props) => {
   const classes = useStyles();
   const [text, setText] = useState("");
   const handleChangeText = (event:React.ChangeEvent<{ value: unknown }>) => {
       setText(event.target.value as string);
   }
   const handleSendMessage = async() => {
       const date = Date.now();
       const chat:ChatType = {
           text: text,
           uid: props.user.uid,
           date: date,
           username: props.user.displayName,
           photoURL: props.user.photoURL,
       }
       const bool = await setChatToFirestore(props.roomid, chat);
       if (bool) {
           console.log("set data successfully!");
           setText("");
       }
   }
   
   return (
       <div>
           <ContainerDiv
               fullwidth={ true }
           >
                   <BasicTextField
                       label="メッセージ"
                       value={ text }
                       onchange={ handleChangeText }
                       multiline={ true }
                       fullWidth={ true }
                       rows={ 3 }
                       variant={ "outlined" }
                   />
                   <div className={ classes.span }></div>
                   <BasicButton
                       fullWidth={ true }
                       onclick={ handleSendMessage }
                   >
                       送る
                   </BasicButton>
           </ContainerDiv>
       </div>
   );
}
export default ChatForm;

テキストフィールドとボタンを配置します。プロップスとして読み込むのはfirebaseのuserデータとroomid(作成したユーザのuid)です。それを元にhandleSendMessage関数でfirestoreに書き込みます。この関数の中にあるsetChatToFirestore関数はfucntions/database.tsに追記しています。

database.ts

/**
* userrooms/uid/chats[]にchatを追加する。
* @param uid 
* @param chat 
*/
export const setChatToFirestore = async(uid:string, chat:ChatType):Promise<boolean> => {
   let bool:boolean = false;
   const chatroom = FBdb.collection("chatrooms").doc(uid);
   await chatroom.update({
       chats: FB.firestore.FieldValue.arrayUnion(chat),
   })
   .then(() => {
       bool = true;
   })
   .catch(error => {
       console.log(error);
       bool = false;
   });
   return bool;
}

chats: FB.firestore.FieldValue.arrayUnion(chat)は指定したフィールドの配列に引数の要素を追加する関数です(firebaseAPIが用意しています)。

これで書いたフォームに書いた内容をchatroomに追加出来ます。次回は自分もしくはチャットルームの相手が書き込んだ内容をリアルタイムに読み込む機能を追加しようと思います。