Skip to content
Snippets Groups Projects

improve front

Merged Antoine Gaudron-Desjardins requested to merge collab_front into main

Files

+ 48
1
import React, { 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 { getSiblings } from "../utils";
import "../styles/Comments.css";
@@ -11,6 +15,9 @@ export default function Messages({ place, infos }) {
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();
@@ -43,6 +50,34 @@ export default function Messages({ place, infos }) {
}
};
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(
@@ -76,7 +111,19 @@ export default function Messages({ place, infos }) {
return (
<div className="comments-side-bar">
<div className="comments-title">{infos ? "Infos" : "Commentaire"}</div>
<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 ? (
Loading