from jsx to tsx

containers/react/package-lock.json

@@ -6141,7 +6141,6 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -7512,8 +7511,7 @@
         "esprima": "^4.0.1",
         "estraverse": "^5.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
+        "optionator": "^0.8.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -8843,7 +8841,6 @@
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.8.tgz",
       "integrity": "sha512-ylobYq3tGFjjAmRdBs5pL/R1+4AmOm69g/JbF5DcNETfRe8L9CjaX4acG83MjYdIsbsTGJmtR5qKx4glNmXO4A==",
       "dependencies": {
-        "@emotion/is-prop-valid": "^0.8.2",
         "tslib": "^2.4.0"
       },
       "optionalDependencies": {
@@ -10719,7 +10716,6 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
-        "fsevents": "^2.3.2",
         "graceful-fs": "^4.2.9",
         "jest-regex-util": "^27.5.1",
         "jest-serializer": "^27.5.1",
@@ -12276,7 +12272,6 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dependencies": {
-        "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
       },
       "optionalDependencies": {
@@ -13776,7 +13771,6 @@
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
-        "@colors/colors": "1.5.0",
         "string-width": "^4.2.0"
       },
       "engines": {
@@ -14313,8 +14307,7 @@
       "inBundle": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
-        "@isaacs/cliui": "^8.0.2",
-        "@pkgjs/parseargs": "^0.11.0"
+        "@isaacs/cliui": "^8.0.2"
       },
       "engines": {
         "node": ">=14"
@@ -14600,7 +14593,6 @@
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
-        "encoding": "^0.1.13",
         "minipass": "^5.0.0",
         "minipass-sized": "^1.0.3",
         "minizlib": "^2.1.2"
@@ -14980,7 +14972,6 @@
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
-        "encoding": "^0.1.13",
         "minipass": "^3.1.6",
         "minipass-sized": "^1.0.3",
         "minizlib": "^2.1.2"
@@ -18329,7 +18320,6 @@
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "^6.2.0",
         "fs-extra": "^10.0.0",
-        "fsevents": "^2.3.2",
         "html-webpack-plugin": "^5.5.0",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^27.4.3",
@@ -18766,9 +18756,6 @@
       "version": "2.79.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
       "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
-      "dependencies": {
-        "fsevents": "~2.3.2"
-      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },

containers/react/src/components/Alert/GreenAlert.jsx

@@ -1,4 +1,4 @@
-import Backdrop from "../Sidebar/Backdrop"
+import Backdrop from "../Sidebar/Backdrop.tsx"
 import { motion } from 'framer-motion'
 import { AiOutlineCheckCircle } from "react-icons/ai";
 import '../../styles/Messages.css'

containers/react/src/components/Alert/RedAlert.jsx

@@ -1,4 +1,4 @@
-import Backdrop from "../Sidebar/Backdrop"
+import Backdrop from "../Sidebar/Backdrop.tsx"
 import { motion } from 'framer-motion'
 import { BiErrorCircle } from "react-icons/bi";
 import '../../styles/Messages.css'

containers/react/src/components/Alert/YellowAlert.jsx

@@ -1,4 +1,4 @@
-import Backdrop from "../Sidebar/Backdrop"
+import Backdrop from "../Sidebar/Backdrop.tsx"
 import { motion } from 'framer-motion'
 import { GrTrophy } from "react-icons/gr";
 import '../../styles/Messages.css'

containers/react/src/components/App.tsx

@@ -2,23 +2,23 @@ import React from "react";
 import {Routes, Route} from 'react-router-dom';
 import HomeLogin from "../pages/Home.js";
 
-import Home from "../pages/Home.jsx";
+import Home from "../pages/Home.tsx";
 
 import PlayButton from "./Game/PlayButton.js";
-import Field from "../pages/Field";
-import Login42 from "../pages/Login42.js";
-import Messages from "../pages/Messages.jsx";
+import Field from "../pages/Field.js";
+import Login42 from "../pages/Login42.tsx";
+import Messages from "../pages/Messages.tsx";
 import QrCode from '../pages/QrCode.jsx'
 import { useLocation } from "react-router-dom";
 import {AnimatePresence} from "framer-motion";
 
-import SuccessToken from '../script/tokenSuccess'
+import SuccessToken from '../script/tokenSuccess.js'
 
 
 import DoubleAuth from "../pages/2fa.js";
-import Game from "../pages/Game.jsx";
-import Social from "../components/Social/Social.jsx";
-import Logout from "../components/Profile/Logout.jsx";
+import Game from "../pages/Game.tsx";
+import Social from "./Social/Social.tsx";
+import Logout from "./Profile/Logout.tsx";
 
 function AnimatedRoute () {
 	const location = useLocation();

containers/react/src/components/Header.tsx

@@ -5,7 +5,7 @@ import {Link} from 'react-router-dom';
 // import { SidebarData } from './Sidebar/SidebarData';
 import DefaultPicture from '../assets/profile.jpg'
 import { motion, AnimatePresence } from 'framer-motion'
-import Modal from './Sidebar/Modal';
+import Modal from './Sidebar/Modal.tsx';
 // import {BiLogOutCircle} from 'react-icons/bi';
 // import AnimatePresence from 
 import '../styles/Header.css';

containers/react/src/components/Messages/Chats.tsx

@@ -5,9 +5,9 @@ import styled from "styled-components";
 import DefaultPic from '../../assets/profile.jpg'
 import api from '../../script/axiosApi';
 import { motion , AnimatePresence} from "framer-motion";
-import Modal from "./Modal";
+import Modal from "./Modal.tsx";
 
-import Message from "./Message"
+import Message from "./Message.tsx"
 // import Input from "./Input";
 
 //react icons
@@ -21,7 +21,7 @@ import { Rank } from "../../DataBase/DataRank";
 import GreenAlert from "../Alert/GreenAlert";
 import RedAlert from "../Alert/RedAlert";
 import YellowAlert from "../Alert/YellowAlert";
-import ModalSetting from "./ModalSetting";
+import ModalSetting from "./ModalSetting.tsx";
 
 
 const TouchDiv = styled.div`

containers/react/src/components/Messages/Message.tsx

@@ -32,7 +32,10 @@ function MessageMe({message, own}){
 	const scrollRef = useRef();
 
 	useEffect(() => {
-		scrollRef.current?.scrollIntoView({ behavior: "smooth"})
+		if (scrollRef.current)
+		{
+			scrollRef.current.scrollIntoView({ behavior: "smooth",})
+		}
 		const fetchProfilePicture = async () => {
 			try {
 			//   const user = await api.get("/profile");

containers/react/src/components/Messages/Modal.tsx

@@ -1,5 +1,5 @@
 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 } from "react";

containers/react/src/components/Messages/ModalSetting.tsx

@@ -1,5 +1,5 @@
 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 } from "react";

containers/react/src/components/Sidebar/Modal.tsx

@@ -1,6 +1,6 @@
 import {motion} from "framer-motion"
-import Backdrop from "./Backdrop"
-import { SidebarData } from "./SidebarData"
+import Backdrop from "./Backdrop.tsx"
+import { SidebarData } from "./SidebarData.tsx"
 import {Link} from 'react-router-dom';
 import * as AiIcons from 'react-icons/ai';
 

containers/react/src/components/Sidebar/SidebarData.tsx

@@ -10,7 +10,7 @@ export const SidebarData = [
 	{
 		title: 'Home/Login',
 		path: '/',
-		icon: <AiIcons.AiFillHome />,
+		icon: <AiIcons.AiFillHome/>,
 		cName: 'nav-text'
 	},
 	{

containers/react/src/components/Social/Social.tsx

@@ -4,8 +4,8 @@ import React, { useState, useEffect, useRef } from "react";
 import styled from "styled-components";
 
 
-import Friend  from './Friend.jsx';
-import FriendRequest  from './FriendRequest.jsx';
+import Friend  from './Friend.tsx';
+import FriendRequest  from './FriendRequest.tsx';
 
 import { ImBlocked } from 'react-icons/im';
 import { MdOutlineGroupAdd } from 'react-icons/md';

containers/react/src/index.js

@@ -3,9 +3,9 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
 import reportWebVitals from './reportWebVitals';
-import Header from './components/Header';
+import Header from './components/Header.tsx';
 import Head from './pages/Head';
-import App from './components/App';
+import App from './components/App.tsx';
 
 import './styles/index.css';
 import './styles/App.css'

containers/react/src/pages/Home.tsx

@@ -14,12 +14,12 @@
 import '../styles/Profile.css'
 // import '../styles/App.css'
 import DefaultPicture from "../assets/profile.jpg";
-import WinLoss from "../components/Profile/Win_Loss";
+import WinLoss from "../components/Profile/Win_Loss.tsx";
 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";
+import ModalEdit from "../components/Profile/EditName.tsx";
 import {AiOutlineHistory} from 'react-icons/ai'
 // import { Link } from "react-router-dom";
 // import {UserProfile} from "../DataBase/DataUserProfile";

containers/react/src/pages/Messages.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // import Sidebar from '../components/Messages/Sidebar'
-import Chats from "../components/Messages/Chats"
+import Chats from "../components/Messages/Chats.tsx"
 import '../styles/Messages.css'
 import { motion } from 'framer-motion'