Course work

README.md

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

api.js

@@ -1,6 +1,10 @@
 // Замени на свой, чтобы получить независимый от других набор данных.
+
+import { saveUserToLocalStorage } from "./helpers";
+import { sanitizeHtml } from "./sanitize";
+
 // "боевая" версия инстапро лежит в ключе prod
-const personalKey = "prod";
+const personalKey = "TanyaSuvorkina";
 const baseHost = "https://webdev-hw-api.vercel.app";
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
@@ -68,3 +72,95 @@ export function uploadImage({ file }) {
     return response.json();
   });
 }
+
+
+//Нужно здесь отправить новые данные
+export const postPosts = ({ token, description, imageUrl }) => {
+  return fetch(postsHost, {
+    method: "POST",
+    body: JSON.stringify({
+      description: sanitizeHtml(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();
+      }
+    })
+
+}
+//получаем посты конкретного пользователя
+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 toggleLike = (id, {token}) => {
+  return fetch(`${postsHost}/${id}/like`, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+  })
+  .then((response) => {
+    if (response.ok) {
+      return response.json();
+    } 
+    throw new Error("Чтобы поставить лайк - авторизуйтесь!");
+  })
+}
+
+export const dislikeLike = (id, {token}) => {
+  return fetch(`${postsHost}/${id}/dislike`, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+  }) 
+  .then((response) => {
+    if (response.ok) {
+      return response.json();
+    }
+    throw new Error("Чтобы поставить лайк - авторизуйтесь!");
+  })
+} 
+//Delete post 
+export function deletefetchPost (id, {token}) {
+return fetch(`${postsHost}/${id}`, {
+  method: "Delete",
+  headers: {
+    Authorization: token,
+  },
+})
+.then((response) => {
+  return response.json();
+})
+}

components/add-post-page-component.js

@@ -1,20 +1,57 @@
+import {  renderHeaderComponent } from "./header-component.js";
+import {  renderUploadImageComponent } from "./upload-image-component.js";
+import { sanitizeHtml } from "../sanitize.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,
       });
     });
   };

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 { sanitizeHtml } from "../sanitize.js";
 
 export function renderAuthPageComponent({ appEl, setUser }) {
   let isLoginMode = true;
@@ -127,9 +128,9 @@ export function renderAuthPageComponent({ appEl, setUser }) {
         }
 
         registerUser({
-          login: login,
-          password: password,
-          name: name,
+          login: sanitizeHtml(login),
+          password: sanitizeHtml(password),
+          name: sanitizeHtml(name),
           imageUrl,
         })
           .then((user) => {