DmitriyB
70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import React, { useContext, useEffect, useState } from "react";
|
|
import { ContextWs } from "../../ContextWs";
|
|
import { ContextLang } from "../ContextLang";
|
|
import { PinkButton } from "./pinkButton";
|
|
|
|
type TProps = {
|
|
textButton: {
|
|
ru: string,
|
|
en: string
|
|
}
|
|
onClickButton: () => void
|
|
titleText?: {
|
|
ru: string,
|
|
en: string
|
|
}
|
|
descriptText: {
|
|
ru: string,
|
|
en: string
|
|
}
|
|
accessCode?: string,
|
|
}
|
|
|
|
type WsData = {
|
|
message: string
|
|
id: string
|
|
content?: boolean
|
|
port?: string
|
|
}
|
|
|
|
export const ContentContainer:React.FC<TProps> = React.memo((props) => {
|
|
const [accessCode, setAccessCode] = useState('------');
|
|
let {lang} = useContext(ContextLang);
|
|
const {wsEvent} = useContext(ContextWs);
|
|
|
|
useEffect(() => {
|
|
if(!wsEvent) {
|
|
return;
|
|
}
|
|
let data: WsData;
|
|
try {
|
|
data = JSON.parse(wsEvent.data) as WsData;
|
|
} catch {
|
|
return;
|
|
}
|
|
// console.log(data)
|
|
if(data?.message === 'SESS_CREATION') {
|
|
setAccessCode(data.id)
|
|
}
|
|
}, [wsEvent])
|
|
|
|
return <div className="main-part-text-container">
|
|
{
|
|
props.titleText &&
|
|
<span className="main-part-text-title">
|
|
{props.titleText[lang]}
|
|
</span>
|
|
}
|
|
<span className="main-part-text-descript">
|
|
{props.descriptText[lang]}
|
|
</span>
|
|
{
|
|
props.accessCode &&
|
|
<span className="main-part-text-access-code">{accessCode}</span>
|
|
}
|
|
<PinkButton
|
|
onClick={props.onClickButton}
|
|
textButton={props.textButton[lang]}
|
|
/>
|
|
</div>
|
|
}) |