From f9a26e8e0fbc66a4c9e37391b37b01e248187953 Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Sun, 18 Jun 2023 23:04:49 +0200 Subject: [PATCH] longeur messages et logueur modal nouveau message --- containers/react/src/components/Game/Rank.tsx | 5 ++-- .../react/src/components/Messages/Message.tsx | 10 ++++---- .../react/src/components/Messages/Modal.tsx | 6 ++--- .../react/src/components/Profile/Win_Loss.tsx | 6 ++--- .../react/src/components/Sidebar/Modal.tsx | 25 +++---------------- containers/react/src/styles/Messages.css | 7 ++++++ 6 files changed, 24 insertions(+), 35 deletions(-) diff --git a/containers/react/src/components/Game/Rank.tsx b/containers/react/src/components/Game/Rank.tsx index 12f62d6d..530ee4af 100644 --- a/containers/react/src/components/Game/Rank.tsx +++ b/containers/react/src/components/Game/Rank.tsx @@ -13,12 +13,13 @@ // import React from "react" import React, { useState, useEffect, useRef } from "react"; // import {Rank} from '../../DataBase/DataRank.js' -import DefaultPicture from '../../assets/profile.jpg' -import api from '../../script/axiosApi.tsx'; +// import DefaultPicture from '../../assets/profile.jpg' +import api from '../../script/axiosApi'; function Rank({user, index}){ const [profilePicture, setProfilePicture] = useState(''); + const DefaultPicture:string = '../../assets/profile.jpg'; useEffect(() => { const fetchProfilePicture = async () => { diff --git a/containers/react/src/components/Messages/Message.tsx b/containers/react/src/components/Messages/Message.tsx index 97d73e20..9f19769b 100644 --- a/containers/react/src/components/Messages/Message.tsx +++ b/containers/react/src/components/Messages/Message.tsx @@ -10,10 +10,11 @@ /* */ /* ************************************************************************** */ +import React, { HtmlHTMLAttributes } from "react"; import { useEffect, useState, useRef } from "react"; -import api from '../../script/axiosApi.tsx'; +import api from '../../script/axiosApi'; import styled from "styled-components" -import DefaultPicture from '../../assets/profile.jpg' +// import DefaultPicture from '../../assets/profile.jpg' // import { useRef } from "react"; // import { useEffect } from "react"; import '../../styles/Messages.css' @@ -25,12 +26,11 @@ const MeStyleP = styled.p` color: white; margin-right: 20px; ` - function MessageMe({message, own}){ const [profilePicture, setProfilePicture] = useState(''); - const scrollRef = useRef(); - + const scrollRef = useRef(null); + const DefaultPicture: string = '../../assets/profile.jpg' useEffect(() => { if (scrollRef.current) { diff --git a/containers/react/src/components/Messages/Modal.tsx b/containers/react/src/components/Messages/Modal.tsx index 62b50811..81b51584 100644 --- a/containers/react/src/components/Messages/Modal.tsx +++ b/containers/react/src/components/Messages/Modal.tsx @@ -1,11 +1,11 @@ import { motion } from "framer-motion"; -import Backdrop from "../Sidebar/Backdrop.tsx"; +import Backdrop from "../Sidebar/Backdrop"; // import { Rank } from "../../DataBase/DataRank" import '../../styles/Messages.css' import { useState, useEffect } from "react"; import { GrAdd } from "react-icons/gr"; import { Link } from "react-router-dom"; -import api from "../../script/axiosApi.tsx"; +import api from "../../script/axiosApi"; import React from "react"; const dropIn = { @@ -99,7 +99,7 @@ const Modal = ({handleClose}) => { // let new_name; return ( - + e.stopPropagation()} className="modal" diff --git a/containers/react/src/components/Profile/Win_Loss.tsx b/containers/react/src/components/Profile/Win_Loss.tsx index 26314607..946f95eb 100644 --- a/containers/react/src/components/Profile/Win_Loss.tsx +++ b/containers/react/src/components/Profile/Win_Loss.tsx @@ -46,7 +46,7 @@ import '../../styles/Win_Loss.css' import React, { useState, useEffect, useRef } from "react"; import { useParams } from 'react-router-dom'; -import api from '../../script/axiosApi.tsx'; +import api from '../../script/axiosApi'; function WinLoss() { @@ -99,8 +99,8 @@ function WinLoss() {
  • {/*

    {c.id}

    */} -
    -

    {user.username}

    {c.myScore} - {c.opScore}

    {c.opponent}

    +
    +

    {user.username}

    {c.myScore} - {c.opScore}

    {c.opponent}

    {/*

    {c.openent}

    */}
    • diff --git a/containers/react/src/components/Sidebar/Modal.tsx b/containers/react/src/components/Sidebar/Modal.tsx index ae9ed8b1..d3f819d7 100644 --- a/containers/react/src/components/Sidebar/Modal.tsx +++ b/containers/react/src/components/Sidebar/Modal.tsx @@ -1,6 +1,7 @@ +import React from "react"; import {motion} from "framer-motion" -import Backdrop from "./Backdrop.tsx" -import { SidebarData } from "./SidebarData.tsx" +import Backdrop from "./Backdrop" +import { SidebarData } from "./SidebarData" import {Link} from 'react-router-dom'; import * as AiIcons from 'react-icons/ai'; @@ -19,26 +20,6 @@ const dropIn = { }, } - -// function showBar (){ -// return ( -// {SidebarData.map((item, index) => { -// return ( -// -//
  • -// -// {item.icon} -// {item.title} -// -//
    • -//     -// ) -// })} -// ) -// } const Modal = ({ handleclose }) => { return ( diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css index 847fb15f..57bbe076 100644 --- a/containers/react/src/styles/Messages.css +++ b/containers/react/src/styles/Messages.css @@ -32,6 +32,7 @@ select{ display: flex; flex-direction: column; align-items: center; + overflow-x: scroll; } .scroll{ @@ -173,11 +174,17 @@ input{ .messageContent{ display: flex; + flex-wrap: wrap; flex-direction: column; max-width: 80%; gap: 10px; } +p { + overflow-wrap: break-word; + max-width: 300px; +} + .meMessage{ display: flex; flex-direction: row-reverse;