Merge branch 'ft-likes' into Comments

merge conflicts
heintayzar-hm · Nov 23, 2022 · 3bacb31 · 3bacb31
2 parents 1484c41 + 8a5a2f9
commit 3bacb31
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 6 deletions.
diff --git a/src/modules/api/api.js b/src/modules/api/api.js
@@ -4,9 +4,41 @@ import displayMovies from '../dom.js';
 const key = process.env.MOVIEDB_API_SECRET;
 const baseUrl = process.env.MOVIEDB_API_LINK;
 const url = `${baseUrl}/popular?api_key=${key}&language=en-US&page=1`;
+const urlInvolvement = process.env.INVOLVEMENT_API_LINK;
+const idInvolvement = process.env.INVOLVEMENT_ID;
+
+const postData = async (id) => {
+  try {
+    const response = await axios.post(
+      `${urlInvolvement}/apps/${idInvolvement}/likes/`,
+      {
+        item_id: `${id}`,
+      },
+    );
+    return (response.data);
+  } catch (error) {
+    return error;
+  }
+};
+
+const likesCounter = () => {
+  const items = document.querySelectorAll('.like');
+  items.forEach((item) => {
+    item.addEventListener('click', async (event) => {
+      const res = await postData(item.id);
+      if (res === 'Created') {
+        const number = event.target.parentNode.parentNode.childNodes[5].childNodes[0].innerHTML;
+        // eslint-disable-next-line max-len
+        event.target.parentNode.parentNode.childNodes[5].childNodes[0].innerHTML = (Number(number) + 1);
+        event.target.outerHTML = `<i id="${item.id}" class="fa fa-heart"></i>`;
+      }
+    });
+  });
+};
 
 const getData = async () => {
   const response = await axios.get(`${url}`);
-  displayMovies(response.data.results);
+  await displayMovies(response.data.results);
+  likesCounter();
 };
-export default getData;
+export default getData;
diff --git a/src/modules/dom.js b/src/modules/dom.js
@@ -1,13 +1,34 @@
-const displayMovies = (data) => {
+import axios from 'axios';
+
+const urlInvolvement = process.env.INVOLVEMENT_API_LINK;
+const idInvolvement = process.env.INVOLVEMENT_ID;
+const receiveData = async () => {
+  try {
+    const response = await axios.get(
+      `${urlInvolvement}/apps/${idInvolvement}/likes/`,
+    );
+    return response.data;
+  } catch (error) {
+    return error;
+  }
+};
+const displayMovies = async (data) => {
   const main = document.querySelector('.main');
   main.innerHTML = '';
   const section = document.createElement('section');
   section.classList.add('movie-container');
+  const dataInfo = await receiveData();
   data.forEach((movie) => {
+    const likes = dataInfo.filter(
+      (info) => info.item_id === movie.id.toString(),
+    );
+    // show likes
+    const showLikes = likes.length === 0 ? '<span class="like-count">0</span> likes' : `<span class="like-count">${likes[0].likes}</span> likes`;
     section.innerHTML += `
       <div class="movie-card">
           <img class="img-card" src="https://image.tmdb.org/t/p/original${movie.poster_path}" alt="">
-          <div class="title-icon"><h2>${movie.title}</h2><i class="fa fa-heart-o"></i></div>
+          <div class="title-icon"><h2>${movie.title}</h2><i id="${movie.id}" class="fa fa-heart-o like"></i></div>
+          <div class="likes">${showLikes}</div>
           <div class="btn"> <button href="/movie#${movie.id}" class="spaLink btn-1">Comments</button>       
       </div>
       `;

diff --git a/src/modules/main.js b/src/modules/main.js
@@ -1,5 +1,7 @@
 import imgHelper from './util.js';
+
 import getData from './api/api.js';
+
 // eslint-disable-next-line import/no-cycle
 import { links } from './router/router.js';
 

diff --git a/src/style.css b/src/style.css
@@ -76,7 +76,7 @@ main {
   height: 50px;
 }
 
-.fa-heart-o {
+.fa {
   color: #35caf1;
   font-weight: bold;
   display: flex;
@@ -107,6 +107,10 @@ h2:hover {
   object-fit: cover;
 }
 
+.likes {
+  text-align: right;
+}
+
 .btn {
   display: flex;
   flex-direction: column;
@@ -314,9 +318,13 @@ footer {
       height: auto;
     }
 
-    .fa-heart-o {
+    .fa {
       display: block;
       text-align: center;
     }
+
+    .likes {
+      text-align: center;
+    }
   }
 }