Task4

README.md

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

api.js

@@ -1,7 +1,11 @@
 // Замени на свой, чтобы получить независимый от других набор данных.
 // "боевая" версия инстапро лежит в ключе prod
-const personalKey = "prod";
-const baseHost = "https://webdev-hw-api.vercel.app";
+import { renderApp, setPosts } from "./index.js";
+import { replaceSave } from "./helpers.js";
+
+const personalKey = "uni";
+//prod
+const baseHost = " https://wedev-api.sky.pro";
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
 export function getPosts({ token }) {
@@ -19,7 +23,7 @@ export function getPosts({ token }) {
       return response.json();
     })
     .then((data) => {
-      return data.posts;
+			return data.posts
     });
 }
 
@@ -68,3 +72,78 @@ export function uploadImage({ file }) {
     return response.json();
   });
 }
+
+export function addPost({ token, imageUrl }) {
+  const commentInputElement = document.getElementById('description')
+  return fetch(postsHost, {
+      method: 'POST',
+      body: JSON.stringify({
+          description: replaceSave(commentInputElement.value),
+          imageUrl,
+      }),
+      headers: {
+          Authorization: token,
+      },
+  }).then((response) => {
+      if (response.status === 400) {
+          alert('Нет фото или описания')
+      } else {
+          return response.json()
+      }
+  })
+}
+
+export function getPostsOfUser({ token, userId }) {
+  return fetch(`${postsHost}/user-posts/${userId}`, {
+      method: 'GET',
+      headers: {
+          Authorization: token,
+      },
+  })
+      .then((response) => {
+          if (response.status === 401) {
+              throw new Error('Нет авторизации')
+          }
+          return response.json()
+      })
+      .then((data) => {
+          setPosts(data.posts)
+          return data.posts
+      })
+      .catch((error) => {
+          alert('Кажется, у вас сломался интернет, попробуйте позже')
+          console.warn(error)
+      })
+}
+
+export function addLikePost({ token, postId }) {
+  return fetch(`${postsHost}/${postId}/like`, {
+      method: 'POST',
+      headers: {
+          Authorization: token,
+      },
+  }).then((response) => {
+      if (response.status === 401) {
+          alert('Лайкать посты могут только авторизованные пользователи')
+          throw new Error('Нет авторизации')
+      }
+
+      return response.json()
+  })
+}
+
+export function removeLikePost({ token, postId }) {
+  return fetch(`${postsHost}/${postId}/dislike`, {
+      method: 'POST',
+      headers: {
+          Authorization: token,
+      },
+  }).then((response) => {
+      if (response.status === 401) {
+          alert('Войдите, чтобы убрать лайк')
+          throw new Error('Нет авторизации')
+      }
+
+      return response.json()
+  })
+}

components/add-post-page-component.js

@@ -1,23 +1,52 @@
+import { renderUploadImageComponent } from './upload-image-component.js'
+import { renderHeaderComponent } from './header-component.js'
+
+
+
 export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
-  const render = () => {
-    // TODO: Реализовать страницу добавления поста
-    const appHtml = `
-    <div class="page-container">
-      <div class="header-container"></div>
-      Cтраница добавления поста
-      <button class="button" id="add-button">Добавить</button>
-    </div>
-  `;
-
-    appEl.innerHTML = appHtml;
-
-    document.getElementById("add-button").addEventListener("click", () => {
-      onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
-      });
-    });
-  };
+  let imageUrl = ''
+
+  const appHtml = `<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-container">
+              <div class="upload-image">
+                  <label class="file-upload-label secondary-button">
+                      <input type="file" class="file-upload-input" style="display:none">Выберите фото
+                  </label>
+              </div>
+          </div>
+              <label>Опишите фотографию:
+                  <textarea class="input textarea" rows="4" id="description"></textarea>
+              </label>
+                  <button class="button" id="add-button">Добавить</button>
+              </div>
+          </div>
+      </div>
+   </div>
+`
 
-  render();
+  appEl.innerHTML = appHtml
+
+  renderHeaderComponent({
+      element: document.querySelector('.header-container'),
+  })
+
+  renderUploadImageComponent({
+      element: document.querySelector('.upload-image-container'),
+      onImageUrlChange(newImageUrl) {
+          imageUrl = newImageUrl
+      },
+  })
+
+  document.getElementById('add-button').addEventListener('click', () => {
+      const description = document.getElementById('description').value
+
+      onAddPostClick({
+          description: description,
+          imageUrl: imageUrl,
+      })
+  })
 }

components/auth-page-component.js

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