Добавил:

- Страницу про отдельный причал - Расскинул контекст url на весь проект Изменил: - Подредачил url в файлах - На локальных страницах яхт и катеров сделал ссылки на инфу про причал где припаркованы они - Для PopularList.jsx добавил urlClassMoreInfo считывая Контекст => при указании элемента <PopularList /> не указываем этот пропс
FotuneGame · Jan 10, 2024 · c481ecf · c481ecf
1 parent 1bd1506
commit c481ecf
Show file tree

Hide file tree

Showing 21 changed files with 240 additions and 77 deletions.
diff --git a/src/App.css b/src/App.css
@@ -16,4 +16,4 @@
     a{
         font-size: 12px;
     }
-}
+}
diff --git a/src/App.js b/src/App.js
@@ -17,28 +17,45 @@ import Boat from "./page/Boat";
 import Yacht from "./page/Yacht";
 import Event from "./page/Event";
 import RouterSee from "./page/RouterSee";
+import Berth from './page/Berth';
+
+import {UrlClassMoreInfoContext} from "./context/index";
 
 function App() {
+
+  const url={
+      boats:"/boats",
+      yachts:"/yachts",
+      routers:"/routers",
+      eventsSee:"/events",
+      berths:"/berths",
+      buffet:"/buffet",
+      about:"/about"
+  }
+
   return (
     <div className="App">
-        <Router>
-            <Navbar/>
-            <Routes>
-                <Route path="/" element={<Main/>}/>
-                <Route path="/berths" element={<Berths/>}/>
-                <Route path="/boats" element={<Boats/>}/>
-                <Route path="/boats/:id" element={<Boat/>}/>
-                <Route path="/yachts" element={<Yachts/>}/>
-                <Route path="/yachts/:id" element={<Yacht/>}/>
-                <Route path="/routers" element={<Routers/>}/>
-                <Route path="/routers/:id" element={<RouterSee/>}/>
-                <Route path="/events/:id" element={<Event/>}/>
-                <Route path="/events" element={<Events/>}/>
-                <Route path="/buffet" element={<Buffet/>}/>
-                <Route path="/about" element={<About/>}/>
-            </Routes>
-            <Footer/>
-        </Router>
+        <UrlClassMoreInfoContext.Provider value={url}>
+            <Router>
+                <Navbar/>
+                <Routes>
+                    <Route path="/" element={<Main/>}/>
+                    <Route path={url.berths} element={<Berths/>}/>
+                    <Route path={url.berths+"/:id"} element={<Berth/>}/>
+                    <Route path={url.boats} element={<Boats/>}/>
+                    <Route path={url.boats+"/:id"} element={<Boat/>}/>
+                    <Route path={url.yachts} element={<Yachts/>}/>
+                    <Route path={url.yachts+"/:id"} element={<Yacht/>}/>
+                    <Route path={url.routers} element={<Routers/>}/>
+                    <Route path={url.routers+"/:id"} element={<RouterSee/>}/>
+                    <Route path={url.eventsSee} element={<Events/>}/>
+                    <Route path={url.eventsSee+"/:id"} element={<Event/>}/>
+                    <Route path={url.buffet} element={<Buffet/>}/>
+                    <Route path={url.about} element={<About/>}/>
+                </Routes>
+                <Footer/>
+            </Router>
+        </UrlClassMoreInfoContext.Provider>
     </div>
   );
 }

diff --git a/src/component/Popular/PopularList.jsx b/src/component/Popular/PopularList.jsx
@@ -1,29 +1,31 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import PopularCard from "./PopularCard";
+import {UrlClassMoreInfoContext} from "../../context";
 
 const PopularList = ({popularList,title}) => {
+    const url = useContext(UrlClassMoreInfoContext);
     return (
         <div>
-            {popularList && popularList?.urlClassMoreInfo ?
+            {popularList ?
                 <div className="d-flex">
                 {popularList?.boats ?
                     popularList.boats.map((obj,index)=>{
-                        return (<PopularCard key={title + "_boats_" + obj?.name + index} {...obj} urlClassMoreInfo={popularList.urlClassMoreInfo?.boats} type="Катер"/>);
+                        return (<PopularCard key={title + "_boats_" + obj?.name + index} {...obj} urlClassMoreInfo={url.boats} type="Катер"/>);
                     })
                     :null}
                 {popularList?.yachts ?
                     popularList.yachts.map((obj,index)=>{
-                        return (<PopularCard key={title + "_yachts_" + obj?.name + index} {...obj} urlClassMoreInfo={popularList.urlClassMoreInfo?.yachts} type="Яхта"/>);
+                        return (<PopularCard key={title + "_yachts_" + obj?.name + index} {...obj} urlClassMoreInfo={url.yachts} type="Яхта"/>);
                     })
                     :null}
                 {popularList?.routers ?
                     popularList.routers.map((obj,index)=>{
-                        return (<PopularCard key={title + "_routers_" + obj?.name + index} {...obj} urlClassMoreInfo={popularList.urlClassMoreInfo?.routers} type="Маршрут"/>);
+                        return (<PopularCard key={title + "_routers_" + obj?.name + index} {...obj} urlClassMoreInfo={url.routers} type="Маршрут"/>);
                     })
                     :null}
                 {popularList?.eventsSee ?
                     popularList.eventsSee.map((obj,index)=>{
-                        return (<PopularCard key={title + "_eventsSee_" + obj?.name + index} {...obj} urlClassMoreInfo={popularList.urlClassMoreInfo?.eventsSee} type="Мероприятие"/>);
+                        return (<PopularCard key={title + "_eventsSee_" + obj?.name + index} {...obj} urlClassMoreInfo={url.eventsSee} type="Мероприятие"/>);
                     })
                     :null}
                 </div>

diff --git a/src/component/listPosts/PostBerth/PostBerth.jsx b/src/component/listPosts/PostBerth/PostBerth.jsx
@@ -6,23 +6,25 @@ const PostBerth = (props) => {
     return (
         <div className="col-12 col-md-6 col-lg-4 rounded-3 p-3">
                 <div className="pt-1">
-                    <h2 className="text-start m-0">{props?.name}</h2>
+                    <NavLink className="text-decoration-none" to={props.urlClassMoreInfo.berths+"/"+props?.id}>
+                        <h2 className={["text-start m-0",style.name_berth].join(" ")}>{props?.name}</h2>
+                    </NavLink>
                     <div className="shadow rounded mt-1 p-2">
-                        {props?.urlClassMoreInfo && props.urlClassMoreInfo.constructor === Array ?
+                        {props?.urlClassMoreInfo ?
                             props.ship.map((obj,index) => {
                                 return(
                                     <div className="p-1 m-0 mt-1" key={obj?.name + "_" + props?.id + "_" + "_" + obj?.id}>
                                         {obj.typeShip==="Яхта"
                                             ?
                                             <div>
-                                                <NavLink className={["text-decoration-none",style.name_ship].join(" ")} to={props.urlClassMoreInfo[1]+"/"+obj?.id}>{obj?.name}</NavLink>
+                                                <NavLink className={["text-decoration-none",style.name_ship].join(" ")} to={props.urlClassMoreInfo.yachts+"/"+obj?.id}>{obj?.name}</NavLink>
                                                 <span className={style.type_ship}>Яхта</span>
                                                 <span className="float-end">от {obj?.price} ₽/час</span>
                                                 <hr/>
                                             </div>
                                             :
                                             <div>
-                                                <NavLink className={["text-decoration-none",style.name_ship].join(" ")} to={props.urlClassMoreInfo[0]+"/"+obj?.id}>{obj?.name}</NavLink>
+                                                <NavLink className={["text-decoration-none",style.name_ship].join(" ")} to={props.urlClassMoreInfo.boats+"/"+obj?.id}>{obj?.name}</NavLink>
                                                 <span className={style.type_ship}>Катер</span>
                                                 <span className="float-end">от {obj?.price} ₽/час</span>
                                                 <hr/>

diff --git a/src/component/listPosts/PostBerth/PostBerth.module.css b/src/component/listPosts/PostBerth/PostBerth.module.css
@@ -9,4 +9,12 @@
 .type_ship{
     padding-left: 12px;
     font-size: 12px;
+}
+
+.name_berth{
+    color: black;
+}
+
+.name_berth:hover{
+    color: #007bff;
 }
diff --git a/src/component/listPosts/PostShip/PostShip.module.css b/src/component/listPosts/PostShip/PostShip.module.css
@@ -20,4 +20,12 @@
     width: 100%;
     position: absolute;
     z-index: 1;
+}
+
+.name_berth{
+    color: black;
+}
+
+.name_berth:hover{
+    color: #007bff;
 }
diff --git a/src/component/navbar/Navbar.jsx b/src/component/navbar/Navbar.jsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, {useContext} from 'react';
 
 import {Navbar as NavbarB, Container, Nav} from "react-bootstrap";
 import {FaPhoneAlt,FaWhatsapp,FaTelegram} from "react-icons/fa"
 import {NavLink} from "react-router-dom";
+import {UrlClassMoreInfoContext} from "../../context";
 
 const Navbar = () => {
     return (
@@ -15,13 +16,13 @@ const Navbar = () => {
                 <NavbarB.Collapse id="list-navbar-nav">
                     <Nav className="mx-auto">
                         <NavLink className="mx-auto mx-lg-2 my-2  text-decoration-none text-black" to={"/"}>Главная</NavLink>
-                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={"/boats"}>Катера</NavLink>
-                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={"/yachts"}>Яхты</NavLink>
-                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={"/berths"}>Причалы</NavLink>
-                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={"/routers"}>Маршруты</NavLink>
-                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={"/events"}>Мероприятия</NavLink>
-                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={"/buffet"}>Фуршет</NavLink>
-                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={"/about"}> О нас</NavLink>
+                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={useContext(UrlClassMoreInfoContext).boats}>Катера</NavLink>
+                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={useContext(UrlClassMoreInfoContext).yachts}>Яхты</NavLink>
+                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={useContext(UrlClassMoreInfoContext).berths}>Причалы</NavLink>
+                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={useContext(UrlClassMoreInfoContext).routers}>Маршруты</NavLink>
+                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={useContext(UrlClassMoreInfoContext).eventsSee}>Мероприятия</NavLink>
+                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={useContext(UrlClassMoreInfoContext).buffet}>Фуршет</NavLink>
+                        <NavLink className="mx-auto mx-lg-2 my-2 text-decoration-none text-black" to={useContext(UrlClassMoreInfoContext).about}> О нас</NavLink>
                     </Nav>
                     <div className="mx-auto my-2 d-flex justify-content-between">
                         <a className="mx-auto mx-lg-1 text-decoration-none text-black" href="tel:+7-953-349-61-09"><FaPhoneAlt/>+7 (953) 349-61-09</a>

diff --git a/src/context/index.js b/src/context/index.js
@@ -0,0 +1,3 @@
+import {createContext} from "react";
+
+export const UrlClassMoreInfoContext = createContext();
diff --git a/src/page/About.jsx b/src/page/About.jsx
@@ -1,10 +1,11 @@
-import React,{useState} from 'react';
+import React,{useState,useContext} from 'react';
 import {FaPhoneAlt,FaEnvelope} from "react-icons/fa";
 import PersonalityOrder from "../component/PersonalityOrder/PersonalityOrder";
 import ListPosts from "../component/listPosts/ListPosts";
 import CarouselCard from  "../component/carousel/CarouselCard";
 import PostRoute from "../component/listPosts/PostRouter/PostRoute";
 import Hr from "../component/hr/Hr";
+import {UrlClassMoreInfoContext} from "../context";
 
 const About = () => {
 
@@ -53,8 +54,8 @@ const About = () => {
 
             <div className="container my-5">
                 <Hr/>
-                <CarouselCard title="Маршруты" size={sizeCarouselCard} urlMore={"/events"}>
-                    <ListPosts urlClassMoreInfo="/events" PostType={PostRoute} posts={routersPostFirst} isAdaptive={false}/>
+                <CarouselCard title="Маршруты" size={sizeCarouselCard} urlMore={useContext(UrlClassMoreInfoContext).routers}>
+                    <ListPosts urlClassMoreInfo={useContext(UrlClassMoreInfoContext).routers} PostType={PostRoute} posts={routersPostFirst} isAdaptive={false}/>
                 </CarouselCard>
                 <PersonalityOrder title="ПОЛУЧИТЬ ПЕРСОНАЛЬНОЕ ПРЕДЛОЖЕНИЕ" callback={sendProposal}/>
             </div>

diff --git a/src/page/Berth.jsx b/src/page/Berth.jsx
@@ -0,0 +1,104 @@
+import React, {useState,useContext} from 'react';
+import {NavLink, useParams} from "react-router-dom";
+import {UrlClassMoreInfoContext} from "../context";
+import ListPosts from "../component/listPosts/ListPosts";
+import PostShip from "../component/listPosts/PostShip/PostShip";
+import {FaArrowCircleRight} from "react-icons/fa";
+import Hr from "../component/hr/Hr";
+import PersonalityOrder from "../component/PersonalityOrder/PersonalityOrder";
+
+const Berth = () => {
+    const params=useParams();
+    console.log(params.id);
+
+    const [berths,setBerths] = useState({
+        id:'1',
+        name:'Имя причала',
+        text:"Причал Академика Павлова 11а находится в Санкт-Петербурге на Петроградской стороне и представляет собой удобное место для аренды катеров и яхт.",
+        map_src:'https://yandex.ru/map-widget/v1/?um=constructor%3A977f381de48c940e7de728b41d0e13006be886b476c3bdd9f146375250868623&amp;source=constructor'
+    });
+
+    const [boatsPostOnHere,setBoatsPostOnHere] = useState([
+        {id:"1",name:"имя",pier:"имя причала",onBoard:"на борту, на борту, на борту.",minTime:"00:01",countPerson:"1",oldPrice:"1000",price:"500",isHit:"true",imgPath:"../img/page/boats.jpg"},
+        {id:"2",name:"имя",pier:"имя причала",onBoard:"на борту, на борту, на борту.",minTime:"00:15",countPerson:"2",oldPrice:"",price:"2000",isHit:"false",imgPath:"../img/page/boats.jpg"},
+        {id:"3",name:"имя",pier:"имя причала",onBoard:"на борту, на борту, на борту.",minTime:"00:22",countPerson:"3",oldPrice:"",price:"3000",isHit:"true",imgPath:"../img/page/boats.jpg"},
+        {id:"4",name:"имя",pier:"имя причала",onBoard:"на борту, на борту, на борту.",minTime:"20:15",countPerson:"4",oldPrice:"23",price:"4000",isHit:"false",imgPath:"../img/page/boats.jpg"},
+    ]);
+
+    const [yachtsPostOnHere,setYachtsPostOnHere] = useState([
+        {id:"1",name:"имя",pier:"имя причала",onBoard:"на борту, на борту, на борту.",minTime:"00:01",countPerson:"1",oldPrice:"1000",price:"500",isHit:"true",imgPath:"../img/page/yachts.jpg"},
+        {id:"2",name:"имя",pier:"имя причала",onBoard:"на борту, на борту, на борту.",minTime:"00:15",countPerson:"2",oldPrice:"",price:"2000",isHit:"false",imgPath:"../img/page/yachts.jpg"},
+        {id:"3",name:"имя",pier:"имя причала",onBoard:"на борту, на борту, на борту.",minTime:"00:22",countPerson:"3",oldPrice:"",price:"3000",isHit:"true",imgPath:"../img/page/yachts.jpg"},
+        {id:"4",name:"имя",pier:"имя причала",onBoard:"на борту, на борту, на борту.",minTime:"20:15",countPerson:"4",oldPrice:"23",price:"4000",isHit:"false",imgPath:"../img/page/yachts.jpg"},
+        {id:"5",name:"имя",pier:"имя причала",onBoard:"на борту, на борту, на борту.",minTime:"00:01",countPerson:"1",oldPrice:"1000",price:"500",isHit:"true",imgPath:"../img/page/yachts.jpg"},
+    ]);
+
+    const sendProposal = (message) =>{
+        //{name:"",phone:"",date:"",time:"",text:""}
+        console.log(message);
+    }
+
+    return (
+        <div className="content mt-3 pt-5">
+            <div className="container shadow d-grid align-content-center  p-lg-3">
+                <div className="row">
+                    <div className="col-12 py-3 col-lg-6 py-lg-0 align-self-center justify-content-center">
+                        <iframe className="w-100"
+                            src={berths.map_src}
+                            height="400" frameBorder="0"></iframe>
+                    </div>
+                    <div className="col-12 py-3 col-lg-6 py-lg-0">
+                        <ol className="breadcrumb py-2">
+                            <li className="breadcrumb-item">
+                                <NavLink className="mx-0  text-decoration-none text-black" to={"/"}>Главная</NavLink>
+                            </li>
+                            <li className="breadcrumb-item">
+                                <NavLink className="mx-0 text-decoration-none text-black" to={useContext(UrlClassMoreInfoContext).berths} >Причалы</NavLink>
+                            </li>
+                            <li className="breadcrumb-item active">
+                                <NavLink className="mx-0 text-decoration-none text-black" to={"#"}>{berths.name}</NavLink>
+                            </li>
+                        </ol>
+                        <h1>{berths.name}</h1>
+                        <p>{berths.text}</p>
+                    </div>
+                </div>
+            </div>
+
+            <div className="container my-3">
+                <div className="container my-3">
+                    <div className="p-3">
+                        <h1 className="text-center mx-auto">Катера на этом причале</h1>
+                    </div>
+                    <ListPosts isAdaptive={true} urlClassMoreInfo={useContext(UrlClassMoreInfoContext).boats} PostType={PostShip} posts={boatsPostOnHere}/>
+                    <div className="d-flex justify-content-center">
+                        <NavLink className="btn btn-success border-3 text-start m-2 p-2" to={useContext(UrlClassMoreInfoContext).boats}>
+                            Смотреть ещё
+                            <FaArrowCircleRight className="float-end ms-4" size="1.5rem" color="white"/>
+                        </NavLink>
+                    </div>
+                </div>
+
+                <Hr/>
+
+                <div className="container my-3">
+                    <div className="p-3">
+                        <h1 className="text-center mx-auto">Яхты на этом причале</h1>
+                    </div>
+                    <ListPosts isAdaptive={true} urlClassMoreInfo={useContext(UrlClassMoreInfoContext).yachts} PostType={PostShip} posts={yachtsPostOnHere}/>
+                    <div className="d-flex justify-content-center">
+                        <NavLink className="btn btn-success border-3 text-start m-2 p-2" to={useContext(UrlClassMoreInfoContext).yachts}>
+                            Смотреть ещё
+                            <FaArrowCircleRight className="float-end ms-4" size="1.5rem" color="white"/>
+                        </NavLink>
+                    </div>
+                </div>
+
+                <PersonalityOrder title="ПОДГОТОВИТЬ ДЛЯ ВАС СПЕЦ ПРЕДЛОЖЕНИЕ?" callback={sendProposal}/>
+            </div>
+
+        </div>
+    );
+};
+
+export default Berth;
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,4 +16,4 @@ @@
         a{
             font-size: 12px;
         }
-    }
+    }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import {createContext} from "react";

		export const UrlClassMoreInfoContext = createContext();