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

package.json

@@ -35,7 +35,6 @@
   "dependencies": {
     "dayjs": "1.11.10",
     "flatpickr": "^4.6.13",
-    "he": "^1.2.0",
-    "nanoid": "^5.0.7"
+    "he": "^1.2.0"
   }
 }

src/api-service/points-api-service.js

@@ -7,6 +7,28 @@ export default class PointsApiService extends ApiService {
       .then(ApiService.parseResponse);
   }
 
+  async addPoint(point) {
+    const response = await this._load({
+      url: 'points',
+      method: Method.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: Method.DELETE,
+    });
+
+    return response;
+  }
+
   async updatePoint(point) {
     const response = await this._load({
       url: `points/${point.id}`,

src/const.js

@@ -78,6 +78,11 @@ const UserAction = {
   DELETE_POINT: 'DELETE_POINT',
 };
 
+const EditingType = {
+  UPDATE: 'UPDATE',
+  NEW: 'NEW'
+};
+
 const UpdateType = {
   PATCH: 'PATCH',
   MINOR: 'MINOR',
@@ -88,6 +93,16 @@ const UpdateType = {
 const Method = {
   GET: 'GET',
   PUT: 'PUT',
+  POST: 'POST',
+  DELETE: 'DELETE',
+};
+
+const ButtonLabels = {
+  CANCEL: 'Cancel',
+  DELETE_DEFAULT: 'Delete',
+  DELETE_IN_PROGRESS: 'Deleting...',
+  SAVE_DEFAULT: 'Save',
+  SAVE_IN_PROGRESS: 'Saving...'
 };
 
 export {POINT_EMPTY,
@@ -99,5 +114,7 @@ export {POINT_EMPTY,
   Mode,
   SortType,
   UserAction,
+  EditingType,
   UpdateType,
-  Method};
+  Method,
+  ButtonLabels};

src/model/point-model.js

@@ -46,28 +46,34 @@ export default class PointsModel extends Observable {
     }
   }
 
-  addPoint = (updateType, update) => {
-    this.#points = [
-      update,
-      ...this.#points,
-    ];
-
-    this._notify(updateType, update);
+  addPoint = async (updateType, update) => {
+    try {
+      const response = await this.#pointsApiService.addPoint(update);
+      const newPoint = this.#adaptToClient(response);
+      this.#points.unshift(newPoint);
+      this._notify(updateType, newPoint);
+    } catch (err) {
+      throw new Error('Can\'t add point');
+    }
   };
 
-  deletePoint = (updateType, update) => {
+  deletePoint = async (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 (err) {
+      throw new Error('Can\'t delete point');
+    }
   };
 
   #adaptToClient = (point) => {

src/presenter/filter-presenter.js

@@ -10,6 +10,8 @@ export default class FilterPresenter {
 
   #filterComponent = null;
 
+  #currentFilter = null;
+
   constructor({filterContainer, filterModel, pointsModel}) {
     this.#filterContainer = filterContainer;
     this.#filterModel = filterModel;
@@ -26,12 +28,13 @@ export default class FilterPresenter {
   }
 
   init() {
+    this.#currentFilter = this.#filterModel.filter;
     const filters = this.filters;
     const prevFilterComponent = this.#filterComponent;
 
     this.#filterComponent = new FilterPointsView({
       filters,
-      currentFilterType: this.#filterModel.filter,
+      currentFilterType: this.#currentFilter,
       onFilterTypeChange: this.#handleFilterTypeChange
     });
 

src/presenter/new-point-presenter.js

@@ -1,6 +1,5 @@
 import {remove, render, RenderPosition} from '../framework/render.js';
 import EditPointView from '../view/editing-form-view.js';
-import {nanoid} from 'nanoid';
 import {UserAction, UpdateType} from '../const.js';
 
 export default class NewPointPresenter {
@@ -31,6 +30,24 @@ 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;
@@ -48,7 +65,7 @@ export default class NewPointPresenter {
     this.#handleDataChange(
       UserAction.ADD_POINT,
       UpdateType.MINOR,
-      {id: nanoid(), ...point},
+      point,
     );
     this.destroy();
   };

src/presenter/point-presenter.js

@@ -72,13 +72,47 @@ export default class PointPresenter {
     }
     if (this.#mode === Mode.EDITING) {
       replace(this.#pointEditComponent, prevPointEditComponent);
+      this.#mode = Mode.DEFAULT;
     }
 
     remove(prevPointComponent);
     remove(prevPointEditComponent);
     /* console.log('Rendering point component to:', this.#pointListContainer); */
   }
 
+  setSaving() {
+    if (this.#mode === Mode.EDIT) {
+      this.#pointEditComponent.updateElement({
+        isDisabled: false,
+        isSaving: true
+      });
+    }
+  }
+
+  setDeleting() {
+    if (this.#mode === Mode.EDITING) {
+      this.#pointEditComponent.updateElement({
+        isDisabled: true,
+        isDeleting: true
+      });
+    }
+  }
+
+  setAborting() {
+    if (this.#mode === Mode.DEFAULT) {
+      this.#pointComponent.shake();
+      return;
+    }
+    const resetFormState = () => {
+      this.#pointEditComponent.updateElement({
+        isDisabled: false,
+        isSaving: false,
+        isDeleting: false,
+      });
+    };
+    this.#pointEditComponent.shake(resetFormState);
+  }
+
   destroy() {
     remove(this.#pointComponent);
     remove(this.#pointEditComponent);
@@ -124,7 +158,7 @@ export default class PointPresenter {
       update,
     );
 
-    this.#replaceEditToPoint();
+    //this.#replaceEditToPoint();
   };
 
   #pointEditClickHandler = () => {

src/presenter/trip-presenter.js

@@ -6,12 +6,12 @@ import LoadingView from '../view/loading-view.js';
 import { remove, render, RenderPosition } from '../framework/render.js';
 
 import PointPresenter from './point-presenter.js';
-//import NewPointPresenter from './new-point-presenter.js';
+import NewPointPresenter from './new-point-presenter.js';
 
 import { sortPointsByTime, sortPointsByPrice } from '../utils/points.js';
 import { filter } from '../utils/filter.js';
 import { SortType, UserAction, UpdateType, FilterType } from '../const.js';
-import EditPointView from '../view/editing-form-view.js';
+//import EditPointView from '../view/editing-form-view.js';
 
 export default class TripPresenter {
   #listComponent = new ListView();
@@ -39,7 +39,7 @@ export default class TripPresenter {
     this.#offersModel = offersModel;
     this.#filterModel = filterModel;
 
-    this.#newPointPresenter = new EditPointView({
+    this.#newPointPresenter = new NewPointPresenter({
       pointListContainer: this.#listComponent.element,
       onDataChange: this.#handleViewAction,
       onDestroy: onNewPointDestroy
@@ -145,16 +145,31 @@ export default class TripPresenter {
     this.#pointPresenters.forEach((presenter) => presenter.resetView());
   };
 
-  #handleViewAction = (actionType, updateType, update) => {
+  #handleViewAction = async (actionType, updateType, update) => {
     switch(actionType) {
       case UserAction.UPDATE_POINT:
-        this.#pointsModel.updatePoint(updateType, update);
+        this.#pointPresenters.get(update.id).setSaving();
+        try {
+          await this.#pointsModel.update(updateType, update);
+        } catch (err) {
+          this.#pointPresenters.get(update.id).setAborting();
+        }
         break;
       case UserAction.ADD_POINT:
-        this.#pointsModel.addPoint(updateType, update);
+        this.#newPointPresenter.setSaving();
+        try {
+          await this.#pointsModel.add(updateType, update);
+        } catch (err) {
+          this.#newPointPresenter.setAborting();
+        }
         break;
       case UserAction.DELETE_POINT:
-        this.#pointsModel.deletePoint(updateType, update);
+        this.#pointPresenters.get(update.id).setDeleting();
+        try {
+          await this.#pointsModel.remove(updateType, update);
+        } catch (err) {
+          this.#pointPresenters.get(update.id).setAborting();
+        }
         break;
     }
   };