From 263e3332a1a38c45da89ec75d49b025e7eacbe52 Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Sun, 18 Jun 2023 21:22:25 +0200 Subject: [PATCH 1/2] 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/2] 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;