EasyTravel/FichaFrontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

нормальные роуты
All checks were successful
Create and publish a Docker image / Publish image (push) Successful in 1m16s
Details
Create and publish a Docker image / Deploy image (push) Successful in 31s
Details

Browse Source
This commit is contained in:
Sevka 2023-09-05 20:46:24 +03:00
parent 30421a97da
commit c682e08cf3
12 changed files with 136 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

0
src/App.css → src/components/App/App.css
View File

42
src/App.js → src/components/App/App.js
View File

@ -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>
);
}

5
src/components/City/City.js
View File

@ -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);
}}

0
src/reportWebVitals.js → src/components/ReportWebVitals/reportWebVitals.js
View File

8
src/components/Second/Second.js
View File

@ -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>
)

0
src/serviceWorkerRegistration.js → src/components/ServiceWorkerRegistration/serviceWorkerRegistration.js
View File

0
src/setupTests.js → src/components/SetupTests/setupTests.js
View File

55
src/components/Start/Start.js
View File

@ -1,32 +1,38 @@
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(); });
const handleButtonClick = () => {
history('/city');
};
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
const frame = document.querySelector("#start");
frame.addEventListener('load', () => {
frame.contentWindow.addEventListener('click', () => {
handleButtonClick();
});
});
route('/city')
}
window.addEventListener('message', handler)
// Don't forget to remove addEventListener
return () => window.removeEventListener('message', handler)
}, [])
return () => {
frame.removeEventListener('load', () => {
frame.contentWindow.removeEventListener('click', () => {
});
});
};
}, []);
return (
<div style={{
@ -44,7 +50,7 @@ const Start = (props) => {
flexDirection: 'column',
alignItems: 'center',
}}>
<img src="./logo192.png" alt="logo" style={{width: '181px', height: '181px'}} />
<img src="./logo192.png" alt="logo" style={{ width: '181px', height: '181px' }} />
<span style={{
color: '#F68C43',
display: 'flex',
@ -53,10 +59,9 @@ const Start = (props) => {
fontWeight: 700,
fontFamily: 'Raleway',
fontSize: '40px',
}}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
}}>Путешествия <p style={{ color: '#4EB0F2' }}>Просто!</p></span>
</div>
<iframe scrolling="no" src={kek} style={{
<iframe id="start" scrolling="no" src={kek} style={{
overflow: 'hidden',
border: 'none',
width: '440px',

4
src/components/Tinder/Tinder.js
View File

@ -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);

6
src/index.js
View File

@ -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(