Comments.js

import React, { useContext, useEffect, useRef, useState } from "react";
import axios from "axios";
import { AiOutlineInfoCircle } from "react-icons/ai";
import { BiSend } from "react-icons/bi";
import { BsChatText } from "react-icons/bs";

import { User } from "../index";
import { getSiblings } from "../utils";

import "../styles/Comments.css";

export default function Messages({ place, infos }) {
  const [user] = useContext(User);
  const [messages, setMessages] = useState([]);
  const [newComment, setNewComment] = useState("");
  const [loading, setLoading] = useState(true);
  const input = useRef();
  const chat = useRef();

  let width = window.innerWidth > 0 ? window.innerWidth : screen.width;
  width = width > 600;

  const Submit = (ev) => {
    if (newComment.replace(/\s/g, "").length) {
      ev.preventDefault();
      axios
        .post(
          `${process.env.REACT_APP_BASE_URL_BACK}/${encodeURIComponent(place)}/comments`,
          { content: newComment },
          { withCredentials: true },
        )
        .then((res) => {
          if (messages.length) {
            let update = messages.map((_, index) => (index ? messages[index - 1] : res.data));
            update.push(messages[messages.length - 1]);
            setMessages(update);
          } else {
            setMessages([res.data]);
          }
          updateValue("");
        })
        .catch((e) => {
          console.log(e);
          updateValue("");
        });
    }
  };

  const updateValue = (value) => {
    setNewComment(value);
    if (input.current) {
      input.current.style.height = "";
      input.current.style.height = `${input.current.scrollHeight + 5}px`;
    }
  };

  const OpenSideBar = (ev) => {
    if (!width && ev.target.parentNode.parentNode.className == "comments-side-bar") {
      ev.preventDefault();
      ev.stopPropagation();
      let sidebar = ev.target.parentNode.parentNode;
      if (!parseInt(sidebar.style.width, 10)) {
        let siblings = getSiblings(sidebar);
        for (let sibling of siblings) {
          sibling.style.width = 0;
        }
        if (ev.target.id == "comments-icon-left") {
          let otherIcon = document.getElementById("comments-icon-right");
          otherIcon.style.cssText = "background-color: none";
        } else if (ev.target.id == "comments-icon-right") {