8.7

src/api-service/points-api.js

@@ -18,6 +18,25 @@ export default class PointsApiService extends ApiService{
     return parsedResponse;
   }
 
+  async addPoint(point){
+    const response = await this._load({
+      url:'points',
+      method: ApiServiceMethod.POST,
+      body: JSON.stringify(this.#adaptToServer(point)),
+      headers: new Headers({'Content-Type': 'application/json'})
+    });
+    const parsedResponse = await ApiService.parseResponse(response);
+    return parsedResponse;
+  }
+
+  async deletePoint(point) {
+    const response = await this._load({
+      url: `points/${point.id}`,
+      method: ApiServiceMethod.DELETE,
+    });
+    return response;
+  }
+
   #adaptToServer(point) {
     const adaptedPoint = {...point,
       'base_price': point.price,

src/const.js

@@ -64,4 +64,11 @@ export const POINT_COUNT_PER_STEP = 7;
 export const ApiServiceMethod = {
   GET: 'GET',
   PUT: 'PUT',
+  POST: 'POST',
+  DELETE: 'DELETE'
+};
+
+export const TimeLimit = {
+  LOWER_LIMIT: 350,
+  UPPER_LIMIT: 1000,
 };

src/model/point-model.js

@@ -26,44 +26,49 @@ export default class PointModel extends Observable{
   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');
+      throw new Error('Can\'t update unexisting point');
     }
     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.#points.slice(index + 1)
       ];
       this._notify(updateType, updatedPoint);
     }catch(error) {
       throw new Error('Can\'t update point');
     }
   }
 
-  addPoint(updateType, update) {
-    this.#points = [
-      update,
-      ...this.#points,
-    ];
-
-    this._notify(updateType, update);
+  async addPoint(updateType, update) {
+    try {
+      const response = await this.#pointsApiService.addPoint(update);
+      const newPoint = this.#adaptToClient(response);
+      this.#points = [newPoint, ...this.#points];
+      this._notify(updateType, newPoint);
+    } catch (error){
+      throw new Error('Can\'t add point');
+    }
   }
 
-  deletePoint(updateType, update) {
+  async deletePoint(updateType, update) {
     const index = this.#points.findIndex((point) => point.id === update.id);
 
     if (index === -1) {
       throw new Error('Can\'t delete unexisting point');
     }
-
-    this.#points = [
-      ...this.#points.slice(0, index),
-      ...this.#points.slice(index + 1),
-    ];
-
-    this._notify(updateType);
+    try {
+      await this.#pointsApiService.deletePoint(update);
+      this.#points = [
+        ...this.#points.slice(0, index),
+        ...this.#points.slice(index + 1),
+      ];
+      this._notify(updateType);
+    } catch (error){
+      throw new Error('Can\'t delete point');
+    }
   }
 
   #adaptToClient(point){

src/presenter/new-point-presenter.js

@@ -1,5 +1,4 @@
 import {remove, render, RenderPosition} from '../framework/render.js';
-import {nanoid} from 'nanoid';
 import {UpdateType, UserAction} from '../const';
 import EditingPointView from '../view/edit-point-view.js';
 
@@ -41,6 +40,25 @@ export default class NewPointPresenter {
     document.addEventListener('keydown', this.#escKeyDownHandler);
   }
 
+  setSaving() {
+    this.#pointEditComponent.updateElement({
+      isDisabled: true,
+      isSaving: true,
+    });
+  }
+
+  setAborting() {
+    const resetFormState = () => {
+      this.#pointEditComponent.updateElement({
+        isDisabled: false,
+        isSaving: false,
+        isDeleting: false,
+      });
+    };
+    this.#pointEditComponent.shake(resetFormState);
+  }
+
+
   destroy() {
     if (this.#pointEditComponent === null) {
       return;
@@ -58,7 +76,7 @@ export default class NewPointPresenter {
     this.#handleFavoriteChange(
       UserAction.ADD_POINT,
       UpdateType.MINOR,
-      {id: nanoid(), ...point},
+      point
     );
     this.destroy();
   };

src/presenter/point-presenter.js

@@ -58,7 +58,8 @@ export default class PointPresenter{
     }
 
     if (this.#mode === Mode.EDITING){
-      replace(this.#editPointComponent, prevEditPointComponent);
+      replace(this.#pointComponent, prevEditPointComponent);
+      this.#mode = Mode.DEFAULT;
     }
 
     remove(prevPointComponent);
@@ -77,11 +78,43 @@ export default class PointPresenter{
     }
   }
 
+  setSaving() {
+    if (this.#mode === Mode.EDITING) {
+      this.#editPointComponent.updateElement({
+        isDisabled: true,
+        isSaving: true
+      });
+    }
+  }
+
+  setDeleting() {
+    if (this.#mode === Mode.EDITING) {
+      this.#editPointComponent.updateElement({
+        isDisabled: true,
+        isDeleting: true
+      });
+    }
+  }
+
+  setAborting() {
+    if (this.#mode === Mode.DEFAULT) {
+      this.#pointComponent.shake();
+      return;
+    }
+    const resetFormState = () => {
+      this.#editPointComponent.updateElement({
+        isDisabled: false,
+        isSaving: false,
+        isDeleting: false,
+      });
+    };
+    this.#editPointComponent.shake(resetFormState);
+  }
+
   #onEscKeyDown = (event) => {
     if(event.key === 'Escape' || event.key === 'Esc'){
       event.preventDefault();
       this.#editPointComponent.reset(this.#point);
-      this.#replaceEditPointToPoint();
     }
   };
 

src/presenter/trip-presenter.js

@@ -6,9 +6,10 @@ import NoPointView from '../view/no-point-view';
 import PointPresenter from './point-presenter';
 import {sortPointsByType, SortType} from '../utils/common';
 import {filterByType, FILTERTYPE} from '../utils/filter';
-import {UpdateType, UserAction} from '../const';
+import {TimeLimit, UpdateType, UserAction} from '../const';
 import NewPointPresenter from './new-point-presenter';
 import LoadingView from '../view/loading-view';
+import UiBlocker from '../framework/ui-blocker/ui-blocker';
 
 class TripPresenter{
   #container = null;
@@ -25,6 +26,11 @@ class TripPresenter{
   #currentSortType = SortType.DEFAULT;
   #filterType = FILTERTYPE.EVERYTHING;
   #isLoading = true;
+  #uiBlocker = new UiBlocker({
+    lowerLimit: TimeLimit.LOWER_LIMIT,
+    upperLimit: TimeLimit.UPPER_LIMIT
+  });
+
   constructor({container, pointsModel, destinationsModel, offersModel, filtersModel, onNewPointDestroy}) {
     this.#container = container;
     this.#pointsModel = pointsModel;
@@ -74,18 +80,35 @@ class TripPresenter{
     this.#pointPresenter.forEach((presenter) => presenter.resetView());
   };
 
-  #handleViewAction = (actionType, updateType, update) => {
+  #handleViewAction = async (actionType, updateType, update) => {
+    this.#uiBlocker.block();
     switch (actionType) {
       case UserAction.UPDATE_POINT:
-        this.#pointsModel.updatePoint(updateType, update);
+        this.#pointPresenter.get(update.id).setSaving();
+        try {
+          await this.#pointsModel.updatePoint(updateType, update);
+        }catch (error){
+          this.#pointPresenter.get(update.id).setAborting();
+        }
         break;
       case UserAction.ADD_POINT:
-        this.#pointsModel.addPoint(updateType, update);
+        this.#newPointPresenter.setSaving();
+        try{
+          await this.#pointsModel.addPoint(updateType, update);
+        }catch (error){
+          this.#newPointPresenter.setAborting();
+        }
         break;
       case UserAction.DELETE_POINT:
-        this.#pointsModel.deletePoint(updateType, update);
+        this.#pointPresenter.get(update.id).setDeleting();
+        try {
+          await this.#pointsModel.deletePoint(updateType, update);
+        }catch (error){
+          this.#pointPresenter.get(update.id).setAborting();
+        }
         break;
     }
+    this.#uiBlocker.unblock();
   };
 
   #handleModelEvent = (updateType, data) => {