t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 🎵
Show artist genre tags on profile
tsiry-sandratraina.com
+27
-1
apps/web/src/pages/profile/Profile.tsx
+27
-1
apps/web/src/pages/profile/Profile.tsx
···
7
7
import dayjs from "dayjs";
8
8
import { useAtom, useSetAtom } from "jotai";
9
9
import _ from "lodash";
10
-
import { useEffect, useState } from "react";
10
+
import { useEffect, useMemo, useState } from "react";
11
11
import { profilesAtom } from "../../atoms/profiles";
12
12
import { userAtom } from "../../atoms/user";
13
13
import Shout from "../../components/Shout/Shout";
···
31
31
import { activeTabAtom } from "../../atoms/tab";
32
32
import Circles from "./circles";
33
33
import TopTrack from "./toptrack";
34
+
import { useArtistsQuery } from "../../hooks/useLibrary";
35
+
import { getLastDays } from "../../lib/date";
34
36
35
37
const Group = styled.div`
36
38
display: flex;
···
59
61
const profile = useProfileByDidQuery(did!);
60
62
const setUser = useSetAtom(userAtom);
61
63
const { tab } = useSearch({ strict: false });
64
+
const { data: artists } = useArtistsQuery(did!, 0, 100, ...getLastDays(7));
62
65
const { mutate: followAccount } = useFollowAccountMutation();
63
66
const { mutate: unfollowAccount } = useUnfollowAccountMutation();
64
67
const currentDid = localStorage.getItem("did");
···
67
70
1,
68
71
currentDid ? [currentDid] : undefined,
69
72
);
73
+
const tags = useMemo(() => {
74
+
if (!artists) {
75
+
return [];
76
+
}
77
+
return artists
78
+
.filter((x) => x.tags)
79
+
.map((x) => x.tags)
80
+
.flat()
81
+
.slice(0, 20);
82
+
}, [artists]);
70
83
71
84
const onFollow = () => {
72
85
if (!localStorage.getItem("token")) {
···
281
294
</>
282
295
)}
283
296
</Group>
297
+
{tags.length > 0 && (
298
+
<div className="mt-[30px] flex flex-wrap">
299
+
{tags.map((genre) => (
300
+
<span
301
+
className="mr-[15px] mb-[5px] text-[var(--color-genre)] text-[13px] whitespace-nowrap"
302
+
style={{ fontFamily: "RockfordSansRegular" }}
303
+
>
304
+
# {genre}
305
+
</span>
306
+
))}
307
+
</div>
308
+
)}
309
+
284
310
<div className="mt-[20px] flex justify-end">
285
311
<TopTrack />
286
312
</div>