496 lines
15 KiB
TypeScript
496 lines
15 KiB
TypeScript
import {
|
|
useCallback,
|
|
useEffect,
|
|
useLayoutEffect,
|
|
useRef,
|
|
useState,
|
|
} from "react";
|
|
import { Link, useParams } from "react-router";
|
|
|
|
import { API_URL } from "../config/api.ts";
|
|
import { friendlyFetchError } from "../utils/apiError.ts";
|
|
import type {
|
|
PaginatedData,
|
|
Playlist,
|
|
PublicUser,
|
|
RawPlaylist,
|
|
} from "../model.ts";
|
|
import { deserializePlaylist, deserializePublicUser } from "../model.ts";
|
|
import { useAuth } from "../hooks/useAuth.ts";
|
|
import { useWS } from "../hooks/useWS.ts";
|
|
import { useInfiniteScroll } from "../hooks/useInfiniteScroll.ts";
|
|
import { useFeedCache } from "../hooks/useFeedCache.ts";
|
|
import { Avatar } from "../components/Avatar.tsx";
|
|
import { PlaylistCard } from "../components/PlaylistCard.tsx";
|
|
import { NewPlaylistForm } from "../components/NewPlaylistForm.tsx";
|
|
import { ConfirmModal } from "../components/ConfirmModal.tsx";
|
|
import { PageShell } from "../components/PageShell.tsx";
|
|
import { PageError } from "../components/PageError.tsx";
|
|
|
|
const PAGE_SIZE = 20;
|
|
const hydratePlaylist = (raw: Playlist): Playlist =>
|
|
deserializePlaylist(raw as unknown as RawPlaylist);
|
|
|
|
interface PlaylistFeed {
|
|
items: Playlist[];
|
|
hasMore: boolean;
|
|
page: number;
|
|
loadingMore: boolean;
|
|
}
|
|
|
|
type State =
|
|
| { status: "loading" }
|
|
| { status: "error"; error: string }
|
|
| {
|
|
status: "loaded";
|
|
profileUser: PublicUser;
|
|
created: PlaylistFeed;
|
|
followed: PlaylistFeed;
|
|
};
|
|
|
|
function initialFeed(items: Playlist[], hasMore: boolean): PlaylistFeed {
|
|
return { items, hasMore, page: 1, loadingMore: false };
|
|
}
|
|
|
|
export function UserPlaylists() {
|
|
const { username } = useParams();
|
|
const { user: me, authFetch, token } = useAuth();
|
|
const { lastPlaylistEvent, deletedPlaylistIds } = useWS();
|
|
|
|
const { cached: cachedCreated, saveState: saveCreated } = useFeedCache<
|
|
Playlist
|
|
>(
|
|
`feed:user-playlists:${username ?? ""}`,
|
|
hydratePlaylist,
|
|
);
|
|
const { cached: cachedFollowed, saveState: saveFollowed } = useFeedCache<
|
|
Playlist
|
|
>(
|
|
`feed:user-followed-playlists:${username ?? ""}`,
|
|
hydratePlaylist,
|
|
);
|
|
|
|
const [state, setState] = useState<State>({ status: "loading" });
|
|
const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!username) return;
|
|
setState({ status: "loading" });
|
|
|
|
const authHeaders: HeadersInit = token
|
|
? { Authorization: `Bearer ${token}` }
|
|
: {};
|
|
|
|
if (cachedCreated && cachedFollowed) {
|
|
fetch(`${API_URL}/api/users/${username}`)
|
|
.then((r) => r.json())
|
|
.then((body) => {
|
|
if (!body.success) throw new Error("User not found");
|
|
setState({
|
|
status: "loaded",
|
|
profileUser: deserializePublicUser(body.data),
|
|
created: {
|
|
items: cachedCreated.items,
|
|
hasMore: cachedCreated.hasMore,
|
|
page: cachedCreated.page,
|
|
loadingMore: false,
|
|
},
|
|
followed: {
|
|
items: cachedFollowed.items,
|
|
hasMore: cachedFollowed.hasMore,
|
|
page: cachedFollowed.page,
|
|
loadingMore: false,
|
|
},
|
|
});
|
|
})
|
|
.catch((err) =>
|
|
setState({
|
|
status: "error",
|
|
error: friendlyFetchError(err),
|
|
})
|
|
);
|
|
return;
|
|
}
|
|
|
|
Promise.all([
|
|
fetch(`${API_URL}/api/users/${username}`),
|
|
fetch(
|
|
`${API_URL}/api/users/${username}/playlists?page=1&limit=${PAGE_SIZE}`,
|
|
{ headers: authHeaders },
|
|
),
|
|
fetch(
|
|
`${API_URL}/api/users/${username}/followed-playlists?page=1&limit=${PAGE_SIZE}`,
|
|
),
|
|
])
|
|
.then(([userRes, createdRes, followedRes]) =>
|
|
Promise.all([userRes.json(), createdRes.json(), followedRes.json()])
|
|
)
|
|
.then(([userBody, createdBody, followedBody]) => {
|
|
if (!userBody.success) throw new Error("User not found");
|
|
const createdData = createdBody.success
|
|
? createdBody.data as PaginatedData<RawPlaylist>
|
|
: { items: [], hasMore: false };
|
|
const followedData = followedBody.success
|
|
? followedBody.data as PaginatedData<RawPlaylist>
|
|
: { items: [], hasMore: false };
|
|
setState({
|
|
status: "loaded",
|
|
profileUser: deserializePublicUser(userBody.data),
|
|
created: initialFeed(
|
|
createdData.items.map(deserializePlaylist),
|
|
createdData.hasMore,
|
|
),
|
|
followed: initialFeed(
|
|
followedData.items.map(deserializePlaylist),
|
|
followedData.hasMore,
|
|
),
|
|
});
|
|
})
|
|
.catch((err) =>
|
|
setState({
|
|
status: "error",
|
|
error: friendlyFetchError(err),
|
|
})
|
|
);
|
|
}, [username]);
|
|
|
|
const loadMoreCreated = useCallback(() => {
|
|
if (
|
|
state.status !== "loaded" || !state.created.hasMore ||
|
|
state.created.loadingMore || !username
|
|
) return;
|
|
const nextPage = state.created.page + 1;
|
|
setState((s) =>
|
|
s.status === "loaded"
|
|
? { ...s, created: { ...s.created, loadingMore: true } }
|
|
: s
|
|
);
|
|
fetch(
|
|
`${API_URL}/api/users/${username}/playlists?page=${nextPage}&limit=${PAGE_SIZE}`,
|
|
{ headers: token ? { Authorization: `Bearer ${token}` } : {} },
|
|
)
|
|
.then((r) => r.json())
|
|
.then((body) => {
|
|
const { items, hasMore } = body.data as PaginatedData<RawPlaylist>;
|
|
setState((s) =>
|
|
s.status === "loaded"
|
|
? {
|
|
...s,
|
|
created: {
|
|
items: [...s.created.items, ...items.map(deserializePlaylist)],
|
|
hasMore,
|
|
page: nextPage,
|
|
loadingMore: false,
|
|
},
|
|
}
|
|
: s
|
|
);
|
|
})
|
|
.catch(() =>
|
|
setState((s) =>
|
|
s.status === "loaded"
|
|
? { ...s, created: { ...s.created, loadingMore: false } }
|
|
: s
|
|
)
|
|
);
|
|
}, [state, username, token]);
|
|
|
|
const loadMoreFollowed = useCallback(() => {
|
|
if (
|
|
state.status !== "loaded" || !state.followed.hasMore ||
|
|
state.followed.loadingMore || !username
|
|
) return;
|
|
const nextPage = state.followed.page + 1;
|
|
setState((s) =>
|
|
s.status === "loaded"
|
|
? { ...s, followed: { ...s.followed, loadingMore: true } }
|
|
: s
|
|
);
|
|
fetch(
|
|
`${API_URL}/api/users/${username}/followed-playlists?page=${nextPage}&limit=${PAGE_SIZE}`,
|
|
)
|
|
.then((r) => r.json())
|
|
.then((body) => {
|
|
const { items, hasMore } = body.data as PaginatedData<RawPlaylist>;
|
|
setState((s) =>
|
|
s.status === "loaded"
|
|
? {
|
|
...s,
|
|
followed: {
|
|
items: [...s.followed.items, ...items.map(deserializePlaylist)],
|
|
hasMore,
|
|
page: nextPage,
|
|
loadingMore: false,
|
|
},
|
|
}
|
|
: s
|
|
);
|
|
})
|
|
.catch(() =>
|
|
setState((s) =>
|
|
s.status === "loaded"
|
|
? { ...s, followed: { ...s.followed, loadingMore: false } }
|
|
: s
|
|
)
|
|
);
|
|
}, [state, username]);
|
|
|
|
const createdSentinelRef = useInfiniteScroll(
|
|
loadMoreCreated,
|
|
state.status === "loaded" && state.created.hasMore &&
|
|
!state.created.loadingMore,
|
|
);
|
|
const followedSentinelRef = useInfiniteScroll(
|
|
loadMoreFollowed,
|
|
state.status === "loaded" && state.followed.hasMore &&
|
|
!state.followed.loadingMore,
|
|
);
|
|
|
|
// Real-time WS playlist updates
|
|
useEffect(() => {
|
|
if (!lastPlaylistEvent || state.status !== "loaded") return;
|
|
const ev = lastPlaylistEvent;
|
|
const isOwnProfile = me?.username === state.profileUser.username;
|
|
|
|
if (ev.type === "created" && ev.playlist?.userId === state.profileUser.id) {
|
|
if (ev.playlist.isPublic || isOwnProfile) {
|
|
setState((s) => {
|
|
if (s.status !== "loaded") return s;
|
|
if (s.created.items.some((p) => p.id === ev.playlist!.id)) return s;
|
|
return {
|
|
...s,
|
|
created: {
|
|
...s.created,
|
|
items: [ev.playlist!, ...s.created.items],
|
|
},
|
|
};
|
|
});
|
|
}
|
|
} else if (ev.type === "updated") {
|
|
setState((s) => {
|
|
if (s.status !== "loaded") return s;
|
|
const updatedCreated = ev.playlist?.userId === state.profileUser.id
|
|
? s.created.items
|
|
.map((p) => p.id === ev.playlist!.id ? ev.playlist! : p)
|
|
.filter((p) => p.isPublic || isOwnProfile)
|
|
: s.created.items;
|
|
const updatedFollowed = s.followed.items.map((p) =>
|
|
p.id === ev.playlist?.id ? ev.playlist! : p
|
|
).filter((p) => p.isPublic);
|
|
return {
|
|
...s,
|
|
created: { ...s.created, items: updatedCreated },
|
|
followed: { ...s.followed, items: updatedFollowed },
|
|
};
|
|
});
|
|
} else if (ev.type === "deleted") {
|
|
setState((s) =>
|
|
s.status !== "loaded" ? s : {
|
|
...s,
|
|
created: {
|
|
...s.created,
|
|
items: s.created.items.filter((p) => p.id !== ev.playlistId),
|
|
},
|
|
followed: {
|
|
...s.followed,
|
|
items: s.followed.items.filter((p) => p.id !== ev.playlistId),
|
|
},
|
|
}
|
|
);
|
|
}
|
|
}, [lastPlaylistEvent, me]);
|
|
|
|
useEffect(() => {
|
|
if (!deletedPlaylistIds.size || state.status !== "loaded") return;
|
|
setState((s) =>
|
|
s.status !== "loaded" ? s : {
|
|
...s,
|
|
created: {
|
|
...s.created,
|
|
items: s.created.items.filter((p) => !deletedPlaylistIds.has(p.id)),
|
|
},
|
|
followed: {
|
|
...s.followed,
|
|
items: s.followed.items.filter((p) => !deletedPlaylistIds.has(p.id)),
|
|
},
|
|
}
|
|
);
|
|
}, [deletedPlaylistIds]);
|
|
|
|
// Scroll save
|
|
useEffect(() => {
|
|
if (state.status !== "loaded") return;
|
|
let timer: ReturnType<typeof setTimeout>;
|
|
const onScroll = () => {
|
|
clearTimeout(timer);
|
|
timer = setTimeout(() => {
|
|
if (state.status !== "loaded") return;
|
|
const y = globalThis.scrollY;
|
|
saveCreated(
|
|
state.created.items,
|
|
state.created.page,
|
|
state.created.hasMore,
|
|
y,
|
|
);
|
|
saveFollowed(
|
|
state.followed.items,
|
|
state.followed.page,
|
|
state.followed.hasMore,
|
|
y,
|
|
);
|
|
}, 100);
|
|
};
|
|
globalThis.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => {
|
|
globalThis.removeEventListener("scroll", onScroll);
|
|
clearTimeout(timer);
|
|
};
|
|
}, [state, saveCreated, saveFollowed]);
|
|
|
|
const scrollRestored = useRef(false);
|
|
useLayoutEffect(() => {
|
|
if (cachedCreated?.scrollY == null || scrollRestored.current) return;
|
|
if (state.status === "loaded") {
|
|
globalThis.scrollTo(0, cachedCreated.scrollY);
|
|
scrollRestored.current = true;
|
|
}
|
|
}, [state.status, cachedCreated]);
|
|
|
|
const handleDelete = async (playlistId: string) => {
|
|
await authFetch(`${API_URL}/api/playlists/${playlistId}`, {
|
|
method: "DELETE",
|
|
});
|
|
setState((s) =>
|
|
s.status === "loaded"
|
|
? {
|
|
...s,
|
|
created: {
|
|
...s.created,
|
|
items: s.created.items.filter((p) => p.id !== playlistId),
|
|
},
|
|
}
|
|
: s
|
|
);
|
|
};
|
|
|
|
if (state.status === "loading") {
|
|
return (
|
|
<PageShell>
|
|
<p className="page-loading">Loading…</p>
|
|
</PageShell>
|
|
);
|
|
}
|
|
|
|
if (state.status === "error") {
|
|
return (
|
|
<PageError
|
|
message={state.error}
|
|
actions={
|
|
<Link to={`/users/${username}`} className="btn-border">
|
|
← Back to profile
|
|
</Link>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const { profileUser, created, followed } = state;
|
|
const isOwnProfile = me?.username === profileUser.username;
|
|
|
|
return (
|
|
<PageShell>
|
|
<div className="profile-subpage-header">
|
|
<Link to={`/users/${username}`} className="profile-subpage-back">
|
|
← {profileUser.username}
|
|
</Link>
|
|
<div className="profile-subpage-title-row">
|
|
<Avatar
|
|
userId={profileUser.id}
|
|
username={profileUser.username}
|
|
hasAvatar={!!profileUser.avatarMime}
|
|
size={36}
|
|
/>
|
|
<h1 className="profile-subpage-title">Playlists</h1>
|
|
{isOwnProfile && (
|
|
<NewPlaylistForm
|
|
toggleClassName="btn-primary"
|
|
onCreated={(p) =>
|
|
setState((s) => {
|
|
if (s.status !== "loaded") return s;
|
|
if (s.created.items.some((pl) => pl.id === p.id)) return s;
|
|
return {
|
|
...s,
|
|
created: { ...s.created, items: [p, ...s.created.items] },
|
|
};
|
|
})}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<section className="profile-section">
|
|
<div className="profile-section-header">
|
|
<h2 className="profile-section-title">
|
|
Created ({created.items.length}
|
|
{created.hasMore ? "+" : ""})
|
|
</h2>
|
|
</div>
|
|
{created.items.length === 0
|
|
? <p className="empty-state">No playlists yet.</p>
|
|
: (
|
|
<ul className="dump-feed">
|
|
{created.items.map((p) => (
|
|
<PlaylistCard
|
|
key={p.id}
|
|
playlist={p}
|
|
isOwner={isOwnProfile}
|
|
onDelete={isOwnProfile
|
|
? () => setConfirmDeleteId(p.id)
|
|
: undefined}
|
|
/>
|
|
))}
|
|
</ul>
|
|
)}
|
|
<div ref={createdSentinelRef} />
|
|
{created.loadingMore && (
|
|
<p className="feed-loading-more">Loading more…</p>
|
|
)}
|
|
</section>
|
|
|
|
<section className="profile-section">
|
|
<div className="profile-section-header">
|
|
<h2 className="profile-section-title">
|
|
Followed ({followed.items.length}
|
|
{followed.hasMore ? "+" : ""})
|
|
</h2>
|
|
</div>
|
|
{followed.items.length === 0
|
|
? <p className="empty-state">No followed playlists yet.</p>
|
|
: (
|
|
<ul className="dump-feed">
|
|
{followed.items.map((p) => (
|
|
<PlaylistCard key={p.id} playlist={p} />
|
|
))}
|
|
</ul>
|
|
)}
|
|
<div ref={followedSentinelRef} />
|
|
{followed.loadingMore && (
|
|
<p className="feed-loading-more">Loading more…</p>
|
|
)}
|
|
</section>
|
|
|
|
{confirmDeleteId && (
|
|
<ConfirmModal
|
|
message="Delete this playlist? This cannot be undone."
|
|
confirmLabel="Delete playlist"
|
|
onConfirm={() => {
|
|
handleDelete(confirmDeleteId);
|
|
setConfirmDeleteId(null);
|
|
}}
|
|
onCancel={() => setConfirmDeleteId(null)}
|
|
/>
|
|
)}
|
|
</PageShell>
|
|
);
|
|
}
|