App.js

import React, { Component } from 'react';
import { Messages } from "./templates/Messages";
import { SendForm } from "./templates/SendForm";
import { scrollbarFunctions, textareaFunctions, generateFunctions, getDom } from "../js/custom.js"
import '../css/app.css';

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      Rooms: []
    }
  }

  async postRoom() {

    let roomKey = document.getElementById("roomKey").value;
    let name = document.getElementById("name").value;
    let message = document.getElementById("message").value;

    await fetch(`http://localhost:1234?roomKey=${roomKey}&name=${name}&message=${message}`, { method: 'POST' })
    let res = await fetch(`http://localhost:1234?roomKey=${roomKey}`, {method: 'GET'})
    let data = await res.json();

    console.log(data);

    this.setState(data);
  }

  async componentDidMount() {

    scrollbarFunctions(
      getDom().message,
      getDom().messages)

    textareaFunctions(
      getDom().textarea)

    generateFunctions(
      getDom().roomKey,
      getDom().generate)
  }



  render() {
    return (
      <>
        <Messages Room={this.state.Rooms} />
        <SendForm postRoom={this.postRoom} />
      </>
    );
  }
}