diff --git a/src/components/mainPart/backButtonIcon.svg b/src/components/mainPart/backButtonIcon.svg new file mode 100644 index 0000000..97f99db --- /dev/null +++ b/src/components/mainPart/backButtonIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/mainPart/contentContainer.tsx b/src/components/mainPart/contentContainer.tsx index 53494e6..73cb237 100644 --- a/src/components/mainPart/contentContainer.tsx +++ b/src/components/mainPart/contentContainer.tsx @@ -17,7 +17,7 @@ type TProps = { ru: string, en: string } - accessCode?: string, + isAccessCode?: boolean, } type WsData = { @@ -59,7 +59,7 @@ export const ContentContainer:React.FC = React.memo((props) => { {props.descriptText[lang]} { - props.accessCode && + props.isAccessCode && {accessCode} } = React.memo((props) => { const {lang, setLang} = useContext(ContextLang); const changeContent = useRef(0); const [showBackground, setShowBackground] = useState(false); - const [planContent, setPlaneContent] = useState(); + const [planContent, setPlanContent] = useState(); const defaultCurrentContent = = React.memo((props) => { /> const [currentContent, setCurrentContent] = useState(defaultCurrentContent); const lastRender = currentContent; - const {ws, wsEvent} = useContext(ContextWs); + const history = useRef>(new Array()); + const isRemoveLastElementHistry = useRef(false); useEffect(() => { console.log(lang) // onClickStartDemo() setCurrentContent(lastRender) - }, [lang]) + }, [lang]); + + useEffect(() => { + if(planContent && !isRemoveLastElementHistry.current) { + history.current.push(planContent); + isRemoveLastElementHistry.current = false; + console.log(history.current.length, 'добавили 1') + } + }, [planContent]) function changeLang(lang: 'ru' | 'en') { setLang(lang); @@ -56,6 +65,23 @@ export const MainPart: React.FC = React.memo((props) => { changeContent.current += 1 } + function prevPlan() { + changeContentFunc(); + if(history.current.length - 1 <= 0) { + onClickStartDemo(); + history.current = new Array(); + setPlanContent(null); + disableBackground(); + isRemoveLastElementHistry.current = false; + } else { + setPlanContent(history.current[history.current.length - 2]); + history.current.splice(history.current.length - 1, 1); + isRemoveLastElementHistry.current = true; + console.log(history.current.length, 'убрали 1') + } + + } + function onClickStartDemo() { changeContentFunc(); setCurrentContent( @@ -85,19 +111,22 @@ export const MainPart: React.FC = React.memo((props) => { descriptText={LangDict.demoStartedDescription} onClickButton={() => onClickConnect()} textButton={LangDict.connectToDemoButton} - accessCode="1876" + isAccessCode={true} /> ) } - function onClickPlaneDemo() { + function onClickPlaneDemo() { // changeContentFunc() + isRemoveLastElementHistry.current = false; enableBackground(); - setPlaneContent( + setPlanContent( onSelectDay(date)} />} isLegend={true} + toPrevState={prevPlan} + showPrevButton={true} /> ); setCurrentContent(<>>); @@ -109,8 +138,10 @@ export const MainPart: React.FC = React.memo((props) => { } function onSelectDay(date: {ru: string, en: string}) { + // history.current.push(planContent); + isRemoveLastElementHistry.current = false; changeContentFunc() - setPlaneContent( + setPlanContent( = React.memo((props) => { onClickTime={(date, time) => onSelectTime(date, time)} />} isLegend={true} + toPrevState={prevPlan} + showPrevButton={true} /> ); } function onSelectTime(date: {ru: string, en: string}, time: string) { + // history.current.push(planContent); + isRemoveLastElementHistry.current = false; changeContentFunc() let dateTime = `${date} ${lang === 'ru' ? 'в' : 'in'} ${time}`; let dateObj = { ru: `${date.ru} в ${time}`, en: `${date.en} in ${time}` } - setPlaneContent( + setPlanContent( = React.memo((props) => { /> } isLegend={false} + toPrevState={prevPlan} + showPrevButton={true} /> ) console.log(dateTime) } - function onSubmit(data: FormData, date: string) { + function onSubmit(data: FormData, date: string) { changeContentFunc(); - setPlaneContent(null); + setPlanContent(null); setCurrentContent( = React.memo((props) => { onClickButton={() => toMain()} /> ) + history.current = new Array(); // console.log(data, date) } function toMain() { changeContentFunc(); setCurrentContent(defaultCurrentContent); - setPlaneContent(null); + setPlanContent(null); disableBackground(); + history.current = new Array(); } function enableBackground() { diff --git a/src/components/mainPart/planContentContainer.tsx b/src/components/mainPart/planContentContainer.tsx index eb12684..3b27c17 100644 --- a/src/components/mainPart/planContentContainer.tsx +++ b/src/components/mainPart/planContentContainer.tsx @@ -13,11 +13,17 @@ type TProps = { } content: JSX.Element isLegend: boolean + toPrevState: () => void + showPrevButton: boolean } export const PlanContentContainer:React.FC = React.memo((props) => { const {lang} = useContext(ContextLang); return + {props.showPrevButton && props.toPrevState()}> + + Назад + } {props.title[lang]} { props.date