1.1

README.md

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

api.js

@@ -1,9 +1,32 @@
 // Замени на свой, чтобы получить независимый от других набор данных.
+
 // "боевая" версия инстапро лежит в ключе prod
-const personalKey = "prod";
+const personalKey = "pro228";
 const baseHost = "https://webdev-hw-api.vercel.app";
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
+export function addPosts({ imageUrl, description, token }) {
+  return fetch(postsHost, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+    body: JSON.stringify({
+      imageUrl, description
+    })
+  })
+    .then((response) => {
+      if (response.status === 401) {
+        throw new Error("Нет авторизации");
+      }
+
+      return response.json();
+    })
+    .then((data) => {
+      return data;
+    });
+}
+
 export function getPosts({ token }) {
   return fetch(postsHost, {
     method: "GET",
@@ -23,6 +46,22 @@ export function getPosts({ token }) {
     });
 }
 
+export async function getUserPosts({ userId, token }) {
+  const response = await fetch(`${postsHost}/user-posts/${userId}`, {
+    method: 'GET',
+    headers: {
+      Authorization: token,
+    }
+  });
+  if (!response.ok) {
+    throw new Error('Ошибка при получении постов пользователя');
+  }
+  const data = await response.json();
+  return data.posts;
+}
+
+
+
 // 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", {
@@ -68,3 +107,19 @@ export function uploadImage({ file }) {
     return response.json();
   });
 }
+// это в конец файла api.js
+export async function toggleLike(postId, isLiked, token) {
+  const url = `${postsHost}/${postId}/${isLiked ? 'dislike' : 'like'}`;
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      Authorization: token,
+    },
+  });
+  if (!response.ok) {
+    throw new Error('Ошибка при изменении лайка');
+  }
+  return response.json();
+}
+
+

components/add-post-page-component.js

@@ -1,23 +1,61 @@
+
+
+import { renderHeaderComponent } from "./header-component.js";
+import { renderUploadImageComponent } from "./upload-image-component.js";
+
 export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
+  let imageUrl = " ";
   const render = () => {
-    // TODO: Реализовать страницу добавления поста
+    // TODO: Реализовать добавления поста в апи
     const appHtml = `
     <div class="page-container">
-      <div class="header-container"></div>
-      Cтраница добавления поста
-      <button class="button" id="add-button">Добавить</button>
-    </div>
-  `;
+        <div class="header-container"></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>
+        </div>
+      </div>
+    `;
 
     appEl.innerHTML = appHtml;
 
+    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", () => {
+      let description = document.querySelector(".textarea").value.trim().replace(/<.*?>/g, '');
+      if (!description || !imageUrl.trim()) {
+        alert("Добавьте изображение или текст");
+        return;
+      }
       onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
+        description,
+        imageUrl
       });
     });
   };
 
   render();
-}
+}

components/auth-page-component.js

@@ -77,21 +77,21 @@ export function renderAuthPageComponent({ appEl, setUser }) {
 
     document.getElementById("login-button").addEventListener("click", () => {
       setError("");
-
+    
       if (isLoginMode) {
-        const login = document.getElementById("login-input").value;
-        const password = document.getElementById("password-input").value;
-
+        const login = document.getElementById("login-input").value.replace(/<.*?>/g, '');
+        const password = document.getElementById("password-input").value.replace(/<.*?>/g, '');
+    
         if (!login) {
           alert("Введите логин");
           return;
         }
-
+    
         if (!password) {
           alert("Введите пароль");
           return;
         }
-
+    
         loginUser({
           login: login,
           password: password,
@@ -104,9 +104,10 @@ 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 = document.getElementById("login-input").value.replace(/<.*?>/g, '');
+        const name = document.getElementById("name-input").value.replace(/<.*?>/g, '');
+        const password = document.getElementById("password-input").value.replace(/<.*?>/g, '');
+
         if (!name) {
           alert("Введите имя");
           return;
@@ -115,17 +116,17 @@ export function renderAuthPageComponent({ appEl, setUser }) {
           alert("Введите логин");
           return;
         }
-
+    
         if (!password) {
           alert("Введите пароль");
           return;
         }
-
+    
         if (!imageUrl) {
           alert("Не выбрана фотография");
           return;
         }
-
+    
         registerUser({
           login: login,
           password: password,
@@ -141,6 +142,7 @@ export function renderAuthPageComponent({ appEl, setUser }) {
           });
       }
     });
+
 
     document.getElementById("toggle-button").addEventListener("click", () => {
       isLoginMode = !isLoginMode;