Merge pull request #3 from mgmman/module3-task1

htmlacademy-univer-javascript-3 · Oct 15, 2024 · 4f224ba · 4f224ba
2 parents 6d95e60 + 5c60a56
commit 4f224ba
Show file tree

Hide file tree

Showing 13 changed files with 546 additions and 153 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,6 +15,7 @@ Thumbs.db
 .DS_Store
 .env
 *.log*
+*.lock*
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/package.json b/package.json
@@ -16,9 +16,10 @@
     "history": "5.3.0",
     "http-status-codes": "2.3.0",
     "leaflet": "1.7.1",
+    "prettier": "^3.3.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-helmet-async": "1.3.0",
+    "react-helmet-async": "^2.0.5",
     "react-redux": "8.1.3",
     "react-router-dom": "6.16.0"
   },

diff --git a/src/DataTypes/AppRoutes.tsx b/src/DataTypes/AppRoutes.tsx
@@ -0,0 +1,6 @@
+export enum AppRoutes {
+  MainPage = '/',
+  Login = '/login',
+  Offer = '/offer/:id',
+  Favorites = '/favorites',
+}
diff --git a/src/Pages/FavoritesPage.tsx b/src/Pages/FavoritesPage.tsx
@@ -1,3 +1,5 @@
+import { Helmet } from 'react-helmet-async';
+
 export function FavoritesPage(): React.JSX.Element {
   return (
     <div className="page">
@@ -6,16 +8,26 @@ export function FavoritesPage(): React.JSX.Element {
           <div className="header__wrapper">
             <div className="header__left">
               <a className="header__logo-link" href="main.html">
-                <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41"/>
+                <img
+                  className="header__logo"
+                  src="img/logo.svg"
+                  alt="6 cities logo"
+                  width="81"
+                  height="41"
+                />
               </a>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">
                 <li className="header__nav-item user">
-                  <a className="header__nav-link header__nav-link--profile" href="#">
-                    <div className="header__avatar-wrapper user__avatar-wrapper">
-                    </div>
-                    <span className="header__user-name user__name">[email protected]</span>
+                  <a
+                    className="header__nav-link header__nav-link--profile"
+                    href="#"
+                  >
+                    <div className="header__avatar-wrapper user__avatar-wrapper"></div>
+                    <span className="header__user-name user__name">
+                      [email protected]
+                    </span>
                     <span className="header__favorite-count">3</span>
                   </a>
                 </li>
@@ -31,6 +43,9 @@ export function FavoritesPage(): React.JSX.Element {
       </header>
 
       <main className="page__main page__main--favorites">
+        <Helmet>
+          <title>6 cities - favorites</title>
+        </Helmet>
         <div className="page__favorites-container container">
           <section className="favorites">
             <h1 className="favorites__title">Saved listing</h1>
@@ -50,25 +65,40 @@ export function FavoritesPage(): React.JSX.Element {
                     </div>
                     <div className="favorites__image-wrapper place-card__image-wrapper">
                       <a href="#">
-                        <img className="place-card__image" src="img/apartment-small-03.jpg" width="150" height="110" alt="Place image"/>
+                        <img
+                          className="place-card__image"
+                          src="img/apartment-small-03.jpg"
+                          width="150"
+                          height="110"
+                          alt="Place image"
+                        />
                       </a>
                     </div>
                     <div className="favorites__card-info place-card__info">
                       <div className="place-card__price-wrapper">
                         <div className="place-card__price">
                           <b className="place-card__price-value">&euro;180</b>
-                          <span className="place-card__price-text">&#47;&nbsp;night</span>
+                          <span className="place-card__price-text">
+                            &#47;&nbsp;night
+                          </span>
                         </div>
-                        <button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
-                          <svg className="place-card__bookmark-icon" width="18" height="19">
+                        <button
+                          className="place-card__bookmark-button place-card__bookmark-button--active button"
+                          type="button"
+                        >
+                          <svg
+                            className="place-card__bookmark-icon"
+                            width="18"
+                            height="19"
+                          >
                             <use xlinkHref="#icon-bookmark"></use>
                           </svg>
                           <span className="visually-hidden">In bookmarks</span>
                         </button>
                       </div>
                       <div className="place-card__rating rating">
                         <div className="place-card__stars rating__stars">
-                          <span style={{width: '100%'}}></span>
+                          <span style={{ width: '100%' }}></span>
                           <span className="visually-hidden">Rating</span>
                         </div>
                       </div>
@@ -82,25 +112,40 @@ export function FavoritesPage(): React.JSX.Element {
                   <article className="favorites__card place-card">
                     <div className="favorites__image-wrapper place-card__image-wrapper">
                       <a href="#">
-                        <img className="place-card__image" src="img/room-small.jpg" width="150" height="110" alt="Place image"/>
+                        <img
+                          className="place-card__image"
+                          src="img/room-small.jpg"
+                          width="150"
+                          height="110"
+                          alt="Place image"
+                        />
                       </a>
                     </div>
                     <div className="favorites__card-info place-card__info">
                       <div className="place-card__price-wrapper">
                         <div className="place-card__price">
                           <b className="place-card__price-value">&euro;80</b>
-                          <span className="place-card__price-text">&#47;&nbsp;night</span>
+                          <span className="place-card__price-text">
+                            &#47;&nbsp;night
+                          </span>
                         </div>
-                        <button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
-                          <svg className="place-card__bookmark-icon" width="18" height="19">
+                        <button
+                          className="place-card__bookmark-button place-card__bookmark-button--active button"
+                          type="button"
+                        >
+                          <svg
+                            className="place-card__bookmark-icon"
+                            width="18"
+                            height="19"
+                          >
                             <use xlinkHref="#icon-bookmark"></use>
                           </svg>
                           <span className="visually-hidden">In bookmarks</span>
                         </button>
                       </div>
                       <div className="place-card__rating rating">
                         <div className="place-card__stars rating__stars">
-                          <span style={{width: '100%'}}></span>
+                          <span style={{ width: '100%' }}></span>
                           <span className="visually-hidden">Rating</span>
                         </div>
                       </div>
@@ -125,25 +170,40 @@ export function FavoritesPage(): React.JSX.Element {
                   <article className="favorites__card place-card">
                     <div className="favorites__image-wrapper place-card__image-wrapper">
                       <a href="#">
-                        <img className="place-card__image" src="img/apartment-small-04.jpg" width="150" height="110" alt="Place image"/>
+                        <img
+                          className="place-card__image"
+                          src="img/apartment-small-04.jpg"
+                          width="150"
+                          height="110"
+                          alt="Place image"
+                        />
                       </a>
                     </div>
                     <div className="favorites__card-info place-card__info">
                       <div className="place-card__price-wrapper">
                         <div className="place-card__price">
                           <b className="place-card__price-value">&euro;180</b>
-                          <span className="place-card__price-text">&#47;&nbsp;night</span>
+                          <span className="place-card__price-text">
+                            &#47;&nbsp;night
+                          </span>
                         </div>
-                        <button className="place-card__bookmark-button place-card__bookmark-button--active button" type="button">
-                          <svg className="place-card__bookmark-icon" width="18" height="19">
+                        <button
+                          className="place-card__bookmark-button place-card__bookmark-button--active button"
+                          type="button"
+                        >
+                          <svg
+                            className="place-card__bookmark-icon"
+                            width="18"
+                            height="19"
+                          >
                             <use xlinkHref="#icon-bookmark"></use>
                           </svg>
                           <span className="visually-hidden">In bookmarks</span>
                         </button>
                       </div>
                       <div className="place-card__rating rating">
                         <div className="place-card__stars rating__stars">
-                          <span style={{width: '100%'}}></span>
+                          <span style={{ width: '100%' }}></span>
                           <span className="visually-hidden">Rating</span>
                         </div>
                       </div>
@@ -161,7 +221,13 @@ export function FavoritesPage(): React.JSX.Element {
       </main>
       <footer className="footer container">
         <a className="footer__logo-link" href="main.html">
-          <img className="footer__logo" src="img/logo.svg" alt="6 cities logo" width="64" height="33"/>
+          <img
+            className="footer__logo"
+            src="img/logo.svg"
+            alt="6 cities logo"
+            width="64"
+            height="33"
+          />
         </a>
       </footer>
     </div>

diff --git a/src/Pages/LoginPage.tsx b/src/Pages/LoginPage.tsx
@@ -1,3 +1,5 @@
+import { Helmet } from 'react-helmet-async';
+
 export function LoginPage(): React.JSX.Element {
   return (
     <div className="page page--gray page--login">
@@ -6,27 +8,53 @@ export function LoginPage(): React.JSX.Element {
           <div className="header__wrapper">
             <div className="header__left">
               <a className="header__logo-link" href="main.html">
-                <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41"/>
+                <img
+                  className="header__logo"
+                  src="img/logo.svg"
+                  alt="6 cities logo"
+                  width="81"
+                  height="41"
+                />
               </a>
             </div>
           </div>
         </div>
       </header>
 
       <main className="page__main page__main--login">
+        <Helmet>
+          <title>6 cities - login</title>
+        </Helmet>
         <div className="page__login-container container">
           <section className="login">
             <h1 className="login__title">Sign in</h1>
             <form className="login__form form" action="#" method="post">
               <div className="login__input-wrapper form__input-wrapper">
                 <label className="visually-hidden">E-mail</label>
-                <input className="login__input form__input" type="email" name="email" placeholder="Email" required/>
+                <input
+                  className="login__input form__input"
+                  type="email"
+                  name="email"
+                  placeholder="Email"
+                  required
+                />
               </div>
               <div className="login__input-wrapper form__input-wrapper">
                 <label className="visually-hidden">Password</label>
-                <input className="login__input form__input" type="password" name="password" placeholder="Password" required/>
+                <input
+                  className="login__input form__input"
+                  type="password"
+                  name="password"
+                  placeholder="Password"
+                  required
+                />
               </div>
-              <button className="login__submit form__submit button" type="submit">Sign in</button>
+              <button
+                className="login__submit form__submit button"
+                type="submit"
+              >
+                Sign in
+              </button>
             </form>
           </section>
           <section className="locations locations--login locations--current">
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,7 @@ Thumbs.db @@
     .DS_Store
     .env
     *.log*
+    *.lock*
     npm-debug.log*
     yarn-debug.log*
@@ Expand Down @@