Большие перемены (часть 2)

src/presenter/event-presenter.js

@@ -8,15 +8,18 @@ export default class EventPresenter {
   #waypointPresenters = [];
   #eventContainer;
   #sorts;
+  #currentSortType;
 
   constructor({eventContainer, waypointsModel, sorts}) {
     this.#eventContainer = eventContainer;
     this.#sorts = sorts;
-    this.waypoints = waypointsModel.waypoints;
+    this.waypoints = waypointsModel.getWaypoints();
+    this.#currentSortType = sorts[0].name;
+    this.#sortWaypoints(sorts[0].name);
   }
 
   init() {
-    render(new SortView({sorts: this.#sorts}), this.#eventContainer);
+    render(new SortView({sorts: this.#sorts, onChange: this.#handleSortTypeChange}), this.#eventContainer);
     render(this.#eventListContainer, this.#eventContainer);
     this.waypoints.forEach((waypoint) => this.#renderWaypoint(waypoint));
   }
@@ -42,4 +45,23 @@ export default class EventPresenter {
     waypointPresenter.init(waypoint);
     this.#waypointPresenters.push(waypointPresenter);
   }
+
+  #handleSortTypeChange = (sortType) => {
+    if (sortType === this.#currentSortType) {
+      return;
+    }
+    this.#sortWaypoints(sortType);
+    this.#deleteWaypoints();
+    this.waypoints.forEach((waypoint) => this.#renderWaypoint(waypoint));
+  };
+
+  #sortWaypoints(sortType) {
+    this.#sorts.find((sort) => sort.name === sortType).getPoints(this.waypoints);
+    this.#currentSortType = sortType;
+  }
+
+  #deleteWaypoints() {
+    this.#waypointPresenters.forEach((waypoint) => waypoint.destroy());
+    this.#waypointPresenters = [];
+  }
 }

src/presenter/waypoint-presenter.js

@@ -79,4 +79,9 @@ export default class WaypointPresenter {
   #handleFavoriteClick = () => {
     this.#onChange({...this.#waypoint, isFavorite: !this.#waypoint.isFavorite});
   };
+
+  destroy() {
+    remove(this.#waypointComponent);
+    remove(this.#editComponent);
+  }
 }

src/utils.js

@@ -46,11 +46,11 @@ const filters = {
 };
 
 const sorts = {
-  [SORTING_TYPES.DAY]: (points) => points.filter((point) => point),
-  [SORTING_TYPES.EVENT]: (points) => points.filter((point) => point),
-  [SORTING_TYPES.TIME]: (points) => points.filter((point) => point),
-  [SORTING_TYPES.PRICE]: (points) => points.filter((point) => point),
-  [SORTING_TYPES.OFFERS]: (points) => points.filter((point) => point),
+  [SORTING_TYPES.DAY]: (points) => points.sort((pointA, pointB) => new Date(pointA.dateFrom) - new Date(pointB.dateFrom)),
+  [SORTING_TYPES.EVENT]: (points) => points,
+  [SORTING_TYPES.TIME]: (points) => points.sort((pointA, pointB) => countDuration(pointB.dateFrom, pointB.dateTo) - countDuration(pointA.dateFrom, pointA.dateTo)),
+  [SORTING_TYPES.PRICE]: (points) => points.sort((pointA, pointB) => pointB.price - pointA.price),
+  [SORTING_TYPES.OFFERS]: (points) => points,
 };
 
 

src/view/sort-view.js

@@ -5,15 +5,15 @@ function createSortingItemTemplate(sorting, isChecked) {
 
   return (`
     <div class="trip-sort__item  trip-sort__item--${name}">
-        <input id="sort-${name}" class="trip-sort__input visually-hidden" type="radio" name="trip-sort" value="sort-${name}" ${isChecked ? 'checked' : ''} ${isDisabled ? 'disabled' : ''}>
+        <input id="sort-${name}" class="trip-sort__input visually-hidden" type="radio" data-sort-type="${name}" name="trip-sort" value="sort-${name}" ${isChecked ? 'checked' : ''} ${isDisabled ? 'disabled' : ''}>
         <label class="trip-sort__btn" for="sort-${name}">${name}</label>
     </div>
   `);
 }
 
 function createSortTemplate(sortingItems) {
   const SORTING_ITEM_TEMPLATE = sortingItems
-    .map((sorting, index) => createSortingItemTemplate(sorting, index === 0)) // TODO заменить условие
+    .map((sorting, index) => createSortingItemTemplate(sorting, index === 0))
     .join('');
 
   return (`
@@ -25,13 +25,23 @@ function createSortTemplate(sortingItems) {
 
 export default class SortView extends AbstractView {
   #sorts;
+  #handleTypeChange;
 
-  constructor({sorts}) {
+  constructor({sorts, onChange}) {
     super();
     this.#sorts = sorts;
+    this.#handleTypeChange = onChange;
+
+    this.element.addEventListener('click', this.#changeTypeHandler);
   }
 
   get template() {
     return createSortTemplate(this.#sorts);
   }
+
+  #changeTypeHandler = (evt) => {
+    if(evt.target.classList.contains('trip-sort__input')) {
+      this.#handleTypeChange(evt.target.dataset.sortType);
+    }
+  };
 }