Cw 2

README.md

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

api.js

@@ -4,6 +4,31 @@ const personalKey = "prod";
 const baseHost = "https://webdev-hw-api.vercel.app";
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
+
+export function isLikedPost({ token, id, isLiked }) {
+  let host = "";
+  if (isLiked === true){
+    host = postsHost + "/" + id + "/dislike";
+  } else{
+    host = postsHost + "/" + id + "/like";
+  }
+  return fetch(host, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    }
+  })
+    .then((response) => {
+      if (response.status === 401) {
+        throw new Error("Нет авторизации");
+      }
+      return response.json();
+    })
+    .then((data) => {
+      return data.post;
+    });
+}
+
 export function getPosts({ token }) {
   return fetch(postsHost, {
     method: "GET",
@@ -15,14 +40,53 @@ export function getPosts({ token }) {
       if (response.status === 401) {
         throw new Error("Нет авторизации");
       }
+      return response.json();
+    })
+    .then((data) => {
+      return data.posts;
+    });
+}
 
+export function getPostsUser({ token, id }) {
+  return fetch(postsHost  + "/user-posts/" + id, {
+    method: "GET",
+    headers: {
+      Authorization: token,
+    },
+  })
+    .then((response) => {
+      if (response.status === 401) {
+        throw new Error("Нет авторизации");
+      }
       return response.json();
     })
     .then((data) => {
       return data.posts;
     });
 }
 
+export function postPost({ token, description, imageUrl }) {
+  return fetch(postsHost, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+    body: JSON.stringify({
+      description: description,
+      imageUrl: imageUrl
+    }),
+  })
+    .then((response) => {
+      if (response.status === 400) {
+        throw new Error("Все поля должны быть заполненны");
+      }
+      return response.json();
+    })
+    .catch((error) => {
+      alert(error);
+    });
+}
+
 // 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", {
@@ -56,7 +120,7 @@ export function loginUser({ login, password }) {
   });
 }
 
-// Загружает картинку в облако, возвращает url загруженной картинки
+// Загружает картинку в облако, возвращает url загруженной картинки!
 export function uploadImage({ file }) {
   const data = new FormData();
   data.append("file", file);

components/add-post-page-component.js

@@ -1,23 +1,122 @@
+import { uploadImage } from "../api.js";
+import { renderHeaderComponent } from "./header-component.js";
+
 export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
+  let imageUrl = "";
+  let description = "";
+
   const render = () => {
-    // TODO: Реализовать страницу добавления поста
+
+    // TODO: Реализовать страницу добавления поста !!!!!!!!!!!
+    const formHtml =  `
+      <div class="page-container">
+        <div class="header-container">
+        </div>
+        <div class="form">
+          <h3 class="form-title">Добавить пост</h3>
+          <div class="form-inputs">
+                <div class="upload=image">
+                    ${
+                      imageUrl
+                        ? `
+                        <div class="file-upload-image-conrainer">
+                          <img class="file-upload-image" src="${imageUrl}">
+                          <button class="file-upload-remove-button button">Заменить фото</button>
+                        </div>
+                        `
+                        : `
+                          <label class="file-upload-label secondary-button">
+                              <input
+                                type="file"
+                                class="file-upload-input"
+                                style="display:none"
+                              />
+                              Выберите фото
+                          </label>              
+                    `
+                    }
+                </div>
+            <label>
+              Опишите фотографию:
+              <textarea id="input_text" class="input textarea" rows="4">${description}</textarea>
+              </label>
+              <button class="button" id="add-button">Добавить</button>
+          </div>
+        </div>
+      </div>
+    `;
+
     const appHtml = `
-    <div class="page-container">
-      <div class="header-container"></div>
-      Cтраница добавления поста
-      <button class="button" id="add-button">Добавить</button>
-    </div>
-  `;
+        <div class="page-container">
+          <div class="header-container"></div>
+          <ul class="posts">
+            ${formHtml}                    
+          </ul>
+        </div>`;
 
     appEl.innerHTML = appHtml;
+
+    renderHeaderComponent({
+    element: document.querySelector(".header-container"),
+    });
+
+    const fileInputElement = appEl.querySelector(".file-upload-input");    
+
+    fileInputElement?.addEventListener("change", () => {
+      const file = fileInputElement.files[0];
+      if (file) {
+        const lableEl = document.querySelector(".file-upload-label");
+        lableEl.setAttribute("disabled", true);
+        lableEl.textContent = "Загружаю файл...";
+        uploadImage({ file }).then(({ fileUrl }) => {   
+          imageUrl = fileUrl;
+          render();
+        });
+      }
+    });
+
+    appEl.querySelector(".file-upload-remove-button")?.addEventListener("click", () => {
+        imageUrl = "";
+        //onAddPostClick(description, imageUrl);
+        render();
+    });
 
     document.getElementById("add-button").addEventListener("click", () => {
+
+      const text = document.getElementById("input_text");
+      description = text.value;
+
+      if (checkText(description) === false) {
+        alert("Введите описание");
+        return;
+      }
+
+      if (imageUrl  === "") {
+        alert("Не выбрана фотография");
+        return;
+      }
+
       onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
+        description: symbol(description),
+        imageUrl: imageUrl,
       });
     });
+
   };
 
   render();
 }
+
+function symbol(text) {
+  return text.replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+
+function checkText(text) {
+  const checker = text.replaceAll(" ", "")
+  if(checker === ""){
+    return false;
+  } else {
+    return true;
+  }
+
+}

components/auth-page-component.js

@@ -54,7 +54,7 @@ export function renderAuthPageComponent({ appEl, setUser }) {
 
     appEl.innerHTML = appHtml;
 
-    // Не вызываем перерендер, чтобы не сбрасывалась заполненная форма
+    // Не вызываем перерендер, чтобы не сбрасывалась заполненная форма!
     // Точечно обновляем кусочек дом дерева
     const setError = (message) => {
       appEl.querySelector(".form-error").textContent = message;