update trending profile ui

This commit is contained in:
Ren Amamiya
2023-07-03 17:16:54 +07:00
parent 10c27fd627
commit 1b8eaa2988
6 changed files with 112 additions and 53 deletions

84
pnpm-lock.yaml generated
View File

@@ -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

View File

@@ -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" ? (
<button
type="button"
className="inline-flex w-36 h-10 items-center justify-center rounded-md bg-zinc-900 hover:bg-fuchsia-500 text-sm font-medium"
className="inline-flex w-8 h-8 items-center justify-center rounded-md bg-zinc-900 hover:bg-fuchsia-500"
>
Loading...
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
</button>
) : followed ? (
<button type="button" onClick={() => unfollowUser(data.pubkey)}>Unfollow</button>
<button
type="button"
onClick={() => unfollowUser(data.pubkey)}
className="inline-flex w-8 h-8 items-center justify-center rounded-md text-zinc-400 bg-zinc-800 hover:bg-fuchsia-500 hover:text-white"
>
<UnfollowIcon className="w-4 h-4" />
</button>
) : (
<button type="button" onClick={() => followUser(data.pubkey)}>Follow</button>
<button
type="button"
onClick={() => followUser(data.pubkey)}
className="inline-flex w-8 h-8 items-center justify-center rounded-md text-zinc-400 bg-zinc-800 hover:bg-fuchsia-500 hover:text-white"
>
<FollowIcon className="w-4 h-4" />
</button>
)}
</div>
</div>

View File

@@ -0,0 +1,24 @@
import { SVGProps } from "react";
export function FollowIcon(
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M11.85 13.251c-3.719.065-6.427 2.567-7.18 5.915-.13.575.338 1.084.927 1.084h6.901m-.647-6.999l.147-.001c.353 0 .696.022 1.03.064m-1.177-.063a7.889 7.889 0 00-1.852.249m3.028-.186c.334.042.658.104.972.186m-.972-.186a7.475 7.475 0 011.972.524m3.25 1.412v3m0 0v3m0-3h-3m3 0h3m-5.5-11.75a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
/>
</svg>
);
}

View File

@@ -41,4 +41,6 @@ export * from "./signal";
export * from "./unverified";
export * from "./settings";
export * from "./logout";
export * from "./follow";
export * from "./unfollow";
// @endindex

View File

@@ -0,0 +1,24 @@
import { SVGProps } from "react";
export function UnfollowIcon(
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M17.748 11.25h4.5m-7.5-4.75a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM3.67 19.166C4.432 15.773 7.203 13.25 11 13.25c3.795 0 6.566 2.524 7.328 5.916.13.575-.338 1.084-.927 1.084H4.597c-.59 0-1.056-.51-.927-1.084z"
/>
</svg>
);
}

View File

@@ -66,7 +66,7 @@ export function User({
<div className="flex flex-wrap items-baseline gap-1">
<h5
className={`text-zinc-100 font-semibold leading-none truncate ${
size === "small" ? "max-w-[8rem]" : "max-w-[15rem]"
size === "small" ? "max-w-[8rem]" : "max-w-[12rem]"
}`}
>
{user?.nip05 || user?.name || user?.displayName || shortenKey(pubkey)}