Readme

.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

.prettierrc.yaml

@@ -0,0 +1,2 @@
+tabWidth: 4
+singleQuote: true

README.md

@@ -2,10 +2,16 @@
 
 MVP социальной сети для обмена фотографиями
 
+1. Добавить функионал удаления собственных постов.
+
+   Удалять можно как в общей ленте постов, так и при просмотре конкретного пользователя.
+
+   Удалять посты другого пользователя нельзя, кнопка удалить не активна.
+
 ## Первоначальная оценка
 
-ХХХХ часов
+72 часа
 
 ## Фактически затраченное время
 
-YYYY часов
+40 часов

api.js

@@ -1,69 +1,138 @@
 // Замени на свой, чтобы получить независимый от других набор данных.
 // "боевая" версия инстапро лежит в ключе prod
-const personalKey = "prod";
-const baseHost = "https://webdev-hw-api.vercel.app";
+const personalKey = 'avrusskov';
+const baseHost = 'https://webdev-hw-api.vercel.app';
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
 export function getPosts({ token }) {
-  return fetch(postsHost, {
-    method: "GET",
-    headers: {
-      Authorization: token,
-    },
-  })
-    .then((response) => {
-      if (response.status === 401) {
-        throw new Error("Нет авторизации");
-      }
+    return fetch(postsHost, {
+        method: 'GET',
+        headers: {
+            Authorization: token,
+        },
+    })
+        .then((response) => {
+            if (response.status === 401) {
+                throw new Error('Нет авторизации');
+            }
+
+            return response.json();
+        })
+        .then((data) => {
+            return data.posts;
+        });
+}
 
-      return response.json();
+export function getUserPosts({ token }, userId) {
+    return fetch(`${postsHost}/user-posts/${userId}`, {
+        method: 'GET',
+        headers: {
+            Authorization: token,
+        },
     })
-    .then((data) => {
-      return data.posts;
+        .then((response) => {
+            if (response.status === 401) {
+                throw new Error('Нет авторизации');
+            }
+
+            return response.json();
+        })
+        .then((data) => {
+            return data.posts;
+        });
+}
+
+export function addPost({ token }, description, imageUrl) {
+    return fetch(postsHost, {
+        method: 'POST',
+        headers: {
+            Authorization: token,
+        },
+        body: JSON.stringify({ description, imageUrl }),
+    }).then((response) => {
+        if (response.status === 401) {
+            throw new Error('Нет авторизации');
+        }
+
+        return;
+    });
+}
+
+export function deletePost({ token }, postId) {
+    return fetch(`${postsHost}/${postId}`, {
+        method: 'DELETE',
+        headers: { Authorization: token },
+    }).then((response) => {
+        if (response.status === 401) {
+            throw new Error('Нет авторизации');
+        }
+
+        return;
     });
 }
 
 export function registerUser({ login, password, name, imageUrl }) {
-  return fetch(baseHost + "/api/user", {
-    method: "POST",
-    body: JSON.stringify({
-      login,
-      password,
-      name,
-      imageUrl,
-    }),
-  }).then((response) => {
-    if (response.status === 400) {
-      throw new Error("Такой пользователь уже существует");
-    }
-    return response.json();
-  });
+    return fetch(baseHost + '/api/user', {
+        method: 'POST',
+        body: JSON.stringify({
+            login,
+            password,
+            name,
+            imageUrl,
+        }),
+    }).then((response) => {
+        if (response.status === 400) {
+            throw new Error('Такой пользователь уже существует');
+        }
+        return response.json();
+    });
 }
 
 export function loginUser({ login, password }) {
-  return fetch(baseHost + "/api/user/login", {
-    method: "POST",
-    body: JSON.stringify({
-      login,
-      password,
-    }),
-  }).then((response) => {
-    if (response.status === 400) {
-      throw new Error("Неверный логин или пароль");
-    }
-    return response.json();
-  });
+    return fetch(baseHost + '/api/user/login', {
+        method: 'POST',
+        body: JSON.stringify({
+            login,
+            password,
+        }),
+    }).then((response) => {
+        if (response.status === 400) {
+            throw new Error('Неверный логин или пароль');
+        }
+        return response.json();
+    });
 }
 
 // Загружает картинку в облако, возвращает url загруженной картинки
 export function uploadImage({ file }) {
-  const data = new FormData();
-  data.append("file", file);
+    const data = new FormData();
+    data.append('file', file);
+
+    return fetch(baseHost + '/api/upload/image', {
+        method: 'POST',
+        body: data,
+    }).then((response) => {
+        return response.json();
+    });
+}
+
+export function likePost({ token }, postId, isLiked) {
+    const flag = isLiked ? 'dislike' : 'like';
+
+    return fetch(`${postsHost}/${postId}/${flag}`, {
+        method: 'POST',
+        headers: {
+            Authorization: token,
+        },
+    })
+        .then((response) => {
+            if (response.status === 401) {
+                throw new Error('Нет авторизации');
+            }
 
-  return fetch(baseHost + "/api/upload/image", {
-    method: "POST",
-    body: data,
-  }).then((response) => {
-    return response.json();
-  });
+            return response.json();
+        })
+        .then((data) => {
+            return data.post;
+        });
 }

components/add-post-page-component.js

@@ -1,23 +1,71 @@
+import { replaceHtmlTags } from '../helpers.js';
+import { renderHeaderComponent } from './header-component.js';
+import { renderUploadImageComponent } from './upload-image-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",
-      });
-    });
-  };
-
-  render();
+    let imageUrl = '';
+
+    const render = () => {
+        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>
+                        <textarea
+                            type="textarea"
+                            id="description-input"
+                            class="input input_area"
+                            placeholder="Введите ваш коментарий"
+                            rows="3"
+                        ></textarea>
+                        </textarea>
+                    <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: uploadImageContainer,
+                onImageUrlChange(newImageUrl) {
+                    imageUrl = newImageUrl;
+                },
+            });
+        }
+
+        document.getElementById('add-button').addEventListener('click', () => {
+            const description = document.getElementById('description-input');
+
+            if (!description.value) {
+                alert('Введите комментарий');
+                return;
+            }
+
+            if (!imageUrl) {
+                alert('Выберите фото');
+                return;
+            }
+            onAddPostClick({
+                description: description.value,
+                imageUrl: imageUrl,
+            });
+        });
+    };
+
+    render();
 }