нормальные роуты

src/components/App/App.css

@@ -0,0 +1,10 @@
+.App {
+    position: relative;
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+  }
+  
+  .App.hidden {
+    opacity: 0;
+    pointer-events: none;
+  }

src/components/App/App.js

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Start from '../Start/Start';
+import Second from '../Second/Second';
+import Tinder from '../Tinder/Tinder';
+import Main from '../Main/Main';
+import City from '../City/City';
+import axios from 'axios';
+import './App.css';
+
+function App() {
+  const [buttonValue, setButtonValue] = useState("");
+  const [isHidden, setIsHidden] = useState(false);
+  const [cardInfo, setCardInfo] = useState([]);
+  const [userData, setUserData] = useState({});
+
+  const handleButtonValue = (value) => {
+    setIsHidden(true);
+    setTimeout(() => {
+      setIsHidden(false);
+      setButtonValue(value);
+    }, 300);
+  };
+
+  useEffect(() => {
+    const fetchData = () => {
+      axios.get('https://easytravel.zetcraft.ru/v1/GetAllCards')
+        .then(response => {
+          setCardInfo(response.data);
+        })
+        .catch(error => {
+          console.error('Error fetching data:', error);
+        });
+    }
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    // Загрузка userData из localStorage при монтировании компонента
+    const savedUserData = JSON.parse(localStorage.getItem('userData'));
+    if (savedUserData) {
+      setUserData(savedUserData);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Сохранение userData в localStorage при изменении
+    localStorage.setItem('userData', JSON.stringify(userData));
+    console.log(userData);
+  }, [userData]);
+
+
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Start getValue={handleButtonValue} userData={userData} setUserData={setUserData} />}/>
+        <Route path="second" element={<Second getValue={handleButtonValue} setUserData={setUserData} />} />
+        <Route path="tinder" element={<Tinder getValue={handleButtonValue} cardInfo={cardInfo} userData={userData} setUserData={setUserData} />} />
+        <Route path="city" element={<City getValue={handleButtonValue} setUserData={setUserData} />} />
+        <Route path="main" element={<Main userData={userData}/>} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

src/components/City/City.js

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom"; 
+
 import axios from "axios";
 import './City.css'
 
 const City = (props) => {
   const route = props.getValue;
   const setUserData = props.setUserData
+  const second = useNavigate();
 
   const [cityOptions, setCityOptions] = useState([]);
   const [filteredCityOptions, setFilteredCityOptions] = useState([]);
@@ -111,7 +114,7 @@ const City = (props) => {
     <button
       className="animated-button"
       onClick={() => {
-        route('/second')
+        second('/second')
         setUserData({selectedCity: selectedCity});
         console.log(selectedCity);
     }}

src/components/ReportWebVitals/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+    if (onPerfEntry && onPerfEntry instanceof Function) {
+      import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+        getCLS(onPerfEntry);
+        getFID(onPerfEntry);
+        getFCP(onPerfEntry);
+        getLCP(onPerfEntry);
+        getTTFB(onPerfEntry);
+      });
+    }
+  };
+  
+  export default reportWebVitals;

src/components/Second/Second.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { useNavigate } from "react-router-dom"; 
 import './style.css'
 import Icon from './images/Vector.svg'
 
@@ -6,7 +7,8 @@ import Icon from './images/Vector.svg'
 const Second = (props) => {
 
     const route = props.getValue;
-
+    const tinder = useNavigate();
+    const main = useNavigate();
     return (
         <div style={{
             display: 'flex',
@@ -41,8 +43,8 @@ const Second = (props) => {
                 gap:15,
                 alignItems:'center',
                }}>
-                  <button className="btn_first" onClick={() => route('/tinder')}>Давайте!</button>
-                  <button className="btn_second" onClick={() => route('/main')}>Пропустить</button>
+                  <button className="btn_first" onClick={() => tinder('/tinder')}>Давайте!</button>
+                  <button className="btn_second" onClick={() => main('/main')}>Пропустить</button>
                </div>
         </div>
     )

src/components/ServiceWorkerRegistration/serviceWorkerRegistration.js

@@ -0,0 +1,137 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://cra.link/PWA
+
+const isLocalhost = Boolean(
+    window.location.hostname === 'localhost' ||
+      // [::1] is the IPv6 localhost address.
+      window.location.hostname === '[::1]' ||
+      // 127.0.0.0/8 are considered localhost for IPv4.
+      window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+  );
+  
+  export function register(config) {
+    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+      // The URL constructor is available in all browsers that support SW.
+      const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+      if (publicUrl.origin !== window.location.origin) {
+        // Our service worker won't work if PUBLIC_URL is on a different origin
+        // from what our page is served on. This might happen if a CDN is used to
+        // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+        return;
+      }
+  
+      window.addEventListener('load', () => {
+        const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+  
+        if (isLocalhost) {
+          // This is running on localhost. Let's check if a service worker still exists or not.
+          checkValidServiceWorker(swUrl, config);
+  
+          // Add some additional logging to localhost, pointing developers to the
+          // service worker/PWA documentation.
+          navigator.serviceWorker.ready.then(() => {
+            console.log(
+              'This web app is being served cache-first by a service ' +
+                'worker. To learn more, visit https://cra.link/PWA'
+            );
+          });
+        } else {
+          // Is not localhost. Just register service worker
+          registerValidSW(swUrl, config);
+        }
+      });
+    }
+  }
+  
+  function registerValidSW(swUrl, config) {
+    navigator.serviceWorker
+      .register(swUrl)
+      .then((registration) => {
+        registration.onupdatefound = () => {
+          const installingWorker = registration.installing;
+          if (installingWorker == null) {
+            return;
+          }
+          installingWorker.onstatechange = () => {
+            if (installingWorker.state === 'installed') {
+              if (navigator.serviceWorker.controller) {
+                // At this point, the updated precached content has been fetched,
+                // but the previous service worker will still serve the older
+                // content until all client tabs are closed.
+                console.log(
+                  'New content is available and will be used when all ' +
+                    'tabs for this page are closed. See https://cra.link/PWA.'
+                );
+  
+                // Execute callback
+                if (config && config.onUpdate) {
+                  config.onUpdate(registration);
+                }
+              } else {
+                // At this point, everything has been precached.
+                // It's the perfect time to display a
+                // "Content is cached for offline use." message.
+                console.log('Content is cached for offline use.');
+  
+                // Execute callback
+                if (config && config.onSuccess) {
+                  config.onSuccess(registration);
+                }
+              }
+            }
+          };
+        };
+      })
+      .catch((error) => {
+        console.error('Error during service worker registration:', error);
+      });
+  }
+  
+  function checkValidServiceWorker(swUrl, config) {
+    // Check if the service worker can be found. If it can't reload the page.
+    fetch(swUrl, {
+      headers: { 'Service-Worker': 'script' },
+    })
+      .then((response) => {
+        // Ensure service worker exists, and that we really are getting a JS file.
+        const contentType = response.headers.get('content-type');
+        if (
+          response.status === 404 ||
+          (contentType != null && contentType.indexOf('javascript') === -1)
+        ) {
+          // No service worker found. Probably a different app. Reload the page.
+          navigator.serviceWorker.ready.then((registration) => {
+            registration.unregister().then(() => {
+              window.location.reload();
+            });
+          });
+        } else {
+          // Service worker found. Proceed as normal.
+          registerValidSW(swUrl, config);
+        }
+      })
+      .catch(() => {
+        console.log('No internet connection found. App is running in offline mode.');
+      });
+  }
+  
+  export function unregister() {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.ready
+        .then((registration) => {
+          registration.unregister();
+        })
+        .catch((error) => {
+          console.error(error.message);
+        });
+    }
+  }

src/components/Start/Start.js

@@ -1,69 +1,74 @@
 import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom"; 
 
 const Start = (props) => {
+  const history = useNavigate();
+  const kek = './circle.html';
 
-    const route =  props.getValue;
-    const kek = './circle.html'
+  function hideAddressBar() {
+    if (document.documentElement.scrollHeight < window.outerHeight / window.devicePixelRatio)
+      document.documentElement.style.height = (window.outerHeight / window.devicePixelRatio) + 'px';
+    setTimeout(window.scrollTo(1, 1), 0);
+  }
 
-    function hideAddressBar(){
-        if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
-          document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
-        setTimeout(window.scrollTo(1,1),0);
-      }
-      window.addEventListener("load",function(){hideAddressBar();});
-      window.addEventListener("orientationchange",function(){hideAddressBar();});
+  window.addEventListener("load", function () { hideAddressBar(); });
+  window.addEventListener("orientationchange", function () { hideAddressBar(); });
 
-    useEffect(() => {
-        const handler = (ev: MessageEvent<{ type: string }>) => {
-          if (typeof ev.data !== 'object') return
-          if (!ev.data.type) return
-          if (ev.data.type !== 'button-click') return
-    
-          route('/city')
-        }
-    
-        window.addEventListener('message', handler)
-    
-        // Don't forget to remove addEventListener
-        return () => window.removeEventListener('message', handler)
-      }, [])
+  const handleButtonClick = () => {
+    history('/city');
+  };
 
-    return (
-        <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignContent: 'center',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-            justifyContent: 'space-evenly',
-            height: '95vh',
-            overflow: 'hidden',
-        }}>
-            <div style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-            }}>
-                <img src="./logo192.png" alt="logo" style={{width: '181px', height: '181px'}} />
-            <span style={{
-                color: '#F68C43',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'start',
-                fontWeight: 700,
-                fontFamily: 'Raleway',
-                fontSize: '40px',
-            }}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
-            </div>
-            
-            <iframe scrolling="no" src={kek} style={{
-                overflow: 'hidden',
-                border: 'none',
-                width: '440px',
-                height: '440px',
-            }}></iframe>
-        </div>
-    ) 
+  useEffect(() => {
+    const frame = document.querySelector("#start");
+    frame.addEventListener('load', () => {
+      frame.contentWindow.addEventListener('click', () => {
+        handleButtonClick();
+      });
+    });
+
+    return () => {
+      frame.removeEventListener('load', () => {
+        frame.contentWindow.removeEventListener('click', () => {
+        });
+      });
+    };
+  }, []);
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignContent: 'center',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      justifyContent: 'space-evenly',
+      height: '95vh',
+      overflow: 'hidden',
+    }}>
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}>
+        <img src="./logo192.png" alt="logo" style={{ width: '181px', height: '181px' }} />
+        <span style={{
+          color: '#F68C43',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'start',
+          fontWeight: 700,
+          fontFamily: 'Raleway',
+          fontSize: '40px',
+        }}>Путешествия <p style={{ color: '#4EB0F2' }}>Просто!</p></span>
+      </div>
+      <iframe id="start" scrolling="no" src={kek} style={{
+        overflow: 'hidden',
+        border: 'none',
+        width: '440px',
+        height: '440px',
+      }}></iframe>
+    </div>
+  )
 };
 
-export default Start;
+export default Start;

src/components/Tinder/Tinder.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useNavigate } from "react-router-dom"; 
 import TinderCard from 'react-tinder-card';
 import './Tinder.css';
 
@@ -7,6 +8,7 @@ const Tinder = (props) => {
     const route = props.getValue;
     const cardInfo = props.cardInfo;
     const setUserData = props.setUserData;
+    const main = useNavigate();
 
     const [lastDirection, setLastDirection] = useState();
     const [cardId, setCardId] = useState([]);
@@ -51,7 +53,7 @@ const Tinder = (props) => {
                             var unique = [...new Set(cardId)]
                             var uniqueIds = [...new Set(allIds)];
                             if(uniqueIds.length === cardInfo.length) {
-                                route('/main');
+                                main('/main');
                                 setUserData(prevUserData => ({ ...prevUserData, unique: unique }));
                                 console.log(unique);
                                 console.log(props.userData);