feat(private-room): connect moments feed
Docker Image / Build and Push Docker Image (push) Successful in 9m29s
Docker Image / Build and Push Docker Image (push) Successful in 9m29s
This commit is contained in:
@@ -0,0 +1,440 @@
|
||||
"use client";
|
||||
|
||||
import type { CSSProperties } from "react";
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import Image from "next/image";
|
||||
import {
|
||||
Camera,
|
||||
ImageIcon,
|
||||
LockKeyhole,
|
||||
MessageCircle,
|
||||
RefreshCw,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
|
||||
import type { PrivateRoomMoment } from "@/data/dto/private-room";
|
||||
import { MobileShell } from "@/app/_components/core";
|
||||
import { useGuestLoginBootstrap } from "@/hooks/use-guest-login-bootstrap";
|
||||
import { ROUTES } from "@/router/routes";
|
||||
import { useAppNavigator } from "@/router/use-app-navigator";
|
||||
import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
|
||||
import {
|
||||
usePrivateRoomDispatch,
|
||||
usePrivateRoomState,
|
||||
} from "@/stores/private-room";
|
||||
import { useUserDispatch } from "@/stores/user/user-context";
|
||||
|
||||
import styles from "./private-room-screen.module.css";
|
||||
|
||||
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",
|
||||
bio: "Soft moments, private photos, and a little sweetness just for you.",
|
||||
} as const;
|
||||
|
||||
export function PrivateRoomScreen() {
|
||||
const navigator = useAppNavigator();
|
||||
const authState = useAuthState();
|
||||
const authDispatch = useAuthDispatch();
|
||||
const userDispatch = useUserDispatch();
|
||||
const state = usePrivateRoomState();
|
||||
const dispatch = usePrivateRoomDispatch();
|
||||
const previousLoginStatusRef = useRef(authState.loginStatus);
|
||||
const lastUnlockSuccessNonceRef = useRef(0);
|
||||
|
||||
useGuestLoginBootstrap({
|
||||
dispatch: authDispatch,
|
||||
hasInitialized: authState.hasInitialized,
|
||||
isLoading: authState.isLoading,
|
||||
loginStatus: authState.loginStatus,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!authState.hasInitialized || authState.isLoading) return;
|
||||
if (authState.loginStatus === "notLoggedIn") return;
|
||||
|
||||
const previousLoginStatus = previousLoginStatusRef.current;
|
||||
previousLoginStatusRef.current = authState.loginStatus;
|
||||
|
||||
if (state.status === "idle") {
|
||||
dispatch({ type: "PrivateRoomInit" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
previousLoginStatus !== authState.loginStatus &&
|
||||
state.status !== "loading"
|
||||
) {
|
||||
dispatch({ type: "PrivateRoomRefresh" });
|
||||
}
|
||||
}, [
|
||||
authState.hasInitialized,
|
||||
authState.isLoading,
|
||||
authState.loginStatus,
|
||||
dispatch,
|
||||
state.status,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const request = state.unlockPaywallRequest;
|
||||
if (!request) return;
|
||||
|
||||
if (
|
||||
authState.loginStatus === "guest" ||
|
||||
authState.loginStatus === "notLoggedIn"
|
||||
) {
|
||||
navigator.openAuth(ROUTES.privateRoom);
|
||||
} else {
|
||||
navigator.openSubscription({ type: "topup" });
|
||||
}
|
||||
dispatch({ type: "PrivateRoomUnlockPaywallConsumed" });
|
||||
}, [
|
||||
authState.loginStatus,
|
||||
dispatch,
|
||||
navigator,
|
||||
state.unlockPaywallRequest,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (state.unlockSuccessNonce <= lastUnlockSuccessNonceRef.current) return;
|
||||
lastUnlockSuccessNonceRef.current = state.unlockSuccessNonce;
|
||||
userDispatch({ type: "UserFetch" });
|
||||
}, [state.unlockSuccessNonce, userDispatch]);
|
||||
|
||||
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(
|
||||
() =>
|
||||
state.items.find(
|
||||
(item) => item.momentId === state.pendingConfirmMomentId,
|
||||
) ?? null,
|
||||
[state.items, state.pendingConfirmMomentId],
|
||||
);
|
||||
|
||||
const handleTopUpClick = () => {
|
||||
if (
|
||||
authState.loginStatus === "guest" ||
|
||||
authState.loginStatus === "notLoggedIn"
|
||||
) {
|
||||
navigator.openAuth(ROUTES.privateRoom);
|
||||
return;
|
||||
}
|
||||
navigator.openSubscription({ type: "topup" });
|
||||
};
|
||||
|
||||
return (
|
||||
<MobileShell background="#fff7ed">
|
||||
<main className={styles.shell}>
|
||||
<div className={styles.backgroundGlowOne} />
|
||||
<div className={styles.backgroundGlowTwo} />
|
||||
|
||||
<section className={styles.hero} aria-labelledby="private-room-title">
|
||||
<div className={styles.heroTopline}>
|
||||
<span className={styles.liveDot} aria-hidden="true" />
|
||||
<span>Private room is open</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.identity}>
|
||||
<div className={styles.avatarFrame}>
|
||||
<Image
|
||||
src={avatarUrl}
|
||||
alt={displayName}
|
||||
width={72}
|
||||
height={72}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.identityText}>
|
||||
<h1 id="private-room-title" className={styles.title}>
|
||||
{displayName}
|
||||
</h1>
|
||||
<p className={styles.handle}>{title}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className={styles.bio}>{subtitle || FALLBACK_PROFILE.bio}</p>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={styles.primaryCta}
|
||||
onClick={handleTopUpClick}
|
||||
>
|
||||
<Sparkles size={16} aria-hidden="true" />
|
||||
<span>Top up credits</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section className={styles.postsSection} aria-labelledby="posts-title">
|
||||
<div className={styles.sectionHeader}>
|
||||
<div>
|
||||
<p className={styles.kicker}>Posts</p>
|
||||
<h2 id="posts-title" className={styles.sectionTitle}>
|
||||
Private moments
|
||||
</h2>
|
||||
</div>
|
||||
<span className={styles.postCount}>{state.items.length}</span>
|
||||
</div>
|
||||
|
||||
{state.errorMessage ? (
|
||||
<StatusCard
|
||||
message={state.errorMessage}
|
||||
actionLabel="Retry"
|
||||
onAction={() => dispatch({ type: "PrivateRoomRefresh" })}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{state.isLoading && state.items.length === 0 ? (
|
||||
<StatusCard message="Loading private moments..." />
|
||||
) : null}
|
||||
|
||||
{!state.isLoading && state.items.length === 0 && !state.errorMessage ? (
|
||||
<StatusCard
|
||||
message="No private moments yet."
|
||||
actionLabel="Refresh"
|
||||
onAction={() => dispatch({ type: "PrivateRoomRefresh" })}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<div className={styles.timeline}>
|
||||
{state.items.map((moment, index) => (
|
||||
<PrivateRoomPostCard
|
||||
key={moment.momentId}
|
||||
moment={moment}
|
||||
displayName={displayName}
|
||||
avatarUrl={avatarUrl}
|
||||
index={index}
|
||||
isUnlocking={state.unlockingMomentId === moment.momentId}
|
||||
onUnlock={() =>
|
||||
dispatch({
|
||||
type: "PrivateRoomUnlockRequested",
|
||||
momentId: moment.momentId,
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</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>
|
||||
|
||||
<nav className={styles.bottomNav} aria-label="Private room navigation">
|
||||
<button
|
||||
type="button"
|
||||
className={styles.navButton}
|
||||
onClick={() => navigator.openChat({ replace: false })}
|
||||
>
|
||||
<MessageCircle size={20} aria-hidden="true" />
|
||||
<span>Chat</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.navButton} ${styles.navButtonActive}`}
|
||||
aria-current="page"
|
||||
>
|
||||
<Camera size={20} aria-hidden="true" />
|
||||
<span>Elio Private room</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{pendingMoment ? (
|
||||
<UnlockConfirmDialog
|
||||
moment={pendingMoment}
|
||||
isUnlocking={state.isUnlocking}
|
||||
errorMessage={state.unlockErrorMessage}
|
||||
onCancel={() => dispatch({ type: "PrivateRoomUnlockCancelled" })}
|
||||
onConfirm={() => dispatch({ type: "PrivateRoomUnlockConfirmed" })}
|
||||
/>
|
||||
) : state.unlockErrorMessage ? (
|
||||
<div className={styles.toast} role="status">
|
||||
{state.unlockErrorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
</main>
|
||||
</MobileShell>
|
||||
);
|
||||
}
|
||||
|
||||
function PrivateRoomPostCard({
|
||||
moment,
|
||||
displayName,
|
||||
avatarUrl,
|
||||
index,
|
||||
isUnlocking,
|
||||
onUnlock,
|
||||
}: {
|
||||
moment: PrivateRoomMoment;
|
||||
displayName: string;
|
||||
avatarUrl: string;
|
||||
index: number;
|
||||
isUnlocking: boolean;
|
||||
onUnlock: () => void;
|
||||
}) {
|
||||
const isLocked = moment.locked || moment.lockDetail.locked;
|
||||
const imageUrls = moment.images
|
||||
.filter((image) => !image.locked && image.url)
|
||||
.map((image) => image.url as string);
|
||||
const photoCount = moment.mediaCount || moment.images.length || 1;
|
||||
|
||||
return (
|
||||
<article
|
||||
className={styles.postCard}
|
||||
style={{ "--reveal-index": index } as CSSProperties}
|
||||
>
|
||||
<header className={styles.postHeader}>
|
||||
<div className={styles.postAuthor}>
|
||||
<Image
|
||||
src={avatarUrl}
|
||||
alt=""
|
||||
width={38}
|
||||
height={38}
|
||||
className={styles.postAvatar}
|
||||
/>
|
||||
<div>
|
||||
<p className={styles.authorName}>{moment.author.name || displayName}</p>
|
||||
<p className={styles.authorSubline}>
|
||||
{moment.title || "Private room drop"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<time className={styles.postTime}>
|
||||
{moment.timeText || formatMomentTime(moment.publishedAt)}
|
||||
</time>
|
||||
</header>
|
||||
|
||||
{moment.text || moment.content ? (
|
||||
<p className={styles.postText}>{moment.text || moment.content}</p>
|
||||
) : null}
|
||||
|
||||
{isLocked ? (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.lockedPreview}
|
||||
disabled={isUnlocking}
|
||||
onClick={onUnlock}
|
||||
aria-label={`Unlock ${photoCount} private room photos from ${displayName}`}
|
||||
>
|
||||
<div className={styles.previewIcon}>
|
||||
<LockKeyhole size={18} aria-hidden="true" />
|
||||
</div>
|
||||
<div className={styles.previewText}>
|
||||
<strong>{moment.unlockCost} credits</strong>
|
||||
<span>{moment.textPreview || "Unlock to view"}</span>
|
||||
<small>
|
||||
<ImageIcon size={13} aria-hidden="true" />
|
||||
{photoCount} {photoCount === 1 ? "photo" : "photos"}
|
||||
</small>
|
||||
</div>
|
||||
</button>
|
||||
) : (
|
||||
<div className={styles.imageGrid}>
|
||||
{imageUrls.map((url, imageIndex) => (
|
||||
<Image
|
||||
key={`${moment.momentId}-${imageIndex}`}
|
||||
src={url}
|
||||
alt=""
|
||||
width={420}
|
||||
height={420}
|
||||
className={styles.unlockedImage}
|
||||
sizes="(max-width: 540px) 86vw, 460px"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function UnlockConfirmDialog({
|
||||
moment,
|
||||
isUnlocking,
|
||||
errorMessage,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
}: {
|
||||
moment: PrivateRoomMoment;
|
||||
isUnlocking: boolean;
|
||||
errorMessage: string | null;
|
||||
onCancel: () => void;
|
||||
onConfirm: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className={styles.dialogOverlay} role="alertdialog" aria-modal="true">
|
||||
<div className={styles.dialog}>
|
||||
<h2 className={styles.dialogTitle}>Unlock private moment?</h2>
|
||||
<p className={styles.dialogCopy}>
|
||||
This will use {moment.unlockCost} credits.
|
||||
</p>
|
||||
{errorMessage ? (
|
||||
<p className={styles.dialogError}>{errorMessage}</p>
|
||||
) : null}
|
||||
<div className={styles.dialogActions}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.dialogSecondary}
|
||||
disabled={isUnlocking}
|
||||
onClick={onCancel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.dialogPrimary}
|
||||
disabled={isUnlocking}
|
||||
onClick={onConfirm}
|
||||
>
|
||||
{isUnlocking ? "Unlocking..." : "Unlock"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusCard({
|
||||
message,
|
||||
actionLabel,
|
||||
onAction,
|
||||
}: {
|
||||
message: string;
|
||||
actionLabel?: string;
|
||||
onAction?: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className={styles.statusCard}>
|
||||
<p>{message}</p>
|
||||
{actionLabel && onAction ? (
|
||||
<button type="button" onClick={onAction}>
|
||||
{actionLabel}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatMomentTime(value: string | null): string {
|
||||
if (!value) return "";
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return "";
|
||||
return date.toLocaleDateString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user