Пришёл, увидел, загрузил (часть 1)

src/destinations-api-service.js

@@ -0,0 +1,18 @@
+/* eslint-disable no-console */
+import ApiService from './framework/api-service.js';
+
+export default class DestinationsApiService extends ApiService {
+  get destinations() {
+    return this._fetchData({url: 'destinations'});
+  }
+
+  async _fetchData(config) {
+    try {
+      const response = await this._load(config);
+      return await ApiService.parseResponse(response);
+    } catch (error) {
+      console.error('Failed to fetch data:', error);
+      throw error;
+    }
+  }
+}

src/main.js

@@ -6,18 +6,33 @@ import NewPointBtnView from './view/new-point-button-view';
 import FilterModel from './model/filters-model';
 import FilterPresenter from './presenter/filter-presenter';
 import { render } from './framework/render';
+import PointsApiService from './points-api-service';
+import DestinationsApiService from './destinations-api-service';
+import OffersApiService from './offers-api-service';
+
+const AUTHORIZATION = 'Basic hsdl3232JDSkfkd';
+const END_POINT = 'https://21.objects.htmlacademy.pro/big-trip';
 
 const bodyElement = document.querySelector('body');
 const headerElement = bodyElement.querySelector('.page-header');
 //const mainElement = bodyElement.querySelector('.page-main');
 const siteListFilter = headerElement.querySelector('.trip-controls__filters');
 const tripMain = headerElement.querySelector('.trip-main');
 const eventsList = bodyElement.querySelector('.trip-events');
-const pointsModel = new PointsModel();
-const destinationsModel = new DestinationsModel();
-const offersModel = new OffersModel();
 const filterModel = new FilterModel();
 
+const pointsModel = new PointsModel({
+  pointsApiService: new PointsApiService(END_POINT, AUTHORIZATION),
+});
+
+const destinationsModel = new DestinationsModel({
+  destinationsApiService: new DestinationsApiService(END_POINT, AUTHORIZATION),
+});
+
+const offersModel = new OffersModel({
+  offersApiService: new OffersApiService(END_POINT, AUTHORIZATION),
+});
+
 const boardPresenter = new BoardPresenter({
   container: eventsList,
   headerContainer: tripMain,
@@ -49,6 +64,14 @@ function handleNewPointButtonClick() {
 
 render(newPointButtonComponent, tripMain);
 
-filterPresenter.init();
-boardPresenter.init();
+const awaiter = async () => {
+  await Promise.all([
+    offersModel.init(),
+    destinationsModel.init(),
+  ]);
+  pointsModel.init();
+  filterPresenter.init();
+  boardPresenter.init();
+};
+awaiter();
 

src/mock/const.js

@@ -10,54 +10,6 @@ const TRANSPORT_IMAGES = [
   'restaurant',
 ];
 
-const TRANSPORT_OFFERS = [
-  {'taxi': [{title: 'taxi-offer-1', price: 10}, {title: 'taxi-offer-2', price: 20}, {title: 'taxi-offer-3', price: 30}]},
-  {'bus': [{title: 'bus-offer-1', price: 10}, {title: 'bus-offer-2', price: 20}, {title: 'bus-offer-3', price: 30}]},
-  {'train': [{title: 'train-offer-1', price: 10}, {title: 'train-offer-2', price: 20}, {title: 'train-offer-3', price: 30}]},
-  {'ship': [{title: 'ship-offer-1', price: 10}, {title: 'ship-offer-2', price: 20}, {title: 'ship-offer-3', price: 30}]},
-  {'drive': [{title: 'drive-offer-1', price: 10}, {title: 'drive-offer-2', price: 20}, {title: 'drive-offer-3', price: 30}]},
-  {'flight': [{title: 'flight-offer-1', price: 10}, {title: 'flight-offer-2', price: 20}, {title: 'flight-offer-3', price: 30}]},
-  {'check-in': [{title: 'check-in-offer-1', price: 10}, {title: 'check-in-offer-2', price: 20}, {title: 'check-in-offer-3', price: 30}]},
-  {'sightseeing': [{title: 'sightseeing-offer-1', price: 10}, {title: 'sightseeing-offer-2', price: 20}, {title: 'sightseeing-offer-3', price: 30}]},
-  {'restaurant': [{title: 'restaurant-offer-1', price: 10}, {title: 'restaurant-offer-2', price: 20}, {title: 'restaurant-offer-3', price: 30}]},
-];
-
-const CITIES = [
-  'Amsterdam',
-  'Geneva',
-  'Chamonix',
-  'Tokyo',
-  'Moscow',
-  'Abu Dhabi',
-  'Brussels',
-  'Budapest',
-  'Cairo',
-  'Cape Town',
-  'Chicago',
-  'Dubai',
-  'Helsinki',
-];
-
-/* const citiesData = CITIES.map((city, index) => ({
-  id: crypto.randomUUID(),
-  description: `${city}, is a beautiful city, a true Asian pearl, with crowded streets.`,
-  name: city,
-  pictures: [
-    {
-      src: `https://loremflickr.com/300/200?random=${index}`,
-      description: `${city} parliament building`,
-    }
-  ]
-})); */
-
-const OFFERS = [
-  {ofName: 'Add luggage', price: 30},
-  {ofName: 'Switch to comfort class', price: 100},
-  {ofName: 'Add meal', price: 15},
-  {ofName: 'Choose seats', price: 5},
-  {ofName: 'Travel by train', price: 40},
-];
-
 const FilterType = {
   EVERYTHING: 'everything',
   FUTURE: 'future',
@@ -90,6 +42,7 @@ const UpdateType = {
   PATCH: 'PATCH',
   MINOR: 'MINOR',
   MAJOR: 'MAJOR',
+  INIT: 'INIT',
 };
 
-export {TRANSPORT_IMAGES, CITIES, OFFERS, FilterType, SortType, EmptyFilter, TRANSPORT_OFFERS, UserAction, UpdateType};
+export {TRANSPORT_IMAGES, FilterType, SortType, EmptyFilter, UserAction, UpdateType};

src/model/destinations-model.js

@@ -1,8 +1,22 @@
 import Observable from '../framework/observable';
-import { mockDests } from '../mock/point';
 
 export default class DestinationsModel extends Observable{
-  #destinations = mockDests;
+  #destinations = [];
+  #destinationsApiService = null;
+
+  constructor({destinationsApiService}) {
+    super();
+    this.#destinationsApiService = destinationsApiService;
+  }
+
+  async init() {
+    try {
+      const destinations = await this.#destinationsApiService.destinations;
+      this.#destinations = destinations.map((dest) => dest);
+    } catch(err) {
+      this.#destinations = [];
+    }
+  }
 
   get destinations(){
     return this.#destinations;

src/model/offers-model.js

@@ -1,10 +1,24 @@
 import Observable from '../framework/observable';
-import { mockOffers } from '../mock/point';
 
 export default class OffersModel extends Observable{
-  #offers = mockOffers;
+  #offers = [];
+  #offersApiService = null;
+
+  constructor({offersApiService}) {
+    super();
+    this.#offersApiService = offersApiService;
+  }
 
   get offers(){
     return this.#offers;
   }
+
+  async init() {
+    try {
+      const offers = await this.#offersApiService.offers;
+      this.#offers = offers.map((offer) => offer);
+    } catch(err) {
+      this.#offers = [];
+    }
+  }
 }

src/model/points-model.js

@@ -1,31 +1,52 @@
-import { getRandomPoint } from '../mock/point.js';
-import { sortPointsArrByDay } from '../utils/task.js';
-import { getRandomInt } from '../utils/common.js';
 import Observable from '../framework/observable.js';
-
-const POINTS_COUNT = getRandomInt(0, 2);
+import { UpdateType } from '../mock/const.js';
 
 export default class PointsModel extends Observable{
-  #points = Array.from({length: POINTS_COUNT}, getRandomPoint).sort(sortPointsArrByDay);
+  #pointsApiService = null;
+  #points = [];
+
+
+  constructor({pointsApiService}) {
+    super();
+    this.#pointsApiService = pointsApiService;
+  }
 
   get points() {
     return this.#points;
   }
 
-  updatePoint(updateType, update) {
+  async init() {
+    try {
+      const points = await this.#pointsApiService.points;
+      this.#points = points.map(this.#adaptToClient);
+    } catch(err) {
+      this.#points = [];
+    }
+
+    this._notify(UpdateType.INIT);
+  }
+
+  async updatePoint(updateType, update) {
     const index = this.#points.findIndex((point) => point.id === update.id);
 
     if(index === -1) {
       throw new Error('Can\'t update unexisting point');
     }
 
-    this.#points = [
-      ...this.#points.slice(0, index),
-      update,
-      ...this.#points.slice(index + 1),
-    ];
+    try {
+      const response = await this.#pointsApiService.updatePoint(update);
+      const updatedPoint = this.#adaptToClient(response);
 
-    this._notify(updateType, update);
+      this.#points = [
+        ...this.#points.slice(0, index),
+        updatedPoint,
+        ...this.#points.slice(index + 1),
+      ];
+
+      this._notify(updateType, updatedPoint);
+    } catch(err) {
+      throw new Error('Can\'t update point');
+    }
   }
 
   addPoint(updateType, update) {
@@ -53,5 +74,15 @@ export default class PointsModel extends Observable{
 
     this._notify(updateType);
   }
+
+  #adaptToClient(point) {
+    const { 'base_price': basePrice, 'date_from': dateFrom, 'date_to': dateTo, 'is_favorite': isFavorite, ...rest } = point;
+    return {
+      ...rest,
+      basePrice,
+      dateFrom,
+      dateTo,
+      isFavorite,
+    };
+  }
 }
-export {POINTS_COUNT};