From c682e08cf393797cf71f5241e907e3b37ecd579a Mon Sep 17 00:00:00 2001 From: Sevka <240303vilkov@gmail.com> Date: Tue, 5 Sep 2023 20:46:24 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BD=D0=BE=D1=80=D0=BC=D0=B0=D0=BB=D1=8C?= =?UTF-8?q?=D0=BD=D1=8B=D0=B5=20=D1=80=D0=BE=D1=83=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 42 +++++- package.json | 1 + src/{ => components/App}/App.css | 0 src/{ => components/App}/App.js | 42 +++--- src/components/City/City.js | 5 +- .../ReportWebVitals}/reportWebVitals.js | 0 src/components/Second/Second.js | 8 +- .../serviceWorkerRegistration.js | 0 src/{ => components/SetupTests}/setupTests.js | 0 src/components/Start/Start.js | 125 +++++++++--------- src/components/Tinder/Tinder.js | 4 +- src/index.js | 6 +- 12 files changed, 136 insertions(+), 97 deletions(-) rename src/{ => components/App}/App.css (100%) rename src/{ => components/App}/App.js (56%) rename src/{ => components/ReportWebVitals}/reportWebVitals.js (100%) rename src/{ => components/ServiceWorkerRegistration}/serviceWorkerRegistration.js (100%) rename src/{ => components/SetupTests}/setupTests.js (100%) diff --git a/package-lock.json b/package-lock.json index aa8c665..bb2d9a7 100644 --- 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", diff --git a/package.json b/package.json index af319c1..2d7fc46 100644 --- 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", diff --git a/src/App.css b/src/components/App/App.css similarity index 100% rename from src/App.css rename to src/components/App/App.css diff --git a/src/App.js b/src/components/App/App.js similarity index 56% rename from src/App.js rename to src/components/App/App.js index 5014984..3cb0900 100644 --- a/src/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 = - break; - case '/tinder': - content = - break; - case '/main': - content =
- break; - case '/city': - content = - break; - default: - content = - } - - const arrayLength = userData.unique ? userData.unique.length : 0; return ( -
- {arrayLength !== 0 ?
: content} -
+ + + }/> + } /> + } /> + } /> + } /> + + ); } diff --git a/src/components/City/City.js b/src/components/City/City.js index 2594065..a17685d 100644 --- 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) => { - + + ) diff --git a/src/serviceWorkerRegistration.js b/src/components/ServiceWorkerRegistration/serviceWorkerRegistration.js similarity index 100% rename from src/serviceWorkerRegistration.js rename to src/components/ServiceWorkerRegistration/serviceWorkerRegistration.js diff --git a/src/setupTests.js b/src/components/SetupTests/setupTests.js similarity index 100% rename from src/setupTests.js rename to src/components/SetupTests/setupTests.js diff --git a/src/components/Start/Start.js b/src/components/Start/Start.js index c5c8aa6..e816ec9 100644 --- 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 { - 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 ( -
-
- logo - Путешествия

Просто!

 -
- - -
- ) + useEffect(() => { + const frame = document.querySelector("#start"); + frame.addEventListener('load', () => { + frame.contentWindow.addEventListener('click', () => { + handleButtonClick(); + }); + }); + + return () => { + frame.removeEventListener('load', () => { + frame.contentWindow.removeEventListener('click', () => { + }); + }); + }; + }, []); + + return ( +
+
+ logo + Путешествия

Просто!

 +
+ +
+ ) }; -export default Start; +export default Start; \ No newline at end of file diff --git a/src/components/Tinder/Tinder.js b/src/components/Tinder/Tinder.js index 34ddbab..745b661 100644 --- 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); diff --git a/src/index.js b/src/index.js index 6d5f43c..b522533 100644 --- 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(