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