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