diff --git a/api.js b/api.js index 8997c44d..4acaa98e 100644 --- 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(); + } + }) + +} \ No newline at end of file diff --git a/components/add-post-page-component.js b/components/add-post-page-component.js index 59554d86..885fef2b 100644 --- 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 = `
- Cтраница добавления поста +
+

Новый пост

+
+
`; 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 index cf66a3ae..c41c554d 100644 --- a/components/auth-page-component.js +++ b/components/auth-page-component.js @@ -12,31 +12,28 @@ export function renderAuthPageComponent({ appEl, setUser }) {

- ${ - isLoginMode - ? "Вход в Instapro" - : "Регистрация в Instapro" - } + ${isLoginMode + ? "Вход в Instapro" + : "Регистрация в Instapro" + }

- ${ - !isLoginMode - ? ` + ${!isLoginMode + ? `
` - : "" - } + : "" + }
- +
diff --git a/components/posts-page-component.js b/components/posts-page-component.js index 5b97fdfe..23bba7e1 100644 --- a/components/posts-page-component.js +++ b/components/posts-page-component.js @@ -10,20 +10,19 @@ export function renderPostsPageComponent({ appEl }) { * TODO: чтобы отформатировать дату создания поста в виде "19 минут назад" * можно использовать https://date-fns.org/v2.29.3/docs/formatDistanceToNow */ - const appHtml = ` -
-
-
    + + let postsHtml = posts.map((post) => { + return `
  • -
    - -

    Иван Иваныч

    +
    + +

    ${post.user.name}

    - +
    -

    @@ -31,68 +30,27 @@ export function renderPostsPageComponent({ appEl }) {

    - Иван Иваныч - Ромашка, ромашка... + ${post.user.name} + ${post.description}

    19 минут назад

    • -
  • -
    - -

    Варварва Н.

    -
    - - -
    - -
    -
    - -

    - Нравится: 35 -

    -
    -

    - Варварва Н. - Нарисовала картину, посмотрите какая красивая -

    -

    - 3 часа назад -

    -
    • -
  • -
    - -

    Варварва Н.

    -
    - -
    - -
    -
    - -

    - Нравится: 0 -

    -
    -

    - Варварва Н. - Голова -

    -

    - 8 дней назад -

    -
    • -
-
`; + +
` + + }).join(""); + + const appHtml = ` +
+
+
    + ${postsHtml} +
+
`; appEl.innerHTML = appHtml; renderHeaderComponent({ diff --git a/helpers.js b/helpers.js index b47d3b77..9d59670e 100644 --- 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('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"'); +} \ No newline at end of file diff --git a/index.js b/index.js index dd05ef0f..163708d5 100644 --- 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, + }); } };