done main-page-empty

htmlacademy-univer-javascript-3 · Nov 30, 2024 · ef6b355 · ef6b355
1 parent 5c4db2a
commit ef6b355
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="src/pages/not-found-page/not-found-page.css">
   <link rel="stylesheet" href="src/components/spinner/spinner.css">
+  <link rel="stylesheet" href="src/pages/main-page/main-page-empty.css">
 </head>
 
 <body>

diff --git a/src/Pages/main-page/main-page-empty.css b/src/Pages/main-page/main-page-empty.css
@@ -0,0 +1,4 @@
+.no-offers {
+  background-image: url("../../../public/img/[email protected]");
+  background-size: cover;
+}
diff --git a/src/Pages/main-page/main-page.tsx b/src/Pages/main-page/main-page.tsx
@@ -19,52 +19,69 @@ export function MainPage(): React.JSX.Element {
   const [activeOffer, setActiveOffer] = useState<Nullable<Offer>>(null);
   const city = useAppSelector(getCity);
   const offers = useAppSelector(getSortedOffers);
-  const offersCountCaption =
-    offers.length === 0
-      ? 'No places to stay available'
-      : `${pluralizeAndCombine('place', offers.length)} to stay in ${city.name}`;
+  const handleActiveOfferChange = useCallback(
+    (offer: Nullable<Offer>) => setActiveOffer(offer),
+    [],
+  );
+  const offersCountCaption = `${pluralizeAndCombine('place', offers.length)} to stay in ${city.name}`;
   return (
     <div className="page page--gray page--main">
       <Layout>
         <main className="page__main page__main--index">
           <Helmet>6 cities</Helmet>
           <h1 className="visually-hidden">Cities</h1>
           <CitiesList activeCityName={city.name} />
-          <div className="cities">
-            <div className="cities__places-container container">
-              <section className="cities__places places">
-                <h2 className="visually-hidden">Places</h2>
-                <b className="places__found">{offersCountCaption}</b>
-                <OfferSortSelect />
-                <OffersList
-                  offers={offers}
-                  onActiveOfferChange={useCallback(
-                    (offer: Nullable<Offer>) => setActiveOffer(offer),
-                    [],
-                  )}
-                  isOnMainPage
-                />
-              </section>
-              <div className="cities__right-section">
-                <Map
-                  city={city}
-                  points={offers.map((x) => ({
-                    location: x.location,
-                    id: x.id,
-                  }))}
-                  selectedPoint={
-                    activeOffer
-                      ? {
-                          location: activeOffer?.location,
-                          id: activeOffer?.id,
-                        }
-                      : undefined
-                  }
-                  isOnMainPage
-                />
+          {offers.length > 0 ? (
+            <div className="cities">
+              <div className="cities__places-container container">
+                <section className="cities__places places">
+                  <h2 className="visually-hidden">Places</h2>
+                  <b className="places__found">{offersCountCaption}</b>
+                  <OfferSortSelect />
+                  <OffersList
+                    offers={offers}
+                    onActiveOfferChange={handleActiveOfferChange}
+                    isOnMainPage
+                  />
+                </section>
+                <div className="cities__right-section">
+                  <Map
+                    city={city}
+                    points={offers.map((x) => ({
+                      location: x.location,
+                      id: x.id,
+                    }))}
+                    selectedPoint={
+                      activeOffer
+                        ? {
+                            location: activeOffer?.location,
+                            id: activeOffer?.id,
+                          }
+                        : undefined
+                    }
+                    isOnMainPage
+                  />
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="cities">
+              <div className="cities__places-container cities__places-container--empty container">
+                <section className="cities__no-places">
+                  <div className="cities__status-wrapper tabs__content">
+                    <b className="cities__status">
+                      No places to stay available
+                    </b>
+                    <p className="cities__status-description">
+                      {`We could not find any property available at the moment in
+                        ${city.name}`}
+                    </p>
+                  </div>
+                </section>
+                <div className="cities__right-section no-offers"></div>
               </div>
             </div>
-          </div>
+          )}
         </main>
       </Layout>
     </div>