main

src/App.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import Start from './components/Start/Start';
 import Second from './components/Second/Second';
 import Tinder from './components/Tinder/Tinder';
@@ -8,10 +8,13 @@ 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 selectedCity = userData.selectedCity;
+  const identification = userData.unique;
 
   const handleButtonValue = (value) => {
     setIsHidden(true);
@@ -35,26 +38,44 @@ function App() {
     fetchData();
   }, []);
 
+  useEffect(() => {
+    console.log(userData);
+    // Загрузка 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]);
+
   let content = null;
   switch (buttonValue) {
     case '/second':
-      content = <Second getValue={handleButtonValue}/>
+      content = <Second getValue={handleButtonValue}setUserData={setUserData} />
       break;
     case '/tinder':
-      content = <Tinder getValue={handleButtonValue} cardInfo={cardInfo}/>
+      content = <Tinder getValue={handleButtonValue} cardInfo={cardInfo} userData={userData} setUserData={setUserData} />
       break;
     case '/main':
-      content = <Main/>
+      content = <Main userData={userData} selectedCity={selectedCity} identification={identification} />
       break;
     case '/city':
-      content = <City getValue={handleButtonValue}/>
-    break;
-    default: content = <Start getValue={handleButtonValue}/>
+      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' : ''}`}>
-      {content}
+      {arrayLength !== 0 ? <Main /> : content }
     </div>
   );
 }

src/components/City/City.js

@@ -3,6 +3,7 @@ import axios from "axios";
 
 const City = (props) => {
   const route = props.getValue;
+  const setUserData = props.setUserData
 
   const [cityOptions, setCityOptions] = useState([]);
   const [filteredCityOptions, setFilteredCityOptions] = useState([]);
@@ -71,7 +72,7 @@ const City = (props) => {
           justifyContent: 'center',
           width: 304,
         }}>
-          <img src="./image 2.png" alt="#" style={{
+          <img src='./image 2.png' alt="#" style={{
             width: 282,
             height: 282,
           }} />
@@ -106,7 +107,10 @@ const City = (props) => {
     gap: 10,
     }}>
     <button
-      onClick={() => route('/second')}
+      onClick={() => {
+        route('/second')
+        setUserData(prevUserData => ({ ...prevUserData, selectedCity: selectedCity}));
+    }}
       className="animated-button"
       style={{
         width: 304,

src/components/Main/Main.js

@@ -1,4 +1,15 @@
-const Main = () => {
+import React, {useState, useEffect} from "react";
+
+
+const Main = (props) => {
+
+    const city = props.selectedCity;
+    const id = props.identification;
+
+    useEffect(() => {
+        console.log(city && id);
+    })
+
     return ( 
         <div>
             <span>Переход готов</span>

src/components/Tinder/Tinder.js

@@ -6,6 +6,7 @@ const Tinder = (props) => {
 
     const route = props.getValue;
     const cardInfo = props.cardInfo;
+    const setUserData = props.setUserData;
 
     const [lastDirection, setLastDirection] = useState();
     const [cardId, setCardId] = useState([]);
@@ -43,7 +44,7 @@ const Tinder = (props) => {
                             var uniqueIds = [...new Set(allIds)];
                             if(uniqueIds.length === cardInfo.length) {
                                 route('/main');
-                                console.log(unique);
+                                setUserData(prevUserData => ({ ...prevUserData, unique }));
                             }
                         }}
                     >
@@ -90,7 +91,7 @@ const Tinder = (props) => {
                                     }}
                                     onClick={() => handleDislike(card.id)}
                                 >
-                                    <img src="./Dis.png" alt='#' style={{
+                                    <img src="./dis.jpg" alt='#' style={{
                                         height: '100%',
                                         width: '100%',
                                     }} onClick={() => handleDislike(card.id)}/>
@@ -104,7 +105,7 @@ const Tinder = (props) => {
                                     }}
                                     onClick={() => handleLike(card.id)}
                                 >
-                                    <img src="./Like.png" alt='#' style={{
+                                    <img src="./like.jpg" alt='#' style={{
                                         height: '100%',
                                         width: '100%',
                                     }} onClick={() => handleLike(card.id)}/>