From 1b8eaa29889d88ad0ff96f3a4e001f18d7997fda Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Mon, 3 Jul 2023 17:16:54 +0700 Subject: [PATCH] update trending profile ui --- pnpm-lock.yaml | 84 ++++++++++++------------- src/app/trending/components/profile.tsx | 29 ++++++--- src/shared/icons/follow.tsx | 24 +++++++ src/shared/icons/index.tsx | 2 + src/shared/icons/unfollow.tsx | 24 +++++++ src/shared/user.tsx | 2 +- 6 files changed, 112 insertions(+), 53 deletions(-) create mode 100644 src/shared/icons/follow.tsx create mode 100644 src/shared/icons/unfollow.tsx diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 62a9a334..ac73454d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -389,13 +389,13 @@ packages: requiresBuild: true optional: true - /@eslint-community/eslint-utils@4.4.0(eslint@8.43.0): + /@eslint-community/eslint-utils@4.4.0(eslint@8.44.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 dependencies: - eslint: 8.43.0 + eslint: 8.44.0 eslint-visitor-keys: 3.4.1 dev: false @@ -404,13 +404,13 @@ packages: engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0} dev: false - /@eslint/eslintrc@2.0.3: - resolution: {integrity: sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==} + /@eslint/eslintrc@2.1.0: + resolution: {integrity: sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: ajv: 6.12.6 debug: 4.3.4 - espree: 9.5.2 + espree: 9.6.0 globals: 13.20.0 ignore: 5.2.4 import-fresh: 3.3.0 @@ -421,8 +421,8 @@ packages: - supports-color dev: false - /@eslint/js@8.43.0: - resolution: {integrity: sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==} + /@eslint/js@8.44.0: + resolution: {integrity: sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: false @@ -603,14 +603,14 @@ packages: '@noble/hashes': 1.3.1 '@noble/secp256k1': 2.0.0 '@scure/base': 1.1.1 - '@typescript-eslint/eslint-plugin': 5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.43.0)(typescript@4.9.5) - '@typescript-eslint/parser': 5.60.1(eslint@8.43.0)(typescript@4.9.5) + '@typescript-eslint/eslint-plugin': 5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.44.0)(typescript@4.9.5) + '@typescript-eslint/parser': 5.60.1(eslint@8.44.0)(typescript@4.9.5) debug: 4.3.4 esbuild: 0.17.19 esbuild-plugin-alias: 0.2.1 - eslint: 8.43.0 - eslint-config-prettier: 8.8.0(eslint@8.43.0) - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.60.1)(eslint@8.43.0) + eslint: 8.44.0 + eslint-config-prettier: 8.8.0(eslint@8.44.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.60.1)(eslint@8.44.0) esm-loader-typescript: 1.0.5 eventemitter3: 5.0.1 light-bolt11-decoder: 3.0.0 @@ -1494,7 +1494,7 @@ packages: resolution: {integrity: sha512-W8F4eoTIvzXeNrT3JroQPimZLXnlJA8smYygHZUKFPVoYwgs/OhJkA1VBhL3iSs57OQkuINqHlY4SmMT5wtnJg==} dev: true - /@typescript-eslint/eslint-plugin@5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.43.0)(typescript@4.9.5): + /@typescript-eslint/eslint-plugin@5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.44.0)(typescript@4.9.5): resolution: {integrity: sha512-KSWsVvsJsLJv3c4e73y/Bzt7OpqMCADUO846bHcuWYSYM19bldbAeDv7dYyV0jwkbMfJ2XdlzwjhXtuD7OY6bw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -1506,12 +1506,12 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.5.1 - '@typescript-eslint/parser': 5.60.1(eslint@8.43.0)(typescript@4.9.5) + '@typescript-eslint/parser': 5.60.1(eslint@8.44.0)(typescript@4.9.5) '@typescript-eslint/scope-manager': 5.60.1 - '@typescript-eslint/type-utils': 5.60.1(eslint@8.43.0)(typescript@4.9.5) - '@typescript-eslint/utils': 5.60.1(eslint@8.43.0)(typescript@4.9.5) + '@typescript-eslint/type-utils': 5.60.1(eslint@8.44.0)(typescript@4.9.5) + '@typescript-eslint/utils': 5.60.1(eslint@8.44.0)(typescript@4.9.5) debug: 4.3.4 - eslint: 8.43.0 + eslint: 8.44.0 grapheme-splitter: 1.0.4 ignore: 5.2.4 natural-compare-lite: 1.4.0 @@ -1522,7 +1522,7 @@ packages: - supports-color dev: false - /@typescript-eslint/parser@5.60.1(eslint@8.43.0)(typescript@4.9.5): + /@typescript-eslint/parser@5.60.1(eslint@8.44.0)(typescript@4.9.5): resolution: {integrity: sha512-pHWlc3alg2oSMGwsU/Is8hbm3XFbcrb6P5wIxcQW9NsYBfnrubl/GhVVD/Jm/t8HXhA2WncoIRfBtnCgRGV96Q==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -1536,7 +1536,7 @@ packages: '@typescript-eslint/types': 5.60.1 '@typescript-eslint/typescript-estree': 5.60.1(typescript@4.9.5) debug: 4.3.4 - eslint: 8.43.0 + eslint: 8.44.0 typescript: 4.9.5 transitivePeerDependencies: - supports-color @@ -1550,7 +1550,7 @@ packages: '@typescript-eslint/visitor-keys': 5.60.1 dev: false - /@typescript-eslint/type-utils@5.60.1(eslint@8.43.0)(typescript@4.9.5): + /@typescript-eslint/type-utils@5.60.1(eslint@8.44.0)(typescript@4.9.5): resolution: {integrity: sha512-vN6UztYqIu05nu7JqwQGzQKUJctzs3/Hg7E2Yx8rz9J+4LgtIDFWjjl1gm3pycH0P3mHAcEUBd23LVgfrsTR8A==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -1561,9 +1561,9 @@ packages: optional: true dependencies: '@typescript-eslint/typescript-estree': 5.60.1(typescript@4.9.5) - '@typescript-eslint/utils': 5.60.1(eslint@8.43.0)(typescript@4.9.5) + '@typescript-eslint/utils': 5.60.1(eslint@8.44.0)(typescript@4.9.5) debug: 4.3.4 - eslint: 8.43.0 + eslint: 8.44.0 tsutils: 3.21.0(typescript@4.9.5) typescript: 4.9.5 transitivePeerDependencies: @@ -1596,19 +1596,19 @@ packages: - supports-color dev: false - /@typescript-eslint/utils@5.60.1(eslint@8.43.0)(typescript@4.9.5): + /@typescript-eslint/utils@5.60.1(eslint@8.44.0)(typescript@4.9.5): resolution: {integrity: sha512-tiJ7FFdFQOWssFa3gqb94Ilexyw0JVxj6vBzaSpfN/8IhoKkDuSAenUKvsSHw2A/TMpJb26izIszTXaqygkvpQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0) '@types/json-schema': 7.0.12 '@types/semver': 7.5.0 '@typescript-eslint/scope-manager': 5.60.1 '@typescript-eslint/types': 5.60.1 '@typescript-eslint/typescript-estree': 5.60.1(typescript@4.9.5) - eslint: 8.43.0 + eslint: 8.44.0 eslint-scope: 5.1.1 semver: 7.5.3 transitivePeerDependencies: @@ -2481,13 +2481,13 @@ packages: engines: {node: '>=10'} dev: false - /eslint-config-prettier@8.8.0(eslint@8.43.0): + /eslint-config-prettier@8.8.0(eslint@8.44.0): resolution: {integrity: sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==} hasBin: true peerDependencies: eslint: '>=7.0.0' dependencies: - eslint: 8.43.0 + eslint: 8.44.0 dev: false /eslint-formatter-pretty@4.1.0: @@ -2514,7 +2514,7 @@ packages: - supports-color dev: false - /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.60.1)(eslint-import-resolver-node@0.3.7)(eslint@8.43.0): + /eslint-module-utils@2.8.0(@typescript-eslint/parser@5.60.1)(eslint-import-resolver-node@0.3.7)(eslint@8.44.0): resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==} engines: {node: '>=4'} peerDependencies: @@ -2535,15 +2535,15 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 5.60.1(eslint@8.43.0)(typescript@4.9.5) + '@typescript-eslint/parser': 5.60.1(eslint@8.44.0)(typescript@4.9.5) debug: 3.2.7 - eslint: 8.43.0 + eslint: 8.44.0 eslint-import-resolver-node: 0.3.7 transitivePeerDependencies: - supports-color dev: false - /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.60.1)(eslint@8.43.0): + /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.60.1)(eslint@8.44.0): resolution: {integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==} engines: {node: '>=4'} peerDependencies: @@ -2553,15 +2553,15 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 5.60.1(eslint@8.43.0)(typescript@4.9.5) + '@typescript-eslint/parser': 5.60.1(eslint@8.44.0)(typescript@4.9.5) array-includes: 3.1.6 array.prototype.flat: 1.3.1 array.prototype.flatmap: 1.3.1 debug: 3.2.7 doctrine: 2.1.0 - eslint: 8.43.0 + eslint: 8.44.0 eslint-import-resolver-node: 0.3.7 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.60.1)(eslint-import-resolver-node@0.3.7)(eslint@8.43.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.60.1)(eslint-import-resolver-node@0.3.7)(eslint@8.44.0) has: 1.0.3 is-core-module: 2.12.1 is-glob: 4.0.3 @@ -2601,15 +2601,15 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: false - /eslint@8.43.0: - resolution: {integrity: sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==} + /eslint@8.44.0: + resolution: {integrity: sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} hasBin: true dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0) '@eslint-community/regexpp': 4.5.1 - '@eslint/eslintrc': 2.0.3 - '@eslint/js': 8.43.0 + '@eslint/eslintrc': 2.1.0 + '@eslint/js': 8.44.0 '@humanwhocodes/config-array': 0.11.10 '@humanwhocodes/module-importer': 1.0.1 '@nodelib/fs.walk': 1.2.8 @@ -2621,7 +2621,7 @@ packages: escape-string-regexp: 4.0.0 eslint-scope: 7.2.0 eslint-visitor-keys: 3.4.1 - espree: 9.5.2 + espree: 9.6.0 esquery: 1.5.0 esutils: 2.0.3 fast-deep-equal: 3.1.3 @@ -2658,8 +2658,8 @@ packages: typescript: 5.1.6 dev: false - /espree@9.5.2: - resolution: {integrity: sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==} + /espree@9.6.0: + resolution: {integrity: sha512-1FH/IiruXZ84tpUlm0aCUEwMl2Ho5ilqVh0VvQXw+byAz/4SAciyHLlfmL5WYqsvD38oymdUwBss0LtK8m4s/A==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: acorn: 8.9.0 diff --git a/src/app/trending/components/profile.tsx b/src/app/trending/components/profile.tsx index 67d02da0..69f89de6 100644 --- a/src/app/trending/components/profile.tsx +++ b/src/app/trending/components/profile.tsx @@ -1,3 +1,4 @@ +import { FollowIcon, LoaderIcon, UnfollowIcon } from "@shared/icons"; import { Image } from "@shared/image"; import { DEFAULT_AVATAR } from "@stores/constants"; import { useQuery } from "@tanstack/react-query"; @@ -23,12 +24,10 @@ export function Profile({ data }: { data: any }) { const [followed, setFollowed] = useState(false); - const followUser = (pubkey: string) => { try { follow(pubkey); - - // // update state + // update state setFollowed(true); } catch (error) { console.log(error); @@ -38,15 +37,13 @@ export function Profile({ data }: { data: any }) { const unfollowUser = (pubkey: string) => { try { unfollow(pubkey); - - // // update state + // update state setFollowed(false); } catch (error) { console.log(error); } }; - useEffect(() => { if (status === "success" && userFollows) { if (userFollows.includes(data.pubkey)) { @@ -86,14 +83,26 @@ export function Profile({ data }: { data: any }) { {socialStatus === "loading" ? ( ) : followed ? ( - + ) : ( - + )} diff --git a/src/shared/icons/follow.tsx b/src/shared/icons/follow.tsx new file mode 100644 index 00000000..660c48f6 --- /dev/null +++ b/src/shared/icons/follow.tsx @@ -0,0 +1,24 @@ +import { SVGProps } from "react"; + +export function FollowIcon( + props: JSX.IntrinsicAttributes & SVGProps, +) { + return ( + + + + ); +} diff --git a/src/shared/icons/index.tsx b/src/shared/icons/index.tsx index 5e4db457..83d100ac 100644 --- a/src/shared/icons/index.tsx +++ b/src/shared/icons/index.tsx @@ -41,4 +41,6 @@ export * from "./signal"; export * from "./unverified"; export * from "./settings"; export * from "./logout"; +export * from "./follow"; +export * from "./unfollow"; // @endindex diff --git a/src/shared/icons/unfollow.tsx b/src/shared/icons/unfollow.tsx new file mode 100644 index 00000000..f3f6c790 --- /dev/null +++ b/src/shared/icons/unfollow.tsx @@ -0,0 +1,24 @@ +import { SVGProps } from "react"; + +export function UnfollowIcon( + props: JSX.IntrinsicAttributes & SVGProps, +) { + return ( + + + + ); +} diff --git a/src/shared/user.tsx b/src/shared/user.tsx index b458d542..c571420b 100644 --- a/src/shared/user.tsx +++ b/src/shared/user.tsx @@ -66,7 +66,7 @@ export function User({
{user?.nip05 || user?.name || user?.displayName || shortenKey(pubkey)}