Load img

.gitignore

@@ -0,0 +1 @@
+.DS_Store

.prettierrc.yaml

@@ -0,0 +1,3 @@
+tabWidth: 4
+semi: false
+singLeQuote: true

api.js

@@ -1,69 +1,67 @@
-// Замени на свой, чтобы получить независимый от других набор данных.
-// "боевая" версия инстапро лежит в ключе prod
-const personalKey = "prod";
-const baseHost = "https://webdev-hw-api.vercel.app";
-const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
+const personalKey = "prod"
+const baseHost = "https://wedev-api.sky.pro/api/v1/:vera-pershina/instapro"
+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 response.json();
+    return fetch(postsHost, {
+        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 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();
-  });
+    return fetch(baseHost + "/api/upload/image", {
+        method: "POST",
+        body: data,
+    }).then((response) => {
+        return response.json()
+    })
 }

components/add-post-page-component.js

@@ -1,23 +1,92 @@
 export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
-  const render = () => {
-    // @TODO: Реализовать страницу добавления поста
-    const appHtml = `
+    const render = () => {
+        const appHtml = `
     <div class="page-container">
       <div class="header-container"></div>
-      Cтраница добавления поста
-      <button class="button" id="add-button">Добавить</button>
+      <div class="form">
+        <h2>Добавить пост</h2>
+        <div class="form-inputs">
+          <textarea id="post-description" class="textarea" placeholder="Описание поста..." rows="4"></textarea>
+           <div class="upload-area" id="upload-area">
+            <label for="file-input" class="file-upload-label">
+              <span id="upload-text">Перетащите изображение сюда или кликните для выбора</span>
+              <input type="file" id="file-input" accept="image/*" style="display: none;">
+            </label>
+            <div id="image-preview" class="image-preview"></div>
+          </div>
+        </div>
+        <button class="button" id="add-button">Добавить</button>
+      </div>
     </div>
-  `;
+    `
 
-    appEl.innerHTML = appHtml;
+        appEl.innerHTML = appHtml
 
-    document.getElementById("add-button").addEventListener("click", () => {
-      onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
-      });
-    });
-  };
+        const fileInput = document.getElementById("file-input")
+        const uploadArea = document.getElementById("upload-area")
+        const imagePreview = document.getElementById("image-preview")
+        const uploadText = document.getElementById("upload-text")
+        const descriptionInput = document.getElementById("post-description")
 
-  render();
+        fileInput.addEventListener("change", (e) => {
+            const file = e.target.files[0]
+            if (file) {
+                const reader = new FileReader()
+                reader.onload = (event) => {
+                    imagePreview.innerHTML = `<img src="${event.target.result}" alt="Preview" class="preview-image">`
+                    uploadText.textContent = "Файл выбран: " + file.name
+                }
+                reader.readAsDataURL(file)
+            }
+        })
+
+        uploadArea.addEventListener("dragover", (e) => {
+            e.preventDefault()
+            uploadArea.classList.add("dragover")
+        })
+
+        uploadArea.addEventListener("dragleave", () => {
+            uploadArea.classList.remove("dragover")
+        })
+
+        uploadArea.addEventListener("drop", (e) => {
+            e.preventDefault()
+            uploadArea.classList.remove("dragover")
+            const file = e.dataTransfer.files[0]
+            if (file && file.type.match("image.*")) {
+                fileInput.files = e.dataTransfer.files
+                const reader = new FileReader()
+                reader.onload = (event) => {
+                    imagePreview.innerHTML = `<img src="${event.target.result}" alt="Preview" class="preview-image">`
+                    uploadText.textContent = "Файл выбран: " + file.name
+                }
+                reader.readAsDataURL(file)
+            }
+        })
+
+        document.getElementById("add-button").addEventListener("click", () => {
+            const description = descriptionInput.value.trim()
+
+            if (!fileInput.files[0]) {
+                alert("Пожалуйста, выберите изображение")
+                return
+            }
+
+            if (!description) {
+                alert("Пожалуйста, введите описание поста")
+                return
+            }
+
+            const imageUrl = fileInput.files[0]
+                ? URL.createObjectURL(fileInput.files[0])
+                : ""
+
+            onAddPostClick({
+                description: description,
+                imageUrl: imageUrl,
+            })
+        })
+    }
+
+    render()
 }