добавлена возможность возвращаться на предыдущий этап выбора записи

src/components/mainPart/mainPart.tsx

@@ -28,7 +28,7 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
     const {lang, setLang} = useContext(ContextLang);
     const changeContent = useRef(0);
     const [showBackground, setShowBackground] = useState<boolean>(false);
-    const [planContent, setPlaneContent] = useState<JSX.Element>();
+    const [planContent, setPlanContent] = useState<JSX.Element>();
     const defaultCurrentContent = 
         <ContentContainer 
             titleText={LangDict.mainTitle}
@@ -38,14 +38,23 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
         />
     const [currentContent, setCurrentContent] = useState<JSX.Element>(defaultCurrentContent);  
     const lastRender = currentContent;
-    const {ws, wsEvent} = useContext(ContextWs);
+    const history = useRef<Array<JSX.Element>>(new Array());
+    const isRemoveLastElementHistry = useRef<boolean>(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<TProps> = 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<TProps> = 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(
             <PlanContentContainer 
                 title={LangDict.selectDate}
                 content={<CalendarComponent onCLick={(date) => onSelectDay(date)} />}
                 isLegend={true}
+                toPrevState={prevPlan}
+                showPrevButton={true}
             />
         );
         setCurrentContent(<></>);
@@ -109,8 +138,10 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
     }
 
     function onSelectDay(date: {ru: string, en: string}) {
+        // history.current.push(planContent);
+        isRemoveLastElementHistry.current = false;
         changeContentFunc()
-        setPlaneContent(
+        setPlanContent(
             <PlanContentContainer 
             title={LangDict.selectTime}
                 date={date}
@@ -119,18 +150,22 @@ export const MainPart: React.FC<TProps> = 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(
             <PlanContentContainer
                 title={LangDict.checkout}
                 date={dateObj}
@@ -141,14 +176,16 @@ export const MainPart: React.FC<TProps> = 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(
             <ContentContainer 
                 titleText={LangDict.checkouted}
@@ -157,14 +194,16 @@ export const MainPart: React.FC<TProps> = 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() {