From 01cd176bec13c707dd7dc97a3c98bde6b224093f Mon Sep 17 00:00:00 2001 From: DmitriyB Date: Tue, 9 Aug 2022 14:37:21 +0500 Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20=D0=B8=20=D0=BD=D0=B0=D1=81=D1=82=D1=80=D0=BE=D0=B5?= =?UTF-8?q?=D0=BD=20=D1=80=D0=BE=D1=83=D1=82=D0=B5=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 58 +++++++++++++ package.json | 1 + src/App.tsx | 85 +++++++++++++------ src/components/ContextPort.tsx | 3 + .../connectWindow/connectWindow.tsx | 9 +- src/components/mainPart/mainPart.tsx | 14 +-- 6 files changed, 132 insertions(+), 38 deletions(-) create mode 100644 src/components/ContextPort.tsx diff --git a/package-lock.json b/package-lock.json index b0c9911..40092e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "react-calendar": "^3.7.0", "react-dom": "^18.2.0", "react-hook-form": "^7.33.1", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "react-transition-group": "^4.4.2", "typescript": "^4.7.4", @@ -8761,6 +8762,14 @@ "he": "bin/he" } }, + "node_modules/history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -14313,6 +14322,30 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.3.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -23307,6 +23340,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -27136,6 +27177,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index e91e520..81a59bb 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-calendar": "^3.7.0", "react-dom": "^18.2.0", "react-hook-form": "^7.33.1", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "react-transition-group": "^4.4.2", "typescript": "^4.7.4", diff --git a/src/App.tsx b/src/App.tsx index b119716..aa0032b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,8 @@ import { Ws } from './connections/ws'; import { ContextWs } from './ContextWs'; import { ConnectData } from './connections/connectData'; import { ConnectWindow } from './components/connectWindow/connectWindow'; +import { BrowserRouter, Route, Router, Routes, useNavigate } from 'react-router-dom'; +import { ContextPort } from './components/ContextPort'; type WsData = { message: string @@ -21,7 +23,9 @@ function App() { const [wsEvent, setWsEvent] = useState(null); const [showConnectPopup, setShowConnectPopup] = useState(false); const [currWs, setCurrWs] = useState(null); - const portAndId = useRef<{port: string, id:string}>() + const portAndId = useRef<{port: string, id:string}>(); + const [portId, setPortId] = useState<{port: string, id:string}>({id: '', port: ''}); + // const navigator = useNavigate(); let WS: Ws; let ws: WebSocket; @@ -66,6 +70,7 @@ function App() { console.log(data) if(data.message === 'SESS_CREATION') { portAndId.current = ({id: data.id, port: data.port}); + setPortId({id: data.id, port: data.port}); } } }, []); @@ -73,20 +78,19 @@ function App() { function createSess() { try{ ws.send('{ "message" : "NEW_SESS" }'); - return true + return true; } catch { - alert('Что то пошло не так, повторите позже') - return false - } - + // alert('Что то пошло не так, обновите страницу и попробуйте еще раз') + return false; + } } - function connectSess(port?: string) { - if(port) { + function connectSess(port: string, isNewPage?: boolean) { + if(!isNewPage) { // window.open('http://' + ConnectData.pixelIp + ":" + port, '_blank'); window.location.href= 'http://' + ConnectData.pixelIp + ":" + port; } else { - window.open('http://' + ConnectData.pixelIp + ":" + portAndId.current.port, '_blank'); + window.open('http://' + ConnectData.pixelIp + ":" + port, '_blank'); } } @@ -102,25 +106,50 @@ function App() { return (
- - - { - !showConnectPopup - ? <> - -
- - : - } - - + + + + + + + +
+ + } + /> + connectSess(port, isNewPage)} + connectToExistDemo={connectToExistSess} + port={portId.port} + /> + } + /> + {/* { + !showConnectPopup + ? <> + +
+ + : + } */} + + + + +
); } diff --git a/src/components/ContextPort.tsx b/src/components/ContextPort.tsx new file mode 100644 index 0000000..90f8c34 --- /dev/null +++ b/src/components/ContextPort.tsx @@ -0,0 +1,3 @@ +import React from "react"; + +export const ContextPort = React.createContext<{id:string, port: string}>({id: '0', port: '0'}) \ No newline at end of file diff --git a/src/components/connectWindow/connectWindow.tsx b/src/components/connectWindow/connectWindow.tsx index 7c7fb34..13508cc 100644 --- a/src/components/connectWindow/connectWindow.tsx +++ b/src/components/connectWindow/connectWindow.tsx @@ -4,8 +4,9 @@ import { Popup } from "./popup/popup"; import logo from './LogoFull.svg'; type TProps = { - startNewDemo: () => void + startNewDemo: (port: string, isNewPage: boolean) => void connectToExistDemo: (accessCode: string) => void + port: string } export const ConnectWindow:React.FC = React.memo((props) => { @@ -13,7 +14,8 @@ export const ConnectWindow:React.FC = React.memo((props) => { const [accessCode, setAccessCode] = useState(''); function connectToNew() { - props.startNewDemo(); + console.log(props.port) + props.startNewDemo(props.port, true); } function openPopupToConnectExistSess() { @@ -45,7 +47,6 @@ export const ConnectWindow:React.FC = React.memo((props) => { accessCode={accessCode} setAccessCode={setAccessCode} /> - } - + } }) \ No newline at end of file diff --git a/src/components/mainPart/mainPart.tsx b/src/components/mainPart/mainPart.tsx index 8cdf1a4..afcc89d 100644 --- a/src/components/mainPart/mainPart.tsx +++ b/src/components/mainPart/mainPart.tsx @@ -12,6 +12,7 @@ import { Form } from "./form/form"; import { LangDict } from "../langDict"; import { ContextLang } from "../ContextLang"; import { ContextWs } from "../../ContextWs"; +import { useNavigate } from "react-router-dom"; type TProps = { createSess: () => boolean, @@ -41,6 +42,7 @@ export const MainPart: React.FC = React.memo((props) => { const lastRender = currentContent; const history = useRef>(new Array()); const isRemoveLastElementHistry = useRef(false); + const navigator = useNavigate(); useEffect(() => { console.log(lang) @@ -104,9 +106,10 @@ export const MainPart: React.FC = React.memo((props) => { } function onClickCreateNewDemo() { - if(!props.createSess()) { - return - } + // if(!props.createSess()) { + // return + // } + props.createSess() changeContentFunc(); setCurrentContent( @@ -137,9 +140,8 @@ export const MainPart: React.FC = React.memo((props) => { } function onClickConnect(accessCode: string) { - // console.log(accessCode) - props.connectSess(accessCode) - // ws.send('{ "message" : "NEW_SESS" }'); + // props.connectSess(accessCode) + navigator('/connect-page') } function onSelectDay(date: {ru: string, en: string}) {