GlebkaF · Sciworker · Jul 24, 2024
diff --git a/README.md b/README.md
@@ -4,12 +4,12 @@ MVP аналога популярной соц. сети для обмена ф
 
 ## Ссылка на приложение:
 
-https::
+https://sciworker.github.io/webdev-cw-instapro-main1/
 
 ## Первоначальная оценка
 
-ХХХХ часов
+8 часов
 
 ## Фактически затраченное время
 
-YYYY часов
+10 часов
diff --git a/api.js b/api.js
@@ -1,6 +1,6 @@
 // Замени на свой, чтобы получить независимый от других набор данных.
 // "боевая" версия инстапро лежит в ключе prod
-const personalKey = "prod";
+const personalKey = "Petr";
 const baseHost = "https://webdev-hw-api.vercel.app";
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
@@ -15,7 +15,6 @@ export function getPosts({ token }) {
       if (response.status === 401) {
         throw new Error("Нет авторизации");
       }
-
       return response.json();
     })
     .then((data) => {
@@ -68,3 +67,71 @@ export function uploadImage({ file }) {
     return response.json();
   });
 }
+
+// Создает новый пост
+export function createPost({ token, description, imageUrl }) {
+  return fetch(postsHost, {
+    method: "POST",
+    headers: {
+    Authorization: token
+
+    },
+    body: JSON.stringify({
+      description,
+      imageUrl,
+    }),
+  }).then((response) => {
+    if (response.status === 400) {
+      throw new Error("Ошибка создания поста");
+    }
+    return response.json();
+  });
+}
+
+export function getUserPosts({ userId, token }) {
+  return fetch(`${postsHost}/user-posts/${userId}`, {
+    method: "GET",
+    headers: {
+      Authorization: token,
+    },
+  })
+  .then(response => {
+    if (response.status === 401) {
+      throw new Error("Нет авторизации");
+    }
+    return response.json();
+  })
+  .then(data => {
+    return data.posts;
+  });
+}
+
+export function likePost({ postId, token }) {
+  return fetch(`${postsHost}/${postId}/like`, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+  })
+    .then((response) => {
+      if (response.status === 401) {
+        throw new Error("Нет авторизации");
+      }
+      return response.json();
+    });
+}
+
+export function unlikePost({ postId, token }) {
+  return fetch(`${postsHost}/${postId}/dislike`, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+  })
+    .then((response) => {
+      if (response.status === 401) {
+        throw new Error("Нет авторизации");
+      }
+      return response.json();
+    });
+}
diff --git a/components/add-post-page-component.js b/components/add-post-page-component.js
@@ -1,23 +1,50 @@
+import { renderHeaderComponent } from "./header-component.js";
+import { renderUploadImageComponent } from "./upload-image-component.js";
+
 export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
+  let uploadedImageUrl = ""; // Переменная для хранения URL загруженного изображения
+
+  // Определите функцию для обработки изменения URL изображения
+  function handleImageUrlChange(newImageUrl) {
+    uploadedImageUrl = newImageUrl; // Сохраните новый URL изображения
+  }
+
   const render = () => {
-    // TODO: Реализовать страницу добавления поста
+    // Реализовать страницу добавления поста
     const appHtml = `
-    <div class="page-container">
       <div class="header-container"></div>
-      Cтраница добавления поста
-      <button class="button" id="add-button">Добавить</button>
-    </div>
-  `;
+      <div class="form">
+        <h3 class="form-title">Добавить пост</h3>
+        <div class="form-inputs">
+          <div class="upload-image-container"></div>
+          <label>
+            Опишите фотографию:
+            <textarea class="input textarea" id="description" rows="4"></textarea>
+          </label>
+          <button class="button" id="add-button">Добавить</button>
+        </div>
+      </div>
+    `;
 
     appEl.innerHTML = appHtml;
 
+    renderHeaderComponent({
+      element: document.querySelector(".header-container"),
+    });
+
+    renderUploadImageComponent({
+      element: document.querySelector(".upload-image-container"),
+      onImageUrlChange: handleImageUrlChange,
+    });
+
     document.getElementById("add-button").addEventListener("click", () => {
+      const description = document.getElementById("description").value; // Получить описание из textarea
       onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
+        description: description,
+        imageUrl: uploadedImageUrl, 
       });
     });
   };
 
   render();
-}
+}
diff --git a/components/header-component.js b/components/header-component.js
@@ -39,3 +39,23 @@ export function renderHeaderComponent({ element }) {
 
   return element;
 }
+
+// export const renderHeaderComponent = ({ appEl, user, goToPage }) => {
+//   const headerContainer = document.createElement('div');
+//   headerContainer.className = 'header-container';
+
+//   headerContainer.innerHTML = `
+//     <header>
+//       <h1>Welcome ${user ? user.name : 'Guest'}</h1>
+//       ${user ? '<button id="logout-btn">Logout</button>' : ''}
+//     </header>
+//   `;
+
+//   appEl.prepend(headerContainer);
+
+//   if (user) {
+//     document.getElementById('logout-btn').addEventListener('click', () => {
+//       goToPage('logout');
+//     });
+//   }
+// };
diff --git a/components/posts-page-component.js b/components/posts-page-component.js
@@ -1,97 +1,43 @@
 import { USER_POSTS_PAGE } from "../routes.js";
 import { renderHeaderComponent } from "./header-component.js";
-import { posts, goToPage } from "../index.js";
+import { posts, goToPage, user } from "../index.js";
+import { likePost, unlikePost } from "../api.js";
 
 export function renderPostsPageComponent({ appEl }) {
-  // TODO: реализовать рендер постов из api
   console.log("Актуальный список постов:", posts);
 
-  /**
-   * TODO: чтобы отформатировать дату создания поста в виде "19 минут назад"
-   * можно использовать https://date-fns.org/v2.29.3/docs/formatDistanceToNow
-   */
   const appHtml = `
-              <div class="page-container">
-                <div class="header-container"></div>
-                <ul class="posts">
-                  <li class="post">
-                    <div class="post-header" data-user-id="642d00329b190443860c2f31">
-                        <img src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg" class="post-header__user-image">
-                        <p class="post-header__user-name">Иван Иваныч</p>
-                    </div>
-                    <div class="post-image-container">
-                      <img class="post-image" src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg">
-                    </div>
-                    <div class="post-likes">
-                      <button data-post-id="642d00579b190443860c2f32" class="like-button">
-                        <img src="./assets/images/like-active.svg">
-                      </button>
-                      <p class="post-likes-text">
-                        Нравится: <strong>2</strong>
-                      </p>
-                    </div>
-                    <p class="post-text">
-                      <span class="user-name">Иван Иваныч</span>
-                      Ромашка, ромашка...
-                    </p>
-                    <p class="post-date">
-                      19 минут назад
-                    </p>
-                  </li>
-                  <li class="post">
-                    <div class="post-header" data-user-id="6425602ce156b600f7858df2">
-                        <img src="https://storage.yandexcloud.net/skypro-webdev-homework-bucket/1680601502867-%25C3%2590%25C2%25A1%25C3%2590%25C2%25BD%25C3%2590%25C2%25B8%25C3%2590%25C2%25BC%25C3%2590%25C2%25BE%25C3%2590%25C2%25BA%2520%25C3%2591%25C2%258D%25C3%2590%25C2%25BA%25C3%2591%25C2%2580%25C3%2590%25C2%25B0%25C3%2590%25C2%25BD%25C3%2590%25C2%25B0%25202023-04-04%2520%25C3%2590%25C2%25B2%252014.04.29.png" class="post-header__user-image">
-                        <p class="post-header__user-name">Варварва Н.</p>
-                    </div>
-
-
-                    <div class="post-image-container">
-                      <img class="post-image" src="https://storage.yandexcloud.net/skypro-webdev-homework-bucket/1680670675451-%25C3%2590%25C2%25A1%25C3%2590%25C2%25BD%25C3%2590%25C2%25B8%25C3%2590%25C2%25BC%25C3%2590%25C2%25BE%25C3%2590%25C2%25BA%2520%25C3%2591%25C2%258D%25C3%2590%25C2%25BA%25C3%2591%25C2%2580%25C3%2590%25C2%25B0%25C3%2590%25C2%25BD%25C3%2590%25C2%25B0%25202023-03-31%2520%25C3%2590%25C2%25B2%252012.51.20.png">
-                    </div>
-                    <div class="post-likes">
-                      <button data-post-id="642cffed9b190443860c2f30" class="like-button">
-                        <img src="./assets/images/like-not-active.svg">
-                      </button>
-                      <p class="post-likes-text">
-                        Нравится: <strong>35</strong>
-                      </p>
-                    </div>
-                    <p class="post-text">
-                      <span class="user-name">Варварва Н.</span>
-                      Нарисовала картину, посмотрите какая красивая
-                    </p>
-                    <p class="post-date">
-                      3 часа назад
-                    </p>
-                  </li>
-                  <li class="post">
-                    <div class="post-header" data-user-id="6425602ce156b600f7858df2">
-                        <img src="https://storage.yandexcloud.net/skypro-webdev-homework-bucket/1680601502867-%25C3%2590%25C2%25A1%25C3%2590%25C2%25BD%25C3%2590%25C2%25B8%25C3%2590%25C2%25BC%25C3%2590%25C2%25BE%25C3%2590%25C2%25BA%2520%25C3%2591%25C2%258D%25C3%2590%25C2%25BA%25C3%2591%25C2%2580%25C3%2590%25C2%25B0%25C3%2590%25C2%25BD%25C3%2590%25C2%25B0%25202023-04-04%2520%25C3%2590%25C2%25B2%252014.04.29.png" class="post-header__user-image">
-                        <p class="post-header__user-name">Варварва Н.</p>
-                    </div>
-
-
-                    <div class="post-image-container">
-                      <img class="post-image" src="https://leonardo.osnova.io/97a160ca-76b6-5cba-87c6-84ef29136bb3/">
-                    </div>
-                    <div class="post-likes">
-                      <button data-post-id="642cf82e9b190443860c2f2b" class="like-button">
-                        <img src="./assets/images/like-not-active.svg">
-                      </button>
-                      <p class="post-likes-text">
-                        Нравится: <strong>0</strong>
-                      </p>
-                    </div>
-                    <p class="post-text">
-                      <span class="user-name">Варварва Н.</span>
-                      Голова
-                    </p>
-                    <p class="post-date">
-                      8 дней назад
-                    </p>
-                  </li>
-                </ul>
-              </div>`;
+    <div class="page-container">
+      <div class="header-container"></div>
+      <ul class="posts">
+        ${posts.map(post => `
+          <li class="post">
+            <div class="post-header" data-user-id="${post.user.id}">
+              <img src="${post.user.imageUrl}" class="post-header__user-image">
+              <p class="post-header__user-name">${post.user.name}</p>
+            </div>
+            <div class="post-image-container">
+              <img class="post-image" src="${post.imageUrl}">
+            </div>
+            <div class="post-likes">
+              <button data-post-id="${post.id}" class="like-button">
+                <img src="./assets/images/${post.isLiked ? 'like-active.svg' : 'like-not-active.svg'}">
+              </button>
+              <p class="post-likes-text">
+                Нравится: <strong>${post.likes.map(like => `${like.name} `).join('')}</strong>
+              </p>
+            </div>
+            <p class="post-text">
+              <span class="user-name">${post.user.name}</span>
+              ${post.description}
+            </p>
+            <p class="post-date">
+               ${dateFns.formatDistanceToNow(new Date(post.createdAt), { addSuffix: true, locale: dateFns.locale.ru })}
+            </p>
+          </li>
+        `).join('')}
+      </ul>
+    </div>`;
 
   appEl.innerHTML = appHtml;
 
@@ -106,4 +52,39 @@ export function renderPostsPageComponent({ appEl }) {
       });
     });
   }
+
+  for (let likeButton of document.querySelectorAll(".like-button")) {
+    likeButton.addEventListener("click", () => {
+      const postId = likeButton.dataset.postId;
+      const post = posts.find(post => post.id === postId);
+      const isLiked = post.isLiked;
+
+      if (isLiked) {
+        unlikePost({ postId, token: getToken() }).then(() => {
+          // Обновляем локально список постов после успешного отзыва лайка
+          post.isLiked = false;
+          post.likes = post.likes.filter(like => like.id !== user.id);
+          renderPostsPageComponent({ appEl });
+        }).catch(error => {
+          console.error("Ошибка отзыва лайка:", error);
+          alert("Ошибка отзыва лайка: " + error.message);
+        });
+      } else {
+        likePost({ postId, token: getToken() }).then(() => {
+          // Обновляем локально список постов после успешного лайка
+          post.isLiked = true;
+          post.likes.push({ id: user.id, name: user.name });
+          renderPostsPageComponent({ appEl });
+        }).catch(error => {
+          console.error("Ошибка лайка:", error);
+          alert("Ошибка лайка: " + error.message);
+        });
+      }
+    });
+  }
 }
+
+const getToken = () => {
+  const token = user ? `Bearer ${user.token}` : undefined;
+  return token;
+};