Учебный проект: долгая прогулка

package.json

@@ -24,7 +24,6 @@
     "test": "npm run test::eslint && npm run jest"
   },
   "dependencies": {
-    "axios": "0.21.0",
     "chalk": "4.1.0",
     "cross-env": "7.0.2",
     "dotenv": "8.2.0",
@@ -34,15 +33,17 @@
     "pg": "8.5.1",
     "pino": "6.7.0",
     "pug": "3.0.0",
-    "sequelize": "6.3.5"
+    "sequelize": "6.4.0"
   },
   "devDependencies": {
+    "axios": "0.21.1",
     "eslint": "7.11.0",
     "eslint-config-htmlacademy": "0.6.0",
     "jest": "26.5.3",
     "nodemon": "2.0.5",
     "pino-pretty": "4.3.0",
     "pug-lint": "2.6.0",
-    "supertest": "5.0.0"
+    "sqlite3": "5.0.0",
+    "supertest": "6.1.1"
   }
 }

src/express/api.js

@@ -21,8 +21,8 @@ class API {
     return response.data;
   }
 
-  getOffers() {
-    return this._load(`/offers`);
+  getOffers({comments} = {}) {
+    return this._load(`/offers`, {params: {comments}});
   }
 
   getOffer(id) {
@@ -33,8 +33,8 @@ class API {
     return this._load(`/search`, {params: {query}});
   }
 
-  getCategories() {
-    return this._load(`/categories`);
+  getCategories(count) {
+    return this._load(`/categories`, {params: {count}});
   }
 
   createOffer(data) {

src/express/routes/main-routes.js

@@ -9,9 +9,12 @@ const ROOT = `main`;
 const mainRouter = new Router();
 
 mainRouter.get(`/`, async (req, res) => {
-  const _offers = await api.getOffers();
+  const [_offers, categories] = await Promise.all([
+    api.getOffers(),
+    api.getCategories(true),
+  ]);
 
-  res.render(`${ROOT}/main`, {_offers});
+  res.render(`${ROOT}/main`, {_offers, categories});
 });
 
 mainRouter.get(`/search`, async (req, res) => {

src/express/routes/my-routes.js

@@ -15,7 +15,7 @@ myRouter.get(`/`, async (req, res) => {
 });
 
 myRouter.get(`/comments`, async (req, res) => {
-  const _offers = await api.getOffers();
+  const _offers = await api.getOffers({comments: true});
 
   res.render(`${ROOT}/comments`, {_offers: _offers.slice(0, 3)});
 });

src/express/routes/offers-routes.js

@@ -25,7 +25,12 @@ const storage = multer.diskStorage({
 
 const upload = multer({storage});
 
-offersRouter.get(`/add`, (req, res) => res.render(`${ROOT}/add`));
+offersRouter.get(`/add`, async (req, res) => {
+  const categories = await api.getCategories();
+
+  res.render(`${ROOT}/add`, {categories});
+});
+
 offersRouter.post(`/add`, upload.single(`avatar`), async (req, res) => {
   const {file: {
     filename: picture,
@@ -64,7 +69,15 @@ offersRouter.get(`/edit/:id`, async (req, res) => {
   res.render(`${ROOT}/edit`, {offer, categories});
 });
 
-offersRouter.get(`/category/:id`, (req, res) => res.render(`${ROOT}/category`));
-offersRouter.get(`/:id`, (req, res) => res.render(`${ROOT}/offer`));
+offersRouter.get(`/:id`, async (req, res) => {
+  const {id} = req.params;
+
+  const _offer = await api.getOffer(id, true);
+
+  res.render(`${ROOT}/offer`, {_offer});
+});
+
+offersRouter.get(`/category/:id`, (req, res) =>
+  res.render(`${ROOT}/category`));
 
 module.exports = offersRouter;

src/express/templates/layout.pug

@@ -10,8 +10,15 @@ head
 body
   mixin ticketLabel(type)
     span(class!=attributes.class || `ticket-card__label`) #{type === `OFFER` ? `Куплю` : `Продам`}
+
+  - const getRandomInt = (max) => Math.ceil(Math.random() * max);
+  mixin categoryImage(category)
+    - const idPadded = `0${getRandomInt(6)}`
+      img(src=`/img/cat${idPadded}.jpg` srcset=`img/cat${idPadded}@2x.jpg 2x` alt=category.name)
+
   include partials/header.pug
   block content
   include partials/footer.pug
+
   script(src='/js/vendor.js')
   script(src='/js/main.js')

src/express/templates/main/main.pug

@@ -10,23 +10,24 @@ block content
         .tickets-list__header
           p.tickets-list__title Самое свежее
         ul
-          each offer in _offers
+          each _offer in _offers
             li.tickets-list__item
               .ticket-card.ticket-card--color01
                 .ticket-card__img
-                  img(src=`/img/${offer.picture}` alt=offer.title)
+                  img(src=`/img/${_offer.picture}` alt=_offer.title)
                 .ticket-card__info
-                  +ticketLabel(offer.type)
+                  +ticketLabel(_offer.type)
                   .ticket-card__categories
-                    a(href="#") #{offer.categories}
+                    each category in _offer.categories
+                      a(href="#") #{category.name}
                   .ticket-card__header
                     h3.ticket-card__title
-                      a(href="#") #{offer.title}
+                      a(href="#") #{_offer.title}
                     p.ticket-card__price
-                      span.js-sum #{offer.sum}
+                      span.js-sum #{_offer.sum}
                       |  ₽
                   .ticket-card__desc
-                    p #{offer.description}
+                    p #{_offer.description}
     section.tickets-list
       h2.visually-hidden Самые обсуждаемые предложения
       .tickets-list__wrapper

src/express/templates/main/search.pug

@@ -18,7 +18,7 @@ block content
                   +ticketLabel(_offer.type)
                   .ticket-card__categories
                     each category of _offer.categories
-                      a(href='#') #{category}
+                      a(href='#') #{category.name}
                   .ticket-card__header
                     h3.ticket-card__title
                       a(href='#') #{_offer.title}

src/express/templates/my/tickets.pug

@@ -8,19 +8,20 @@ block content
           a.tickets-list__btn.btn.btn--big(href='/offers/add')
             span Новая публикация
         ul
-          each offer in _offers
+          each _offer in _offers
             li.tickets-list__item.js-card
               .ticket-card.ticket-card--color01
                 .ticket-card__img
-                  img(src=`/img/${offer.picture}` alt=offer.title)
+                  img(src=`/img/${_offer.picture}` alt=_offer.title)
                 .ticket-card__info
-                  +ticketLabel(offer.type)
+                  +ticketLabel(_offer.type)
                   .ticket-card__categories
-                    a(href='#') #{offer.category}
+                    each category in _offer.categories
+                      a(href='#') #{category.name}
                   .ticket-card__header
                     h3.ticket-card__title
-                      a(href='#') #{offer.title}
+                      a(href='#') #{_offer.title}
                     p.ticket-card__price
-                      span.js-sum #{offer.sum}
+                      span.js-sum #{_offer.sum}
                       |  ₽
                 button.ticket-card__del.js-delete(type='button') Удалить

src/express/templates/offers/add.pug

@@ -26,10 +26,8 @@ block content
                   span Обязательное поле
               .ticket-form__row
                 select#category-field.form__select.js-multiple-select(name='category' data-label='Выбрать категорию публикации')
-                  option(value='1') Дом
-                  option(value='2') Спорт и отдых
-                  option(value='3') Авто
-                  option(value='4') Электроника
+                  each category in categories
+                    option(value=category.id) #{category.name}
               .ticket-form__row
                 .form__field.form__field--price
                   input#price-field.js-field.js-price(type='number' name='price' min='1' required)

src/express/templates/offers/edit.pug

@@ -28,8 +28,8 @@ block content
                   span Обязательное поле
               .ticket-form__row
                 select#category-field.form__select.js-multiple-select(name='category' data-label='Выбрать категорию публикации' multiple)
-                  each category, index in categories
-                    option(value=index selected=offer.categories.includes(category)) #{category}
+                  each category in categories
+                    option(value=category.id) #{category.name}
               .ticket-form__row
                 .form__field.form__field--price
                   input#price-field.js-field.js-price(type='number' name='price' min='1' value=offer.price required)

src/express/templates/offers/offer.pug

@@ -1,42 +1,53 @@
 extends ../layout.pug
 
 block content
+  -
+    const formatDate = (dateString) => {
+      const date = new Date(dateString);
+
+      return date.toLocaleString();
+    }
+
   section.ticket
     .ticket__wrapper
       h1.visually-hidden Карточка объявления
       .ticket__content
         .ticket__img
-          img(src='img/ticket.jpg' srcset='img/[email protected] 2x' alt='Изображение товара')
+          img(src=`/img/${_offer.picture}.jpg`
+            srcset=`/img/${_offer.picture}@2x.jpg 2x`
+            alt=_offer.title)
         .ticket__info
-          h2.ticket__title Мое старое кресло
+          h2.ticket__title #{_offer.title}
           .ticket__header
             p.ticket__price
-              span.js-sum 4000
+              span.js-sum #{_offer.sum}
               |  ₽
-            p.ticket__action ПРОДАМ
+            p.ticket__action #{_offer.type === `OFFER` ? `КУПЛЮ` : `ПРОДАМ`}
           .ticket__desc
-            p Продам свое старое кресло, чтобы сидеть и читать книги зимними вечерами. Ножки мягкие, мой пол не царапают. Кресло почти новое – продаю, т.к. надоел серый цвет. Можно, конечно, накинуть плед и спасти ситуацию, но я все-таки хочу просто другое кресло. В общем оно на самом деле удобное и с ним все хорошо, просто нам пора расстаться.
+            p #{_offer.description}
           .ticket__data
             p
               b Дата добавления:
-              span 20 ноября 2019
+              span #{formatDate(_offer.createdAt)}
             p
               b Автор:
               a(href='#') Денис Шкатулкин
             p
               b Контакты:
               a(href='mailto:[email protected]') [email protected]
           ul.ticket__tags
-            li
-              a.category-tile.category-tile--small(href='#')
-                span.category-tile__image
-                  img(src='img/cat.jpg' srcset='img/[email protected] 2x' alt='Иконка категории')
-                span.category-tile__label Дом
+            each category in _offer.categories
+              li
+                a.category-tile.category-tile--small(href='#')
+                  span.category-tile__image
+                    +categoryImage(category)
+                  span.category-tile__label #{category.name}
             li
               a.category-tile.category-tile--small(href='#')
                 span.category-tile__image
                   img(src='img/cat04.jpg' srcset='img/[email protected] 2x' alt='Иконка категории')
                 span.category-tile__label Спорт и отдых
+
       .ticket__comments
         h2.ticket__subtitle Коментарии
         .ticket__comment-form
@@ -51,24 +62,16 @@ block content
                 label(for='comment-field') Текст комментария
                 span Обязательное поле
             button.comment-form__button.btn.btn--white.js-button(type='submit' disabled) Отправить
+
         .ticket__comments-list
           ul.comments-list
-            li
-              .comment-card
-                .comment-card__header
-                  a.comment-card__avatar.avatar(href='#')
-                    img(src='img/avatar02.jpg' srcset='img/[email protected] 2x' alt='Аватар пользователя')
-                  p.comment-card__author Георгий Шпиц
-                .comment-card__content
-                  p Что это за рухлядь? Стыдно такое даже фотографировать, не то, что продавать.
-            li
-              .comment-card
-                .comment-card__header
-                  a.comment-card__avatar.avatar(href='#')
-                    img(src='img/avatar03.jpg' srcset='img/[email protected] 2x' alt='Аватар пользователя')
-                  p.comment-card__author Александр Бурый
-                .comment-card__content
-                  p
-                    | А можете доставить мне домой? Готов доплатить 300 сверху.
-                    br
-                    | Живу в центре прямо рядом с Моховой улицей. Готов купить прямо сейчас. Мой телефон 9032594748
+            if _offer.comments && _offer.comments.length
+              each comment in _offer.comments
+                li
+                  .comment-card
+                    .comment-card__header
+                      a.comment-card__avatar.avatar(href='#')
+                        img(src='img/avatar03.jpg' srcset='img/[email protected] 2x' alt='Аватар пользователя')
+                      p.comment-card__author Александр Бурый
+                    .comment-card__content
+                      p #{comment.text}

src/express/templates/partials/categories.pug

@@ -1,45 +1,10 @@
 section.categories-list
-  h1.visually-hidden Сервис объявлений "Куплю - продам"
+  h1.visually-hidden Сервис объявлений «Куплю — продам»
   ul.categories-list__wrapper
-    li.categories-list__item
-      a.category-tile.category-tile--default(href='#')
-        span.category-tile__image
-          img(src='img/cat.jpg' srcset='img/[email protected] 2x' alt='Иконка категории')
-        span.category-tile__label
-          | Дом 
-          span.category-tile__qty.js-qty 81
-    li.categories-list__item
-      a.category-tile.category-tile--default(href='#')
-        span.category-tile__image
-          img(src='img/cat02.jpg' srcset='img/[email protected] 2x' alt='Иконка категории')
-        span.category-tile__label
-          | Электроника 
-          span.category-tile__qty.js-qty 62
-    li.categories-list__item
-      a.category-tile.category-tile--default(href='#')
-        span.category-tile__image
-          img(src='img/cat03.jpg' srcset='img/[email protected] 2x' alt='Иконка категории')
-        span.category-tile__label
-          | Одежда 
-          span.category-tile__qty.js-qty 106
-    li.categories-list__item
-      a.category-tile.category-tile--default(href='#')
-        span.category-tile__image
-          img(src='img/cat04.jpg' srcset='img/[email protected] 2x' alt='Иконка категории')
-        span.category-tile__label
-          | Спорт/отдых 
-          span.category-tile__qty.js-qty 86
-    li.categories-list__item
-      a.category-tile.category-tile--default(href='#')
-        span.category-tile__image
-          img(src='img/cat05.jpg' srcset='img/[email protected] 2x' alt='Иконка категории')
-        span.category-tile__label
-          | Авто 
-          span.category-tile__qty.js-qty 34
-    li.categories-list__item
-      a.category-tile.category-tile--default(href='#')
-        span.category-tile__image
-          img(src='img/cat06.jpg' srcset='img/[email protected] 2x' alt='Иконка категории')
-        span.category-tile__label
-          | Книги 
-          span.category-tile__qty.js-qty 92
+    each category in categories
+      li.categories-list__item
+        a.category-tile.category-tile--default(href='#')
+          span.category-tile__image
+            +categoryImage(category)
+          span.category-tile__label #{category.name} 
+            span.category-tile__qty.js-qty #{category.count}