GlebkaF · Alena-Sartakova · Apr 10, 2024 · Apr 11, 2024 · Apr 11, 2024 · Apr 11, 2024
diff --git a/api.js b/api.js
@@ -68,3 +68,44 @@ export function uploadImage({ file }) {
     return response.json();
   });
 }
+//посты пользователя
+export function fetchPostsUser( id , { token }) {
+  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 const userPosts = ({ token, description, imageUrl }) => {
+  return fetch(postsHost, {
+    method: "POST",
+    body: JSON.stringify({
+      description,
+      imageUrl,
+    }),
+    headers: {
+      Authorization: token,
+  }
+  })
+    .then((response) => {
+      if (response.status === 500) {
+        throw new Error("Сервер упал");
+      } else if (response.status === 400) {
+        throw new Error("Плохой запрос");
+      } else {
+        return response.json();
+      }
+    })
+
+}
diff --git a/components/add-post-page-component.js b/components/add-post-page-component.js
@@ -1,20 +1,54 @@
+import { sanitizeHtml } from "../helpers.js";
+import { renderHeaderComponent } from "./header-component.js";
+import { renderUploadImageComponent } from "./upload-image-component.js";
+
+
+let imageUrl = "";
 export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
   const render = () => {
     // TODO: Реализовать страницу добавления поста
     const appHtml = `
     <div class="page-container">
       <div class="header-container"></div>
-      Cтраница добавления поста
+      <div class="add-form">
+      <h2 class="add-form__title">Новый пост</h2>
+      <div class="upload-image-container"></div>
+      <label>
+      Опишите фотографию:
+      <br>
+      <textarea class="add-form__text" type="textarea" rows="7"></textarea>
+      </label>
       <button class="button" id="add-button">Добавить</button>
     </div>
   `;
 
     appEl.innerHTML = appHtml;
 
+    renderHeaderComponent({
+      element: document.querySelector(".header-container"),
+    });
+    renderUploadImageComponent({
+      element: appEl.querySelector(".upload-image-container"),
+      onImageUrlChange(newImageUrl) {
+        imageUrl = newImageUrl;
+      },
+    });
+
     document.getElementById("add-button").addEventListener("click", () => {
+      if (!imageUrl) {
+        alert('Выберите фото');
+        return;
+      };
+      if (!(document.querySelector(".add-form__text").value)) {
+        alert('Не заполнено описание фото');
+        return;
+      };
+
+      const description = document.querySelector(".add-form__text").value
+
       onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
+        description: sanitizeHtml(description),
+        imageUrl: imageUrl,
       });
     });
   };

diff --git a/components/auth-page-component.js b/components/auth-page-component.js
@@ -12,31 +12,28 @@ export function renderAuthPageComponent({ appEl, setUser }) {
           <div class="header-container"></div>
           <div class="form">
               <h3 class="form-title">
-                ${
-                  isLoginMode
-                    ? "Вход в&nbsp;Instapro"
-                    : "Регистрация в&nbsp;Instapro"
-                }
+                ${isLoginMode
+        ? "Вход в&nbsp;Instapro"
+        : "Регистрация в&nbsp;Instapro"
+      }
                 </h3>
               <div class="form-inputs">
 
-                  ${
-                    !isLoginMode
-                      ? `
+                  ${!isLoginMode
+        ? `
                       <div class="upload-image-container"></div>
                       <input type="text" id="name-input" class="input" placeholder="Имя" />
                       `
-                      : ""
-                  }
+        : ""
+      }
 
                   <input type="text" id="login-input" class="input" placeholder="Логин" />
                   <input type="password" id="password-input" class="input" placeholder="Пароль" />
 
                   <div class="form-error"></div>
 
-                  <button class="button" id="login-button">${
-                    isLoginMode ? "Войти" : "Зарегистрироваться"
-                  }</button>
+                  <button class="button" id="login-button">${isLoginMode ? "Войти" : "Зарегистрироваться"
+      }</button>
               </div>
 
               <div class="form-footer">

diff --git a/components/posts-page-component.js b/components/posts-page-component.js
@@ -10,89 +10,47 @@ export function renderPostsPageComponent({ appEl }) {
    * TODO: чтобы отформатировать дату создания поста в виде "19 минут назад"
    * можно использовать https://date-fns.org/v2.29.3/docs/formatDistanceToNow
    */
-  const appHtml = `
-              <div class="page-container">
-                <div class="header-container"></div>
-                <ul class="posts">
+
+  let postsHtml = posts.map((post) => {
+    return `              
                   <li class="post">
-                    <div class="post-header" data-user-id="642d00329b190443860c2f31">
-                        <img src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg" class="post-header__user-image">
-                        <p class="post-header__user-name">Иван Иваныч</p>
+                    <div class="post-header" data-user-id=${post.user.id}>
+                        <img src=${post.user.imageUrl} class="post-header__user-image">
+                        <p class="post-header__user-name">${post.user.name}</p>
                     </div>
                     <div class="post-image-container">
-                      <img class="post-image" src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg">
+                      <img class="post-image" src=${post.imageUrl}>
                     </div>
                     <div class="post-likes">
-                      <button data-post-id="642d00579b190443860c2f32" class="like-button">
+                      <button data-post-id=${post.id} data-liked="${post.isLiked}" class="like-button">
                         <img src="./assets/images/like-active.svg">
                       </button>
                       <p class="post-likes-text">
                         Нравится: <strong>2</strong>
                       </p>
                     </div>
                     <p class="post-text">
-                      <span class="user-name">Иван Иваныч</span>
-                      Ромашка, ромашка...
+                      <span class="user-name">${post.user.name}</span>
+                      ${post.description}
                     </p>
                     <p class="post-date">
                       19 минут назад
                     </p>
                   </li>
-                  <li class="post">
-                    <div class="post-header" data-user-id="6425602ce156b600f7858df2">
-                        <img src="https://storage.yandexcloud.net/skypro-webdev-homework-bucket/1680601502867-%25C3%2590%25C2%25A1%25C3%2590%25C2%25BD%25C3%2590%25C2%25B8%25C3%2590%25C2%25BC%25C3%2590%25C2%25BE%25C3%2590%25C2%25BA%2520%25C3%2591%25C2%258D%25C3%2590%25C2%25BA%25C3%2591%25C2%2580%25C3%2590%25C2%25B0%25C3%2590%25C2%25BD%25C3%2590%25C2%25B0%25202023-04-04%2520%25C3%2590%25C2%25B2%252014.04.29.png" class="post-header__user-image">
-                        <p class="post-header__user-name">Варварва Н.</p>
-                    </div>
-
-
-                    <div class="post-image-container">
-                      <img class="post-image" src="https://storage.yandexcloud.net/skypro-webdev-homework-bucket/1680670675451-%25C3%2590%25C2%25A1%25C3%2590%25C2%25BD%25C3%2590%25C2%25B8%25C3%2590%25C2%25BC%25C3%2590%25C2%25BE%25C3%2590%25C2%25BA%2520%25C3%2591%25C2%258D%25C3%2590%25C2%25BA%25C3%2591%25C2%2580%25C3%2590%25C2%25B0%25C3%2590%25C2%25BD%25C3%2590%25C2%25B0%25202023-03-31%2520%25C3%2590%25C2%25B2%252012.51.20.png">
-                    </div>
-                    <div class="post-likes">
-                      <button data-post-id="642cffed9b190443860c2f30" class="like-button">
-                        <img src="./assets/images/like-not-active.svg">
-                      </button>
-                      <p class="post-likes-text">
-                        Нравится: <strong>35</strong>
-                      </p>
-                    </div>
-                    <p class="post-text">
-                      <span class="user-name">Варварва Н.</span>
-                      Нарисовала картину, посмотрите какая красивая
-                    </p>
-                    <p class="post-date">
-                      3 часа назад
-                    </p>
-                  </li>
-                  <li class="post">
-                    <div class="post-header" data-user-id="6425602ce156b600f7858df2">
-                        <img src="https://storage.yandexcloud.net/skypro-webdev-homework-bucket/1680601502867-%25C3%2590%25C2%25A1%25C3%2590%25C2%25BD%25C3%2590%25C2%25B8%25C3%2590%25C2%25BC%25C3%2590%25C2%25BE%25C3%2590%25C2%25BA%2520%25C3%2591%25C2%258D%25C3%2590%25C2%25BA%25C3%2591%25C2%2580%25C3%2590%25C2%25B0%25C3%2590%25C2%25BD%25C3%2590%25C2%25B0%25202023-04-04%2520%25C3%2590%25C2%25B2%252014.04.29.png" class="post-header__user-image">
-                        <p class="post-header__user-name">Варварва Н.</p>
-                    </div>
 
-
-                    <div class="post-image-container">
-                      <img class="post-image" src="https://leonardo.osnova.io/97a160ca-76b6-5cba-87c6-84ef29136bb3/">
-                    </div>
-                    <div class="post-likes">
-                      <button data-post-id="642cf82e9b190443860c2f2b" class="like-button">
-                        <img src="./assets/images/like-not-active.svg">
-                      </button>
-                      <p class="post-likes-text">
-                        Нравится: <strong>0</strong>
-                      </p>
-                    </div>
-                    <p class="post-text">
-                      <span class="user-name">Варварва Н.</span>
-                      Голова
-                    </p>
-                    <p class="post-date">
-                      8 дней назад
-                    </p>
-                  </li>
-                </ul>
-              </div>`;
+
+              </div>`
+
 
+  }).join("");
+
+  const appHtml = `
+  <div class="page-container">
+    <div class="header-container"></div>
+    <ul class="posts">
+    ${postsHtml}
+    </ul>
+  </div>`;    
   appEl.innerHTML = appHtml;
 
   renderHeaderComponent({

diff --git a/helpers.js b/helpers.js
@@ -13,3 +13,7 @@ export function getUserFromLocalStorage(user) {
 export function removeUserFromLocalStorage(user) {
   window.localStorage.removeItem("user");
 }
+
+export const sanitizeHtml = (htmlString) => {
+  return htmlString.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;');
+}
diff --git a/index.js b/index.js
@@ -1,4 +1,4 @@
-import { getPosts } from "./api.js";
+import { fetchPostsUser, getPosts, userPosts } from "./api.js";
 import { renderAddPostPageComponent } from "./components/add-post-page-component.js";
 import { renderAuthPageComponent } from "./components/auth-page-component.js";
 import {
@@ -34,6 +34,23 @@ export const logout = () => {
 /**
  * Включает страницу приложения
  */
+function getAPI() {
+  return getPosts({ token: getToken() })
+    .then((newPosts) => {
+      if (newPosts && newPosts.length > 0) {
+        page = POSTS_PAGE;
+        posts = newPosts;
+        renderApp();
+      } else {
+        console.log("Нет постов");
+      }
+    })
+    .catch((error) => {
+      console.error(error);
+      goToPage(POSTS_PAGE);
+    });
+}
+
 export const goToPage = (newPage, data) => {
   if (
     [
@@ -50,37 +67,49 @@ export const goToPage = (newPage, data) => {
       return renderApp();
     }
 
-    if (newPage === POSTS_PAGE) {
+    else if (newPage === POSTS_PAGE) {
+      page = LOADING_PAGE;
+      renderApp();
+
+      return getAPI();
+
+      // getPosts({ token: getToken() })
+      //   .then((newPosts) => {
+      //     page = POSTS_PAGE;
+      //     posts = newPosts;
+      //     renderApp();
+      //   })
+      //   .catch((error) => {
+      //     console.error(error);
+      //     goToPage(POSTS_PAGE);
+      //   });
+    }
+
+    else if (newPage === USER_POSTS_PAGE) {
+      // TODO: реализовать получение постов юзера из API
+      console.log("Открываю страницу пользователя: ", data.userId);
       page = LOADING_PAGE;
       renderApp();
 
-      return getPosts({ token: getToken() })
+      return fetchPostsUser(data.userId, { token: getToken() })
         .then((newPosts) => {
-          page = POSTS_PAGE;
+          page = USER_POSTS_PAGE;
           posts = newPosts;
           renderApp();
         })
         .catch((error) => {
           console.error(error);
-          goToPage(POSTS_PAGE);
         });
     }
-
-    if (newPage === USER_POSTS_PAGE) {
-      // TODO: реализовать получение постов юзера из API
-      console.log("Открываю страницу пользователя: ", data.userId);
-      page = USER_POSTS_PAGE;
-      posts = [];
-      return renderApp();
+    else {
+      page = newPage;
+      renderApp();
+      return;
     }
 
-    page = newPage;
-    renderApp();
-
-    return;
   }
 
-  throw new Error("страницы не существует");
+  throw new Error("Cтраницы не существует");
 };
 
 const renderApp = () => {
@@ -112,7 +141,10 @@ const renderApp = () => {
       onAddPostClick({ description, imageUrl }) {
         // TODO: реализовать добавление поста в API
         console.log("Добавляю пост...", { description, imageUrl });
-        goToPage(POSTS_PAGE);
+        userPosts({ token: getToken(), description, imageUrl })
+          .then(() => {
+            goToPage(POSTS_PAGE);
+          })
       },
     });
   }
@@ -126,7 +158,9 @@ const renderApp = () => {
   if (page === USER_POSTS_PAGE) {
     // TODO: реализовать страницу фотографию пользвателя
     appEl.innerHTML = "Здесь будет страница фотографий пользователя";
-    return;
+    return renderAuthPageComponent({
+      appEl,
+    });
   }
 };