From 263e3332a1a38c45da89ec75d49b025e7eacbe52 Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Sun, 18 Jun 2023 21:22:25 +0200 Subject: [PATCH 1/9] js to ts --- containers/react/package-lock.json | 14 +++++------ containers/react/package.json | 2 +- .../react/src/components/Messages/Chats.tsx | 4 +-- containers/react/src/pages/Field.tsx | 5 ++-- containers/react/src/pages/Game.tsx | 4 +-- containers/react/src/pages/Head.tsx | 2 ++ containers/react/src/pages/Home.tsx | 19 ++++++++------ containers/react/src/pages/Login42.tsx | 1 + containers/react/src/pages/Messages.tsx | 25 +++---------------- containers/react/src/pages/NewLogin.tsx | 1 + containers/react/src/pages/QrCode.tsx | 12 ++++++--- containers/react/src/pages/canvas.tsx | 2 +- containers/react/src/styles/Messages.css | 6 ++++- containers/react/tsconfig.build.json | 8 ++++++ 14 files changed, 57 insertions(+), 48 deletions(-) create mode 100644 containers/react/tsconfig.build.json diff --git a/containers/react/package-lock.json b/containers/react/package-lock.json index a0474a11..65c7eab8 100644 --- a/containers/react/package-lock.json +++ b/containers/react/package-lock.json @@ -23,7 +23,7 @@ "react-scripts": "5.0.1", "socket.io-client": "^4.6.1", "styled-components": "^5.3.10", - "typescript": "^3.2.1", + "typescript": "^3.9.10", "web-vitals": "^2.1.4" } }, @@ -20221,9 +20221,9 @@ } }, "node_modules/typescript": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.1.tgz", - "integrity": "sha512-jw7P2z/h6aPT4AENXDGjcfHTu5CSqzsbZc6YlUIebTyBAq8XaKp78x7VcSh30xwSCcsu5irZkYZUSFP1MrAMbg==", + "version": "3.9.10", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz", + "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -35362,9 +35362,9 @@ } }, "typescript": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.1.tgz", - "integrity": "sha512-jw7P2z/h6aPT4AENXDGjcfHTu5CSqzsbZc6YlUIebTyBAq8XaKp78x7VcSh30xwSCcsu5irZkYZUSFP1MrAMbg==" + "version": "3.9.10", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz", + "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==" }, "unbox-primitive": { "version": "1.0.2", diff --git a/containers/react/package.json b/containers/react/package.json index 0f333105..d367f166 100644 --- a/containers/react/package.json +++ b/containers/react/package.json @@ -18,7 +18,7 @@ "react-scripts": "5.0.1", "socket.io-client": "^4.6.1", "styled-components": "^5.3.10", - "typescript": "^3.2.1", + "typescript": "^3.9.10", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/containers/react/src/components/Messages/Chats.tsx b/containers/react/src/components/Messages/Chats.tsx index b35450cd..75e34813 100644 --- a/containers/react/src/components/Messages/Chats.tsx +++ b/containers/react/src/components/Messages/Chats.tsx @@ -3,11 +3,11 @@ import io from 'socket.io-client'; import '../../styles/Messages.css' import styled from "styled-components"; import DefaultPic from '../../assets/profile.jpg' -import api from '../../script/axiosApi.tsx'; +import api from '../../script/axiosApi.tsx' import { motion , AnimatePresence} from "framer-motion"; import Modal from "./Modal.tsx"; -import Message from "./Message.tsx" +import Message from './Message.tsx'; // import Input from "./Input"; //react icons diff --git a/containers/react/src/pages/Field.tsx b/containers/react/src/pages/Field.tsx index a8505d82..c95ab256 100644 --- a/containers/react/src/pages/Field.tsx +++ b/containers/react/src/pages/Field.tsx @@ -1,6 +1,7 @@ -import { useEffect, useLocation } from 'react'; +import React from 'react'; +import { useEffect } from 'react'; // import { useState, useRef } from 'react'; -import DrawCanvas from './canvas.tsx'; +import DrawCanvas from './canvas'; import queryString from 'query-string'; import '../styles/field.css'; diff --git a/containers/react/src/pages/Game.tsx b/containers/react/src/pages/Game.tsx index 37ebb430..92d89c23 100644 --- a/containers/react/src/pages/Game.tsx +++ b/containers/react/src/pages/Game.tsx @@ -1,6 +1,6 @@ import React from "react"; -import PlayButton from "../components/Game/PlayButton.tsx"; -import Ranking from "../components/Game/Ranking.tsx"; +import PlayButton from "../components/Game/PlayButton"; +import Ranking from "../components/Game/Ranking"; import '../styles/Game.css' function Game(){ diff --git a/containers/react/src/pages/Head.tsx b/containers/react/src/pages/Head.tsx index 0284f4c7..0d96b6b1 100644 --- a/containers/react/src/pages/Head.tsx +++ b/containers/react/src/pages/Head.tsx @@ -1,3 +1,5 @@ +import React from "react"; + function Head() { return ( diff --git a/containers/react/src/pages/Home.tsx b/containers/react/src/pages/Home.tsx index 5e557fc8..f07640a2 100644 --- a/containers/react/src/pages/Home.tsx +++ b/containers/react/src/pages/Home.tsx @@ -13,18 +13,18 @@ // import { React, useState } from "react"; import '../styles/Profile.css' // import '../styles/App.css' -import DefaultPicture from "../assets/profile.jpg"; -import WinLoss from "../components/Profile/Win_Loss.tsx"; +// import DefaultPicture from "../assets/profile.jpg"; +import WinLoss from "../components/Profile/Win_Loss"; import { motion, AnimatePresence } from 'framer-motion' // import { AiFillEdit } from 'react-icons/ai' // import { GrClose } from 'react-icons/gr' import { Link } from "react-router-dom"; -import ModalEdit from "../components/Profile/EditName.tsx"; +import ModalEdit from "../components/Profile/EditName"; import {AiOutlineHistory} from 'react-icons/ai' // import { Link } from "react-router-dom"; // import {UserProfile} from "../DataBase/DataUserProfile"; // import axios from "axios"; -import api from '../script/axiosApi.tsx'; +import api from '../script/axiosApi'; import { CgEditMarkup } from 'react-icons/cg' import { IoCloseCircleOutline } from "react-icons/io5"; @@ -43,6 +43,7 @@ import { useParams } from 'react-router-dom'; function Profile () { + const DefaultPicture: string = "../assets/profile.jpg"; const [user, setUser] = useState(null); const [isLoading, setIsLoading] = useState(true); const [modalOpen, setModalOpen] = useState(false); @@ -67,8 +68,10 @@ function Profile () { }; const handleUpload = async () => { - const formData = new FormData(); - formData.append('photo', selectedPhoto); + const formData: FormData = new FormData(); + if (selectedPhoto){ + formData.append('photo', selectedPhoto); + } try { await api.post('/picture', formData); console.log('File uploaded successfully'); @@ -125,7 +128,9 @@ function Profile () { {isLoading ? (

Loading...

) : ( -

{user.nickname}

+ user ? ( +

{user.nickname}

+ ) : ("") )} diff --git a/containers/react/src/pages/Login42.tsx b/containers/react/src/pages/Login42.tsx index 4d8ae2e2..737fb344 100644 --- a/containers/react/src/pages/Login42.tsx +++ b/containers/react/src/pages/Login42.tsx @@ -1,6 +1,7 @@ // import GoogleLogin from 'react-google-login'; import { useEffect } from 'react'; import axios from 'axios'; +import React from 'react'; // import setupLogin from '../script/login42'; // import React, { useEffect } from 'react'; diff --git a/containers/react/src/pages/Messages.tsx b/containers/react/src/pages/Messages.tsx index 3130e2ab..38b74ca4 100644 --- a/containers/react/src/pages/Messages.tsx +++ b/containers/react/src/pages/Messages.tsx @@ -1,31 +1,14 @@ import React from "react"; // import Sidebar from '../components/Messages/Sidebar' -import Chats from "../components/Messages/Chats.tsx" +import Chats from "../components/Messages/Chats" import '../styles/Messages.css' import { motion } from 'framer-motion' // import {io} from 'socket.io-client' -function Messages(params) { - // const socket = useRef(io("ws://localhost:8900")) - - // useEffect(() => { - // setSocket(io("ws://localhost:8900")) - // }, []) - // const socket = socketIO.connect('http://localhost:4000'); - - // axios.get('http://localhost/api/user/id') - // .then(function()); - - // console.log(socket) - // useEffect(() => { - // socket.current.emit("addUser", user._id); - // socket.current.on("getUsers", users=>{ - // console.log(users) - // }) - // }, [user]) +function Messages() { return ( - <> +
- + ); } diff --git a/containers/react/src/pages/NewLogin.tsx b/containers/react/src/pages/NewLogin.tsx index 4e98f900..e87c603d 100644 --- a/containers/react/src/pages/NewLogin.tsx +++ b/containers/react/src/pages/NewLogin.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import '../styles/field.css'; // import { useHistory } from 'react-router-dom'; import { useNavigate } from "react-router-dom"; diff --git a/containers/react/src/pages/QrCode.tsx b/containers/react/src/pages/QrCode.tsx index ad9f2367..f9b6ade4 100644 --- a/containers/react/src/pages/QrCode.tsx +++ b/containers/react/src/pages/QrCode.tsx @@ -3,10 +3,11 @@ import React, { useEffect, useRef, useState } from "react"; // import { redirect } from "react-router-dom"; import "../styles/App.css"; -import api from '../script/axiosApi.tsx'; +import api from '../script/axiosApi'; import QRCodeStyling from "qr-code-styling"; import { motion } from 'framer-motion' +import { MutableRefObject } from "react"; @@ -29,7 +30,8 @@ const qrCode = new QRCodeStyling({ function QrCode () { // const url = "https://www.youtube.com"; - const ref = useRef(null); + // const ref = useRef(null); + const ref: MutableRefObject = {current: null}; const [user, setUser] = useState(false); const [url, setUrl] = useState(false); const [secret, setSecret] = useState(false); @@ -39,7 +41,9 @@ function QrCode () { // const history = useHistory(); useEffect(() => { - qrCode.append(ref.current); + if (ref.current){ + qrCode.append(ref.current); + } const getUser = async ()=>{ try{ @@ -67,7 +71,7 @@ function QrCode () { useEffect(() => { qrCode.update({ - data: url + data: url }); }, [url]); diff --git a/containers/react/src/pages/canvas.tsx b/containers/react/src/pages/canvas.tsx index 857d582d..a928bd43 100644 --- a/containers/react/src/pages/canvas.tsx +++ b/containers/react/src/pages/canvas.tsx @@ -1,6 +1,6 @@ // import io from 'socket.io-client'; -import api from '../script/axiosApi.tsx'; +import api from '../script/axiosApi'; // import { useEffect, useRef } from 'react'; import io from 'socket.io-client'; diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css index 0d201718..847fb15f 100644 --- a/containers/react/src/styles/Messages.css +++ b/containers/react/src/styles/Messages.css @@ -50,7 +50,8 @@ select{ .contact{ background-color: rgb(46, 46, 46); align-items: left; - height: 30.2rem; + height: 74vh; + width: 30%; overflow: scroll; /* width: 2rem; */ /* height: 4rem; */ @@ -92,6 +93,8 @@ select{ } .navbar{ + /* width: clamp(50%, 500px, 20%); */ + /* height: min(50%, 100px); */ display: flex; align-items: center; /* background-color: yellow; */ @@ -130,6 +133,7 @@ select{ background-color: rgb(26, 26, 26); /* height: calc(100% - 118px); */ width: 70%; + /* height: 300px; */ overflow: scroll; } diff --git a/containers/react/tsconfig.build.json b/containers/react/tsconfig.build.json new file mode 100644 index 00000000..092ef3e8 --- /dev/null +++ b/containers/react/tsconfig.build.json @@ -0,0 +1,8 @@ +{ + "compiledOptions": { + "composite": true, + "allowJs": true, + "allowImportingTsExtensions": true, + "jsx": "react" + } +} \ No newline at end of file From f9a26e8e0fbc66a4c9e37391b37b01e248187953 Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Sun, 18 Jun 2023 23:04:49 +0200 Subject: [PATCH 2/9] 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; From 78c3c19de83bcbb860057f485b1ae288062d99d3 Mon Sep 17 00:00:00 2001 From: Alexandre POMMIER Date: Fri, 23 Jun 2023 15:47:57 +0200 Subject: [PATCH 3/9] project work in 42 --- .env | 10 ++-- conf/nginx.conf | 18 +++++- containers/api/src/config/config.service.ts | 4 +- containers/api/src/model/chat.entity.ts | 4 +- containers/pong/src/pong/pong.gateway.ts | 9 +-- containers/react/.env | 2 +- containers/react/package.json | 2 +- .../react/src/components/Game/Ranking.tsx | 9 --- .../react/src/components/Messages/Chats.tsx | 9 +-- .../react/src/components/Messages/Modal.tsx | 2 - containers/react/src/pages/Field.tsx | 55 +------------------ containers/react/src/pages/canvas.tsx | 20 +------ 12 files changed, 35 insertions(+), 109 deletions(-) diff --git a/.env b/.env index aae0c767..6449f712 100644 --- a/.env +++ b/.env @@ -14,22 +14,22 @@ NGINX_ENVSUBST_TEMPLATE_SUFFIX=".conf" # BASE_URL=http://localhost -BASE_URL=localhost -REACT_APP_BASE_URL=localhost -REDIRECT_URI=http://localhost/api/auth/login +BASE_URL=localhost:8080 +REACT_APP_BASE_URL=localhost:8080 +REDIRECT_URI=http://localhost:8080/api/auth/login #postgres var # POSTGRES_HOST=127.0.0.1 # DB_TYPE=postgres POSTGRES_HOST=postgresql POSTGRES_USER=postgres -POSTGRES_PASSWORD=pass +POSTGRES_PASSWORD=postgres POSTGRES_DATABASE=postgres MODE=DEV #port API_PORT=3000 # REACT_PORT=3000 (current = 8080) -NGINX_PORT=80 +NGINX_PORT=8080 PONG_PORT=4000 CHAT_PORT=4001 POSTGRES_PORT=5432 diff --git a/conf/nginx.conf b/conf/nginx.conf index 8af41775..d3040731 100644 --- a/conf/nginx.conf +++ b/conf/nginx.conf @@ -3,14 +3,14 @@ server { # listen 80 ssl; # listen 443 ssl; # listen ${NGINX_PORT}; - listen 80; + listen 8080; location /{ proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; - proxy_pass http://react_app:8080; + proxy_pass http://react_app:8001; } location /api { @@ -20,4 +20,18 @@ server { proxy_set_header X-Forwarded-Proto $scheme; proxy_pass http://api:3000/api; } + + location /socket { + # Forward requests to socket server running on port 4001 + if ($request_uri ~ ^/socket/4001) { + proxy_pass http://chat:4001; + break; + } + + # Forward requests to socket server running on port 4000 + if ($request_uri ~ ^/socket/4000) { + proxy_pass http://pong:4000; + break; + } + } } \ No newline at end of file diff --git a/containers/api/src/config/config.service.ts b/containers/api/src/config/config.service.ts index efb443aa..5ac28d33 100644 --- a/containers/api/src/config/config.service.ts +++ b/containers/api/src/config/config.service.ts @@ -6,7 +6,7 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/04/09 14:53:49 by apommier #+# #+# */ -/* Updated: 2023/06/12 14:51:44 by apommier ### ########.fr */ +/* Updated: 2023/06/22 20:42:32 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ @@ -17,7 +17,7 @@ export const getTypeOrmConfig = (): TypeOrmModuleOptions => ({ host: process.env.POSTGRES_HOST || 'postgresql', port: parseInt(process.env.POSTGRES_PORT, 10) || 5432, username: process.env.POSTGRES_USER || 'postgres', - password: process.env.POSTGRES_PASSWORD || 'pass', + password: process.env.POSTGRES_PASSWORD || 'postgres', database: process.env.POSTGRES_DATABASE || 'postgres', entities: ["dist/**/*.entity.js"], // entities: [join(__dirname, '**', '*.entity.{ts,js}')] diff --git a/containers/api/src/model/chat.entity.ts b/containers/api/src/model/chat.entity.ts index b81950d6..84a72306 100644 --- a/containers/api/src/model/chat.entity.ts +++ b/containers/api/src/model/chat.entity.ts @@ -6,12 +6,12 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/17 01:00:20 by apommier #+# #+# */ -/* Updated: 2023/06/17 01:31:29 by apommier ### ########.fr */ +/* Updated: 2023/06/23 15:18:19 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn, BaseEntity } from 'typeorm'; - + @Entity() export class Conv{ @PrimaryGeneratedColumn() diff --git a/containers/pong/src/pong/pong.gateway.ts b/containers/pong/src/pong/pong.gateway.ts index 42e1b648..d5a8649f 100644 --- a/containers/pong/src/pong/pong.gateway.ts +++ b/containers/pong/src/pong/pong.gateway.ts @@ -6,7 +6,7 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/19 15:18:38 by apommier #+# #+# */ -/* Updated: 2023/06/21 00:59:39 by apommier ### ########.fr */ +/* Updated: 2023/06/23 15:19:12 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ @@ -50,14 +50,7 @@ export class PongGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa handleDisconnect(client: Socket) { - // console.log(`Client disconnected: ${client.id}`); console.log(`Normal disconnected: ${client.id}`); - // this.waitingClients.delete(client); - // this.waitingClients.forEach((waitingClient) => { - // if (waitingClient.client === client) { - // this.waitingClients.delete(waitingClient); - // }}) - // delete this.clients[client.id]; this.waitingClients.forEach((item) => { if (item.client === client) diff --git a/containers/react/.env b/containers/react/.env index 35542322..d7d79fd5 100644 --- a/containers/react/.env +++ b/containers/react/.env @@ -1,4 +1,4 @@ -REACT_APP_BASE_URL=localhost +REACT_APP_BASE_URL=localhost:8080 REACT_APP_API_SECRET=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 REACT_APP_CLIENT_UID=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41 # REACT_APP_BASE_URL=92.143.191.152 diff --git a/containers/react/package.json b/containers/react/package.json index f0205289..705f72d4 100644 --- a/containers/react/package.json +++ b/containers/react/package.json @@ -22,7 +22,7 @@ "web-vitals": "^2.1.4" }, "scripts": { - "start": "HOST=0.0.0.0 PORT=8080 react-scripts start", + "start": "HOST=0.0.0.0 PORT=8001 react-scripts start", "start:dev": "npm run start --watch", "build": "react-scripts build", "test": "react-scripts test", diff --git a/containers/react/src/components/Game/Ranking.tsx b/containers/react/src/components/Game/Ranking.tsx index 1880abcc..94f417ed 100644 --- a/containers/react/src/components/Game/Ranking.tsx +++ b/containers/react/src/components/Game/Ranking.tsx @@ -43,15 +43,6 @@ function Ranking(){
    {ranking.map((user, index) => ( - // return ( - //
    - //
    - //

    {index + 1}

    - //

    {user.rank}: {user.nickname}

    - //
    - //

    {user.opponent}

    - //
    - // ) ))}
    )} diff --git a/containers/react/src/components/Messages/Chats.tsx b/containers/react/src/components/Messages/Chats.tsx index a971c853..65539f55 100644 --- a/containers/react/src/components/Messages/Chats.tsx +++ b/containers/react/src/components/Messages/Chats.tsx @@ -83,7 +83,7 @@ interface MessageProps { } function Chats(){ - + const [isLoading, setIsLoading] = useState(true); const [conversations, setConversation] = useState([]); const [partyInvite, setPartyInvite] = useState([]); @@ -94,7 +94,7 @@ function Chats(){ const [messages, setMessage] = useState([]); const [newMessages, setNewMessage] = useState(""); const [incomingMessage, setIncomingMessage] = useState(); - + // let socket: Socket; const socket = useRef(null); // const socket = Socket | null @@ -114,8 +114,9 @@ function Chats(){ setPartyInvite(tmpInvite.data); setUser(tmpUser.data); setConversation(convs.data); - // console.log(`connection....`); - socket.current = io('http://' + process.env.REACT_APP_BASE_URL + ':4001', { transports: ['polling'] }); + console.log(`connection....`); + socket.current = io('http://localhost:4001', { transports: ['polling'] }); + console.log(`connection done`); socket.current.emit('connection', {username: tmpUser.data.username}) socket.current.on('message', (data) => { //data should be a message ?) setIncomingMessage(data); diff --git a/containers/react/src/components/Messages/Modal.tsx b/containers/react/src/components/Messages/Modal.tsx index b7eb1d44..c4c58890 100644 --- a/containers/react/src/components/Messages/Modal.tsx +++ b/containers/react/src/components/Messages/Modal.tsx @@ -109,8 +109,6 @@ const Modal = ({handleClose}) => { animate="visible" exit="exit" > - {/*

    New Conversation

    */} - {selectTags.map((selectTag) => (

    Double Auth

    setCode(e.target.value)} /> @@ -179,4 +179,4 @@ function QrCode () { ) } -export default QrCode \ No newline at end of file +export default QrCode diff --git a/containers/react/src/styles/App.css b/containers/react/src/styles/App.css index d4d7c8c6..3053cc8d 100644 --- a/containers/react/src/styles/App.css +++ b/containers/react/src/styles/App.css @@ -5,7 +5,11 @@ background-color: black; height: 100%; } - +input.qr::-webkit-outer-spin-button, +input.qr::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} input.qr{ width: 20%; border-radius: 5px; From 4d98765009c2ce0ae62ec8d8001eb16bf0a3f59d Mon Sep 17 00:00:00 2001 From: Lara REALI Date: Fri, 23 Jun 2023 19:58:45 +0200 Subject: [PATCH 5/9] margin on leaderboard pic + auto input qr --- containers/react/src/styles/App.css | 2 +- containers/react/src/styles/Profile.css | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/containers/react/src/styles/App.css b/containers/react/src/styles/App.css index 3053cc8d..f724c01b 100644 --- a/containers/react/src/styles/App.css +++ b/containers/react/src/styles/App.css @@ -11,7 +11,7 @@ input.qr::-webkit-inner-spin-button { margin: 0; } input.qr{ - width: 20%; + width: auto; border-radius: 5px; background-color: rgb(0, 0, 0); margin : 1%; diff --git a/containers/react/src/styles/Profile.css b/containers/react/src/styles/Profile.css index 9749e86e..b60bade1 100644 --- a/containers/react/src/styles/Profile.css +++ b/containers/react/src/styles/Profile.css @@ -54,7 +54,7 @@ - + @@ -80,6 +80,7 @@ border-radius: 50%; border: thick; border-color: red; + margin-left: 10px; /* border-image: linear-gradient(90deg, #5843e4, #5a0760); */ /* margin-top: 20px; */ @@ -158,4 +159,4 @@ border: solid 0px #ccc; background-color: #000; border-radius: 3%; -} */ \ No newline at end of file +} */ From c07a16979423b85f2f4dd0fa6a90da54a644170a Mon Sep 17 00:00:00 2001 From: Alexandre POMMIER Date: Fri, 23 Jun 2023 19:59:23 +0200 Subject: [PATCH 6/9] fix mute ? fix socket fix infinite request profile, modify port --- conf/nginx.conf | 2 +- containers/api/src/app.controller.ts | 15 ++- containers/api/src/chat/chat.service.ts | 24 ++-- containers/react/src/components/Game/Rank.tsx | 4 +- .../react/src/components/Messages/Chats.tsx | 2 +- .../src/components/Messages/ModalSetting.tsx | 112 +++++++++++++----- .../react/src/components/Social/Friend.tsx | 5 +- containers/react/src/pages/Home.tsx | 49 ++------ containers/react/src/script/tokenSuccess.tsx | 10 +- docker-compose.yml | 10 -- 10 files changed, 132 insertions(+), 101 deletions(-) diff --git a/conf/nginx.conf b/conf/nginx.conf index d3040731..f6d88f01 100644 --- a/conf/nginx.conf +++ b/conf/nginx.conf @@ -21,7 +21,7 @@ server { proxy_pass http://api:3000/api; } - location /socket { + location /socket.io { # Forward requests to socket server running on port 4001 if ($request_uri ~ ^/socket/4001) { proxy_pass http://chat:4001; diff --git a/containers/api/src/app.controller.ts b/containers/api/src/app.controller.ts index 24d6d00e..22d7ff29 100644 --- a/containers/api/src/app.controller.ts +++ b/containers/api/src/app.controller.ts @@ -6,7 +6,7 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/17 01:00:00 by apommier #+# #+# */ -/* Updated: 2023/06/21 01:19:01 by apommier ### ########.fr */ +/* Updated: 2023/06/23 19:15:56 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ @@ -560,7 +560,7 @@ export class AppController { async verifyPassword(@Body() data: any) { return await this.chatService.verifyPassword(data.convId, data.password) } - + @UseGuards(JwtAuthGuard) @Post('/invite') async inviteUser(@Body() data: any) { @@ -588,7 +588,7 @@ export class AppController { async muteUser(@Body() data: any) { if (!data.username) return ; - return await this.chatService.muteUser(data.convId, data.username) + return await this.chatService.muteUser(data.convId, data.username, data.time) } @UseGuards(JwtAuthGuard) @@ -598,11 +598,16 @@ export class AppController { return await this.chatService.isAdmin(data.convId, req.user.username) } - @UseGuards(JwtAuthGuard) @Post('/private') async setPrivate(@Body() data: any) { - return await this.chatService.setPrivate(data.convId) + return await this.chatService.setPrivate(data.convId, true) + } + + @UseGuards(JwtAuthGuard) + @Post('/public') + async setPublic(@Body() data: any) { + return await this.chatService.setPrivate(data.convId, false) } @UseGuards(JwtAuthGuard) diff --git a/containers/api/src/chat/chat.service.ts b/containers/api/src/chat/chat.service.ts index b912ff83..05415e63 100644 --- a/containers/api/src/chat/chat.service.ts +++ b/containers/api/src/chat/chat.service.ts @@ -6,7 +6,7 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/17 01:00:25 by apommier #+# #+# */ -/* Updated: 2023/06/20 16:47:02 by apommier ### ########.fr */ +/* Updated: 2023/06/23 19:37:41 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ @@ -119,14 +119,22 @@ async verifyPassword(convId: number, password: string) { // conv.password = password } -async muteUser(convId: number, username: string) { +async muteUser(convId: number, username: string, time: string) { const conv = await this.findConv(convId); + console.log("MUTE USER"); + conv.muted = conv.muted || []; if (conv.muted.find(item => item === username)) return (1); conv.muted.push(username); this.save(conv); + + setTimeout(() => { + conv.muted = conv.muted.filter((item) => item !== username) + this.save(conv); + }, 5000); + console.log("END MUTE USER"); } async setAdmin(convId: number, username: string) { @@ -149,12 +157,14 @@ async isAdmin(convId: number, username: string) { return (0); } -async setPrivate(convId: number) { +async setPrivate(convId: number, bool: boolean) { const conv = await this.findConv(convId); - if (conv.private === true) - conv.private = false; - else - conv.private = true; + console.log("bool= ", bool); + conv.private = bool; + // if (conv.private === true) + // conv.private = false; + // else + // conv.private = true; this.save(conv); } diff --git a/containers/react/src/components/Game/Rank.tsx b/containers/react/src/components/Game/Rank.tsx index 4523c988..e6f94b81 100644 --- a/containers/react/src/components/Game/Rank.tsx +++ b/containers/react/src/components/Game/Rank.tsx @@ -6,7 +6,7 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/09 08:49:24 by apommier #+# #+# */ -/* Updated: 2023/06/20 13:06:35 by apommier ### ########.fr */ +/* Updated: 2023/06/23 17:16:40 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ @@ -41,7 +41,7 @@ function Rank({user, index}: RankProps){ }; fetchProfilePicture(); - }) + }, []) // console.log(index); return ( diff --git a/containers/react/src/components/Messages/Chats.tsx b/containers/react/src/components/Messages/Chats.tsx index 5133dc6f..ce8ac4cb 100644 --- a/containers/react/src/components/Messages/Chats.tsx +++ b/containers/react/src/components/Messages/Chats.tsx @@ -119,7 +119,7 @@ function Chats(){ setUsers(tmpUsers.data); // console.log(`connection....`); - socket.current = io('http://' + process.env.REACT_APP_BASE_URL + ':4001', { transports: ['polling'] }); + socket.current = io('http://localhost:4001', { transports: ['polling'] }); // console.log(`connection done`); socket.current.emit('connection', {username: tmpUser.data.username}) socket.current.on('message', (data) => { //data should be a message ?) diff --git a/containers/react/src/components/Messages/ModalSetting.tsx b/containers/react/src/components/Messages/ModalSetting.tsx index 8226ed32..ec8a2500 100644 --- a/containers/react/src/components/Messages/ModalSetting.tsx +++ b/containers/react/src/components/Messages/ModalSetting.tsx @@ -39,8 +39,10 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => { const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]); const [selectedUser, setSelectedUser] = useState(""); const [newName, setNewName] = useState(""); + const [time, setTime] = useState(""); const [newPassword, setNewPassword] = useState(""); - const [privateConv, setPrivateConv] = useState(false); + const [privateConv, setPrivateConv] = useState(); + const [loading, setLoading] = useState(true); const dark = () => setPrivateConv(true); const light = () => setPrivateConv(false); const [mute, setMute] = useState(false); @@ -53,9 +55,15 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => { console.log("convid =", convId) const getUsers = async ()=>{ try { + const currentConv = await api.post("/convId", {convId: convId}); + + // console.log("conv private =================== ", ) + if (currentConv.data.private) + setPrivateConv(true); const tmpUsers = await api.get("/users"); console.log("users=", tmpUsers.data); setUsers(tmpUsers.data); + setLoading(false); } catch(err){ console.log(err) } @@ -63,6 +71,31 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => { getUsers(); }, []); + useEffect(() => { + // Function to run when myVariable changes + const handleVariableChange = () => { + console.log('Variable changed:', privateConv); + if (privateConv === undefined) + { + console.log("return") + return ; + } + try { + if (privateConv) + api.post("/private", {convId: convId}) + else + api.post("/public", {convId: convId}) + } catch (err){ + console.log(err); + } + }; + if (!loading) + handleVariableChange(); + // return () => { + // handleVariableChange(); + // }; + }, [privateConv]); + // const [multi, setMulti] = useState(false); // const [selectedOptionArray, setSelectedOptionArray] = useState([]); @@ -80,30 +113,30 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => { const handleCheckPass = (e: { target: { checked: boolean | ((prevState: boolean) => boolean); }; }) => { setPassword(e.target.checked); - console.log("password??", e.target.checked) + console.log("password??", e.target.checked); } - const handleCheckPriv = (e: { target: { checked: any; }; }) => { - // setPassword(e.target.checked); - if (e.target.checked) - { - console.log("chack true", e.target.checked) - try{ - api.post("/private", {convId: convId}) - } catch(err) { - console.log(err); - } - } - else - { - console.log("chack false", e.target.checked) - try{ - api.post("/private", {convId: convId}) - } catch(err) { - console.log(err); - } - } - } + // const handleCheckPriv = (e: { target: { checked: any; }; }) => { + // // setPassword(e.target.checked); + // if (e.target.checked) + // { + // console.log("chack true", e.target.checked) + // try{ + // api.post("/private", {convId: convId}) + // } catch(err) { + // console.log(err); + // } + // } + // else + // { + // console.log("chack false", e.target.checked) + // try{ + // api.post("/private", {convId: convId}) + // } catch(err) { + // console.log(err); + // } + // } + // } const handleName = async (e: { key: string; })=>{ if (e.key !== "Enter") @@ -157,11 +190,15 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => { handleClose(); }; - const handleMute = async () => { - if (!selectedUser.length) + const handleMute = async (e: { key: string; }) => { + console.log(`e in press= ${e.key}`) + if (e.key != "Enter") return ; + + // console.log("value mute = ", e.target.value); + console.log("value mute = ", time); try{ - await api.post("/mute", {convId: convId, username: selectedUser}) + await api.post("/mute", {convId: convId, username: selectedUser, time: time}) } catch(err) { console.log(err); } @@ -177,6 +214,17 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => { handleClose(); }; + const handleKeyPress = async (e: { key: string; })=> { + if (e.key !== "Enter") + return ; + try{ + + } + catch(err){ + + } + } + return ( {

    Password

    - {password || privateConv ? ( + {password ? ( setNewPassword(e.target.value)} onKeyDown={handlePassword} @@ -208,7 +256,6 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => { ): ("")} -
    {
    {mute ? ( - + setTime(e.target.value)} + /> ):("")} diff --git a/containers/react/src/components/Social/Friend.tsx b/containers/react/src/components/Social/Friend.tsx index 907c35c5..fe0436c5 100644 --- a/containers/react/src/components/Social/Friend.tsx +++ b/containers/react/src/components/Social/Friend.tsx @@ -6,7 +6,7 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/09 08:18:58 by apommier #+# #+# */ -/* Updated: 2023/06/20 13:41:44 by apommier ### ########.fr */ +/* Updated: 2023/06/23 17:12:07 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ @@ -59,9 +59,8 @@ export default function Friend({currentUser}: UserProps) console.error('Error fetching profile picture:', error); } }; - fetchProfilePicture(); - }) + }, []); function getStatus(friend: User) { diff --git a/containers/react/src/pages/Home.tsx b/containers/react/src/pages/Home.tsx index f7fafd4a..aade53a9 100644 --- a/containers/react/src/pages/Home.tsx +++ b/containers/react/src/pages/Home.tsx @@ -6,7 +6,7 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/09 08:19:04 by apommier #+# #+# */ -/* Updated: 2023/06/23 15:58:14 by apommier ### ########.fr */ +/* Updated: 2023/06/23 17:33:51 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ @@ -82,43 +82,13 @@ function Profile () { // } }; - // const handleUpload = async () => { - // const formData = new FormData(); - // formData.append('photo', selectedPhoto); - // try { - // await api.post('/picture', formData); - // console.log('File uploaded successfully'); - // window.location.reload(); - // } catch (error) { - // console.error('Error uploading file:', error); - // } - // }; - - // const handleUpload = async (event: React.FormEvent) => { - // event.preventDefault() - // console.log("up photo") - // if (selectedPhoto) { - // console.log("selected photo") - // const formData = new FormData(); - // formData.append('photo', selectedPhoto); - // try { - // await api.post('/picture', formData); - // console.log('File uploaded successfully'); - // window.location.reload(); - // } catch (error) { - // console.error('Error uploading file:', error); - // } - // } else { - // console.log('No file selected'); - // } - // }; - useEffect(()=> { const getUser = async ()=>{ console.log(`username= ${username}`) // const pic - let pic + let pic; try{ + console.log("before request") const me = await api.get("/profile") if (!username) { @@ -202,7 +172,7 @@ function Profile () { function Home () { const [move, setmove ] = useState(false); - const [user, setUser] = useState([]); + const [user, setUser] = useState(); const [successQr, setSuccessQr] = useState(false); const [successSword, setSuccessSword] = useState(false); @@ -224,7 +194,7 @@ function Home () { } }; fetchSuccess(); - }) + }, []); return (
    - {user.otp_verified ? ( + {user && user.otp_verified ? ( setSuccessQr(true)}/> ):("")} - {user.win >= 2 ? ( + {user && user.win >= 2 ? ( setSuccessSword(true)}/> - ):("")} - - {user.win >= 5 ? ( + ):("")} + {user && user.win >= 5 ? ( setSuccessCrown(true)}/> ):("")}
    diff --git a/containers/react/src/script/tokenSuccess.tsx b/containers/react/src/script/tokenSuccess.tsx index fac964e4..8c3a5f09 100644 --- a/containers/react/src/script/tokenSuccess.tsx +++ b/containers/react/src/script/tokenSuccess.tsx @@ -3,12 +3,15 @@ import { useState, useEffect } from 'react' import queryString from 'query-string'; import api from "./axiosApi.tsx"; import axios from 'axios'; +import React from 'react'; + +import {Matchlog, User} from "../../interfaces.tsx" function SuccessToken() { const location = useLocation(); const { data } = queryString.parse(location.search); const [code, setCode] = useState(''); - const [user, setUser] = useState(false); + const [user, setUser] = useState(); useEffect(() => { if (!data) { @@ -37,7 +40,7 @@ function SuccessToken() { getUser(); }, [data]); - const handleKeyPress = async (e)=>{ + const handleKeyPress = async (e: { key: string; })=>{ // console.log(`e in press= ${e.key}`) if (e.key !== "Enter") return ; @@ -90,7 +93,8 @@ function SuccessToken() { // Render a loading indicator or return null while user is being fetched return

    Loading...

    ; } - + if (!data) + return ; const cleanData = data.slice(1, -1); // Declare cleanData here as well if (!user.otp_verified) { diff --git a/docker-compose.yml b/docker-compose.yml index 46fa1855..d15b89f4 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -14,19 +14,9 @@ services: - 8080:8080 volumes: - ./conf/nginx.conf:/etc/nginx/conf.d/default.conf - # volumes: - # - "./conf:/etc/nginx/templates/" - # ports: - # - 80:80 - # volumes: - # - ./conf/nginx.conf:/etc/nginx/conf.d/default.conf - # command: sh -c "envsubst < /etc/nginx/conf.d/default.conf > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'" - # - ./containers/frontend:/var/www/html networks: - pongNetwork - - react_app: image: node:latest container_name: react_app From d5e3532bd05d1a1ec1bacaee6634b09760eb84d9 Mon Sep 17 00:00:00 2001 From: Alexandre POMMIER Date: Fri, 23 Jun 2023 20:30:14 +0200 Subject: [PATCH 7/9] merge all all --- .../react/src/components/Messages/Message.tsx | 32 +++--------- .../react/src/components/Messages/Modal.tsx | 49 ++++++++++--------- containers/react/src/styles/Messages.css | 33 ++++++++++--- containers/react/src/styles/Profile.css | 10 ++-- containers/react/src/styles/field.css | 12 ++--- 5 files changed, 69 insertions(+), 67 deletions(-) diff --git a/containers/react/src/components/Messages/Message.tsx b/containers/react/src/components/Messages/Message.tsx index b2205701..230845eb 100644 --- a/containers/react/src/components/Messages/Message.tsx +++ b/containers/react/src/components/Messages/Message.tsx @@ -6,15 +6,14 @@ /* By: apommier +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2023/06/01 18:24:46 by apommier #+# #+# */ -/* Updated: 2023/06/20 19:05:10 by apommier ### ########.fr */ +/* Updated: 2023/06/23 20:25:32 by apommier ### ########.fr */ /* */ /* ************************************************************************** */ -import React, { HtmlHTMLAttributes } from "react"; import { useEffect, useState, useRef } from "react"; -import api from '../../script/axiosApi'; +import api from '../../script/axiosApi.tsx'; 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' @@ -28,7 +27,6 @@ const MeStyleP = styled.p` color: white; margin-right: 20px; ` -<<<<<<< HEAD interface MessageMeProps { message: Message; @@ -44,20 +42,13 @@ function MessageMe({message, own}: MessageMeProps){ const [user, setUser] = useState(); const scrollRef = useRef(null); - // console.log("Message eher") -======= -function MessageMe({message, own}){ - - const [profilePicture, setProfilePicture] = useState(''); - const scrollRef = useRef(null); - const DefaultPicture: string = '../../assets/profile.jpg' ->>>>>>> sadjigui useEffect(() => { if (scrollRef.current) { - scrollRef.current.scrollIntoView({ behavior: "smooth",}) - } + scrollRef.current.scrollIntoView({ behavior: "smooth"}); + }}) + useEffect(() => { const fetchProfilePicture = async () => { try { // const user = await api.get("/profile"); @@ -91,20 +82,13 @@ function MessageMe({message, own}){ }; if (!user || !sender || !conv) - { - // console.log("return") return (<>); - } // console.log("result includes=", conv.banned.includes(user.username)) // console.log("result includes=", conv.blocked.includes(user.username)) if (user.blocked && user.blocked.includes(message.sender)) return (<>); - // else if (conv.banned && conv.banned.includes(user.username)) - // { - // console.log("return2") - // return (<>); - // } - // console.log("noy return") + else if (conv.banned && conv.banned.includes(user.username)) + return (<>); // if (user.blocked.includes(message.sender))/ return ( diff --git a/containers/react/src/components/Messages/Modal.tsx b/containers/react/src/components/Messages/Modal.tsx index 5d8a8ca1..0f76ba43 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"; +import Backdrop from "../Sidebar/Backdrop.tsx"; // 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"; +import api from "../../script/axiosApi.tsx"; import React from "react"; const dropIn = { @@ -21,7 +21,6 @@ const dropIn = { }}, exit:{y: "100vh", opacity: 0,}, - }; const Modal = ({handleClose}) => { @@ -100,30 +99,29 @@ const Modal = ({handleClose}) => { // let new_name; return ( -<<<<<<< HEAD - -======= - ->>>>>>> sadjigui + e.stopPropagation()} - className="modal" - // variant={dropIn} + className="modalSetting" + variant={dropIn} initial="hidden" animate="visible" exit="exit" > + {/*

    New Conversation

    */} +
    + {selectTags.map((selectTag) => ( -
    +
    setChannel(event.target.value)} - + )} {channel.private ? ( - - ):("")} + + ):("")}
    @@ -168,6 +168,7 @@ const Modal = ({handleClose}) => { +
    ) diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css index 81d05423..6a7a30a1 100644 --- a/containers/react/src/styles/Messages.css +++ b/containers/react/src/styles/Messages.css @@ -1,6 +1,6 @@ .home{ background-color: rgb(0, 0, 0); - height: 90vh; + height: 70vh; display: flex; align-items: center; justify-content: center; @@ -202,6 +202,7 @@ p { text-decoration: none; font-weight:lighter; margin: 1%; + height: 25px; } .darkSubmit{ @@ -307,11 +308,17 @@ p { /* flex-direction: column; */ /* align-items: center; */ background-color: #3e3c61; + overflow: scroll; } .settingFirstPart{ margin-top: 10%; - margin-left: 15%; + margin-left: 20%; +} + +.settingFirstPart2{ + margin-top: 10%; + margin-left: 30%; } .settingSecondPart{ @@ -324,6 +331,7 @@ p { .checkbox{ display:flex; flex-direction:row; + margin-left: 60px; } input.in{ @@ -331,17 +339,25 @@ input.in{ margin-left: 0px; background-color: black; color: white; - border-radius: 12px; + border-radius: 4px; width: 70%; + height: 100%; + font-weight:100; + font-size: 20px; + padding: 7px; } input.in_howLong{ - margin-top: 14.5%; + margin-top: 13%; margin-left: 0px; background-color: black; color: white; - border-radius: 12px; - width: 15%; + border-radius: 4px; + width: 10%; + height: 10%; + font-weight:100; + font-size: 20px; + padding: 7px; } .mdp{ @@ -351,3 +367,8 @@ input.in_howLong{ width: 20%; } +.case{ + height: auto; + width: auto; + margin-left: 10px; +} diff --git a/containers/react/src/styles/Profile.css b/containers/react/src/styles/Profile.css index b60bade1..e1b76a49 100644 --- a/containers/react/src/styles/Profile.css +++ b/containers/react/src/styles/Profile.css @@ -54,7 +54,7 @@ - + @@ -62,6 +62,7 @@ .page { text-align: center; overflow-y: scroll; + /* height: 80vh; */ /* height: 50vh; */ /* width: 50vh; */ /* background-color: black; */ @@ -80,7 +81,6 @@ border-radius: 50%; border: thick; border-color: red; - margin-left: 10px; /* border-image: linear-gradient(90deg, #5843e4, #5a0760); */ /* margin-top: 20px; */ @@ -97,11 +97,11 @@ } .history{ - display: inline-block; + display:inline-block; color: white; background-color: #5843e4; border-radius: 20px; - padding: 14px; + padding: 20px 500px; font-size: 1.7rem; text-decoration: none; font-weight: bold; @@ -159,4 +159,4 @@ border: solid 0px #ccc; background-color: #000; border-radius: 3%; -} */ +} */ \ No newline at end of file diff --git a/containers/react/src/styles/field.css b/containers/react/src/styles/field.css index 07beeba9..1af64da6 100644 --- a/containers/react/src/styles/field.css +++ b/containers/react/src/styles/field.css @@ -1,18 +1,14 @@ .playButton { background-image: linear-gradient(90deg, #5843e4, #5a0760); - display: flex; - flex-wrap: wrap; - overflow: hidden; border-radius: 5vh; color: white; - /* display: block; */ + display: block; margin: auto; margin-top: 30vh; - padding: 2vh 4vw; + padding: 2vh 5vw; height: 10vh; width: 20vw; - font-size: 250%; - text-align: center; + font-size: 300%; } @@ -94,4 +90,4 @@ height: 100%; width: 100%; } */ - /* } */ + /* } */ \ No newline at end of file From bdeb414c09d80a2dbff7cfa95064c8d42e469165 Mon Sep 17 00:00:00 2001 From: Lara REALI Date: Sat, 24 Jun 2023 00:51:36 +0200 Subject: [PATCH 8/9] border message + responsive on profile --- containers/react/src/styles/Game.css | 2 +- containers/react/src/styles/Messages.css | 7 +++++-- containers/react/src/styles/Profile.css | 4 ++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/containers/react/src/styles/Game.css b/containers/react/src/styles/Game.css index 28cc1795..38a0055a 100644 --- a/containers/react/src/styles/Game.css +++ b/containers/react/src/styles/Game.css @@ -18,7 +18,7 @@ /* background-color: #5843e4; */ /* border-color: white; */ overflow: scroll; - height: 70vh; + height: 68vh; } .profilePic{ diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css index 6a7a30a1..eebd6722 100644 --- a/containers/react/src/styles/Messages.css +++ b/containers/react/src/styles/Messages.css @@ -19,7 +19,8 @@ select{ border: 0!important; margin: 5px; font-size: 18px; - border-radius: 6px; + padding: 5px; + border-radius: 1000px; } .modal{ @@ -54,6 +55,7 @@ select{ height: 74vh; width: 30%; overflow: scroll; + border-radius: 0px 0px 0px 10px; /* width: 2rem; */ /* height: 4rem; */ } @@ -131,10 +133,11 @@ select{ } .messages{ - background-color: rgb(26, 26, 26); + /* background-color: rgb(26, 26, 26); */ /* height: calc(100% - 118px); */ width: 70%; /* height: 300px; */ + border-radius: 0px 0px 10px 0px; overflow: scroll; } diff --git a/containers/react/src/styles/Profile.css b/containers/react/src/styles/Profile.css index e1b76a49..b26c6f4b 100644 --- a/containers/react/src/styles/Profile.css +++ b/containers/react/src/styles/Profile.css @@ -81,9 +81,9 @@ border-radius: 50%; border: thick; border-color: red; + margin-left: 20px; /* border-image: linear-gradient(90deg, #5843e4, #5a0760); */ - /* margin-top: 20px; */ } .home{ @@ -101,7 +101,7 @@ color: white; background-color: #5843e4; border-radius: 20px; - padding: 20px 500px; + padding: 1.3% 30%; font-size: 1.7rem; text-decoration: none; font-weight: bold; From 6fd9660bff2138aac4d0cc996dd59ec2dab10046 Mon Sep 17 00:00:00 2001 From: Lara REALI Date: Sat, 24 Jun 2023 01:04:47 +0200 Subject: [PATCH 9/9] message sans decalage --- containers/react/src/styles/Messages.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css index eebd6722..7894a564 100644 --- a/containers/react/src/styles/Messages.css +++ b/containers/react/src/styles/Messages.css @@ -143,7 +143,7 @@ select{ .input{ display: flex; - height: 50px; + height: 6vh; background-color: white; color:#060b26; border: none;