feat(private-room): migrate to album APIs
This commit is contained in:
@@ -1,13 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import Image from "next/image";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
|
||||
import { CharacterAvatar } from "@/app/_components";
|
||||
import { AppBottomNav, MobileShell } from "@/app/_components/core";
|
||||
import { ROUTES } from "@/router/routes";
|
||||
import { useAppNavigator } from "@/router/use-app-navigator";
|
||||
import { isPrivateAlbumLocked } from "@/lib/private-room/private_album";
|
||||
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
|
||||
import {
|
||||
usePrivateRoomDispatch,
|
||||
@@ -15,7 +16,8 @@ import {
|
||||
} from "@/stores/private-room";
|
||||
|
||||
import {
|
||||
PrivateRoomPostCard,
|
||||
PrivateAlbumCard,
|
||||
PrivateAlbumGallery,
|
||||
StatusCard,
|
||||
UnlockConfirmDialog,
|
||||
} from "./components";
|
||||
@@ -26,21 +28,32 @@ import {
|
||||
usePrivateRoomUnlockPaywallNavigation,
|
||||
usePrivateRoomUnlockSuccessRefresh,
|
||||
} from "./use-private-room-flow";
|
||||
import {
|
||||
buildPrivateAlbumGalleryUrl,
|
||||
buildPrivateRoomWithoutGalleryUrl,
|
||||
getPrivateAlbumGalleryState,
|
||||
} from "./private-album-gallery-url";
|
||||
|
||||
const FALLBACK_PROFILE = {
|
||||
name: "Elio Silvestri",
|
||||
handle: "@elio.private",
|
||||
avatar: "/images/chat/pic-chat-elio.png",
|
||||
title: "Elio Private room",
|
||||
subtitle: "Join me, unlock my private room",
|
||||
} as const;
|
||||
|
||||
export function PrivateRoomScreen() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const navigator = useAppNavigator();
|
||||
const authState = useAuthState();
|
||||
const authDispatch = useAuthDispatch();
|
||||
const state = usePrivateRoomState();
|
||||
const dispatch = usePrivateRoomDispatch();
|
||||
const openedGalleryInPageRef = useRef(false);
|
||||
const galleryState = useMemo(
|
||||
() => getPrivateAlbumGalleryState(searchParams),
|
||||
[searchParams],
|
||||
);
|
||||
|
||||
usePrivateRoomBootstrapFlow({
|
||||
authDispatch,
|
||||
@@ -57,19 +70,39 @@ export function PrivateRoomScreen() {
|
||||
});
|
||||
usePrivateRoomUnlockSuccessRefresh(state.unlockSuccessNonce);
|
||||
|
||||
const profile = state.profile;
|
||||
const displayName =
|
||||
profile?.displayName || profile?.authorName || FALLBACK_PROFILE.name;
|
||||
const avatarUrl = profile?.avatarUrl || FALLBACK_PROFILE.avatar;
|
||||
const title = profile?.title || FALLBACK_PROFILE.title;
|
||||
const subtitle = profile?.subtitle || FALLBACK_PROFILE.subtitle;
|
||||
const pendingMoment = useMemo(
|
||||
const displayName = FALLBACK_PROFILE.name;
|
||||
const avatarUrl = FALLBACK_PROFILE.avatar;
|
||||
const title = FALLBACK_PROFILE.title;
|
||||
const subtitle = FALLBACK_PROFILE.subtitle;
|
||||
const pendingAlbum = useMemo(
|
||||
() =>
|
||||
state.items.find(
|
||||
(item) => item.momentId === state.pendingConfirmMomentId,
|
||||
(album) => album.albumId === state.pendingConfirmAlbumId,
|
||||
) ?? null,
|
||||
[state.items, state.pendingConfirmMomentId],
|
||||
[state.items, state.pendingConfirmAlbumId],
|
||||
);
|
||||
const galleryAlbum = useMemo(
|
||||
() =>
|
||||
galleryState
|
||||
? state.items.find((album) => album.albumId === galleryState.albumId) ??
|
||||
null
|
||||
: null,
|
||||
[galleryState, state.items],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!galleryState || state.isLoading) return;
|
||||
const image = galleryAlbum?.images[galleryState.imageIndex];
|
||||
if (
|
||||
!galleryAlbum ||
|
||||
isPrivateAlbumLocked(galleryAlbum) ||
|
||||
!image?.url
|
||||
) {
|
||||
router.replace(buildPrivateRoomWithoutGalleryUrl(searchParams), {
|
||||
scroll: false,
|
||||
});
|
||||
}
|
||||
}, [galleryAlbum, galleryState, router, searchParams, state.isLoading]);
|
||||
|
||||
const handleTopUpClick = () => {
|
||||
if (isPrivateRoomAuthRequired(authState.loginStatus)) {
|
||||
@@ -79,6 +112,30 @@ export function PrivateRoomScreen() {
|
||||
navigator.openSubscription({ type: "topup" });
|
||||
};
|
||||
|
||||
const handleOpenGallery = (albumId: string) => {
|
||||
openedGalleryInPageRef.current = true;
|
||||
router.push(buildPrivateAlbumGalleryUrl(albumId, 0), { scroll: false });
|
||||
};
|
||||
|
||||
const handleCloseGallery = () => {
|
||||
if (openedGalleryInPageRef.current) {
|
||||
openedGalleryInPageRef.current = false;
|
||||
router.back();
|
||||
return;
|
||||
}
|
||||
router.replace(buildPrivateRoomWithoutGalleryUrl(searchParams), {
|
||||
scroll: false,
|
||||
});
|
||||
};
|
||||
|
||||
const handleGalleryIndexChange = (imageIndex: number) => {
|
||||
if (!galleryAlbum) return;
|
||||
router.replace(
|
||||
buildPrivateAlbumGalleryUrl(galleryAlbum.albumId, imageIndex),
|
||||
{ scroll: false },
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<MobileShell background="#f3f4f2">
|
||||
<main className={styles.shell}>
|
||||
@@ -124,9 +181,9 @@ export function PrivateRoomScreen() {
|
||||
<section className={styles.postsSection} aria-labelledby="posts-title">
|
||||
<div className={styles.sectionHeader}>
|
||||
<div>
|
||||
<p className={styles.kicker}>Posts</p>
|
||||
<p className={styles.kicker}>Albums</p>
|
||||
<h2 id="posts-title" className={styles.sectionTitle}>
|
||||
Private moments
|
||||
Private albums
|
||||
</h2>
|
||||
</div>
|
||||
<span className={styles.postCount}>{state.items.length}</span>
|
||||
@@ -141,47 +198,36 @@ export function PrivateRoomScreen() {
|
||||
) : null}
|
||||
|
||||
{state.isLoading && state.items.length === 0 ? (
|
||||
<StatusCard message="Loading private moments..." />
|
||||
<StatusCard message="Loading private albums..." />
|
||||
) : null}
|
||||
|
||||
{!state.isLoading && state.items.length === 0 && !state.errorMessage ? (
|
||||
<StatusCard
|
||||
message="No private moments yet."
|
||||
message="No private albums yet."
|
||||
actionLabel="Refresh"
|
||||
onAction={() => dispatch({ type: "PrivateRoomRefresh" })}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<div className={styles.timeline}>
|
||||
{state.items.map((moment, index) => (
|
||||
<PrivateRoomPostCard
|
||||
key={moment.momentId}
|
||||
moment={moment}
|
||||
{state.items.map((album, index) => (
|
||||
<PrivateAlbumCard
|
||||
key={album.albumId}
|
||||
album={album}
|
||||
displayName={displayName}
|
||||
avatarUrl={avatarUrl}
|
||||
index={index}
|
||||
isUnlocking={state.unlockingMomentId === moment.momentId}
|
||||
isUnlocking={state.unlockingAlbumId === album.albumId}
|
||||
onOpenGallery={() => handleOpenGallery(album.albumId)}
|
||||
onUnlock={() =>
|
||||
dispatch({
|
||||
type: "PrivateRoomUnlockRequested",
|
||||
momentId: moment.momentId,
|
||||
albumId: album.albumId,
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{state.hasMore ? (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.loadMoreButton}
|
||||
disabled={state.isLoadingMore}
|
||||
onClick={() => dispatch({ type: "PrivateRoomLoadMore" })}
|
||||
>
|
||||
<RefreshCw size={15} aria-hidden="true" />
|
||||
{state.isLoadingMore ? "Loading..." : "Load more"}
|
||||
</button>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<AppBottomNav
|
||||
@@ -190,9 +236,9 @@ export function PrivateRoomScreen() {
|
||||
onPrivateRoomClick={() => undefined}
|
||||
/>
|
||||
|
||||
{pendingMoment ? (
|
||||
{pendingAlbum ? (
|
||||
<UnlockConfirmDialog
|
||||
moment={pendingMoment}
|
||||
album={pendingAlbum}
|
||||
isUnlocking={state.isUnlocking}
|
||||
errorMessage={state.unlockErrorMessage}
|
||||
onCancel={() => dispatch({ type: "PrivateRoomUnlockCancelled" })}
|
||||
@@ -203,6 +249,18 @@ export function PrivateRoomScreen() {
|
||||
{state.unlockErrorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{galleryAlbum &&
|
||||
galleryState &&
|
||||
!isPrivateAlbumLocked(galleryAlbum) &&
|
||||
galleryAlbum.images[galleryState.imageIndex]?.url ? (
|
||||
<PrivateAlbumGallery
|
||||
album={galleryAlbum}
|
||||
imageIndex={galleryState.imageIndex}
|
||||
onClose={handleCloseGallery}
|
||||
onImageIndexChange={handleGalleryIndexChange}
|
||||
/>
|
||||
) : null}
|
||||
</main>
|
||||
</MobileShell>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user