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

2023-09-05 20:46:24 +03:00
parent 30421a97da
commit c682e08cf3
12 changed files with 136 additions and 97 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
        "matchmedia": "^0.1.2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.15.0",
        "react-scripts": "5.0.1",
        "react-swipeable": "^7.0.1",
        "react-tinder-card": "^1.6.2",
@@ -34,8 +35,7 @@
        "workbox-routing": "^6.6.0",
        "workbox-strategies": "^6.6.0",
        "workbox-streams": "^6.6.0"
-      },
-      "devDependencies": {}
+      }
    },
    "node_modules/@aashutoshrathi/word-wrap": {
      "version": "1.2.6",
@@ -3409,6 +3409,14 @@
        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
+      "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14924,6 +14932,36 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
+      "integrity": "sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==",
+      "dependencies": {
+        "@remix-run/router": "1.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.15.0.tgz",
+      "integrity": "sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==",
+      "dependencies": {
+        "@remix-run/router": "1.8.0",
+        "react-router": "6.15.0"
+      },
+      "engines": {
+        "node": ">=14.0.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",
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
    "matchmedia": "^0.1.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.0",
    "react-scripts": "5.0.1",
    "react-swipeable": "^7.0.1",
    "react-tinder-card": "^1.6.2",
--- a/src/components/App/App.css
+++ b/src/components/App/App.css
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import Start from './components/Start/Start';
-import Second from './components/Second/Second';
-import Tinder from './components/Tinder/Tinder';
-import Main from './components/Main/Main';
-import City from './components/City/City';
+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';

@@ -48,30 +49,17 @@ function App() {
    console.log(userData);
  }, [userData]);

-  let content = null;
-  switch (buttonValue) {
-    case '/second':
-      content = <Second getValue={handleButtonValue}setUserData={setUserData} />
-      break;
-    case '/tinder':
-      content = <Tinder getValue={handleButtonValue} cardInfo={cardInfo} userData={userData} setUserData={setUserData} />
-      break;
-    case '/main':
-      content = <Main />
-      break;
-    case '/city':
-      content = <City getValue={handleButtonValue} setUserData={setUserData} />
-      break;
-    default:
-      content = <Start getValue={handleButtonValue} userData={userData} setUserData={setUserData} />
-  }
-
-  const arrayLength = userData.unique ? userData.unique.length : 0;

  return (
-    <div className={`App ${isHidden ? 'hidden' : ''}`}>
-      {arrayLength !== 0 ? <Main userData={userData}/> : content}
-    </div>
+    <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>
  );
 }

--- a/src/components/City/City.js
+++ b/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);
    }}
--- a/src/components/ReportWebVitals/reportWebVitals.js
+++ b/src/components/ReportWebVitals/reportWebVitals.js
--- a/src/components/Second/Second.js
+++ b/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>
    )
--- a/src/components/ServiceWorkerRegistration/serviceWorkerRegistration.js
+++ b/src/components/ServiceWorkerRegistration/serviceWorkerRegistration.js
--- a/src/components/SetupTests/setupTests.js
+++ b/src/components/SetupTests/setupTests.js
--- a/src/components/Start/Start.js
+++ b/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;
--- a/src/components/Tinder/Tinder.js
+++ b/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);
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
-import reportWebVitals from './reportWebVitals';
+import App from './components/App/App';
+import * as serviceWorkerRegistration from './components/ServiceWorkerRegistration/serviceWorkerRegistration';
+import reportWebVitals from './components/ReportWebVitals/reportWebVitals';

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(