feat: add all views extands AbstractView (from framework)

package.json

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

src/main.js

@@ -1,6 +1,6 @@
 import NewFilters from './view/filters-view';
 import NewTripInfo from './view/trip-info-view';
-import { RenderPosition, render } from './render';
+import { RenderPosition, render } from './framework/render';
 import MainPresenter from './presenter/main-presenter';
 import PointModel from './model/point-model';
 

src/presenter/main-presenter.js

@@ -3,7 +3,8 @@ import EditPoint from '../view/edit-point-view';
 import CreatePoint from '../view/create-point-view';
 import PointItemView from '../view/point-item-view';
 import SortingView from '../view/sorting-view';
-import { render } from '../render';
+import { render } from '../framework/render';
+
 
 export default class MainPresenter {
   pointsListComponent = new PointListView();
@@ -20,11 +21,11 @@ export default class MainPresenter {
 
     render(new SortingView(), this.pointsContainer);
     render(this.pointsListComponent, this.pointsContainer);
-    render(new EditPoint({point: this.points[0], offers: this.offers, destinations: this.destinations}), this.pointsListComponent.getElement());
-    render(new CreatePoint(), this.pointsListComponent.getElement());
+    render(new EditPoint({point: this.points[0], offers: this.offers, destinations: this.destinations}), this.pointsListComponent.element);
+    render(new CreatePoint(), this.pointsListComponent.element);
 
-    for (let i = 0; i < this.points.length; i++) {
-      render(new PointItemView({point: this.points[i], offers: this.offers, destinations: this.destinations}), this.pointsListComponent.getElement());
+    for (let i = 1; i < this.points.length; i++) {
+      render(new PointItemView({point: this.points[i], offers: this.offers, destinations: this.destinations}), this.pointsListComponent.element);
     }
   }
 }

src/view/create-point-view.js

@@ -1,6 +1,6 @@
-import { createElement } from '../render';
 import { capitalize } from '../util';
 import { TYPES, CITIES } from '../const';
+import AbstractView from '../framework/view/abstract-view';
 
 const DEFAULT_TYPE = 'Flight';
 const DEFAULT_DESTINATION = 'Geneva';
@@ -143,20 +143,8 @@ function createCreatePointViewTemplate() {
   </form>
 </li>`;
 }
-export default class CreatePointView {
-  getTemplate() {
+export default class CreatePointView extends AbstractView {
+  get template() {
     return createCreatePointViewTemplate();
   }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-
-    return this.element;
-  }
-
-  removeElement() {
-    this.element = null;
-  }
 }

src/view/edit-point-view.js

@@ -1,6 +1,6 @@
-import { createElement } from '../render';
 import { capitalize, humanizePointDate } from '../util';
 import { CITIES, DATE_WITH_TIME_FORMAT, TYPES } from '../const';
+import AbstractView from '../framework/view/abstract-view';
 
 const createOfferClass = (offerTitle) => {
   const splittedOfferTitles = offerTitle.split(' ');
@@ -114,26 +114,19 @@ function createEditPointViewTemplate(point, offers, destinations) {
 </li>`;
 }
 
-export default class EditPointView {
-  constructor({ point, offers, destinations }) {
-    this.point = point;
-    this.offers = offers;
-    this.destinations = destinations;
-  }
-
-  getTemplate() {
-    return createEditPointViewTemplate(this.point, this.offers, this.destinations);
-  }
+export default class EditPointView extends AbstractView {
+  #point = null;
+  #offers = null;
+  #destinations = null;
 
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-
-    return this.element;
+  constructor({ point, offers, destinations }) {
+    super();
+    this.#point = point;
+    this.#offers = offers;
+    this.#destinations = destinations;
   }
 
-  removeElement() {
-    this.element = null;
+  get template() {
+    return createEditPointViewTemplate(this.#point, this.#offers, this.#destinations);
   }
 }

src/view/filters-view.js

@@ -1,5 +1,5 @@
-import { createElement } from '../render';
 import { capitalize } from '../util';
+import AbstractView from '../framework/view/abstract-view';
 
 const FILTERS = [
   {
@@ -32,20 +32,8 @@ function createFiltersViewTemplate() {
 </form>`;
 }
 
-export default class FiltersView {
-  getTemplate() {
+export default class FiltersView extends AbstractView {
+  get template() {
     return createFiltersViewTemplate();
   }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-
-    return this.element;
-  }
-
-  removeElement() {
-    this.element = null;
-  }
 }

src/view/point-item-view.js

@@ -1,6 +1,6 @@
-import { createElement } from '../render';
 import { humanizePointDate, getPointDuration } from '../util';
 import { DATE_FORMAT, TIME_FORMAT } from '../const';
+import AbstractView from '../framework/view/abstract-view';
 
 const getOffers = (offerType, offersList) => {
   const offers = offersList.find((offer) => offer.type === offerType).offers;
@@ -54,26 +54,19 @@ function createPointItemViewTemplate(point, offers, destinations) {
 </li>`;
 }
 
-export default class PointItemView {
-  constructor({ point, offers, destinations }) {
-    this.point = point;
-    this.offers = offers;
-    this.destinations = destinations;
-  }
-
-  getTemplate() {
-    return createPointItemViewTemplate(this.point, this.offers, this.destinations);
-  }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
+export default class PointItemView extends AbstractView {
+#point = null;
+#offers = null;
+#destinations = null;
 
-    return this.element;
+  constructor({ point, offers, destinations }) {
+    super();
+    this.#point = point;
+    this.#offers = offers;
+    this.#destinations = destinations;
   }
 
-  removeElement() {
-    this.element = null;
+  get template() {
+    return createPointItemViewTemplate(this.#point, this.#offers, this.#destinations);
   }
 }

src/view/point-list-view.js

@@ -1,23 +1,11 @@
-import { createElement } from '../render';
+import AbstractView from '../framework/view/abstract-view';
 
 function createPointListViewTemplate() {
   return '<ul class="trip-events__list"></ul>';
 }
 
-export default class PointListView {
-  getTemplate() {
+export default class PointListView extends AbstractView {
+  get template() {
     return createPointListViewTemplate();
   }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-
-    return this.element;
-  }
-
-  removeElement() {
-    this.element = null;
-  }
 }

src/view/sorting-view.js

@@ -1,5 +1,5 @@
-import { createElement } from '../render';
 import { capitalize } from '../util';
+import AbstractView from '../framework/view/abstract-view';
 
 const SORTINGS = [
   {
@@ -35,20 +35,8 @@ function createSortingViewTemplate() {
   </form>`;
 }
 
-export default class SortingView {
-  getTemplate() {
+export default class SortingView extends AbstractView {
+  get template() {
     return createSortingViewTemplate();
   }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-
-    return this.element;
-  }
-
-  removeElement() {
-    this.element = null;
-  }
 }

src/view/trip-info-view.js

@@ -1,4 +1,4 @@
-import { createElement } from '../render';
+import AbstractView from '../framework/view/abstract-view';
 
 function createTripInfoViewTemplate() {
   return `<section class="trip-main__trip-info  trip-info">
@@ -14,20 +14,8 @@ function createTripInfoViewTemplate() {
 </section>`;
 }
 
-export default class TripInfoView {
-  getTemplate() {
+export default class TripInfoView extends AbstractView {
+  get template() {
     return createTripInfoViewTemplate();
   }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-
-    return this.element;
-  }
-
-  removeElement() {
-    this.element = null;
-  }
 }

webpack.config.js

@@ -40,7 +40,7 @@ module.exports = {
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader']
-      }
-    ]
-  }
+      },
+    ],
+  },
 };