frontend-park-mail-ru · Nikita-hub000 · Oct 25, 2024 · Oct 23, 2024 · Oct 25, 2024
diff --git a/components/AdCard/AdCard.hbs b/components/AdCard/AdCard.hbs
@@ -1,49 +1,88 @@
-<div class="ad-card" id="card-{{id}}">
+<div class='ad-card' id='card-{{id}}'>
     <!-- ID is used for js not styles -->
-    <img class="ad_card__img1" src="{{mainPicture}}" alt="Ad card image">
-    <div class="ad-card__image-pagination-div">
+    <img class='ad_card__img1' src='{{images.[0]}}' alt='Ad card image' />
+    <div class='ad-card__image-pagination-div'>
         <!-- Здесь будут кружочки -->
         <!--        <div class="circle-full"></div>-->
         <!--        <div class="circle-empty"></div>-->
     </div>
 
-    <button class="ad-card__button">
-        <svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g style="mix-blend-mode:multiply" filter="url(#filter0_d_181_2)">
-                <circle cx="21.5" cy="17.5" r="17.5" fill="#9D9999" />
+    <button class='ad-card__button'>
+        <svg
+            width='43'
+            height='43'
+            viewBox='0 0 43 43'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <g style='mix-blend-mode:multiply' filter='url(#filter0_d_181_2)'>
+                <circle cx='21.5' cy='17.5' r='17.5' fill='#9D9999' />
             </g>
-            <path fill-rule="evenodd" clip-rule="evenodd"
-                  d="M22 13.0001C20.5005 11.2526 17.9948 10.7126 16.116 12.3128C14.2372 13.913 13.9727 16.5884 15.4481 18.481C16.6749 20.0545 20.3873 23.3732 21.6041 24.4474C21.7402 24.5676 21.8082 24.6276 21.8877 24.6512C21.9569 24.6718 22.0327 24.6718 22.1021 24.6512C22.1815 24.6276 22.2495 24.5676 22.3857 24.4474C23.6024 23.3732 27.3148 20.0545 28.5416 18.481C30.017 16.5884 29.7848 13.8961 27.8737 12.3128C25.9626 10.7294 23.4995 11.2526 22 13.0001Z"
-                  stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <path
+                fill-rule='evenodd'
+                clip-rule='evenodd'
+                d='M22 13.0001C20.5005 11.2526 17.9948 10.7126 16.116 12.3128C14.2372 13.913 13.9727 16.5884 15.4481 18.481C16.6749 20.0545 20.3873 23.3732 21.6041 24.4474C21.7402 24.5676 21.8082 24.6276 21.8877 24.6512C21.9569 24.6718 22.0327 24.6718 22.1021 24.6512C22.1815 24.6276 22.2495 24.5676 22.3857 24.4474C23.6024 23.3732 27.3148 20.0545 28.5416 18.481C30.017 16.5884 29.7848 13.8961 27.8737 12.3128C25.9626 10.7294 23.4995 11.2526 22 13.0001Z'
+                stroke='white'
+                stroke-width='2'
+                stroke-linecap='round'
+                stroke-linejoin='round'
+            />
             <defs>
-                <filter id="filter0_d_181_2" x="0" y="0" width="43" height="43" filterUnits="userSpaceOnUse"
-                        color-interpolation-filters="sRGB">
-                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                                   result="hardAlpha" />
-                    <feOffset dy="4" />
-                    <feGaussianBlur stdDeviation="2" />
-                    <feComposite in2="hardAlpha" operator="out" />
-                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_181_2" />
-                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_181_2" result="shape" />
+                <filter
+                    id='filter0_d_181_2'
+                    x='0'
+                    y='0'
+                    width='43'
+                    height='43'
+                    filterUnits='userSpaceOnUse'
+                    color-interpolation-filters='sRGB'
+                >
+                    <feFlood flood-opacity='0' result='BackgroundImageFix' />
+                    <feColorMatrix
+                        in='SourceAlpha'
+                        type='matrix'
+                        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
+                        result='hardAlpha'
+                    />
+                    <feOffset dy='4' />
+                    <feGaussianBlur stdDeviation='2' />
+                    <feComposite in2='hardAlpha' operator='out' />
+                    <feColorMatrix
+                        type='matrix'
+                        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'
+                    />
+                    <feBlend
+                        mode='normal'
+                        in2='BackgroundImageFix'
+                        result='effect1_dropShadow_181_2'
+                    />
+                    <feBlend
+                        mode='normal'
+                        in='SourceGraphic'
+                        in2='effect1_dropShadow_181_2'
+                        result='shape'
+                    />
                 </filter>
             </defs>
         </svg>
     </button>
 
-    <div class="ad-card__info">
-        <div class="ad-card__location">
-            <p class="ad-card__p1">{{locationMain}}</p>
-            <p class="ad-card__p2">{{locationStreet}}</p>
-            <a href="{{onMap}}" class="ad-card__href">Показать на карте</a>
+    <div class='ad-card__info'>
+        <div class='ad-card__location'>
+            <p class='ad-card__p1'>{{locationMain}}</p>
+            <p class='ad-card__p2'>{{locationStreet}}</p>
+            <a href='{{onMap}}' class='ad-card__href'>Показать на карте</a>
         </div>
-        <div class="ad-card__author-info">
-            <img class="ad-card__img2" src="{{author.avatar}}" alt="User avatar">
+        <div class='ad-card__author-info'>
+            <img
+                class='ad-card__img2'
+                src='{{author.avatar}}'
+                alt='User avatar'
+            />
             <p>{{author.name}}</p>
-            <div class="ad-card__score-container">
-                <img class="ad-card__img3" src="images/star.png" alt="star">
-                <span class="ad-card__score">{{author.score}}</span>
+            <div class='ad-card__score-container'>
+                <img class='ad-card__img3' src='images/star.png' alt='star' />
+                <span class='ad-card__score'>{{author.score}}</span>
             </div>
         </div>
     </div>

diff --git a/components/AdCard/AdCard.ts b/components/AdCard/AdCard.ts
@@ -2,29 +2,21 @@
 
 const SCROLL_DELAY = 200;
 
-interface CardData {
-    id: number;
-    mainPicture: string;
-    pictures: string[];
-}
+import { AdCardData } from '../../modules/Types';
 
 /** Карточка объявления на главной странице */
 class AdCard {
-    #data: CardData;
+    #data: AdCardData;
     #currentImgIndex: number;
     #circles: HTMLDivElement[];
     private parent: HTMLDivElement | null | undefined;
 
     /** @param {object} data - информация о карточке
      @param {HTMLDivElement} parent - родитель, в чьем списке детей будет карточка */
-    constructor(
-        data: { pictures: string[]; id: number; mainPicture: string },
-        parent: HTMLDivElement | null | undefined
-    ) {
+    constructor(data: AdCardData, parent: HTMLDivElement | null | undefined) {
         this.#data = data;
         this.parent = parent!;
 
-        this.#data.mainPicture = data.pictures[0];
         this.#currentImgIndex = 0;
         this.#circles = [];
 
@@ -34,7 +26,7 @@
    }

    render() {
        const template = Handlebars.templates['AdCard.hbs'];
        const templateContainer = document.createElement('div');

        templateContainer.innerHTML = template(this.#data);
@@ -62,7 +54,7 @@
         const imgElem: HTMLImageElement =
             thisElement.querySelector('.ad_card__img1')!;
 
-        const imagesAmount = Math.min(this.#data.pictures.length, 7); // We must only show max amount of 7!
+        const imagesAmount = Math.min(this.#data.images.length, 7); // We must only show max amount of 7!
         const areaFraction =
             imgElem.getBoundingClientRect().width / imagesAmount;
 
@@ -97,7 +89,7 @@
         setTimeout(() => {
             this.#makeCircleActive(toShowIndex);
             this.#currentImgIndex = toShowIndex;
-            imgElem.src = this.#data.pictures[toShowIndex];
+            imgElem.src = this.#data.images[toShowIndex];
         }, SCROLL_DELAY);
     }
 
@@ -109,7 +101,7 @@
         setTimeout(() => {
             this.#makeCircleActive(0);
             this.#currentImgIndex = 0;
-            imgElem.src = this.#data.pictures[0];
+            imgElem.src = this.#data.images[0];
         }, SCROLL_DELAY);
     }
 

diff --git a/components/AuthPopup/AuthPopup.ts b/components/AuthPopup/AuthPopup.ts
@@ -1,9 +1,8 @@
 'use strict';
 
+import APIClient from '../../modules/ApiClient';
 import Validation from '../../modules/Validation';
 
-import { login, register } from '../../modules/Auth';
-
 class AuthPopup {
     #config;
     #currentState;
@@ -235,7 +234,7 @@
 
         if (this.#currentState === 'signup') {
             try {
-                const res = await register({
+                const res = await APIClient.register({
                     name: data['name'],
                     username: data['username'],
                     password: data['password'],
@@ -252,7 +251,7 @@
             return;
         }
 
-        login({
+        APIClient.login({
             username: data['username'],
             password: data['password'],
         })
@@ -294,7 +293,7 @@
     *
     */
    render(parent: HTMLElement): void {
        const template = Handlebars.templates['AuthPopup.hbs'];
        const templateContainer = document.createElement('div');

        const data = this.#config[this.#currentState];

diff --git a/components/Filter/Filter.scss b/components/Filter/Filter.scss
@@ -8,8 +8,6 @@
 }
 
 .filter {
-    pointer-events: none;
-    opacity: 0.5;
     grid-area: aside;
     padding-inline-start: 5%;
     padding-inline-end: 5%;

diff --git a/components/MainPage/MainPage.ts b/components/MainPage/MainPage.ts
@@ -2,20 +2,32 @@
 
 import Filter from '../Filter/Filter';
 import AdCard from '../AdCard/AdCard';
+import { AdCardData } from '../../modules/Types';
 import MainPhoto from '../MainPhoto/MainPhoto';
-import { BACKEND_URL } from '../../modules/Consts';
+import APIClient from '../../modules/ApiClient';
 
 /** Главная страница с витриной объявлений, поиском и фильтрами */
 class MainPage {
     #root;
     #mainPhotoContainer;
     #pageContent;
     #adsContainer;
+    #adsData: any;
 
     constructor(root: HTMLDivElement) {
         this.#root = root;
+        this.#adsData = [];
 
-        this.#mainPhotoContainer = new MainPhoto();
+        this.#mainPhotoContainer = new MainPhoto(
+            async (locationMain: string) => {
+                const filters = {
+                    locationMain: locationMain,
+                };
+                const data = await APIClient.getAds(filters);
+                this.#adsData = data;
+                this.render();
+            }
+        );
 
         this.#pageContent = document.createElement('div');
         this.#pageContent.id = 'main-content';
@@ -27,22 +39,28 @@ class MainPage {
         // Здесь будет витрина
         this.#adsContainer = document.createElement('div');
         this.#adsContainer.classList.add('advert');
+
+        APIClient.getAds().then((data) => {
+            this.#adsData = data;
+            this.render();
+        });
     }
 
     /**
      * @public
      */
     async render() {
-        try {
-            const response = await fetch(BACKEND_URL + '/ads');
-            let data = await response.json();
-            data = data['places'];
-            for (const [_, d] of Object.entries(data)) {
-                const card = new AdCard(d, this.#adsContainer);
-                card.render();
-            }
-        } catch (error) {
-            console.error(error);
+        this.#adsContainer.replaceChildren();
+        for (const fetchedCardData of this.#adsData) {
+            const cardData: AdCardData = {
+                id: fetchedCardData.id,
+                images: fetchedCardData.Images,
+                locationMain: fetchedCardData.location_main,
+                locationStreet: fetchedCardData.location_street,
+                author: fetchedCardData.author,
+            };
+            const card = new AdCard(cardData, this.#adsContainer);
+            card.render();
         }
 
         this.#pageContent.appendChild(this.#adsContainer);

diff --git a/components/MainPhoto/MainPhoto.ts b/components/MainPhoto/MainPhoto.ts
@@ -2,8 +2,10 @@
 
 class MainPhoto {
     #mainPhotoContainer;
+    #onSearchButtonClick;
 
-    constructor() {
+    constructor(onSearch: any) {
+        this.#onSearchButtonClick = onSearch;
         this.#mainPhotoContainer = document.createElement('div');
         this.#mainPhotoContainer.classList.add('photo-container');
 
@@ -26,7 +28,6 @@ class MainPhoto {
         beHost.text = 'Стать хостом';
         findHost.href = '#';
         beHost.href = '#';
-        searchCityForm.action = '#';
         search.placeholder = 'Поиск по городам';
 
         searchButtonDiv.classList.add('custom-search');
@@ -37,6 +38,11 @@ class MainPhoto {
         hostsHrefs.appendChild(beHost);
         this.#mainPhotoContainer.appendChild(hostsHrefs);
 
+        searchCityForm.onsubmit = (e) => {
+            e.preventDefault();
+            this.#onSearchButtonClick(search.value);
+        };
+
         searchButtonDiv.appendChild(search);
         searchButtonDiv.appendChild(findButton);
         searchCityForm.appendChild(searchButtonDiv);