Replace tags

.gitignore

@@ -1,2 +1,2 @@
 .DS_Store
-node_modules
+node_modules

README.md

@@ -4,12 +4,12 @@ MVP аналога популярной соц. сети для обмена ф
 
 ## Ссылка на приложение:
 
-https::
+https:
 
 ## Первоначальная оценка
 
-ХХХХ часов
+36 часов
 
 ## Фактически затраченное время
 
-YYYY часов
+15 часов

api.js

@@ -1,7 +1,8 @@
 // Замени на свой, чтобы получить независимый от других набор данных.
 // "боевая" версия инстапро лежит в ключе prod
-const personalKey = "prod";
-const baseHost = "https://webdev-hw-api.vercel.app";
+
+const personalKey = "aman";
+const baseHost = "https://wedev-api.sky.pro";
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
 export function getPosts({ token }) {
@@ -15,7 +16,24 @@ export function getPosts({ token }) {
       if (response.status === 401) {
         throw new Error("Нет авторизации");
       }
+      return response.json();
+    })
+    .then((data) => {
+      return data.posts;
+    });
+}
 
+export function getUserPosts({ token, userId }) {
+  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) => {
@@ -68,3 +86,40 @@ export function uploadImage({ file }) {
     return response.json();
   });
 }
+
+export function getPostsFromUsers() {
+  return fetch();
+}
+
+export function addPost({ 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 clickLike({ token, postId, like }) {
+  return fetch(`${postsHost}/${postId}/${like}`, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+  }).then((response) => {
+    if (response.status === 401) {
+      alert("Только авторизованный пользователь может поставить лайк");
+      throw new Error("Ты неавторизован");
+    }
+    return response.json();
+  });
+}

components/add-post-page-component.js

@@ -1,23 +1,65 @@
+import { renderHeaderComponent } from "./header-component.js";
+import { renderUploadImageComponent } from "./upload-image-component.js";
+
 export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
+  let imageUrl = "";
+
+  const headerHtml = `
+  <div class="page-container">
+    <div class="header-container"></div>
+    <ul class="posts"></ul>
+  </div>`;
+
+  appEl.innerHTML = headerHtml;
+
+  const postsList = document.querySelector(".posts");
+
+  // Страница добавления поста
   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 class="upload=image">
+                      <label class="file-upload-label secondary-button">
+                          <input type="file" class="file-upload-input" style="display:none">
+                          Выберите фото
+                      </label> 
+                    </div>
+                  </div>
+                  <label>
+                    Опишите фотографию:
+                    <textarea class="input textarea" rows="4" id="description"></textarea>
+                  </label>
+                  <button class="button" id="add-button">Добавить</button>
+                </div>`;
 
-    appEl.innerHTML = appHtml;
+    postsList.innerHTML = appHtml;
 
+    // Загрузка фотки
+    const uploadImageContainer = appEl.querySelector(".upload-image-container");
+
+    if (uploadImageContainer) {
+      renderUploadImageComponent({
+        element: appEl.querySelector(".upload-image-container"),
+        onImageUrlChange(newImageUrl) {
+          imageUrl = newImageUrl;
+        },
+      });
+    }
+
+    // Клик по кнопке «Добавить» — эта мрась не работает
     document.getElementById("add-button").addEventListener("click", () => {
+      const description = document.querySelector(".textarea").value;
+
       onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
+        description: description,
+        imageUrl: imageUrl,
       });
     });
   };
 
+  renderHeaderComponent();
   render();
 }

components/auth-page-component.js

@@ -1,11 +1,22 @@
 import { loginUser, registerUser } from "../api.js";
+import { replaceSafe } from "../helpers.js";
 import { renderHeaderComponent } from "./header-component.js";
 import { renderUploadImageComponent } from "./upload-image-component.js";
 
 export function renderAuthPageComponent({ appEl, setUser }) {
   let isLoginMode = true;
   let imageUrl = "";
 
+  const headerHtml = `
+  <div class="page-container">
+    <div class="header-container"></div>
+    <ul class="posts"></ul>
+  </div>`;
+
+  appEl.innerHTML = headerHtml;
+
+  const postsList = document.querySelector(".posts");
+
   const renderForm = () => {
     const appHtml = `
       <div class="page-container">
@@ -52,18 +63,14 @@ export function renderAuthPageComponent({ appEl, setUser }) {
       </div>    
 `;
 
-    appEl.innerHTML = appHtml;
+    postsList.innerHTML = appHtml;
 
     // Не вызываем перерендер, чтобы не сбрасывалась заполненная форма
     // Точечно обновляем кусочек дом дерева
     const setError = (message) => {
       appEl.querySelector(".form-error").textContent = message;
     };
 
-    renderHeaderComponent({
-      element: document.querySelector(".header-container"),
-    });
-
     const uploadImageContainer = appEl.querySelector(".upload-image-container");
 
     if (uploadImageContainer) {
@@ -127,9 +134,9 @@ export function renderAuthPageComponent({ appEl, setUser }) {
         }
 
         registerUser({
-          login: login,
+          login: replaceSafe(login),
           password: password,
-          name: name,
+          name: replaceSafe(name),
           imageUrl,
         })
           .then((user) => {
@@ -148,5 +155,6 @@ export function renderAuthPageComponent({ appEl, setUser }) {
     });
   };
 
+  renderHeaderComponent();
   renderForm();
 }

components/header-component.js

@@ -1,7 +1,9 @@
 import { goToPage, logout, user } from "../index.js";
 import { ADD_POSTS_PAGE, AUTH_PAGE, POSTS_PAGE } from "../routes.js";
 
-export function renderHeaderComponent({ element }) {
+export function renderHeaderComponent() {
+  const element = document.querySelector(".header-container");
+
   element.innerHTML = `
   <div class="page-header">
       <h1 class="logo">instapro</h1>
@@ -17,9 +19,7 @@ export function renderHeaderComponent({ element }) {
           ? `<button title="${user.name}" class="header-button logout-button">Выйти</button>`
           : ""
       }  
-  </div>
-
-`;
+  </div>`;
 
   element
     .querySelector(".add-or-login-button")

components/like-event-component.js

@@ -0,0 +1,32 @@
+import { renderPostsPageComponent } from "./posts-page-component.js";
+import { posts, getToken, setPosts } from "../index.js";
+import { clickLike } from "../api.js";
+import { POSTS_PAGE, USER_POSTS_PAGE } from "../routes.js";
+import { renderUserPageComponent } from "./user-page-component.js";
+
+// Поставить лайк
+export function likeEventListiner({ appEl, pageComponent }) {
+  const likeButtons = document.querySelectorAll(".like-button");
+
+  for (const likeButton of likeButtons) {
+    likeButton.addEventListener("click", (event) => {
+      event.stopPropagation();
+      const postId = likeButton.dataset.postId;
+      const index = likeButton.dataset.index;
+      let like;
+
+      posts[index].isLiked ? (like = "dislike") : (like = "like");
+
+      clickLike({ token: getToken(), postId, like }).then((updatedPost) => {
+        posts[index] = updatedPost.post;
+        setPosts(posts);
+
+        if (POSTS_PAGE) {
+          renderPostsPageComponent({ appEl });
+        } else if (USER_POSTS_PAGE) {
+          renderUserPageComponent({ appEl });
+        }
+      });
+    });
+  }
+}