From 1effb4c4b99fcb90c3feefcbc4854ebb251a5be3 Mon Sep 17 00:00:00 2001 From: HydraponKing Date: Fri, 7 Jun 2024 03:33:38 +0500 Subject: [PATCH 1/9] 0.1 --- api.js | 14 +++ components/posts-page-component.js | 169 ++++++++++++----------------- 2 files changed, 85 insertions(+), 98 deletions(-) diff --git a/api.js b/api.js index 8997c44d..89ecc04c 100644 --- a/api.js +++ b/api.js @@ -68,3 +68,17 @@ export function uploadImage({ file }) { return response.json(); }); } +// это в конец файла api.js +export async function toggleLike(postId, token) { + const response = await fetch(`${postsHost}/${postId}/toggle-like`, { + method: 'POST', + headers: { + Authorization: token, + }, + }); + if (!response.ok) { + throw new Error('Ошибка при установке лайка'); + } + return response.json(); +} + diff --git a/components/posts-page-component.js b/components/posts-page-component.js index 5b97fdfe..87d4b9eb 100644 --- a/components/posts-page-component.js +++ b/components/posts-page-component.js @@ -1,109 +1,82 @@ import { USER_POSTS_PAGE } from "../routes.js"; import { renderHeaderComponent } from "./header-component.js"; -import { posts, goToPage } from "../index.js"; +import { getPosts, toggleLike } from "../api.js"; +import { goToPage } from "../index.js"; -export function renderPostsPageComponent({ appEl }) { - // TODO: реализовать рендер постов из api - console.log("Актуальный список постов:", posts); +export async function renderPostsPageComponent({ appEl }) { + try { + const token = localStorage.getItem('token'); + const posts = await getPosts({ token }); + console.log("Актуальный список постов:", posts); - /** - * TODO: чтобы отформатировать дату создания поста в виде "19 минут назад" - * можно использовать https://date-fns.org/v2.29.3/docs/formatDistanceToNow - */ - const appHtml = ` -
-
- -
`; + const formatDistanceToNow = (date) => { + const now = new Date(); + const diff = Math.abs(now - date); + const minutes = Math.floor(diff / 60000); + if (minutes < 60) return `${minutes} минут назад`; + const hours = Math.floor(minutes / 60); + if (hours < 24) return `${hours} часов назад`; + const days = Math.floor(hours / 24); + return `${days} дней назад`; + }; - appEl.innerHTML = appHtml; + const postsHtml = posts.map(post => ` +
  • +
    + +

    ${post.user.name}

    +
    +
    + +
    +
    + +

    + Нравится: ${post.likes} +

    +
    +

    + ${post.user.name} + ${post.text} +

    +

    + ${formatDistanceToNow(new Date(post.createdAt))} +

    +
    • + `).join(''); - renderHeaderComponent({ - element: document.querySelector(".header-container"), - }); + const appHtml = ` +
    +
    + +
    + `; - for (let userEl of document.querySelectorAll(".post-header")) { - userEl.addEventListener("click", () => { - goToPage(USER_POSTS_PAGE, { - userId: userEl.dataset.userId, + appEl.innerHTML = appHtml; + + renderHeaderComponent({ + element: document.querySelector(".header-container"), + }); + + document.querySelectorAll(".post-header").forEach(userEl => { + userEl.addEventListener("click", () => { + goToPage(USER_POSTS_PAGE, { userId: userEl.dataset.userId }); }); }); + + document.querySelectorAll(".like-button").forEach(likeButton => { + likeButton.addEventListener("click", async () => { + const postId = likeButton.dataset.postId; + await toggleLike(postId, token); + renderPostsPageComponent({ appEl }); + }); + }); + + } catch (error) { + console.error("Ошибка при получении постов:", error); } } From b1789322f7861e059a0236bac39e75bf6e7d05fe Mon Sep 17 00:00:00 2001 From: HydraponKing Date: Sun, 9 Jun 2024 00:34:43 +0500 Subject: [PATCH 2/9] 0.2 --- components/add-post-page-component.js | 31 +- package-lock.json | 843 ++++++++++++++++++++++++++ package.json | 6 + 3 files changed, 875 insertions(+), 5 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json diff --git a/components/add-post-page-component.js b/components/add-post-page-component.js index 59554d86..cb668e86 100644 --- a/components/add-post-page-component.js +++ b/components/add-post-page-component.js @@ -3,11 +3,32 @@ export function renderAddPostPageComponent({ appEl, onAddPostClick }) { // TODO: Реализовать страницу добавления поста const appHtml = `
    -
    - Cтраница добавления поста - -
    - `; +
    +
    +

    instapro

    + + +
    +
    +

    Добавить пост

    +
    +
    +
    + +
    +
    + + +
    +
    + + `; appEl.innerHTML = appHtml; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..cf85686e --- /dev/null +++ b/package-lock.json @@ -0,0 +1,843 @@ +{ + "name": "instaProject", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "express": "^4.19.2", + "multer": "^1.4.5-lts.1" + } + }, + "node_modules/accepts": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", + "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==", + "dependencies": { + "mime-types": "~2.1.34", + "negotiator": "0.6.3" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/append-field": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz", + "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==" + }, + "node_modules/array-flatten": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" + }, + "node_modules/body-parser": { + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz", + "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==", + "dependencies": { + "bytes": "3.1.2", + "content-type": "~1.0.5", + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "1.2.0", + "http-errors": "2.0.0", + "iconv-lite": "0.4.24", + "on-finished": "2.4.1", + "qs": "6.11.0", + "raw-body": "2.5.2", + "type-is": "~1.6.18", + "unpipe": "1.0.0" + }, + "engines": { + "node": ">= 0.8", + "npm": "1.2.8000 || >= 1.4.16" + } + }, + "node_modules/buffer-from": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==" + }, + "node_modules/busboy": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", + "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", + "dependencies": { + "streamsearch": "^1.1.0" + }, + "engines": { + "node": ">=10.16.0" + } + }, + "node_modules/bytes": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/call-bind": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", + "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "set-function-length": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/concat-stream": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", + "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", + "engines": [ + "node >= 0.8" + ], + "dependencies": { + "buffer-from": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^2.2.2", + "typedarray": "^0.0.6" + } + }, + "node_modules/content-disposition": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", + "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", + "dependencies": { + "safe-buffer": "5.2.1" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/content-type": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", + "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/cookie-signature": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" + }, + "node_modules/core-util-is": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" + }, + "node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/define-data-property": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", + "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "gopd": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/depd": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", + "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/destroy": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", + "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==", + "engines": { + "node": ">= 0.8", + "npm": "1.2.8000 || >= 1.4.16" + } + }, + "node_modules/ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" + }, + "node_modules/encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/es-define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", + "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", + "dependencies": { + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==" + }, + "node_modules/etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/express": { + "version": "4.19.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", + "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==", + "dependencies": { + "accepts": "~1.3.8", + "array-flatten": "1.1.1", + "body-parser": "1.20.2", + "content-disposition": "0.5.4", + "content-type": "~1.0.4", + "cookie": "0.6.0", + "cookie-signature": "1.0.6", + "debug": "2.6.9", + "depd": "2.0.0", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "finalhandler": "1.2.0", + "fresh": "0.5.2", + "http-errors": "2.0.0", + "merge-descriptors": "1.0.1", + "methods": "~1.1.2", + "on-finished": "2.4.1", + "parseurl": "~1.3.3", + "path-to-regexp": "0.1.7", + "proxy-addr": "~2.0.7", + "qs": "6.11.0", + "range-parser": "~1.2.1", + "safe-buffer": "5.2.1", + "send": "0.18.0", + "serve-static": "1.15.0", + "setprototypeof": "1.2.0", + "statuses": "2.0.1", + "type-is": "~1.6.18", + "utils-merge": "1.0.1", + "vary": "~1.1.2" + }, + "engines": { + "node": ">= 0.10.0" + } + }, + "node_modules/finalhandler": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", + "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", + "dependencies": { + "debug": "2.6.9", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "on-finished": "2.4.1", + "parseurl": "~1.3.3", + "statuses": "2.0.1", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/forwarded": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", + "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-intrinsic": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", + "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "has-proto": "^1.0.1", + "has-symbols": "^1.0.3", + "hasown": "^2.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/gopd": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", + "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", + "dependencies": { + "get-intrinsic": "^1.1.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-property-descriptors": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", + "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", + "dependencies": { + "es-define-property": "^1.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-proto": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", + "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/http-errors": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", + "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", + "dependencies": { + "depd": "2.0.0", + "inherits": "2.0.4", + "setprototypeof": "1.2.0", + "statuses": "2.0.1", + "toidentifier": "1.0.1" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, + "node_modules/ipaddr.js": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", + "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==" + }, + "node_modules/media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/merge-descriptors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", + "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==" + }, + "node_modules/methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/mkdirp": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", + "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", + "dependencies": { + "minimist": "^1.2.6" + }, + "bin": { + "mkdirp": "bin/cmd.js" + } + }, + "node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, + "node_modules/multer": { + "version": "1.4.5-lts.1", + "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz", + "integrity": "sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==", + "dependencies": { + "append-field": "^1.0.0", + "busboy": "^1.0.0", + "concat-stream": "^1.5.2", + "mkdirp": "^0.5.4", + "object-assign": "^4.1.1", + "type-is": "^1.6.4", + "xtend": "^4.0.0" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/negotiator": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", + "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-inspect": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", + "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/on-finished": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", + "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", + "dependencies": { + "ee-first": "1.1.1" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/path-to-regexp": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", + "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==" + }, + "node_modules/process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" + }, + "node_modules/proxy-addr": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", + "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", + "dependencies": { + "forwarded": "0.2.0", + "ipaddr.js": "1.9.1" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/qs": { + "version": "6.11.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", + "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", + "dependencies": { + "side-channel": "^1.0.4" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/range-parser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", + "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/raw-body": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz", + "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==", + "dependencies": { + "bytes": "3.1.2", + "http-errors": "2.0.0", + "iconv-lite": "0.4.24", + "unpipe": "1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/readable-stream": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", + "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "node_modules/readable-stream/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, + "node_modules/safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, + "node_modules/send": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", + "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==", + "dependencies": { + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "1.2.0", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "2.0.0", + "mime": "1.6.0", + "ms": "2.1.3", + "on-finished": "2.4.1", + "range-parser": "~1.2.1", + "statuses": "2.0.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/send/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "node_modules/serve-static": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz", + "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==", + "dependencies": { + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "parseurl": "~1.3.3", + "send": "0.18.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/set-function-length": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", + "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", + "dependencies": { + "define-data-property": "^1.1.4", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "gopd": "^1.0.1", + "has-property-descriptors": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/setprototypeof": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", + "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" + }, + "node_modules/side-channel": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz", + "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==", + "dependencies": { + "call-bind": "^1.0.7", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.4", + "object-inspect": "^1.13.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/statuses": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", + "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/streamsearch": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", + "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==", + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, + "node_modules/string_decoder/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, + "node_modules/toidentifier": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", + "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", + "engines": { + "node": ">=0.6" + } + }, + "node_modules/type-is": { + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", + "dependencies": { + "media-typer": "0.3.0", + "mime-types": "~2.1.24" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/typedarray": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", + "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==" + }, + "node_modules/unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" + }, + "node_modules/utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==", + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "engines": { + "node": ">=0.4" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..61ad7785 --- /dev/null +++ b/package.json @@ -0,0 +1,6 @@ +{ + "dependencies": { + "express": "^4.19.2", + "multer": "^1.4.5-lts.1" + } +} From b51d5dca3a372b032ec4d72e20fbadfba31ffabe Mon Sep 17 00:00:00 2001 From: HydraponKing Date: Tue, 18 Jun 2024 19:05:57 +0500 Subject: [PATCH 3/9] 0.3 --- api.js | 16 ++++ components/add-post-page-component.js | 2 +- components/posts-page-component.js | 2 +- index.js | 117 ++++++++++++++++++++++++-- styles.css | 27 ++++++ 5 files changed, 154 insertions(+), 10 deletions(-) diff --git a/api.js b/api.js index 89ecc04c..7a677e62 100644 --- a/api.js +++ b/api.js @@ -23,6 +23,22 @@ export function getPosts({ token }) { }); } +export async function getUserPosts({ userId, token }) { + const response = await fetch(`${postsHost}/user-posts/${userId}`, { + method: 'GET', + headers: { + Authorization: token, + } + }); + if (!response.ok) { + throw new Error('Ошибка при получении постов пользователя'); + } + const data = await response.json(); + return data.posts; +} + + + // https://github.com/GlebkaF/webdev-hw-api/blob/main/pages/api/user/README.md#%D0%B0%D0%B2%D1%82%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%D1%81%D1%8F export function registerUser({ login, password, name, imageUrl }) { return fetch(baseHost + "/api/user", { diff --git a/components/add-post-page-component.js b/components/add-post-page-component.js index cb668e86..ce38272a 100644 --- a/components/add-post-page-component.js +++ b/components/add-post-page-component.js @@ -1,6 +1,6 @@ export function renderAddPostPageComponent({ appEl, onAddPostClick }) { const render = () => { - // TODO: Реализовать страницу добавления поста + // TODO: Реализовать добавления поста в апи const appHtml = `
    diff --git a/components/posts-page-component.js b/components/posts-page-component.js index 87d4b9eb..eebb473a 100644 --- a/components/posts-page-component.js +++ b/components/posts-page-component.js @@ -39,7 +39,7 @@ export async function renderPostsPageComponent({ appEl }) {

    ${post.user.name} - ${post.text} + ${post.description}

    ${formatDistanceToNow(new Date(post.createdAt))} diff --git a/index.js b/index.js index dd05ef0f..5ed59219 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -import { getPosts } from "./api.js"; +import { getPosts, getUserPosts, toggleLike } from "./api.js"; import { renderAddPostPageComponent } from "./components/add-post-page-component.js"; import { renderAuthPageComponent } from "./components/auth-page-component.js"; import { @@ -15,6 +15,7 @@ import { removeUserFromLocalStorage, saveUserToLocalStorage, } from "./helpers.js"; +import { renderHeaderComponent } from "./components/header-component.js"; // Импорт функции для рендеринга заголовка export let user = getUserFromLocalStorage(); export let page = null; @@ -58,6 +59,7 @@ export const goToPage = (newPage, data) => { .then((newPosts) => { page = POSTS_PAGE; posts = newPosts; + console.log("Posts loaded:", posts); // Логирование постов renderApp(); }) .catch((error) => { @@ -67,11 +69,21 @@ export const goToPage = (newPage, data) => { } if (newPage === USER_POSTS_PAGE) { - // TODO: реализовать получение постов юзера из API console.log("Открываю страницу пользователя: ", data.userId); - page = USER_POSTS_PAGE; - posts = []; - return renderApp(); + page = LOADING_PAGE; + renderApp(); + + return getUserPosts({ userId: data.userId, token: getToken() }) + .then((userPosts) => { + page = USER_POSTS_PAGE; + posts = userPosts; + console.log("User posts loaded:", posts); // Логирование постов пользователя + renderApp(); + }) + .catch((error) => { + console.error(error); + goToPage(POSTS_PAGE); + }); } page = newPage; @@ -124,10 +136,99 @@ const renderApp = () => { } if (page === USER_POSTS_PAGE) { - // TODO: реализовать страницу фотографию пользвателя - appEl.innerHTML = "Здесь будет страница фотографий пользователя"; - return; + return renderUserPostsPageComponent({ + appEl, + posts, + }); } }; +const calculateTotalLikes = (posts) => { + return posts.reduce((total, post) => total + post.likes, 0); +}; + +const formatDistanceToNow = (date) => { + const now = new Date(); + const diff = Math.abs(now - date); + const minutes = Math.floor(diff / 60000); + if (minutes < 60) return `${minutes} минут назад`; + const hours = Math.floor(minutes / 60); + if (hours < 24) return `${hours} часов назад`; + const days = Math.floor(hours / 24); + return `${days} дней назад`; +}; + +const renderUserPostsPageComponent = ({ appEl, posts }) => { + const user = posts.length > 0 ? posts[0].user : null; + const lastPostDateElement = posts.length > 0 ? posts[0].createdAt : 'нет постов'; + const lastPostDate = formatDistanceToNow(new Date(lastPostDateElement)); + + const userHtml = user ? ` +

    + ` : ''; + + const postsHtml = posts.map(post => ` +
  • +
    + +

    ${post.user.name}

    +
    +
    + +
    +
    + +

    + Нравится: ${post.likes} +

    +
    +

    + ${post.user.name} + ${post.description} +

    +

    + ${formatDistanceToNow(new Date(post.createdAt))} +

    +
    • + `).join(''); + + const appHtml = ` +
    +
    + ${userHtml} +
      + ${postsHtml} +
    +
    + `; + + appEl.innerHTML = appHtml; + + renderHeaderComponent({ + element: document.querySelector(".header-container"), + }); + + document.querySelectorAll(".post-header").forEach(userEl => { + userEl.addEventListener("click", () => { + goToPage(USER_POSTS_PAGE, { userId: userEl.dataset.userId }); + }); + }); + + document.querySelectorAll(".like-button").forEach(likeButton => { + likeButton.addEventListener("click", async () => { + const postId = likeButton.dataset.postId; + await toggleLike(postId, getToken()); + renderUserPostsPageComponent({ appEl, posts }); + }); + }); +}; + goToPage(POSTS_PAGE); diff --git a/styles.css b/styles.css index 57bc08b1..72efc1ae 100644 --- a/styles.css +++ b/styles.css @@ -196,3 +196,30 @@ width: 100%; text-align: center; } +/**/ +.user-profile { + display: flex; + align-items: center; + margin-bottom: 20px; +} + +.user-profile__avatar { + width: 100px; + height: 100px; + border-radius: 50%; + margin-right: 20px; +} + +.user-profile__info { + display: flex; + flex-direction: column; +} + +.user-profile__name { + font-size: 24px; + font-weight: bold; +} + +.user-profile__likes { + font-size: 18px; +} \ No newline at end of file From cf4726faa420bcf7de2b58d45fcb0faed0dd0781 Mon Sep 17 00:00:00 2001 From: HydraponKing Date: Tue, 18 Jun 2024 19:47:22 +0500 Subject: [PATCH 4/9] 0.4 --- api.js | 23 ++++++++++++++++ components/add-post-page-component.js | 38 ++++++++++++++++++--------- components/posts-page-component.js | 12 +++------ index.js | 8 +++--- 4 files changed, 57 insertions(+), 24 deletions(-) diff --git a/api.js b/api.js index 7a677e62..0e4fa133 100644 --- a/api.js +++ b/api.js @@ -1,9 +1,32 @@ // Замени на свой, чтобы получить независимый от других набор данных. + // "боевая" версия инстапро лежит в ключе prod const personalKey = "prod"; const baseHost = "https://webdev-hw-api.vercel.app"; const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`; +export function addPosts({ imageUrl, description, token }) { + return fetch(postsHost, { + method: "POST", + headers: { + Authorization: token, + }, + body: JSON.stringify({ + imageUrl, description + }) + }) + .then((response) => { + if (response.status === 401) { + throw new Error("Нет авторизации"); + } + + return response.json(); + }) + .then((data) => { + return data; + }); +} + export function getPosts({ token }) { return fetch(postsHost, { method: "GET", diff --git a/components/add-post-page-component.js b/components/add-post-page-component.js index ce38272a..cf864de2 100644 --- a/components/add-post-page-component.js +++ b/components/add-post-page-component.js @@ -1,24 +1,21 @@ + + +import { renderHeaderComponent } from "./header-component.js"; +import { renderUploadImageComponent } from "./upload-image-component.js"; + export function renderAddPostPageComponent({ appEl, onAddPostClick }) { + let imageUrl = " "; const render = () => { // TODO: Реализовать добавления поста в апи const appHtml = `
    -
    -

    instapro

    - - -
    +

    Добавить пост

    -
    - -
    +

    @@ -69,10 +70,20 @@ export function renderPostsPageComponent({ appEl }) document.querySelectorAll(".like-button").forEach(likeButton => { likeButton.addEventListener("click", async () => { const postId = likeButton.dataset.postId; - await toggleLike(postId, token); - renderPostsPageComponent({ appEl }); + const post = posts.find(p => p.id === postId); + + if (post.isLiked) { + await dislikePost(postId, token); + } else { + await likePost(postId, token); + } + + const updatedPosts = await getPosts({ token }); + renderPostsPageComponent({ appEl, posts: updatedPosts }); }); }); - + } catch (error) { + console.error("Ошибка при получении постов:", error); + } } diff --git a/index.js b/index.js index 30e48368..4cc0a2b5 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -import { addPosts, getPosts, getUserPosts, toggleLike } from "./api.js"; +import { addPosts, getPosts, getUserPosts, likePost, dislikePost } from "./api.js"; import { renderAddPostPageComponent } from "./components/add-post-page-component.js"; import { renderAuthPageComponent } from "./components/auth-page-component.js"; import { @@ -15,13 +15,13 @@ import { removeUserFromLocalStorage, saveUserToLocalStorage, } from "./helpers.js"; -import { renderHeaderComponent } from "./components/header-component.js"; // Импорт функции для рендеринга заголовка +import { renderHeaderComponent } from "./components/header-component.js"; export let user = getUserFromLocalStorage(); export let page = null; export let posts = []; -const getToken = () => { +export const getToken = () => { const token = user ? `Bearer ${user.token}` : undefined; return token; }; @@ -32,9 +32,6 @@ export const logout = () => { goToPage(POSTS_PAGE); }; -/** - * Включает страницу приложения - */ export const goToPage = (newPage, data) => { if ( [ @@ -46,7 +43,6 @@ export const goToPage = (newPage, data) => { ].includes(newPage) ) { if (newPage === ADD_POSTS_PAGE) { - // Если пользователь не авторизован, то отправляем его на авторизацию перед добавлением поста page = user ? ADD_POSTS_PAGE : AUTH_PAGE; return renderApp(); } @@ -59,7 +55,6 @@ export const goToPage = (newPage, data) => { .then((newPosts) => { page = POSTS_PAGE; posts = newPosts; - console.log("Posts loaded:", posts); // Логирование постов renderApp(); }) .catch((error) => { @@ -69,7 +64,6 @@ export const goToPage = (newPage, data) => { } if (newPage === USER_POSTS_PAGE) { - console.log("Открываю страницу пользователя: ", data.userId); page = LOADING_PAGE; renderApp(); @@ -77,7 +71,6 @@ export const goToPage = (newPage, data) => { .then((userPosts) => { page = USER_POSTS_PAGE; posts = userPosts; - console.log("User posts loaded:", posts); // Логирование постов пользователя renderApp(); }) .catch((error) => { @@ -88,7 +81,6 @@ export const goToPage = (newPage, data) => { page = newPage; renderApp(); - return; } @@ -145,10 +137,6 @@ const renderApp = () => { } }; -const calculateTotalLikes = (posts) => { - return posts.reduce((total, post) => total + post.likes, 0); -}; - const formatDistanceToNow = (date) => { const now = new Date(); const diff = Math.abs(now - date); @@ -189,7 +177,7 @@ const renderUserPostsPageComponent = ({ appEl, posts }) => {

    - Нравится: ${post.likes} + Нравится: ${post.likes.length}

    @@ -227,8 +215,16 @@ const renderUserPostsPageComponent = ({ appEl, posts }) => { document.querySelectorAll(".like-button").forEach(likeButton => { likeButton.addEventListener("click", async () => { const postId = likeButton.dataset.postId; - await toggleLike(postId, getToken()); - renderUserPostsPageComponent({ appEl, posts }); + const post = posts.find(p => p.id === postId); + + if (post.isLiked) { + await dislikePost(postId, getToken()); + } else { + await likePost(postId, getToken()); + } + + const updatedPosts = await getUserPosts({ userId: post.user.id, token: getToken() }); + renderUserPostsPageComponent({ appEl, posts: updatedPosts }); }); }); }; From a740e3b949dc3cb6974e60795e96a536ec67f924 Mon Sep 17 00:00:00 2001 From: HydraponKing Date: Thu, 20 Jun 2024 04:43:13 +0500 Subject: [PATCH 6/9] 0.7 --- components/add-post-page-component.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/add-post-page-component.js b/components/add-post-page-component.js index cf864de2..40ea7b35 100644 --- a/components/add-post-page-component.js +++ b/components/add-post-page-component.js @@ -45,12 +45,17 @@ export function renderAddPostPageComponent({ appEl, onAddPostClick }) { } document.getElementById("add-button").addEventListener("click", () => { + const description = document.querySelector(".textarea").value.trim(); + if (!description || !imageUrl.trim()) { + alert("Добавьте изображение или текст"); + return; + } onAddPostClick({ - description: document.querySelector(".textarea").value, + description, imageUrl }); }); }; render(); -} +} \ No newline at end of file From beac820fd473d7191ecd53d1382ef8bd2b4dd18e Mon Sep 17 00:00:00 2001 From: HydraponKing Date: Thu, 20 Jun 2024 05:11:48 +0500 Subject: [PATCH 7/9] 0.8 --- api.js | 71 ++++++++++-------------------- components/posts-page-component.js | 45 +++++++------------ index.js | 35 ++++++++------- 3 files changed, 57 insertions(+), 94 deletions(-) diff --git a/api.js b/api.js index 1773a2ee..d200adc7 100644 --- a/api.js +++ b/api.js @@ -1,3 +1,6 @@ +// Замени на свой, чтобы получить независимый от других набор данных. + +// "боевая" версия инстапро лежит в ключе prod const personalKey = "pro228"; const baseHost = "https://webdev-hw-api.vercel.app"; const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`; @@ -57,53 +60,12 @@ export async function getUserPosts({ userId, token }) { return data.posts; } -export async function likePost(postId, token) { - const response = await fetch(`${postsHost}/${postId}/like`, { - method: 'POST', - headers: { - Authorization: token, - } - }); - if (!response.ok) { - throw new Error('Ошибка при установке лайка'); - } - return response.json(); -} -export async function dislikePost(postId, token) { - const response = await fetch(`${postsHost}/${postId}/dislike`, { - method: 'POST', - headers: { - Authorization: token, - } - }); - if (!response.ok) { - throw new Error('Ошибка при удалении лайка'); - } - return response.json(); -} - -export function uploadImage({ file }) { - const data = new FormData(); - data.append("file", file); - - return fetch(baseHost + "/api/upload/image", { - method: "POST", - body: data, - }).then((response) => { - if (!response.ok) { - throw new Error('Ошибка при загрузке изображения'); - } - return response.json(); - }); -} +// https://github.com/GlebkaF/webdev-hw-api/blob/main/pages/api/user/README.md#%D0%B0%D0%B2%D1%82%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%D1%81%D1%8F export function registerUser({ login, password, name, imageUrl }) { return fetch(baseHost + "/api/user", { method: "POST", - headers: { - "Content-Type": "application/json" - }, body: JSON.stringify({ login, password, @@ -121,9 +83,6 @@ export function registerUser({ login, password, name, imageUrl }) { export function loginUser({ login, password }) { return fetch(baseHost + "/api/user/login", { method: "POST", - headers: { - "Content-Type": "application/json" - }, body: JSON.stringify({ login, password, @@ -136,15 +95,31 @@ export function loginUser({ login, password }) { }); } -export async function toggleLike(postId, token) { - const response = await fetch(`${postsHost}/${postId}/toggle-like`, { +// Загружает картинку в облако, возвращает url загруженной картинки +export function uploadImage({ file }) { + const data = new FormData(); + data.append("file", file); + + return fetch(baseHost + "/api/upload/image", { + method: "POST", + body: data, + }).then((response) => { + return response.json(); + }); +} +// это в конец файла api.js +export async function toggleLike(postId, isLiked, token) { + const url = `${postsHost}/${postId}/${isLiked ? 'dislike' : 'like'}`; + const response = await fetch(url, { method: 'POST', headers: { Authorization: token, }, }); if (!response.ok) { - throw new Error('Ошибка при установке лайка'); + throw new Error('Ошибка при изменении лайка'); } return response.json(); } + + diff --git a/components/posts-page-component.js b/components/posts-page-component.js index 86a2142b..21257dc8 100644 --- a/components/posts-page-component.js +++ b/components/posts-page-component.js @@ -1,22 +1,20 @@ -import { USER_POSTS_PAGE } from "../routes.js"; +import { USER_POSTS_PAGE, POSTS_PAGE } from "../routes.js"; // Добавлен импорт POSTS_PAGE import { renderHeaderComponent } from "./header-component.js"; -import { getPosts, likePost, dislikePost } from "../api.js"; -import { goToPage, getToken } from "../index.js"; +import { getPosts, toggleLike } from "../api.js"; +import { goToPage, posts, getToken } from "../index.js"; // Импорт функции getToken -export async function renderPostsPageComponent({ appEl }) { - try { - const token = getToken(); - const posts = await getPosts({ token }); +export function renderPostsPageComponent({ appEl }) { + console.log("Актуальный список постов:", posts); const formatDistanceToNow = (date) => { - const now = new Date(); - const diff = Math.abs(now - date); - const minutes = Math.floor(diff / 60000); - if (minutes < 60) return `${minutes} минут назад`; - const hours = Math.floor(minutes / 60); - if (hours < 24) return `${hours} часов назад`; - const days = Math.floor(hours / 24); - return `${days} дней назад`; + const now = new Date(); + const diff = Math.abs(now - date); + const minutes = Math.floor(diff / 60000); + if (minutes < 60) return `${minutes} минут назад`; + const hours = Math.floor(minutes / 60); + if (hours < 24) return `${hours} часов назад`; + const days = Math.floor(hours / 24); + return `${days} дней назад`; }; const postsHtml = posts.map(post => ` @@ -70,20 +68,9 @@ export async function renderPostsPageComponent({ appEl }) { document.querySelectorAll(".like-button").forEach(likeButton => { likeButton.addEventListener("click", async () => { const postId = likeButton.dataset.postId; - const post = posts.find(p => p.id === postId); - - if (post.isLiked) { - await dislikePost(postId, token); - } else { - await likePost(postId, token); - } - - const updatedPosts = await getPosts({ token }); - renderPostsPageComponent({ appEl, posts: updatedPosts }); + const post = posts.find(post => post.id === postId); + await toggleLike(postId, post.isLiked, getToken()); + goToPage(POSTS_PAGE); // Обновляем страницу после изменения лайка }); }); - - } catch (error) { - console.error("Ошибка при получении постов:", error); - } } diff --git a/index.js b/index.js index 4cc0a2b5..37d0cb3c 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -import { addPosts, getPosts, getUserPosts, likePost, dislikePost } from "./api.js"; +import { addPosts, getPosts, getUserPosts, toggleLike } from "./api.js"; import { renderAddPostPageComponent } from "./components/add-post-page-component.js"; import { renderAuthPageComponent } from "./components/auth-page-component.js"; import { @@ -15,7 +15,7 @@ import { removeUserFromLocalStorage, saveUserToLocalStorage, } from "./helpers.js"; -import { renderHeaderComponent } from "./components/header-component.js"; +import { renderHeaderComponent } from "./components/header-component.js"; // Импорт функции для рендеринга заголовка export let user = getUserFromLocalStorage(); export let page = null; @@ -32,6 +32,9 @@ export const logout = () => { goToPage(POSTS_PAGE); }; +/** + * Включает страницу приложения + */ export const goToPage = (newPage, data) => { if ( [ @@ -43,6 +46,7 @@ export const goToPage = (newPage, data) => { ].includes(newPage) ) { if (newPage === ADD_POSTS_PAGE) { + // Если пользователь не авторизован, то отправляем его на авторизацию перед добавлением поста page = user ? ADD_POSTS_PAGE : AUTH_PAGE; return renderApp(); } @@ -55,6 +59,7 @@ export const goToPage = (newPage, data) => { .then((newPosts) => { page = POSTS_PAGE; posts = newPosts; + console.log("Posts loaded:", posts); // Логирование постов renderApp(); }) .catch((error) => { @@ -64,6 +69,7 @@ export const goToPage = (newPage, data) => { } if (newPage === USER_POSTS_PAGE) { + console.log("Открываю страницу пользователя: ", data.userId); page = LOADING_PAGE; renderApp(); @@ -71,6 +77,7 @@ export const goToPage = (newPage, data) => { .then((userPosts) => { page = USER_POSTS_PAGE; posts = userPosts; + console.log("User posts loaded:", posts); // Логирование постов пользователя renderApp(); }) .catch((error) => { @@ -81,6 +88,7 @@ export const goToPage = (newPage, data) => { page = newPage; renderApp(); + return; } @@ -114,11 +122,10 @@ const renderApp = () => { return renderAddPostPageComponent({ appEl, onAddPostClick({ description, imageUrl }) { - // TODO: реализовать добавление поста в API - addPosts({imageUrl, description, token: getToken()}) - .then(() => { - goToPage(POSTS_PAGE); - }) + addPosts({ imageUrl, description, token: getToken() }) + .then(() => { + goToPage(POSTS_PAGE); + }); }, }); } @@ -215,18 +222,12 @@ const renderUserPostsPageComponent = ({ appEl, posts }) => { document.querySelectorAll(".like-button").forEach(likeButton => { likeButton.addEventListener("click", async () => { const postId = likeButton.dataset.postId; - const post = posts.find(p => p.id === postId); - - if (post.isLiked) { - await dislikePost(postId, getToken()); - } else { - await likePost(postId, getToken()); - } - - const updatedPosts = await getUserPosts({ userId: post.user.id, token: getToken() }); - renderUserPostsPageComponent({ appEl, posts: updatedPosts }); + const post = posts.find(post => post.id === postId); + await toggleLike(postId, post.isLiked, getToken()); + renderUserPostsPageComponent({ appEl, posts }); // Обновляем страницу после изменения лайка }); }); }; + goToPage(POSTS_PAGE); From 8c33f0315739826849de8619f53fe2e3426fa55e Mon Sep 17 00:00:00 2001 From: HydraponKing Date: Thu, 20 Jun 2024 05:17:41 +0500 Subject: [PATCH 8/9] 0.9 --- README.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 216dfc2a..17ca7bea 100644 --- a/README.md +++ b/README.md @@ -4,12 +4,15 @@ MVP аналога популярной соц. сети для обмена ф ## Ссылка на приложение: -https:: +https:: https://github.com/GlebkaF/webdev-cw-instapro/pull/104 ## Первоначальная оценка -ХХХХ часов +10 часов ## Фактически затраченное время +15 часов -YYYY часов + +## +Добавлена "фича" - на странице пользователя появилась, отдельно, большая аватрка пользователя, его юзернейм и информационное поле, в котором указано когда пользователь добавил последний пост. приемр : "Последний пост был: 5 минут назад" From 49f497148af3ae2e9617d8f79b9e6a72126fcb15 Mon Sep 17 00:00:00 2001 From: HydraponKing Date: Fri, 21 Jun 2024 19:47:50 +0500 Subject: [PATCH 9/9] 1.0 --- components/posts-page-component.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/components/posts-page-component.js b/components/posts-page-component.js index 21257dc8..40769362 100644 --- a/components/posts-page-component.js +++ b/components/posts-page-component.js @@ -1,7 +1,7 @@ -import { USER_POSTS_PAGE, POSTS_PAGE } from "../routes.js"; // Добавлен импорт POSTS_PAGE +import { USER_POSTS_PAGE, POSTS_PAGE, AUTH_PAGE } from "../routes.js"; // Добавлен импорт POSTS_PAGE import { renderHeaderComponent } from "./header-component.js"; import { getPosts, toggleLike } from "../api.js"; -import { goToPage, posts, getToken } from "../index.js"; // Импорт функции getToken +import { goToPage, posts, getToken, user } from "../index.js"; // Импорт функции getToken export function renderPostsPageComponent({ appEl }) { console.log("Актуальный список постов:", posts); @@ -67,10 +67,13 @@ export function renderPostsPageComponent({ appEl }) { document.querySelectorAll(".like-button").forEach(likeButton => { likeButton.addEventListener("click", async () => { + if (!user) { + return goToPage(AUTH_PAGE); // Перенаправление на страницу авторизации + } const postId = likeButton.dataset.postId; const post = posts.find(post => post.id === postId); await toggleLike(postId, post.isLiked, getToken()); goToPage(POSTS_PAGE); // Обновляем страницу после изменения лайка }); }); -} +} \ No newline at end of file