t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 🎵
Update weekly charts API and UI
Switch top artists/tracks requests to charts XRPC endpoints
(/xrpc/app.rocksky.charts.getTopArtists and getTopTracks).
Display 7-day date range using dayjs. Add listeners column
and format listeners/scrobbles with numeral. Tweak table head/
body styles and vertical alignment.
tsiry-sandratraina.com
+2
-2
apps/web/src/api/library.ts
+2
-2
apps/web/src/api/library.ts
···
226
endDate?: Date,
227
) => {
228
const response = await client.get<{ artists: Artist[] }>(
229
-
"/xrpc/app.rocksky.artist.getArtists",
230
{
231
params: {
232
limit,
···
246
endDate?: Date,
247
) => {
248
const response = await client.get<{ tracks: Track[] }>(
249
-
"/xrpc/app.rocksky.song.getSongs",
250
{
251
params: {
252
limit,
···
226
endDate?: Date,
227
) => {
228
const response = await client.get<{ artists: Artist[] }>(
229
+
"/xrpc/app.rocksky.charts.getTopArtists",
230
{
231
params: {
232
limit,
···
246
endDate?: Date,
247
) => {
248
const response = await client.get<{ tracks: Track[] }>(
249
+
"/xrpc/app.rocksky.charts.getTopTracks",
250
{
251
params: {
252
limit,
+41
-9
apps/web/src/pages/charts/weekly/Weekly.tsx
+41
-9
apps/web/src/pages/charts/weekly/Weekly.tsx
···
3
import { Link } from "@tanstack/react-router";
4
import Artist from "../../../components/Icons/Artist";
5
import { getLastDays } from "../../../lib/date";
6
7
type ArtistRow = {
8
id: string;
···
10
picture: string;
11
uri: string;
12
scrobbles: number;
13
index: number;
14
};
15
16
function Weekly() {
17
const { data: artists } = useTopArtistsQuery(0, 20, ...getLastDays(7));
18
return (
19
<>
20
<TableBuilder
21
data={artists?.map((x, index) => ({
22
-
id: x.id,
23
-
name: x.name,
24
-
picture: x.picture,
25
-
uri: x.uri,
26
-
scrobbles: x.scrobbles,
27
index,
28
}))}
29
divider="clean"
30
overrides={{
31
TableHeadRow: {
32
style: {
33
-
display: "none",
34
},
35
},
36
-
TableBodyCell: {
37
style: {
38
-
verticalAlign: "middle",
39
},
40
},
41
TableBodyRow: {
···
58
},
59
}}
60
>
61
-
<TableBuilderColumn header="Name">
62
{(row: ArtistRow) => (
63
<div className="flex flex-row items-center">
64
<div>
···
101
{row.name}
102
</Link>
103
</div>
104
</div>
105
)}
106
</TableBuilderColumn>
···
3
import { Link } from "@tanstack/react-router";
4
import Artist from "../../../components/Icons/Artist";
5
import { getLastDays } from "../../../lib/date";
6
+
import dayjs from "dayjs";
7
+
import numeral from "numeral";
8
9
type ArtistRow = {
10
id: string;
···
12
picture: string;
13
uri: string;
14
scrobbles: number;
15
+
uniqueListeners: number;
16
index: number;
17
};
18
19
function Weekly() {
20
const { data: artists } = useTopArtistsQuery(0, 20, ...getLastDays(7));
21
+
const end = dayjs();
22
+
const start = end.subtract(7, "day");
23
+
const range = `${start.format("DD MMM YYYY")} — ${end.format("DD MMM YYYY")}`;
24
+
25
return (
26
<>
27
+
<div className="mt-[15px] mb-[25px]">
28
+
<strong>{range}</strong>
29
+
</div>
30
<TableBuilder
31
data={artists?.map((x, index) => ({
32
+
...x,
33
index,
34
}))}
35
divider="clean"
36
overrides={{
37
+
TableBodyCell: {
38
+
style: {
39
+
verticalAlign: "middle",
40
+
},
41
+
},
42
+
TableHead: {
43
+
style: {
44
+
backgroundColor: "var(--color-background) !important",
45
+
},
46
+
},
47
TableHeadRow: {
48
style: {
49
+
backgroundColor: "var(--color-background) !important",
50
},
51
},
52
+
TableHeadCell: {
53
style: {
54
+
backgroundColor: "var(--color-background) !important",
55
+
color: "var(--color-text) !important",
56
+
opacity: "90%",
57
},
58
},
59
TableBodyRow: {
···
76
},
77
}}
78
>
79
+
<TableBuilderColumn header="Artist">
80
{(row: ArtistRow) => (
81
<div className="flex flex-row items-center">
82
<div>
···
119
{row.name}
120
</Link>
121
</div>
122
+
</div>
123
+
)}
124
+
</TableBuilderColumn>
125
+
<TableBuilderColumn header="Listeners">
126
+
{(row: ArtistRow) => (
127
+
<div className="flex flex-row items-center">
128
+
{numeral(row.uniqueListeners).format("0.0")}
129
+
</div>
130
+
)}
131
+
</TableBuilderColumn>
132
+
<TableBuilderColumn header="Scrobbles">
133
+
{(row: ArtistRow) => (
134
+
<div className="flex flex-row items-center">
135
+
{numeral(row.scrobbles).format("0,0")}
136
</div>
137
)}
138
</TableBuilderColumn>