DmitriyB/pixelstreamingwebreact
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

добавлен и настроен роутер

Browse Source
This commit is contained in:
DmitriyB
2022-08-09 14:37:21 +05:00
parent 1a00a1f0bc
commit 01cd176bec
6 changed files with 132 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+58
View File
@@ -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",
package.json
+1
View File
@@ -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",
src/App.tsx
+57 -28
View File
@@ -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<MessageEvent>(null);
const [showConnectPopup, setShowConnectPopup] = useState<boolean>(false);
const [currWs, setCurrWs] = useState<WebSocket>(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 (
<div className="App">
<ContextWs.Provider value={{ws: ws, wsEvent: wsEvent}}>
<ContextLang.Provider value={{lang: currentLang, setLang: setCurrentLang}} >
{
!showConnectPopup
? <>
<MainPart
createSess={createSess}
// connectSess={connectSess}
connectSess={openConnectPopup}
/>
<Footer />
</>
: <ConnectWindow
startNewDemo={connectSess}
connectToExistDemo={connectToExistSess}
/>
}
</ContextLang.Provider>
</ContextWs.Provider>
<ContextPort.Provider value={portId}>
<ContextWs.Provider value={{ws: ws, wsEvent: wsEvent}}>
<ContextLang.Provider value={{lang: currentLang, setLang: setCurrentLang}} >
<BrowserRouter>
<Routes>
<Route path='/' element={
<>
<MainPart
createSess={createSess}
// connectSess={connectSess}
connectSess={openConnectPopup}
/>
<Footer />
</>
}
/>
<Route path='connect-page' element={
<ConnectWindow
startNewDemo={(port, isNewPage) => connectSess(port, isNewPage)}
connectToExistDemo={connectToExistSess}
port={portId.port}
/>
}
/>
{/* {
!showConnectPopup
? <>
<MainPart
createSess={createSess}
// connectSess={connectSess}
connectSess={openConnectPopup}
/>
<Footer />
</>
: <ConnectWindow
startNewDemo={connectSess}
connectToExistDemo={connectToExistSess}
/>
} */}
</Routes>
</BrowserRouter>
</ContextLang.Provider>
</ContextWs.Provider>
</ContextPort.Provider>
</div>
);
}
src/components/ContextPort.tsx
+3
View File
@@ -0,0 +1,3 @@
import React from "react";
export const ContextPort = React.createContext<{id:string, port: string}>({id: '0', port: '0'})
src/components/connectWindow/connectWindow.tsx
+5 -4
View File
@@ -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<TProps> = React.memo((props) => {
@@ -13,7 +14,8 @@ export const ConnectWindow:React.FC<TProps> = React.memo((props) => {
const [accessCode, setAccessCode] = useState<string>('');
function connectToNew() {
props.startNewDemo();
console.log(props.port)
props.startNewDemo(props.port, true);
}
function openPopupToConnectExistSess() {
@@ -45,7 +47,6 @@ export const ConnectWindow:React.FC<TProps> = React.memo((props) => {
accessCode={accessCode}
setAccessCode={setAccessCode}
/>
}
}
</div>
})
src/components/mainPart/mainPart.tsx
+8 -6
View File
@@ -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<TProps> = React.memo((props) => {
const lastRender = currentContent;
const history = useRef<Array<JSX.Element>>(new Array());
const isRemoveLastElementHistry = useRef<boolean>(false);
const navigator = useNavigate();
useEffect(() => {
console.log(lang)
@@ -104,9 +106,10 @@ export const MainPart: React.FC<TProps> = 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<TProps> = 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}) {