Lenta-postov

api.js

@@ -1,7 +1,7 @@
 // Замени на свой, чтобы получить независимый от других набор данных.
 // "боевая" версия инстапро лежит в ключе prod
 const personalKey = "prod";
-const baseHost = "https://webdev-hw-api.vercel.app";
+const baseHost = "https://wedev-api.sky.pro";
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
 export function getPosts({ token }) {
@@ -23,33 +23,66 @@ export function getPosts({ token }) {
     });
 }
 
+export function getUserPosts({ userId, token }) {
+  // Получаем все посты и фильтруем по userId на клиенте
+  return getPosts({ token }).then((allPosts) => {
+    return allPosts.filter((post) => post.user.id === userId);
+  });
+}
+
 export function registerUser({ login, password, name, imageUrl }) {
-  return fetch(baseHost + "/api/user", {
+  const requestBody = {
+    login,
+    password,
+    name,
+  };
+
+  // Добавляем imageUrl только если он есть
+  if (imageUrl) {
+    requestBody.imageUrl = imageUrl;
+  }
+
+  return fetch("https://wedev-api.sky.pro/api/user", {
     method: "POST",
-    body: JSON.stringify({
-      login,
-      password,
-      name,
-      imageUrl,
-    }),
+    body: JSON.stringify(requestBody),
   }).then((response) => {
     if (response.status === 400) {
-      throw new Error("Такой пользователь уже существует");
+      return response.json().then((errorData) => {
+        throw new Error("Такой пользователь уже существует");
+      });
+    }
+    if (response.status === 201) {
+      return response.json();
+    }
+    if (!response.ok) {
+      throw new Error(
+        `Ошибка при регистрации: ${response.status} ${response.statusText}`
+      );
     }
     return response.json();
   });
 }
 
 export function loginUser({ login, password }) {
-  return fetch(baseHost + "/api/user/login", {
+  return fetch("https://wedev-api.sky.pro/api/user/login", {
     method: "POST",
     body: JSON.stringify({
       login,
       password,
     }),
   }).then((response) => {
     if (response.status === 400) {
-      throw new Error("Неверный логин или пароль");
+      return response.json().then((errorData) => {
+        throw new Error("Неверный логин или пароль");
+      });
+    }
+    if (response.status === 201) {
+      return response.json();
+    }
+    if (!response.ok) {
+      throw new Error(
+        `Ошибка при входе: ${response.status} ${response.statusText}`
+      );
     }
     return response.json();
   });
@@ -60,10 +93,95 @@ export function uploadImage({ file }) {
   const data = new FormData();
   data.append("file", file);
 
-  return fetch(baseHost + "/api/upload/image", {
+  return fetch("https://wedev-api.sky.pro/api/upload/image", {
     method: "POST",
     body: data,
   }).then((response) => {
+    if (!response.ok) {
+      throw new Error(
+        `Ошибка при загрузке изображения: ${response.status} ${response.statusText}`
+      );
+    }
+    return response.json();
+  });
+}
+
+// Добавить новый пост
+export function addPost({ description, imageUrl, token }) {
+  return fetch(postsHost, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: token,
+    },
+    body: JSON.stringify({
+      description,
+      imageUrl,
+    }),
+  }).then((response) => {
+    if (response.status === 401) {
+      throw new Error("Нет авторизации");
+    }
+    if (response.status === 400) {
+      throw new Error("Неверные данные поста");
+    }
+    if (!response.ok) {
+      throw new Error("Ошибка при добавлении поста");
+    }
+    return response.json();
+  });
+}
+
+// Поставить лайк
+export function likePost({ postId, token }) {
+  return fetch(`${postsHost}/${postId}/like`, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+  }).then((response) => {
+    if (response.status === 401) {
+      throw new Error("Нет авторизации");
+    }
+    if (!response.ok) {
+      throw new Error("Ошибка при постановке лайка");
+    }
+    return response.json();
+  });
+}
+
+// Убрать лайк
+export function dislikePost({ postId, token }) {
+  return fetch(`${postsHost}/${postId}/dislike`, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+  }).then((response) => {
+    if (response.status === 401) {
+      throw new Error("Нет авторизации");
+    }
+    if (!response.ok) {
+      throw new Error("Ошибка при удалении лайка");
+    }
+    return response.json();
+  });
+}
+
+// Удалить пост
+export function deletePost({ postId, token }) {
+  return fetch(`${postsHost}/${postId}`, {
+    method: "DELETE",
+    headers: {
+      Authorization: token,
+    },
+  }).then((response) => {
+    if (response.status === 401) {
+      throw new Error("Нет авторизации");
+    }
+    if (!response.ok) {
+      throw new Error("Ошибка при удалении поста");
+    }
     return response.json();
   });
 }

components/add-post-page-component.js

@@ -1,20 +1,71 @@
+import { renderHeaderComponent } from "./header-component.js";
+import { renderUploadImageComponent } from "./upload-image-component.js";
+
 export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
+  let imageUrl = "";
+
   const render = () => {
-    // @TODO: Реализовать страницу добавления поста
     const appHtml = `
     <div class="page-container">
       <div class="header-container"></div>
-      Cтраница добавления поста
-      <button class="button" id="add-button">Добавить</button>
+      <div class="form">
+        <h3 class="form-title">Добавить пост</h3>
+        <div class="form-inputs">
+          <div class="upload-image-container"></div>
+          <textarea 
+            id="description-input" 
+            class="input" 
+            placeholder="Описание фотографии"
+            rows="4"
+          ></textarea>
+          <div class="form-error"></div>
+          <button class="button" id="add-button">Добавить</button>
+        </div>
+      </div>
     </div>
   `;
 
     appEl.innerHTML = appHtml;
 
+    // Рендерим заголовок страницы
+    renderHeaderComponent({
+      element: document.querySelector(".header-container"),
+    });
+
+    // Рендерим компонент загрузки изображения
+    const uploadImageContainer = appEl.querySelector(".upload-image-container");
+    renderUploadImageComponent({
+      element: uploadImageContainer,
+      onImageUrlChange(newImageUrl) {
+        imageUrl = newImageUrl;
+      },
+    });
+
+    // Функция для отображения ошибок
+    const setError = (message) => {
+      appEl.querySelector(".form-error").textContent = message;
+    };
+
     document.getElementById("add-button").addEventListener("click", () => {
+      setError("");
+
+      const description = document
+        .getElementById("description-input")
+        .value.trim();
+
+      if (!description) {
+        setError("Введите описание фотографии");
+        return;
+      }
+
+      if (!imageUrl) {
+        setError("Не выбрана фотография");
+        return;
+      }
+
       onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
+        description,
+        imageUrl,
       });
     });
   };

components/auth-page-component.js

@@ -102,16 +102,22 @@ export function renderAuthPageComponent({ appEl, setUser }) {
 
       if (isLoginMode) {
         // Обработка входа
-        const login = document.getElementById("login-input").value;
+        const login = document.getElementById("login-input").value.trim();
         const password = document.getElementById("password-input").value;
 
+        // Проверяем, заполнены ли поля
+        if (!login && !password) {
+          setError("Введите логин и пароль");
+          return;
+        }
+
         if (!login) {
-          alert("Введите логин");
+          setError("Введите логин");
           return;
         }
 
         if (!password) {
-          alert("Введите пароль");
+          setError("Введите пароль");
           return;
         }
 
@@ -120,41 +126,68 @@ export function renderAuthPageComponent({ appEl, setUser }) {
             setUser(user.user);
           })
           .catch((error) => {
-            console.warn(error);
             setError(error.message);
           });
       } else {
         // Обработка регистрации
-        const login = document.getElementById("login-input").value;
-        const name = document.getElementById("name-input").value;
+        const login = document.getElementById("login-input").value.trim();
+        const name = document.getElementById("name-input").value.trim();
         const password = document.getElementById("password-input").value;
 
+        // Проверяем, заполнены ли обязательные поля
+        const emptyFields = [];
+
         if (!name) {
-          alert("Введите имя");
-          return;
+          emptyFields.push("имя");
         }
 
         if (!login) {
-          alert("Введите логин");
-          return;
+          emptyFields.push("логин");
         }
 
         if (!password) {
-          alert("Введите пароль");
+          emptyFields.push("пароль");
+        }
+
+        // Если есть пустые поля, показываем общую ошибку
+        if (emptyFields.length > 0) {
+          if (emptyFields.length === 1) {
+            setError(`Введите ${emptyFields[0]}`);
+          } else if (emptyFields.length === 2) {
+            setError(`Введите ${emptyFields[0]} и ${emptyFields[1]}`);
+          } else {
+            setError(
+              `Введите ${emptyFields.slice(0, -1).join(", ")} и ${
+                emptyFields[emptyFields.length - 1]
+              }`
+            );
+          }
+          return;
+        }
+
+        // Проверяем длину логина
+        if (login.length < 3) {
+          setError("Логин должен содержать минимум 3 символа");
           return;
         }
 
-        if (!imageUrl) {
-          alert("Не выбрана фотография");
+        // Проверяем длину пароля
+        if (password.length < 6) {
+          setError("Пароль должен содержать минимум 6 символов");
           return;
         }
 
+        // Убираем обязательность изображения для тестирования
+        // if (!imageUrl) {
+        //   setError("Не выбрана фотография");
+        //   return;
+        // }
+
         registerUser({ login, password, name, imageUrl })
           .then((user) => {
             setUser(user.user);
           })
           .catch((error) => {
-            console.warn(error);
             setError(error.message);
           });
       }