Skip to content
Snippets Groups Projects
Select Git revision
  • a4290b5f70952a7d41a4509d627e55264a6e23df
  • master default
2 results

Stopword_iiii.java

Blame
  • Comments.js 5.93 KiB
    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, lastMessage }) {
      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) => {
              setMessages((messages) => {
                messages.push(res.data);
                return messages;
              });
              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") {
              let otherIcon = document.getElementById("comments-icon-left");
              otherIcon.style.cssText = "background-color: none";
            }
            sidebar.style.width = "100%";
            ev.target.style.cssText = "background-color: white; color: black";
          } else {
            let mainPage = document.getElementById("restaurant-main-page");
            mainPage.style.width = "100%";
            sidebar.style.width = 0;
            ev.target.style.cssText = "background-color: none; color: white";
          }
        }
      };
    
      useEffect(() => {
        axios
          .get(
            `${process.env.REACT_APP_BASE_URL_BACK}/${encodeURIComponent(place)}/${
              infos ? "news" : "comments"
            }`,
          )
          .then((res) => {
            setMessages(res.data);
            setLoading(false);
            if (!width && infos && res.data.length) {
              let otherIcon = document.getElementById("comments-icon-left");
              otherIcon.style.cssText = "border: 1px solid red";
            }
          })
          .catch((e) => {
            console.log(e);
            setLoading(false);
          });
      }, []);
    
      useEffect(() => {
        if (chat.current) {
          let position = chat.current.scrollHeight - chat.current.clientHeight;
          chat.current.scrollTop = position;
        }
      }, [chat.current, messages.length]);
    
      useEffect(() => {
        if (input.current) {
          input.current.style.height = "";
          input.current.style.height = `${input.current.scrollHeight + 5}px`;
        }
      }, [newComment]);
    
      useEffect(() => {
        if (lastMessage?.data) {
          let new_message = JSON.parse(lastMessage.data);
          if (new_message.username != user) {
            setMessages((messages) => {
              messages.push(new_message);
              return messages;
            });
          }
        }
      }, [lastMessage]);
    
      return (
        <div className="comments-side-bar">
          <div className="comments-title">
            {infos ? (
              <>
                <AiOutlineInfoCircle id="comments-icon-left" onClick={OpenSideBar} />
                Infos
              </>
            ) : (
              <>
                <BsChatText id="comments-icon-right" onClick={OpenSideBar} />
                Commentaires
              </>
            )}
          </div>
          <div ref={chat} className={`comments-scroll-bar ${infos && "infos-scroll-bar"}`}>
            {!messages.length ? (
              loading ? (
                <div className={`comments-loading ${infos && "infos-loading"}`}>Chargement...</div>
              ) : (
                <div className="no-comments">
                  <div>
                    Il n&apos;y a{" "}
                    {infos
                      ? `aucune information particulière concernant ${place}`
                      : `aucun commentaire sur ${place}`}
                  </div>
                </div>
              )
            ) : (
              messages.map((message, index) => {
                let [date, hour] = message.published_at.split(/[T\s]/);
                let [year, month, day] = date.split("-");
                return (
                  <div key={index} className="comment">
                    <div className={`comment-title${infos ? "-infos" : ""}`}>
                      {infos ? message.title : message.username}
                    </div>
                    <div className="comment-content">{message.content}</div>
                    <div className="comment-date">
                      {`À ${hour.substring(0, 5)} le ${day}/${month}/${year}`}
                    </div>
                  </div>
                );
              })
            )}
          </div>
          {!infos && user && (
            <div className="comment-input-container">
              <textarea
                className="comments-input"
                ref={input}
                value={newComment}
                onChange={(ev) => updateValue(ev.target.value)}
                placeholder="Ajouter un commentaire"
              />
              <button className="comment-input-button" onClick={Submit}>
                <BiSend />
              </button>
            </div>
          )}
        </div>
      );
    }