Update Main.js

src/components/Main/Main.js

@@ -1,17 +1,112 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import axios from "axios";
 
-const Main = ({userData}) => {
+const Main = ({ userData }) => {
+
+    const [films, setFilms] = useState([]);
+    const [gits, setGits] = useState([]);
+    const [museum, setMuseum] = useState([]);
+
+    const optionsFilms = {
+        method: 'GET',
+        url: `https://easytravel.zetcraft.ru/v1/GetAllFilmsInCity/${userData.selectedCity}`,
+    };
+
+    const optionsGis = {
+        method: 'GET',
+        url: `https://easytravel.zetcraft.ru/v1/GetAllGuides/${userData.selectedCity}`,
+    };
+
+    const optionsMuseum = {
+        method: 'GET',
+        url: `https://easytravel.zetcraft.ru/v1/GetAllMuseum/${userData.selectedCity}`,
+    };
 
     useEffect(() => {
-        console.log(userData.selectedCity);
+        axios.request(optionsFilms).then(function (response) {
-        console.log(userData.unique);
+            setFilms(response.data);
-    })
+        }).catch(function (error) {
+            console.error(error);
+        });
+    }, []);
+
+    useEffect(() => {
+        axios.request(optionsGis).then(function (response) {
+            setGits(response.data);
+        }).catch(function (error) {
+            console.error(error);
+        });
+    }, []);
+
+    useEffect(() => {
+        axios.request(optionsMuseum).then(function (response) {
+            setMuseum(response.data);
+        }).catch(function (error) {
+            console.error(error);
+        });
+    }, []);
+
+    console.log(userData.unique);
 
     return (
-        <div>
+        <div style={{
-            <span>Переход готов</span>
+            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+        }}>
+            <h2>Фильмы в г.{userData.selectedCity}</h2>
+            <div style={{
+                width: '100%',
+                overflowX: 'auto',
+            }}>
+                <ul style={{
+                    display: 'flex',
+                    padding: 0, // Убираем внутренние отступы у списка
+                }}>
+                    {films.map((film, index) => (
+                        <li key={index} style={{
+                            marginRight: '10px', // Добавляем небольшой отступ между фильмами
+                        }}>
+                            <div key={index} style={{
+                                height: 200,
+                                width: 140,
+                                display: 'flex',
+                                alignContent: 'center',
+                                flexDirection: 'column',
+                            }}>
+                            <div style={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                            }}>
+                                <img src={film.imageURL} alt="#" style={{
+                                    height: 110,
+                                    width: 79,
+                                }}/>
+                                {film.filmName}
+                            </div>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+            </div>
+
+            <h2>Guides in {userData.selectedCity}</h2>
+            <ul>
+                {gits.map((guide, index) => (
+                    <li key={index}>{guide.name}</li>
+                ))}
+            </ul>
+
+            <h2>Museums in {userData.selectedCity}</h2>
+            <ul>
+                {museum.map((museumItem, index) => (
+                    <li key={index}>{museumItem.name}</li>
+                ))}
+            </ul>
         </div>
-     );
+    );
 }
 
 export default Main;