5.13. Big changes (part 2)

src/constants.js

@@ -96,3 +96,26 @@ export const Mode = {
   DEFAULT: 'DEFAULT',
   EDITING: 'EDITING',
 };
+
+export const SortType = {
+  DAY: {
+    name: 'day',
+    disabled: false
+  },
+  EVENT: {
+    name: 'event',
+    disabled: true
+  },
+  TIME: {
+    name: 'time',
+    disabled: false
+  },
+  PRICE: {
+    name: 'price',
+    disabled: false
+  },
+  OFFERS: {
+    name: 'offers',
+    disabled: true
+  }
+};

src/presenter/main-presenter.js

@@ -6,22 +6,25 @@ import EventAddButtonView from '../view/event-add-button-view.js';
 import EventsMessageView from '../view/events-message-view.js';
 import PointPresenter from './point-presenter.js';
 import { render, RenderPosition } from '../framework/render.js';
-import { EVENTS_MESSAGE } from '../constants.js';
+import {EVENTS_MESSAGE, SortType} from '../constants.js';
 import { generateFilter } from '../mocks/filters.js';
-import { updateItem } from '../util/utils.js';
+import { sortByDate, sortByDuration, sortByValue, updateItem } from '../util/utils.js';
 
 export default class MainPresenter {
   #tripInfoComponent = new TripInfoView();
   #addButtonComponent = new EventAddButtonView();
-  #sortComponent = new SortView();
   #listComponent = new EventsListView();
+  #sortComponent = null;
   #pointModel = null;
   #pointPresenters = new Map();
 
   #points = [];
   #offers = [];
   #destinations = [];
 
+  #defaultSortType = SortType.DAY;
+  #currentSortType = this.#defaultSortType;
+
   constructor({infoContainer, contentContainer, filtersContainer, pointModel}) {
     this.infoContainer = infoContainer;
     this.contentContainer = contentContainer;
@@ -30,33 +33,78 @@ export default class MainPresenter {
   }
 
   init() {
-    this.#points = this.#pointModel.points;
-    this.#destinations = this.#pointModel.destinations;
-    this.#offers = this.#pointModel.offers;
+    this.#points = [...this.#pointModel.points];
+    this.#destinations = [...this.#pointModel.destinations];
+    this.#offers = [...this.#pointModel.offers];
     const filters = generateFilter(this.#points);
 
     render(this.#tripInfoComponent, this.infoContainer, RenderPosition.AFTERBEGIN);
     render(new FiltersView({filters}), this.filtersContainer);
     render(this.#addButtonComponent, this.infoContainer);
 
-    this.#renderWithoutContent(this.#points);
-    this.#renderContent(this.#points, this.#offers, this.#destinations);
+    this.#renderWithoutContent();
+    this.#renderContent();
   }
 
-  #renderWithoutContent = (points) => {
-    if (points.length === 0) {
+  #renderWithoutContent = () => {
+    if (this.#points.length === 0) {
       render(new EventsMessageView(EVENTS_MESSAGE.EMPTY), this.contentContainer);
     }
   };
 
-  #renderContent = (points, offers, destinations) => {
+  #renderContent = () => {
+    this.#renderSortTypes();
+    this.#renderContainer();
+    this.#sortPoints(this.#defaultSortType);
+    this.#renderPoints();
+    // render(this.#sortComponent, this.contentContainer);
+    // render(this.#listComponent, this.contentContainer);
+    // this.#renderPoints(points, offers, destinations);
+  };
+
+  #renderSortTypes = () => {
+    const currentSortType = this.#currentSortType;
+    const onSortTypeChange = this.#handleSortTypeChange;
+
+    this.#sortComponent = new SortView({ currentSortType, onSortTypeChange });
+
     render(this.#sortComponent, this.contentContainer);
+  };
+
+  #handleSortTypeChange = (sortType) => {
+    this.#clearPoints();
+    this.#sortPoints(sortType);
+    this.#renderPoints();
+  };
+
+  #sortPoints = (sortType) => {
+    switch (sortType) {
+      case 'day':
+        this.#points.sort(sortByDate('dateFrom'));
+        break;
+      case 'time':
+        this.#points.sort(sortByDuration('dateFrom', 'dateTo'));
+        break;
+      case 'price':
+        this.#points.sort(sortByValue('basePrice'));
+        break;
+      default: this.#points.sort(sortByDate('dateFrom'));
+    }
+
+    this.#currentSortType = sortType;
+  };
+
+  #clearPoints = () => {
+    this.#pointPresenters.forEach((presenter) => presenter.destroy());
+    this.#pointPresenters.clear();
+  };
+
+  #renderContainer = () => {
     render(this.#listComponent, this.contentContainer);
-    this.#renderPoints(points, offers, destinations);
   };
 
-  #renderPoints = (points, offers, destinations) => {
-    points.forEach((point) => this.#renderPoint(point, offers, destinations));
+  #renderPoints = () => {
+    this.#points.forEach((point) => this.#renderPoint(point, this.#offers, this.#destinations));
   };
 
   #renderPoint = (point, offers, destinations) => {

src/util/utils.js

@@ -33,3 +33,14 @@ export const isDatePast = (end) => dayjs().isAfter(end);
 export const getCapitalized = (word) => `${word[0].toUpperCase()}${word.slice(1)}`;
 
 export const updateItem = (items, update) => items.map((item) => item.id === update.id ? update : item);
+
+export const sortByDate = (start) => (a, b) => dayjs(a[start]).diff(dayjs(b[start]));
+
+export const sortByDuration = (start, end) => (a, b) => {
+  const firstDuration = calculateDuration(a[start], a[end]);
+  const secondDuration = calculateDuration(b[start], b[end]);
+
+  return secondDuration.asMilliseconds() - firstDuration.asMilliseconds();
+};
+
+export const sortByValue = (value) => (a, b) => b[value] - a[value];

src/view/event-editor-view.js

@@ -165,8 +165,5 @@ export default class EventEditorView extends AbstractView {
     this.#handleFormSubmit(this.#point);
   };
 
-  #editClickHandler = (event) => {
-    event.preventDefault();
-    this.#handleEditClick();
-  };
+  #editClickHandler = () => this.#handleEditClick();
 }

src/view/events-item-view.js

@@ -89,13 +89,7 @@ export default class EventsItemView extends AbstractView {
     return createEventItemTemplate(this.#point, this.#offers, this.#destinations);
   }
 
-  #editClickHandler = (event) => {
-    event.preventDefault();
-    this.#handleEditClick();
-  };
+  #editClickHandler = () => this.#handleEditClick();
 
-  #favoriteClickHandler = (event) => {
-    event.preventDefault();
-    this.#handleFavoriteClick();
-  };
+  #favoriteClickHandler = () => this.#handleFavoriteClick();
 }

src/view/sort-view.js

@@ -1,19 +1,43 @@
 import AbstractView from '../framework/view/abstract-view.js';
-import { TRIP_SORT_ITEMS } from '../constants.js';
+import { SortType } from '../constants.js';
+import { getCapitalized } from '../util/utils.js';
 
-const createTripSortItemTemplate = (item) => `
-    <div class="trip-sort__item  trip-sort__item--${item.key}">
-      <input id="sort-${item.key}" class="trip-sort__input  visually-hidden" type="radio" name="trip-sort" value="sort-${item.key}" ${item.checked ? 'checked' : ''} ${item.disabled ? 'disabled' : ''}>
-      <label class="trip-sort__btn" for="sort-${item.key}">${item.key}</label>
+const createTripSortItemTemplate = (name, isDisabled, currentSortType) => `
+    <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}"
+        data-sort-type="${name}"
+        ${currentSortType.name === name ? 'checked' : ''}
+        ${isDisabled ? 'disabled' : ''}>
+      <label
+        class="trip-sort__btn"
+        for="sort-${name}">${getCapitalized(name)}</label>
     </div>`;
 
-const createSortTemplate = () => `
+const createSortTemplate = (currentSortType) => `
     <form class="trip-events__trip-sort  trip-sort" action="#" method="get">
-      ${TRIP_SORT_ITEMS.map((item) => createTripSortItemTemplate(item)).join('')}
+      ${Object.values(SortType).map((type) => createTripSortItemTemplate(type.name, type.disabled, currentSortType)).join('')}
     </form>`;
 
 export default class SortView extends AbstractView {
+  #currentSortType = null;
+  #handleSortTypeChange = null;
+
+  constructor({ currentSortType, onSortTypeChange }) {
+    super();
+    this.#currentSortType = currentSortType;
+    this.#handleSortTypeChange = onSortTypeChange;
+
+    this.element.addEventListener('change', this.#sortTypeChangeHandler);
+  }
+
   get template() {
-    return createSortTemplate();
+    return createSortTemplate(this.#currentSortType);
   }
+
+  #sortTypeChangeHandler = (event) => this.#handleSortTypeChange(event.target.dataset.sortType);
 }