From 997f752b5bce7fb528f95f80bd8288c594e2b5d3 Mon Sep 17 00:00:00 2001
From: Chikov-Dmitry <dmitrychickov@gmail.com>
Date: Tue, 28 Jan 2020 17:00:07 +0300
Subject: [PATCH 1/4] added recently viewed products

---
 CHANGELOG.md                                  |  19 +-
 package.json                                  |   4 +-
 src/components/homepage/Homepage.vue          |  25 -
 .../product_detail/ProductDetail.vue          | 277 ++++---
 .../recently_viewed/recently_viewed.vue       |  81 ++
 src/initial-state.json                        | 752 +++++++++---------
 src/store.js                                  |  26 +-
 7 files changed, 643 insertions(+), 541 deletions(-)
 delete mode 100644 src/components/homepage/Homepage.vue
 create mode 100644 src/components/recently_viewed/recently_viewed.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4b99853..69fea3d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,11 +1,12 @@
 # OTUS Vuemmerce CHANGELOG
 
- - 02.2019 - Добавить корзину by @CrazyBite
- - 02.2019 - Страница покупки by @dmitriypereverza
- - 08.2019 - Профиль пользователя by @antik9
- - 03.2019 - Добавить категории by @georgius1024
- - 08.2019 - Страница результатов поиска by @stvort
- - 08.2019 - Добавить компонент слайдера by @Kiselb
- - 08.2019 - добавить новости by @bazoon
- - 09.2019 - Добавить пагинацию by @810411
- - 10.2019 - Добавить дерево категорий by @yanky2000
\ No newline at end of file
+- 02.2019 - Добавить корзину by @CrazyBite
+- 02.2019 - Страница покупки by @dmitriypereverza
+- 08.2019 - Профиль пользователя by @antik9
+- 03.2019 - Добавить категории by @georgius1024
+- 08.2019 - Страница результатов поиска by @stvort
+- 08.2019 - Добавить компонент слайдера by @Kiselb
+- 08.2019 - добавить новости by @bazoon
+- 09.2019 - Добавить пагинацию by @810411
+- 10.2019 - Добавить дерево категорий by @yanky2000
+- 01.2020 - Недавно просмотренные товары by @Chikov-Dmitry
diff --git a/package.json b/package.json
index c3990f7..86903cb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuemmerce",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "private": true,
   "description": "Responsive ecommerce template built with Vue.js",
   "author": "ivan lori <ivan.lori@protonmail.com>",
@@ -85,4 +85,4 @@
     "type": "git",
     "url": "https://github.com/ivanlori/Vuemmerce.git"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/homepage/Homepage.vue b/src/components/homepage/Homepage.vue
deleted file mode 100644
index a68d3d8..0000000
--- a/src/components/homepage/Homepage.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <hero></hero>
-    <ads></ads>
-    <news></news>
-    <categories_list-container></categories_list-container>
-  </div>
-</template>
-
-<script>
-import CategoriesListContainer from '../categories/CategoriesListContainer';
-import HeroSection from '../hero/Hero';
-import VmNewsList from "../news/NewsListContainer";
-import ads from '../ads/ads';
-
-export default {
-  name: 'homepage-component',
-  components: {
-    'categories_list-container': CategoriesListContainer,
-    'hero': HeroSection,
-    'news': VmNewsList,
-    ads
-  }
-};
-</script>
diff --git a/src/components/product_detail/ProductDetail.vue b/src/components/product_detail/ProductDetail.vue
index 12be2fa..50fb688 100644
--- a/src/components/product_detail/ProductDetail.vue
+++ b/src/components/product_detail/ProductDetail.vue
@@ -1,80 +1,106 @@
 <template>
   <section>
     <breadcrumbs-component :items="path" />
-    <categories_navigation class="class='column is-2 is-pulled-left is-desktop is-narrow'" :id='category.id'></categories_navigation>
+    <categories_navigation
+      class="class='column is-2 is-pulled-left is-desktop is-narrow'"
+      :id="category.id"
+    ></categories_navigation>
     <div class="section">
       <div class="card is-clearfix columns">
         <div class="columns column is-one-thirds is-multiline">
           <figure class="card-image is-480x480 column is-full">
-            <img src="https://bulma.io/images/placeholders/480x480.png">
+            <img src="https://bulma.io/images/placeholders/480x480.png" />
           </figure>
-            <div class="card-image is-480x480 column is-full">
-              <product-detail-images-component v-bind:product-id="product.id"></product-detail-images-component>
-            </div>
+          <div class="card-image is-480x480 column is-full">
+            <product-detail-images-component v-bind:product-id="product.id"></product-detail-images-component>
           </div>
-          <div class="card-content column is-two-thirds">
-            <div class="card-content__title">
-              <h2 class="title is-4">{{ product.title }}
-                <button class="button is-small" :title="removeFromFavouriteLabel" v-show="product.isFavourite" @click="removeFromFavourite(product.id)">
-                  <span class="icon is-small">
-                    <i class="fas fa-heart"></i>
-                  </span>
-                </button>
-                <button class="button is-small" :title="addToFavouriteLabel" v-show="!product.isFavourite" @click="saveToFavorite(product.id)">
-                  <span class="icon is-small">
-                    <i class="far fa-heart"></i>
-                  </span>
-                </button>
-              </h2>
-            </div>
-            <div class="card-content__text">
-              <p>
+        </div>
+        <div class="card-content column is-two-thirds">
+          <div class="card-content__title">
+            <h2 class="title is-4">
+              {{ product.title }}
+              <button
+                class="button is-small"
+                :title="removeFromFavouriteLabel"
+                v-show="product.isFavourite"
+                @click="removeFromFavourite(product.id)"
+              >
+                <span class="icon is-small">
+                  <i class="fas fa-heart"></i>
+                </span>
+              </button>
+              <button
+                class="button is-small"
+                :title="addToFavouriteLabel"
+                v-show="!product.isFavourite"
+                @click="saveToFavorite(product.id)"
+              >
+                <span class="icon is-small">
+                  <i class="far fa-heart"></i>
+                </span>
+              </button>
+            </h2>
+          </div>
+          <div class="card-content__text">
+            <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud
+            </p>
+          </div>
+          <div class="card-content__ratings" v-if="product.rating === 1">
+            <i class="fa fa-star"></i>
+          </div>
+          <div class="card-content__ratings" v-else-if="product.rating === 2">
+            <i class="fa fa-star"></i>
+            <i class="fa fa-star"></i>
+          </div>
+          <div class="card-content__ratings" v-else-if="product.rating === 3">
+            <i class="fa fa-star"></i>
+            <i class="fa fa-star"></i>
+            <i class="fa fa-star"></i>
+          </div>
+          <div class="card-content__ratings" v-else-if="product.rating === 4">
+            <i class="fa fa-star"></i>
+            <i class="fa fa-star"></i>
+            <i class="fa fa-star"></i>
+            <i class="fa fa-star"></i>
+          </div>
+          <div class="card-content__ratings" v-else-if="product.rating === 5">
+            <i class="fa fa-star"></i>
+            <i class="fa fa-star"></i>
+            <i class="fa fa-star"></i>
+            <i class="fa fa-star"></i>
+            <i class="fa fa-star"></i>
+          </div>
+          <div class="card-content__reviews">
+            <div class="is-pulled-left">
+              <p>
+                <strong>{{ product.reviews > 0 ? `${product.reviews} Reviews` : 'No reviews' }}</strong>
               </p>
             </div>
-            <div class="card-content__ratings" v-if="product.rating === 1">
-              <i class="fa fa-star"></i>
-            </div>
-            <div class="card-content__ratings" v-else-if="product.rating === 2">
-              <i class="fa fa-star"></i>
-              <i class="fa fa-star"></i>
-            </div>
-            <div class="card-content__ratings" v-else-if="product.rating === 3">
-              <i class="fa fa-star"></i>
-              <i class="fa fa-star"></i>
-              <i class="fa fa-star"></i>
-            </div>
-            <div class="card-content__ratings" v-else-if="product.rating === 4">
-              <i class="fa fa-star"></i>
-              <i class="fa fa-star"></i>
-              <i class="fa fa-star"></i>
-              <i class="fa fa-star"></i>
-            </div>
-            <div class="card-content__ratings" v-else-if="product.rating === 5">
-              <i class="fa fa-star"></i>
-              <i class="fa fa-star"></i>
-              <i class="fa fa-star"></i>
-              <i class="fa fa-star"></i>
-              <i class="fa fa-star"></i>
-            </div>
-            <div class="card-content__reviews">
-              <div class="is-pulled-left">
-                <p><strong>{{ product.reviews > 0 ? `${product.reviews} Reviews` : 'No reviews' }}</strong></p>
-              </div>
-              <div class="select is-rounded is-small is-pulled-right">
-                <select @change="onSelectQuantity(product.id)" v-model="selected">
-                  <option v-for="quantity in quantityArray" :value="quantity">{{ quantity }}</option>
-                </select>
-              </div>
-            </div>
-            <div class="card-content__price is-pulled-left">
-              <span class="title is-3"><strong>{{ product.price }}&euro;</strong></span>
-            </div>
-            <div class="card-content__btn is-pulled-right">
-              <button class="button is-primary" v-if="!isAddedBtn" @click="addToCart(product.id)">{{ addToCartLabel }}</button>
-              <button class="button is-text" v-if="isAddedBtn" @click="removeFromCart(product.id)">{{ removeFromCartLabel }}</button>
+            <div class="select is-rounded is-small is-pulled-right">
+              <select @change="onSelectQuantity(product.id)" v-model="selected">
+                <option v-for="quantity in quantityArray" :value="quantity">{{ quantity }}</option>
+              </select>
             </div>
+          </div>
+          <div class="card-content__price is-pulled-left">
+            <span class="title is-3">
+              <strong>{{ product.price }}&euro;</strong>
+            </span>
+          </div>
+          <div class="card-content__btn is-pulled-right">
+            <button
+              class="button is-primary"
+              v-if="!isAddedBtn"
+              @click="addToCart(product.id)"
+            >{{ addToCartLabel }}</button>
+            <button
+              class="button is-text"
+              v-if="isAddedBtn"
+              @click="removeFromCart(product.id)"
+            >{{ removeFromCartLabel }}</button>
+          </div>
         </div>
       </div>
     </div>
@@ -82,120 +108,147 @@
 </template>
 
 <script>
-import BreadcrumbsComponent from '../Breadcrumbs'
-import ProductDetailImagesComponent from './ProductDetailImages'
-import CategoriesNavigation from '../categories_nav/CategoriesNavigation';
+import BreadcrumbsComponent from "../Breadcrumbs";
+import ProductDetailImagesComponent from "./ProductDetailImages";
+import CategoriesNavigation from "../categories_nav/CategoriesNavigation";
 
 export default {
-  name: 'product-detail-component',
+  name: "product-detail-component",
   components: {
     BreadcrumbsComponent,
     ProductDetailImagesComponent,
-    'categories_navigation': CategoriesNavigation,
+    categories_navigation: CategoriesNavigation
   },
-  data () {
+  data() {
     return {
-      addToCartLabel: 'Add to cart',
-      removeFromCartLabel: 'Remove from cart',
-      addToFavouriteLabel: 'Add to favourite',
-      removeFromFavouriteLabel: 'Remove from favourite',
+      addToCartLabel: "Add to cart",
+      removeFromCartLabel: "Remove from cart",
+      addToFavouriteLabel: "Add to favourite",
+      removeFromFavouriteLabel: "Remove from favourite",
       product: {},
       selected: 1,
       quantityArray: []
     };
   },
 
-  created () {
+  created() {
     this.product = this.$store.getters.getProductById(this.$route.params.id);
     this.selected = this.product.quantity;
 
     for (let i = 1; i <= 20; i++) {
       this.quantityArray.push(i);
     }
+    this.addToViewed();
   },
 
   computed: {
-    isAddedBtn () {
+    isAddedBtn() {
       return this.product.isAddedBtn;
     },
-    category () {
+    category() {
       return this.$store.getters.getCategoryById(this.product.category);
     },
-    path () {
+    path() {
       return [
         {
-          text: 'Home',
-          to: { path: '/' }
+          text: "Home",
+          to: { path: "/" }
         },
         {
-          text: this.category ? this.category.title : '',
-          to: { 
-            name: 'category-products-component', 
+          text: this.category ? this.category.title : "",
+          to: {
+            name: "category-products-component",
             params: {
               id: this.category ? this.category.id : 0
-            } 
+            }
           }
         },
         {
-          text: this.product.title,
+          text: this.product.title
         }
-      ]
+      ];
     }
-
   },
 
   methods: {
-    addToCart (id) {
+    addToCart(id) {
       let data = {
         id: id,
         status: true
-      }
-      this.$store.commit('addToCart', id);
-      this.$store.commit('setAddedBtn', data);
+      };
+      this.$store.commit("addToCart", id);
+      this.$store.commit("setAddedBtn", data);
     },
-    removeFromCart (id) {
+    removeFromCart(id) {
       let data = {
         id: id,
         status: false
-      }
-      this.$store.commit('removeFromCart', id);
-      this.$store.commit('setAddedBtn', data);
+      };
+      this.$store.commit("removeFromCart", id);
+      this.$store.commit("setAddedBtn", data);
     },
-    onSelectQuantity (id) {
+    onSelectQuantity(id) {
       let data = {
         id: id,
         quantity: this.selected
-      }
-      this.$store.commit('quantity', data);
+      };
+      this.$store.commit("quantity", data);
     },
-    saveToFavorite (id) {
+    saveToFavorite(id) {
       let isUserLogged = this.$store.state.userInfo.isLoggedIn;
 
       if (isUserLogged) {
-        this.$store.commit('addToFavourite', id);
+        this.$store.commit("addToFavourite", id);
       } else {
-        this.$store.commit('showLoginModal', true);
+        this.$store.commit("showLoginModal", true);
+      }
+    },
+    removeFromFavourite(id) {
+      this.$store.commit("removeFromFavourite", id);
+    },
+    repeatedItem(item) {
+      let viewedProductsArr = this.$store.state.viewedProductsArr;
+      for (let i = 0; i < viewedProductsArr.length; i++) {
+        if (viewedProductsArr[i] === parseInt(item)) {
+          return true;
+        }
       }
+      return false;
     },
-    removeFromFavourite (id) {
-      this.$store.commit('removeFromFavourite', id);
+    addToViewed() {
+      if (
+        localStorage.getItem("viewedProducts") !== null &&
+        this.$store.state.viewedProductsArr.length === 0
+      ) {
+        let arr = localStorage.getItem("viewedProducts").split(",");
+        for (let item of arr) {
+          if (this.repeatedItem(item) === false) {
+            this.$store.commit("changeViewedProductsArr", parseInt(item));
+          }
+        }
+      } else if (this.repeatedItem(this.product.id) === false) {
+        this.$store.commit(
+          "changeViewedProductsArr",
+          parseInt(this.product.id)
+        );
+      }
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-  .card-content {
-    padding: 15px 10px 15px 0;
+.card-content {
+  padding: 15px 10px 15px 0;
 
-    &__text {
-      margin: 15px 0;
-    }
-    &__reviews {
-      display: inline-block;
-      width: 100%;
-      margin-bottom: 10px;
-    }
+  &__text {
+    margin: 15px 0;
+  }
+  &__reviews {
+    display: inline-block;
+    width: 100%;
+    margin-bottom: 10px;
   }
+}
 </style>
 
diff --git a/src/components/recently_viewed/recently_viewed.vue b/src/components/recently_viewed/recently_viewed.vue
new file mode 100644
index 0000000..59ee903
--- /dev/null
+++ b/src/components/recently_viewed/recently_viewed.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="section">
+    <h3 class="title">Recently viewed</h3>
+    <div class="columns is-centered is-multiline">
+      <div class="card column is-one-quarter" v-for="product in products" :key="product.id">
+        <products-component :product="product"></products-component>
+      </div>
+      <div class="section" v-if="products.length === 0">
+        <p>{{ noProductLabel }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductsComponent from "../Products";
+export default {
+  name: "recently-viewed",
+  components: {
+    "products-component": ProductsComponent
+  },
+  data() {
+    return {
+      id: "",
+      noProductLabel: "No product found",
+      productsFiltered: []
+    };
+  },
+  created() {
+    if (
+      localStorage.getItem("viewedProducts") !== null &&
+      this.$store.state.viewedProductsArr.length === 0
+    ) {
+      let arr = localStorage.getItem("viewedProducts").split(",");
+      for (let item of arr) {
+        if (this.repeatedItem(item) === false) {
+          this.$store.commit("changeViewedProductsArr", parseInt(item));
+        }
+      }
+    }
+  },
+  computed: {
+    products() {
+      let viewedProducts = [];
+      const passports = this.$store.state.products.map(products => {
+        if (
+          products.id === this.$store.state.viewedProductsArr[0] ||
+          products.id === this.$store.state.viewedProductsArr[1] ||
+          products.id === this.$store.state.viewedProductsArr[2]
+        ) {
+          viewedProducts.push(products);
+        }
+      });
+      return viewedProducts;
+    }
+  },
+  methods: {
+    repeatedItem(item) {
+      let viewedProductsArr = this.$store.state.viewedProductsArr;
+      for (let i = 0; i < viewedProductsArr.length; i++) {
+        if (viewedProductsArr[i] === parseInt(item)) {
+          return true;
+        }
+      }
+      return false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+  text-align: center;
+  text-transform: capitalize;
+}
+.card {
+  margin: 10px;
+}
+</style>
+
+
diff --git a/src/initial-state.json b/src/initial-state.json
index f805196..8e934ef 100644
--- a/src/initial-state.json
+++ b/src/initial-state.json
@@ -1,6 +1,5 @@
 {
-  "categories": [
-    {
+  "categories": [{
       "id": 1,
       "title": "Category 1",
       "description": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit",
@@ -19,8 +18,7 @@
       "image": "http://lorempixel.com/640/480/technics/3/"
     }
   ],
-  "products": [
-    {
+  "products": [{
       "id": 1,
       "title": "Product 1",
       "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
@@ -32,48 +30,46 @@
       "isFavourite": false,
       "quantity": 1,
       "category": 1,
-      "images":
-        [
-          {
-              "title": "Slide #1",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #2",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #3",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #4",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #5",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #6",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #7",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #8",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #9",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #10",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          }
+      "images": [{
+          "title": "Slide #1",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #2",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #3",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #4",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #5",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #6",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #7",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #8",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #9",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #10",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        }
       ]
     },
     {
@@ -88,48 +84,46 @@
       "isFavourite": false,
       "quantity": 1,
       "category": 2,
-      "images":
-        [
-          {
-              "title": "Slide #1",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #2",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #3",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #4",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #5",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #6",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #7",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #8",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #9",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #10",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          }
+      "images": [{
+          "title": "Slide #1",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #2",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #3",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #4",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #5",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #6",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #7",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #8",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #9",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #10",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        }
       ]
     },
     {
@@ -144,48 +138,46 @@
       "isFavourite": false,
       "quantity": 1,
       "category": 3,
-      "images":
-        [
-          {
-              "title": "Slide #1",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #2",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #3",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #4",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #5",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #6",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #7",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #8",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #9",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #10",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          }
+      "images": [{
+          "title": "Slide #1",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #2",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #3",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #4",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #5",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #6",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #7",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #8",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #9",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #10",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        }
       ]
     },
     {
@@ -200,48 +192,46 @@
       "isFavourite": false,
       "quantity": 1,
       "category": 1,
-      "images":
-        [
-          {
-              "title": "Slide #1",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #2",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #3",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #4",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #5",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #6",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #7",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #8",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #9",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #10",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          }
+      "images": [{
+          "title": "Slide #1",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #2",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #3",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #4",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #5",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #6",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #7",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #8",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #9",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #10",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        }
       ]
     },
     {
@@ -256,48 +246,46 @@
       "isFavourite": false,
       "quantity": 1,
       "category": 2,
-      "images":
-        [
-          {
-              "title": "Slide #1",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #2",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #3",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #4",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #5",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #6",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #7",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #8",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #9",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #10",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          }
+      "images": [{
+          "title": "Slide #1",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #2",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #3",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #4",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #5",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #6",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #7",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #8",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #9",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #10",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        }
       ]
     },
     {
@@ -312,48 +300,46 @@
       "isFavourite": false,
       "quantity": 1,
       "category": 3,
-      "images":
-        [
-          {
-              "title": "Slide #1",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #2",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #3",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #4",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #5",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #6",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #7",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #8",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #9",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #10",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          }
+      "images": [{
+          "title": "Slide #1",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #2",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #3",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #4",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #5",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #6",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #7",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #8",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #9",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #10",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        }
       ]
     },
     {
@@ -368,48 +354,46 @@
       "isFavourite": false,
       "quantity": 1,
       "category": 1,
-      "images":
-        [
-          {
-              "title": "Slide #1",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #2",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #3",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #4",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #5",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #6",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #7",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #8",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #9",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #10",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          }
+      "images": [{
+          "title": "Slide #1",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #2",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #3",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #4",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #5",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #6",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #7",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #8",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #9",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #10",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        }
       ]
     },
     {
@@ -424,48 +408,46 @@
       "isFavourite": false,
       "quantity": 1,
       "category": 2,
-      "images":
-        [
-          {
-              "title": "Slide #1",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #2",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #3",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #4",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #5",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #6",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #7",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #8",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #9",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #10",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          }
+      "images": [{
+          "title": "Slide #1",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #2",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #3",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #4",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #5",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #6",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #7",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #8",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #9",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #10",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        }
       ]
     },
     {
@@ -480,48 +462,46 @@
       "isFavourite": false,
       "quantity": 1,
       "category": 3,
-      "images":
-        [
-          {
-              "title": "Slide #1",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #2",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #3",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #4",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #5",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #6",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #7",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #8",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #9",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          },
-          {
-              "title": "Slide #10",
-              "src": "https://bulma.io/images/placeholders/128x128.png"
-          }
+      "images": [{
+          "title": "Slide #1",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #2",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #3",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #4",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #5",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #6",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #7",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #8",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #9",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        },
+        {
+          "title": "Slide #10",
+          "src": "https://bulma.io/images/placeholders/128x128.png"
+        }
       ]
     },
     {
@@ -642,8 +622,7 @@
       "category": 1
     }
   ],
-  "news": [
-    {
+  "news": [{
       "id": 0,
       "title": "amet nisi exercitation ex enim",
       "date": "Wed Jul 26 2006 15:49:19 GMT+0000 (UTC)",
@@ -808,5 +787,6 @@
     "openLoginModal": false,
     "openSignupModal": false,
     "openCheckoutModal": false
-  }
-}
+  },
+  "viewedProductsArr": []
+}
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index ccd0592..ce22684 100644
--- a/src/store.js
+++ b/src/store.js
@@ -5,7 +5,7 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: initalState,
-  
+
   getters: {
     getCategoryById: state => id => {
       return state.categories.find(category => category.id == id);
@@ -74,7 +74,7 @@ export default new Vuex.Store({
       return state.news.find(newItem => newItem.id == id);
     },
   },
-  
+
   mutations: {
     addToCart: (state, id) => {
       state.products.forEach(el => {
@@ -116,7 +116,7 @@ export default new Vuex.Store({
     setSearchParams: (state, searchParams) => {
       state.searchParams = searchParams
     },
-    
+
     saveAvatar: (state, avatarBinary) => {
       state.userInfo.avatarBinary = avatarBinary;
     },
@@ -175,9 +175,21 @@ export default new Vuex.Store({
           el.quantity = data.quantity;
         }
       });
+    },
+    changeViewedProductsArr: (state, data) => {
+      let arr = [];
+      if (state.viewedProductsArr.length === 3) {
+        arr = state.viewedProductsArr;
+        arr.shift();
+        arr.push(data);
+        state.viewedProductsArr = arr;
+        localStorage.setItem('viewedProducts', state.viewedProductsArr);
+      } else {
+        state.viewedProductsArr.push(data)
+        localStorage.setItem('viewedProducts', state.viewedProductsArr);
+      }
     }
   },
-  
-  actions: {
-  }
-});
+
+  actions: {}
+});
\ No newline at end of file

From b78aa60152bc8ab9d062b94ff1b8beb5be25deb8 Mon Sep 17 00:00:00 2001
From: Chikov-Dmitry <dmitrychickov@gmail.com>
Date: Tue, 28 Jan 2020 18:28:21 +0300
Subject: [PATCH 2/4] returned homepage

---
 src/components/homepage/Homepage.vue | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/components/homepage/Homepage.vue

diff --git a/src/components/homepage/Homepage.vue b/src/components/homepage/Homepage.vue
new file mode 100644
index 0000000..004451e
--- /dev/null
+++ b/src/components/homepage/Homepage.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <hero></hero>
+    <ads></ads>
+    <news></news>
+    <categories_list-container></categories_list-container>
+    <recentlyViewed></recentlyViewed>
+  </div>
+</template>
+
+<script>
+import CategoriesListContainer from "../categories/CategoriesListContainer";
+import HeroSection from "../hero/Hero";
+import VmNewsList from "../news/NewsListContainer";
+import ads from "../ads/ads";
+import recentlyViewed from "../recently_viewed/recently_viewed";
+
+export default {
+  name: "homepage-component",
+  components: {
+    "categories_list-container": CategoriesListContainer,
+    hero: HeroSection,
+    news: VmNewsList,
+    ads,
+    recentlyViewed: recentlyViewed
+  }
+};
+</script>

From 9f9dd0cb8ef4efe9ee5be9f00effe05a04772cff Mon Sep 17 00:00:00 2001
From: Dmitry <dmitrychickov@gmail.com>
Date: Fri, 20 Mar 2020 15:00:46 +0300
Subject: [PATCH 3/4] fixed comments

---
 src/components/recently_viewed/recently_viewed.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/recently_viewed/recently_viewed.vue b/src/components/recently_viewed/recently_viewed.vue
index 59ee903..3a120ec 100644
--- a/src/components/recently_viewed/recently_viewed.vue
+++ b/src/components/recently_viewed/recently_viewed.vue
@@ -21,7 +21,6 @@ export default {
   },
   data() {
     return {
-      id: "",
       noProductLabel: "No product found",
       productsFiltered: []
     };
@@ -57,10 +56,8 @@ export default {
   methods: {
     repeatedItem(item) {
       let viewedProductsArr = this.$store.state.viewedProductsArr;
-      for (let i = 0; i < viewedProductsArr.length; i++) {
-        if (viewedProductsArr[i] === parseInt(item)) {
-          return true;
-        }
+      if(viewedProductsArr.indexOf(parseInt(item))){
+        return true;
       }
       return false;
     }

From cbfc4c3291083107789307a7816f164e52eb4bd9 Mon Sep 17 00:00:00 2001
From: Chikov-Dmitry <dmitrychickov@gmail.com>
Date: Wed, 1 Apr 2020 16:34:15 +0300
Subject: [PATCH 4/4] add comment

---
 src/components/recently_viewed/recently_viewed.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/recently_viewed/recently_viewed.vue b/src/components/recently_viewed/recently_viewed.vue
index 3a120ec..9b43220 100644
--- a/src/components/recently_viewed/recently_viewed.vue
+++ b/src/components/recently_viewed/recently_viewed.vue
@@ -55,8 +55,9 @@ export default {
   },
   methods: {
     repeatedItem(item) {
+      // check repeated item
       let viewedProductsArr = this.$store.state.viewedProductsArr;
-      if(viewedProductsArr.indexOf(parseInt(item))){
+      if (viewedProductsArr.indexOf(parseInt(item))) {
         return true;
       }
       return false;