Kinou/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

js to ts

Browse Source
This commit is contained in:
Little Dipper 2023-06-18 21:22:25 +02:00
parent e97cacebd5
commit 263e3332a1
14 changed files with 57 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
containers/react/package-lock.json generated
View File

@ -23,7 +23,7 @@
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"socket.io-client": "^4.6.1", "socket.io-client": "^4.6.1",
"styled-components": "^5.3.10", "styled-components": "^5.3.10",
"typescript": "^3.2.1", "typescript": "^3.9.10",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
} }
}, },
@ -20221,9 +20221,9 @@
} }
}, },
"node_modules/typescript": { "node_modules/typescript": {
"version": "3.2.1", "version": "3.9.10",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.1.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
"integrity": "sha512-jw7P2z/h6aPT4AENXDGjcfHTu5CSqzsbZc6YlUIebTyBAq8XaKp78x7VcSh30xwSCcsu5irZkYZUSFP1MrAMbg==", "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==",
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
"tsserver": "bin/tsserver" "tsserver": "bin/tsserver"
@ -35362,9 +35362,9 @@
} }
}, },
"typescript": { "typescript": {
"version": "3.2.1", "version": "3.9.10",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.1.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
"integrity": "sha512-jw7P2z/h6aPT4AENXDGjcfHTu5CSqzsbZc6YlUIebTyBAq8XaKp78x7VcSh30xwSCcsu5irZkYZUSFP1MrAMbg==" "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q=="
}, },
"unbox-primitive": { "unbox-primitive": {
"version": "1.0.2", "version": "1.0.2",

2
containers/react/package.json
View File

@ -18,7 +18,7 @@
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"socket.io-client": "^4.6.1", "socket.io-client": "^4.6.1",
"styled-components": "^5.3.10", "styled-components": "^5.3.10",
"typescript": "^3.2.1", "typescript": "^3.9.10",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {

4
containers/react/src/components/Messages/Chats.tsx
View File

@ -3,11 +3,11 @@ import io from 'socket.io-client';
import '../../styles/Messages.css' import '../../styles/Messages.css'
import styled from "styled-components"; import styled from "styled-components";
import DefaultPic from '../../assets/profile.jpg' 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 { motion , AnimatePresence} from "framer-motion";
import Modal from "./Modal.tsx"; import Modal from "./Modal.tsx";
import Message from "./Message.tsx" import Message from './Message.tsx';
// import Input from "./Input"; // import Input from "./Input";
//react icons //react icons

5
containers/react/src/pages/Field.tsx
View File

@ -1,6 +1,7 @@
import { useEffect, useLocation } from 'react'; import React from 'react';
import { useEffect } from 'react';
// import { useState, useRef } from 'react'; // import { useState, useRef } from 'react';
import DrawCanvas from './canvas.tsx'; import DrawCanvas from './canvas';
import queryString from 'query-string'; import queryString from 'query-string';
import '../styles/field.css'; import '../styles/field.css';

4
containers/react/src/pages/Game.tsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import PlayButton from "../components/Game/PlayButton.tsx"; import PlayButton from "../components/Game/PlayButton";
import Ranking from "../components/Game/Ranking.tsx"; import Ranking from "../components/Game/Ranking";
import '../styles/Game.css' import '../styles/Game.css'
function Game(){ function Game(){

2
containers/react/src/pages/Head.tsx
View File

@ -1,3 +1,5 @@
import React from "react";
function Head() function Head()
{ {
return ( return (

15
containers/react/src/pages/Home.tsx
View File

@ -13,18 +13,18 @@
// import { React, useState } from "react"; // import { React, useState } from "react";
import '../styles/Profile.css' import '../styles/Profile.css'
// import '../styles/App.css' // import '../styles/App.css'
import DefaultPicture from "../assets/profile.jpg"; // import DefaultPicture from "../assets/profile.jpg";
import WinLoss from "../components/Profile/Win_Loss.tsx"; import WinLoss from "../components/Profile/Win_Loss";
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
// import { AiFillEdit } from 'react-icons/ai' // import { AiFillEdit } from 'react-icons/ai'
// import { GrClose } from 'react-icons/gr' // import { GrClose } from 'react-icons/gr'
import { Link } from "react-router-dom"; 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 {AiOutlineHistory} from 'react-icons/ai'
// import { Link } from "react-router-dom"; // import { Link } from "react-router-dom";
// import {UserProfile} from "../DataBase/DataUserProfile"; // import {UserProfile} from "../DataBase/DataUserProfile";
// import axios from "axios"; // import axios from "axios";
import api from '../script/axiosApi.tsx'; import api from '../script/axiosApi';
import { CgEditMarkup } from 'react-icons/cg' import { CgEditMarkup } from 'react-icons/cg'
import { IoCloseCircleOutline } from "react-icons/io5"; import { IoCloseCircleOutline } from "react-icons/io5";
@ -43,6 +43,7 @@ import { useParams } from 'react-router-dom';
function Profile () { function Profile () {
const DefaultPicture: string = "../assets/profile.jpg";
const [user, setUser] = useState(null); const [user, setUser] = useState(null);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
@ -67,8 +68,10 @@ function Profile () {
}; };
const handleUpload = async () => { const handleUpload = async () => {
const formData = new FormData(); const formData: FormData = new FormData();
if (selectedPhoto){
formData.append('photo', selectedPhoto); formData.append('photo', selectedPhoto);
}
try { try {
await api.post('/picture', formData); await api.post('/picture', formData);
console.log('File uploaded successfully'); console.log('File uploaded successfully');
@ -125,7 +128,9 @@ function Profile () {
{isLoading ? ( {isLoading ? (
<h1>Loading...</h1> <h1>Loading...</h1>
) : ( ) : (
user ? (
<h1>{user.nickname}</h1> <h1>{user.nickname}</h1>
) : ("")
)} )}
</span> </span>

1
containers/react/src/pages/Login42.tsx
View File

@ -1,6 +1,7 @@
// import GoogleLogin from 'react-google-login'; // import GoogleLogin from 'react-google-login';
import { useEffect } from 'react'; import { useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import React from 'react';
// import setupLogin from '../script/login42'; // import setupLogin from '../script/login42';
// import React, { useEffect } from 'react'; // import React, { useEffect } from 'react';

25
containers/react/src/pages/Messages.tsx
View File

@ -1,31 +1,14 @@
import React from "react"; import React from "react";
// import Sidebar from '../components/Messages/Sidebar' // import Sidebar from '../components/Messages/Sidebar'
import Chats from "../components/Messages/Chats.tsx" import Chats from "../components/Messages/Chats"
import '../styles/Messages.css' import '../styles/Messages.css'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
// import {io} from 'socket.io-client' // import {io} from 'socket.io-client'
function Messages(params) { function Messages() {
// 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])
return ( return (
<> <div>
<motion.div className="home" <motion.div className="home"
initial={{opacity: 0}} initial={{opacity: 0}}
animate={{opacity: 1}} animate={{opacity: 1}}
@ -35,7 +18,7 @@ function Messages(params) {
<Chats/> <Chats/>
</div> </div>
</motion.div> </motion.div>
</> </div>
); );
} }

1
containers/react/src/pages/NewLogin.tsx
View File

@ -1,3 +1,4 @@
import React from 'react';
import '../styles/field.css'; import '../styles/field.css';
// import { useHistory } from 'react-router-dom'; // import { useHistory } from 'react-router-dom';
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";

8
containers/react/src/pages/QrCode.tsx
View File

@ -3,10 +3,11 @@ import React, { useEffect, useRef, useState } from "react";
// import { redirect } from "react-router-dom"; // import { redirect } from "react-router-dom";
import "../styles/App.css"; import "../styles/App.css";
import api from '../script/axiosApi.tsx'; import api from '../script/axiosApi';
import QRCodeStyling from "qr-code-styling"; import QRCodeStyling from "qr-code-styling";
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { MutableRefObject } from "react";
@ -29,7 +30,8 @@ const qrCode = new QRCodeStyling({
function QrCode () { function QrCode () {
// const url = "https://www.youtube.com"; // const url = "https://www.youtube.com";
const ref = useRef(null); // const ref = useRef(null);
const ref: MutableRefObject<HTMLElement | null> = {current: null};
const [user, setUser] = useState(false); const [user, setUser] = useState(false);
const [url, setUrl] = useState(false); const [url, setUrl] = useState(false);
const [secret, setSecret] = useState(false); const [secret, setSecret] = useState(false);
@ -39,7 +41,9 @@ function QrCode () {
// const history = useHistory(); // const history = useHistory();
useEffect(() => { useEffect(() => {
if (ref.current){
qrCode.append(ref.current); qrCode.append(ref.current);
}
const getUser = async ()=>{ const getUser = async ()=>{
try{ try{

2
containers/react/src/pages/canvas.tsx
View File

@ -1,6 +1,6 @@
// import io from 'socket.io-client'; // import io from 'socket.io-client';
import api from '../script/axiosApi.tsx'; import api from '../script/axiosApi';
// import { useEffect, useRef } from 'react'; // import { useEffect, useRef } from 'react';
import io from 'socket.io-client'; import io from 'socket.io-client';

6
containers/react/src/styles/Messages.css
View File

@ -50,7 +50,8 @@ select{
.contact{ .contact{
background-color: rgb(46, 46, 46); background-color: rgb(46, 46, 46);
align-items: left; align-items: left;
height: 30.2rem; height: 74vh;
width: 30%;
overflow: scroll; overflow: scroll;
/* width: 2rem; */ /* width: 2rem; */
/* height: 4rem; */ /* height: 4rem; */
@ -92,6 +93,8 @@ select{
} }
.navbar{ .navbar{
/* width: clamp(50%, 500px, 20%); */
/* height: min(50%, 100px); */
display: flex; display: flex;
align-items: center; align-items: center;
/* background-color: yellow; */ /* background-color: yellow; */
@ -130,6 +133,7 @@ select{
background-color: rgb(26, 26, 26); background-color: rgb(26, 26, 26);
/* height: calc(100% - 118px); */ /* height: calc(100% - 118px); */
width: 70%; width: 70%;
/* height: 300px; */
overflow: scroll; overflow: scroll;
} }

8
containers/react/tsconfig.build.json Normal file
View File

@ -0,0 +1,8 @@
{
"compiledOptions": {
"composite": true,
"allowJs": true,
"allowImportingTsExtensions": true,
"jsx": "react"
}
}