Merge pull request #13 from ssftvyn/module8-task1

src/api-service/destinations-api.js

@@ -0,0 +1,20 @@
+import ApiService from '../framework/api-service.js';
+import {ApiServiceMethod} from '../const';
+
+export default class DestinationsApiService extends ApiService{
+  get destinations() {
+    return this._load({url: 'destinations'})
+      .then(ApiService.parseResponse);
+  }
+
+  async updateDestinations(destination) {
+    const response = await this._load({
+      url: `destinations/${destination.id}`,
+      method: ApiServiceMethod.PUT,
+      body: JSON.stringify(destination),
+      headers: new Headers({'Content-Type': 'application/json'}),
+    });
+    const parsedResponse = await ApiService.parseResponse(response);
+    return parsedResponse;
+  }
+}

src/api-service/offers-api.js

@@ -0,0 +1,20 @@
+import ApiService from '../framework/api-service.js';
+import {ApiServiceMethod} from '../const';
+
+export default class OffersApiService extends ApiService{
+  get offers() {
+    return this._load({url: 'offers'})
+      .then(ApiService.parseResponse);
+  }
+
+  async updateOffers(offer) {
+    const response = await this._load({
+      url: `offers/${offer.type}`,
+      method: ApiServiceMethod.PUT,
+      body: JSON.stringify(offer),
+      headers: new Headers({'Content-Type': 'application/json'}),
+    });
+    const parsedResponse = await ApiService.parseResponse(response);
+    return parsedResponse;
+  }
+}

src/api-service/points-api.js

@@ -0,0 +1,35 @@
+import ApiService from '../framework/api-service.js';
+import {ApiServiceMethod} from '../const';
+
+export default class PointsApiService extends ApiService{
+  get points() {
+    return this._load({url: 'points'})
+      .then(ApiService.parseResponse);
+  }
+
+  async updatePoint(point) {
+    const response = await this._load({
+      url: `points/${point.id}`,
+      method: ApiServiceMethod.PUT,
+      body: JSON.stringify(this.#adaptToServer(point)),
+      headers: new Headers({'Content-Type': 'application/json'}),
+    });
+    const parsedResponse = await ApiService.parseResponse(response);
+    return parsedResponse;
+  }
+
+  #adaptToServer(point) {
+    const adaptedPoint = {...point,
+      'base_price': point.price,
+      'date_from': point.startDate instanceof Date ? point.startDate.toISOString() : null,
+      'date_to': point.endDate instanceof Date ? point.endDate.toISOString() : null,
+      'is_favorite': point.isFavorite
+    };
+
+    delete adaptedPoint.price;
+    delete adaptedPoint.startDate;
+    delete adaptedPoint.endDate;
+    delete adaptedPoint.isFavorite;
+    return adaptedPoint;
+  }
+}

src/const.js

@@ -55,8 +55,13 @@ export const UserAction = {
 
 export const UpdateType = {
   PATCH: 'PATCH',
-  MINOR: 'MINOR',
-  MAJOR: 'MAJOR'
+  MAJOR: 'MAJOR',
+  INIT: 'INIT'
 };
 
 export const POINT_COUNT_PER_STEP = 7;
+
+export const ApiServiceMethod = {
+  GET: 'GET',
+  PUT: 'PUT',
+};

src/main.js

@@ -7,12 +7,24 @@ import FilterModel from './model/filter-model';
 import FilterPresenter from './presenter/filter-presenter';
 import NewPointButtonView from './view/new-point-button-view';
 import {render} from './framework/render';
+import PointsApiService from './api-service/points-api';
+import DestinationsApiService from './api-service/destinations-api';
+import OffersApiService from './api-service/offers-api';
+
+const AUTHORIZATION = 'Basic gq0Af3hqaR';
+const END_POINT = 'https://21.objects.htmlacademy.pro/big-trip';
 
 const tripContainer = document.querySelector('.trip-events');
 const headerContainer = document.querySelector('.trip-main');
-const pointsModel = new PointModel();
-const destinationsModel = new DestinationsModel();
-const offersModel = new OffersModel();
+const pointsModel = new PointModel({
+  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 filtersModel = new FilterModel();
 const tripPresenter = new TripPresenter({
   container: tripContainer,
@@ -41,9 +53,14 @@ function handleNewPointButtonClick() {
   newPointButtonComponent.element.disabled = true;
 }
 
-render(newPointButtonComponent, headerContainer);
-
 const headerPresenter = new HeaderPresenter(headerContainer, pointsModel.points, destinationsModel.destinations);
 headerPresenter.init();
 filterPresenter.init();
 tripPresenter.init();
+offersModel.init().finally(() => {
+  destinationsModel.init().finally(() => {
+    pointsModel.init().finally(() => {
+      render(newPointButtonComponent, headerContainer);
+    });
+  });
+});

src/model/destinations-model.js

@@ -1,9 +1,24 @@
-import {getDestinations} from '../mock/destinations';
+import {UpdateType} from '../const';
 import Observable from '../framework/observable';
 
 export default class DestinationsModel extends Observable{
-  #destinations = getDestinations();
+  #destinationsApiService = null;
+  #destinations = [];
+  constructor({destinationsApiService}) {
+    super();
+    this.#destinationsApiService = destinationsApiService;
+  }
+
   get destinations(){
     return this.#destinations;
   }
+
+  async init(){
+    try{
+      this.#destinations = await this.#destinationsApiService.destinations;
+    } catch (error){
+      this.#destinations = null;
+    }
+    this._notify(UpdateType.INIT);
+  }
 }

src/model/offers-model.js

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

src/model/point-model.js

@@ -1,25 +1,45 @@
-import {generatePoint} from '../mock/point';
+import {UpdateType} from '../const';
 import Observable from '../framework/observable';
 
 export default class PointModel extends Observable{
-  #points = Array.from({length:5}, generatePoint);
+  #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 (error){
+      this.#points = null;
+    }
+    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 task');
     }
-
-    this.#points = [
-      ...this.#points.slice(0, index),
-      update,
-      ...this.#points.slice(index + 1),
-    ];
-
-    this._notify(updateType, update);
+    try {
+      const response = await this.#pointsApiService.updatePoint(update);
+      const updatedPoint = this.#adaptToClient(response);
+      this.#points = [
+        ...this.#points.slice(0, index),
+        updatedPoint,
+        ...this.#points.slice(index + 1),
+      ];
+      this._notify(updateType, updatedPoint);
+    }catch(error) {
+      throw new Error('Can\'t update point');
+    }
   }
 
   addPoint(updateType, update) {
@@ -35,7 +55,7 @@ export default class PointModel extends Observable{
     const index = this.#points.findIndex((point) => point.id === update.id);
 
     if (index === -1) {
-      throw new Error('Can\'t delete unexisting task');
+      throw new Error('Can\'t delete unexisting point');
     }
 
     this.#points = [
@@ -45,4 +65,19 @@ export default class PointModel extends Observable{
 
     this._notify(updateType);
   }
+
+  #adaptToClient(point){
+    const adaptedPoint = {...point,
+      price: point['base_price'],
+      startDate: point['date_from'] !== null ? new Date(point['date_from']) : point['date_from'],
+      endDate: point['date_to'] !== null ? new Date(point['date_to']) : point['date_to'],
+      isFavorite: point['is_favorite']
+    };
+
+    delete adaptedPoint['base_price'];
+    delete adaptedPoint['date_from'];
+    delete adaptedPoint['date_to'];
+    delete adaptedPoint['is_favorite'];
+    return adaptedPoint;
+  }
 }