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

package.json

@@ -20,9 +20,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-cli": "5.0.1",
     "webpack-dev-server": "4.13.3"
   },

src/framework/render.js

@@ -77,4 +77,4 @@ function remove(component) {
   component.removeElement();
 }
 
-export {RenderPosition, createElement, render, replace, remove};
+export { RenderPosition, createElement, render, replace, remove };

src/main.js

@@ -1,6 +1,6 @@
+import { render } from './framework/render.js';
 import EventsModel from './model/events-model.js';
 import EventsPresenter from './presenter/events-presenter.js';
-import { render } from './render.js';
 import FiltersView from './view/filters-view.js';
 
 const filtersContainer = document.querySelector('.trip-controls__filters');

src/presenter/events-presenter.js

@@ -1,4 +1,4 @@
-import { render } from '../render.js';
+import { render, replace } from '../framework/render.js';
 import EditEventView from '../view/edit-event-view.js';
 import EventView from '../view/event-view.js';
 import EventsListView from '../view/events-list-view.js';
@@ -13,25 +13,50 @@
     this.eventsModel = eventsModel;
   }
 
-
   init() {
     this.events = [...this.eventsModel.getEvents()];
     this.destinations = [...this.eventsModel.getDestinations()];
     this.offers = [...this.eventsModel.getOffers()];
     render(new EventsSortView(), this.eventsContainer);
     render(this.listComponent, this.eventsContainer);
 
-    render(new EditEventView({ event: this.events[0], destination: this.eventsModel.getDestinationById(this.events[0].destination), offers: this.eventsModel.getOffersByType(this.events[0].type), allDestinations: this.eventsModel.getAllDestinationsNames() }), this.listComponent.getElement());
-
-    render(new EditEventView({ allDestinations: this.eventsModel.getAllDestinationsNames() }), this.listComponent.getElement());
-
     for (let i = 1; i < this.events.length; i++) {
       const event = this.events[i];
       const type = this.events[i].type;
       const destination = this.eventsModel.getDestinationById(event.destination);
       const offers = this.eventsModel.getOffersById(event.offers, type);
 
-      render(new EventView({ event, destination, offers, }), this.listComponent.getElement());
+      const eventComponent = new EventView({
+        event, destination, offers, onClick: () => {
+          replaceEventToEditForm();
+          document.addEventListener('keydown', onEscKeyDown);
+        }
+      });
+      const editEventFormComponent = new EditEventView({
+        event, destination, offers,
+        allDestinations: this.eventsModel.getAllDestinationsNames(),
+        onSubmit: () => {
+          replaceEditFormToEvent();
+          document.removeEventListener('keydown', onEscKeyDown);
+        },
+        onClick: () => replaceEditFormToEvent()
+      });
+
+      // Ругается на Function Declaration, хотя без поднятия здесь никак(есть ли какой-нибудь совет?)
+
+      function onEscKeyDown(event) {
+        event.preventDefault();
+        replaceEditFormToEvent();
+        document.removeEventListener('keydown', onEscKeyDown);
+      }
+      function replaceEventToEditForm() {
+        replace(editEventFormComponent, eventComponent);
+      };
+      function replaceEditFormToEvent() {
+        replace(eventComponent, editEventFormComponent);
+      };
+      render(eventComponent, this.listComponent.element);
+
     }
   }
 }