Разделяй и властвуй

package.json

@@ -13,9 +13,11 @@
     "@babel/preset-env": "7.21.4",
     "babel-loader": "9.1.2",
     "copy-webpack-plugin": "11.0.0",
+    "css-loader": "6.7.3",
     "eslint": "8.38.0",
     "eslint-config-htmlacademy": "9.0.0",
     "html-webpack-plugin": "5.5.1",
+    "style-loader": "3.3.2",
     "webpack": "5.79.0",
     "webpack-cli": "5.0.1",
     "webpack-dev-server": "4.13.3"

src/model/events-model.js

@@ -1,15 +1,15 @@
 import {mockDestinations, mockEvents, mockOffers} from '../mock/event';
 
 export default class EventsModel {
-  getEvents() {
+  get events() {
     return [...mockEvents];
   }
 
-  getDestinations() {
+  get destinations() {
     return [...mockDestinations];
   }
 
-  getOffers() {
+  get offers() {
     return [...mockOffers];
   }
 }

src/presenter/presenter.js

@@ -1,31 +1,66 @@
-import {render} from '../render';
+import {render, replace} from '../framework/render';
 import EventItem from '../view/event-item';
 import EventList from '../view/event-list';
 import Filters from '../view/filters';
 import Sorting from '../view/sorting';
 import EditForm from '../view/edit-form';
 
 export default class Presenter {
-  eventListComponent = new EventList();
-  eventsContainer = document.querySelector('.trip-events');
-  filterContainer = document.querySelector('.trip-controls__filters');
+  #eventListComponent = new EventList();
+  #eventsContainer = document.querySelector('.trip-events');
+  #filterContainer = document.querySelector('.trip-controls__filters');
+  #eventsModel = null;
+  #events = null;
+  #destinations = null;
+  #offers = null;
 
   constructor({eventsModel}) {
-    this.eventsModel = eventsModel;
+    this.#eventsModel = eventsModel;
   }
 
   init() {
-    this.events = this.eventsModel.getEvents();
-    this.destinations = this.eventsModel.getDestinations();
-    this.offers = this.eventsModel.getOffers();
+    this.#events = this.#eventsModel.events;
+    this.#destinations = this.#eventsModel.destinations;
+    this.#offers = this.#eventsModel.offers;
 
-    render(new Filters(), this.filterContainer);
-    render(new Sorting(), this.eventsContainer);
-    render(this.eventListComponent, this.eventsContainer);
-    render(new EditForm({event:this.events[0], destinations: this.destinations, offers: this.offers}), this.eventListComponent.getElement());
+    render(new Filters(), this.#filterContainer);
+    render(new Sorting(), this.#eventsContainer);
+    render(this.#eventListComponent, this.#eventsContainer);
 
-    for (let i = 1; i < this.events.length; i++) {
-      render(new EventItem({event:this.events[i], destinations: this.destinations, offers: this.offers}), this.eventListComponent.getElement());
+    for (let i = 0; i < this.#events.length; i++) {
+      this.#renderEvent(this.#events[i]);
     }
   }
+
+  #renderEvent(event) {
+    const escKeyDownHandler = (evt) => {
+      if (evt.key === 'Escape') {
+        evt.preventDefault();
+        replaceFromEditToItem();
+        document.removeEventListener('keydown', escKeyDownHandler);
+      }
+    };
+
+    const editForm = new EditForm({event, destinations: this.#destinations, offers: this.#offers, submitHandler: () => {
+      replaceFromEditToItem();
+      document.removeEventListener('keydown', escKeyDownHandler);
+    }, clickHandler: () => {
+      replaceFromEditToItem();
+      document.removeEventListener('keydown', escKeyDownHandler);
+    }});
+    const eventItem = new EventItem({event, destinations: this.#destinations, offers: this.#offers, clickHandler: () => {
+      replaceFromItemToEdit();
+      document.addEventListener('keydown', escKeyDownHandler);
+    }});
+
+    function replaceFromEditToItem() {
+      replace(eventItem, editForm);
+    }
+
+    function replaceFromItemToEdit() {
+      replace(editForm,eventItem);
+    }
+
+    render(eventItem, this.#eventListComponent.element);
+  }
 }