dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UPDATE: Have Stripe only load on pages it's needed;

Browse Source 
FIX: Pass proper prop through `ContentContext`;
This commit is contained in:
Chris-1010
2025-02-23 23:28:14 +00:00
parent 52a15d8691
commit 38a74e0710
4 changed files with 80 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/pages/CategoryPage.tsx
View File

@@ -49,7 +49,7 @@ const CategoryPage: React.FC = () => {
setStreamOffset((prev) => prev + data.length);
const processedStreams = data.map((stream: any) => ({
const processedStreams: StreamData[] = data.map((stream: any) => ({
type: "stream",
id: stream.user_id,
title: stream.title,
@@ -80,9 +80,10 @@ const CategoryPage: React.FC = () => {
const logOnScroll = async () => {
if (hasMoreData && listRowRef.current) {
const newCategories = await fetchCategoryStreams();
if (newCategories?.length > 0) {
if (newCategories && newCategories.length > 0) {
listRowRef.current.addMoreItems(newCategories);
}
else console.log("No more data to fetch");
}
};

37
frontend/src/pages/VideoPage.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, lazy, Suspense } from "react";
import { ToggleButton } from "../components/Input/Button";
import ChatPanel from "../components/Stream/ChatPanel";
import { useNavigate, useParams } from "react-router-dom";
@@ -8,10 +8,12 @@ import { useFollow } from "../hooks/useFollow";
import VideoPlayer from "../components/Stream/VideoPlayer";
import { SocketProvider } from "../context/SocketContext";
import AuthModal from "../components/Auth/AuthModal";
import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
import { useSidebar } from "../context/SidebarContext";
// Lazy load the CheckoutForm component
const CheckoutForm = lazy(() => import("../components/Checkout/CheckoutForm"));
interface VideoPageProps {
streamerId: number;
}
@@ -33,6 +35,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
useFollow();
const { showAuthModal, setShowAuthModal } = useAuthModal();
const [isStripeReady, setIsStripeReady] = useState(false);
const [showCheckout, setShowCheckout] = useState(false);
const showReturn = window.location.search.includes("session_id");
const navigate = useNavigate();
@@ -107,6 +110,15 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
};
}, []);
// Load Stripe in the background when component mounts
useEffect(() => {
const loadStripe = async () => {
await import("@stripe/stripe-js");
setIsStripeReady(true);
};
loadStripe();
}, []);
const toggleChat = () => {
setIsChatOpen((prev) => !prev);
};
@@ -235,26 +247,31 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
{/* Subscribe Button */}
<div className="flex flex-col items-center">
<button
className="bg-red-600 text-white font-bold px-[1.5em] py-[0.5em] rounded-md hover:bg-red-700 text-sm"
className={`bg-red-600 text-white font-bold px-[1.5em] py-[0.5em] rounded-md
${
isStripeReady ? "hover:bg-red-700" : "opacity-20 cursor-not-allowed"
} transition-all`}
onClick={() => {
if (!isLoggedIn) {
setShowAuthModal(true);
} else {
} else if (isStripeReady) {
setShowCheckout(true);
}
}}
>
Subscribe
{isStripeReady ? "Subscribe" : "Loading..."}
</button>
</div>
</div>
{showCheckout && (
<CheckoutForm
onClose={() => setShowCheckout(false)}
streamerID={streamerId}
/>
<Suspense fallback={<div>Loading checkout...</div>}>
<CheckoutForm
onClose={() => setShowCheckout(false)}
streamerID={streamerId}
/>
</Suspense>
)}
{showReturn && <Return />}
{/* {showReturn && <Return />} */}
{showAuthModal && (
<AuthModal onClose={() => setShowAuthModal(false)} />
)}