REAMDE.MD

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

README.md

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

api.js

@@ -1,8 +1,11 @@
 // Замени на свой, чтобы получить независимый от других набор данных.
 // "боевая" версия инстапро лежит в ключе prod
+import { el } from "date-fns/locale";
+import { getToken, user } from "./index.js";
+
 const personalKey = "prod";
 const baseHost = "https://webdev-hw-api.vercel.app";
-const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
+export const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
 export function getPosts({ token }) {
   return fetch(postsHost, {
@@ -25,20 +28,24 @@ export function getPosts({ token }) {
 
 // https://github.com/GlebkaF/webdev-hw-api/blob/main/pages/api/user/README.md#%D0%B0%D0%B2%D1%82%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%D1%81%D1%8F
 export function registerUser({ login, password, name, imageUrl }) {
-  return fetch(baseHost + "/api/user", {
-    method: "POST",
-    body: JSON.stringify({
-      login,
-      password,
-      name,
-      imageUrl,
-    }),
-  }).then((response) => {
-    if (response.status === 400) {
-      throw new Error("Такой пользователь уже существует");
-    }
-    return response.json();
-  });
+  if (login.length > 0 && password.length > 0 && name.length > 0) {
+    return fetch(baseHost + "/api/user", {
+      method: "POST",
+      body: JSON.stringify({
+        login,
+        password,
+        name,
+        imageUrl,
+      }),
+    }).then((response) => {
+      if (response.status === 400) {
+        throw new Error("Такой пользователь уже существует");
+      }
+      return response.json();
+    });
+  } else {
+    alert("Заполните все поля!");
+  }
 }
 
 export function loginUser({ login, password }) {
@@ -68,3 +75,78 @@ export function uploadImage({ file }) {
     return response.json();
   });
 }
+
+export function onAddPostClick({ description, imageUrl, token }) {
+  if (description.length > 0) {
+    return fetch(postsHost, {
+      method: "POST",
+      headers: {
+        Authorization: token,
+      },
+      body: JSON.stringify({
+        description,
+        imageUrl,
+        isLiked: false,
+      }),
+    }).then((response) => {
+      if (response.status === 401) {
+        throw new Error("Нет авторизации");
+      }
+      if (response.status === 400) {
+        throw new Error(
+          "Ошибка при добавлении поста. Проверьте фото и описание к нему!"
+        );
+      }
+      return response.json();
+    });
+  } else {
+    alert("Поле с описание не должно быть пустым!");
+  }
+}
+
+export function getUserComments({ user, token }) {
+  return fetch(`${postsHost}/user-posts/${user}`, {
+    method: "GET",
+    headers: {
+      Authorization: token,
+    },
+  })
+    .then((response) => {
+      if (response.status === 401) {
+        throw new Error("Нет авторизации");
+      }
+
+      return response.json();
+    })
+    .then((response) => {
+      return response.posts;
+    });
+}
+
+export function likesApi({ likeId, token, activityLike }) {
+  if (navigator.onLine) {
+    return fetch(
+      !activityLike
+        ? postsHost + "/" + likeId + "/like"
+        : postsHost + "/" + likeId + "/dislike",
+      {
+        method: "POST",
+        headers: {
+          Authorization: token,
+        },
+      }
+    )
+      .then((response) => {
+        if (response.status === 401) {
+          throw new Error("Нет авторизации");
+        }
+
+        return response.json();
+      })
+      .then((data) => {
+        return data.post;
+      });
+  } else {
+    alert('Отсутствует подключение к интернету.');
+  }
+}

components/add-post-page-component.js

@@ -1,21 +1,66 @@
-export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
+import { renderHeaderComponent } from "./header-component.js";
+import { renderUploadImageComponent } from "./upload-image-component.js";
+import { onAddPostClick } from "../api.js";
+import { getToken, goToPage } from "../index.js";
+import { POSTS_PAGE } from "../routes.js";
+import { isUploadImage } from "./header-component.js";
+
+let imageUrl = "";
+
+export function renderAddPostPageComponent({ appEl }) {
   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" rows="4"></textarea>
+            </label>
+            <button class="button" id="add-button">Добавить</button>
+        </div>
   `;
 
     appEl.innerHTML = appHtml;
 
-    document.getElementById("add-button").addEventListener("click", () => {
-      onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
+    renderHeaderComponent({
+      element: document.querySelector(".header-container"),
+    });
+
+    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(".input.textarea").value;
+
+      if (isUploadImage) {
+        if (navigator.onLine) {
+          onAddPostClick({
+            description,
+            imageUrl,
+            token: getToken(),
+          }).then(() => {
+            goToPage(POSTS_PAGE);
+          });
+        } else {
+          alert("Отсутствует подключение к интернету.");
+        }
+      } else {
+        alert('Загрузите фотографию!');
+      }
     });
   };
 

components/auth-page-component.js

@@ -1,6 +1,7 @@
 import { loginUser, registerUser } from "../api.js";
 import { renderHeaderComponent } from "./header-component.js";
 import { renderUploadImageComponent } from "./upload-image-component.js";
+import { saveCodeOnError } from "../helpers.js";
 
 export function renderAuthPageComponent({ appEl, setUser }) {
   let isLoginMode = true;
@@ -79,8 +80,12 @@ export function renderAuthPageComponent({ appEl, setUser }) {
       setError("");
 
       if (isLoginMode) {
-        const login = document.getElementById("login-input").value;
-        const password = document.getElementById("password-input").value;
+        const login = saveCodeOnError(
+          document.getElementById("login-input").value
+        );
+        const password = saveCodeOnError(
+          document.getElementById("password-input").value
+        );
 
         if (!login) {
           alert("Введите логин");
@@ -104,9 +109,15 @@ export function renderAuthPageComponent({ appEl, setUser }) {
             setError(error.message);
           });
       } else {
-        const login = document.getElementById("login-input").value;
-        const name = document.getElementById("name-input").value;
-        const password = document.getElementById("password-input").value;
+        const login = saveCodeOnError(
+          document.getElementById("login-input").value
+        );
+        const name = saveCodeOnError(
+          document.getElementById("name-input").value
+        );
+        const password = saveCodeOnError(
+          document.getElementById("password-input").value
+        );
         if (!name) {
           alert("Введите имя");
           return;

components/header-component.js

@@ -1,6 +1,13 @@
 import { goToPage, logout, user } from "../index.js";
 import { ADD_POSTS_PAGE, AUTH_PAGE, POSTS_PAGE } from "../routes.js";
 
+
+export let isUploadImage;
+
+export const setUploadImage = (status) => {
+    isUploadImage = status;
+}
+
 export function renderHeaderComponent({ element }) {
   element.innerHTML = `
   <div class="page-header">
@@ -25,14 +32,19 @@ export function renderHeaderComponent({ element }) {
     .querySelector(".add-or-login-button")
     .addEventListener("click", () => {
       if (user) {
+        setUploadImage(false);
         goToPage(ADD_POSTS_PAGE);
       } else {
         goToPage(AUTH_PAGE);
       }
     });
 
   element.querySelector(".logo").addEventListener("click", () => {
-    goToPage(POSTS_PAGE);
+    if (navigator.onLine) {
+      goToPage(POSTS_PAGE);
+    } else {
+      alert("Отсутствует подключение к интернету");
+    }
   });
 
   element.querySelector(".logout-button")?.addEventListener("click", logout);