From 14e45d97d2ecba15ae15712c7fbe9c3b167d3bb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Sat, 15 Jun 2024 13:16:12 -0500 Subject: [PATCH] feat: patreon plug --- src/app/auth/[provider]/page.tsx | 81 +++++++++++++-------------- src/app/components/PatreonPlug.tsx | 44 +++++++++++++++ src/app/page.tsx | 4 +- src/components/Ad.tsx | 3 +- src/components/Footer/index.tsx | 8 ++- src/components/Navbar/index.tsx | 10 ++-- src/core/blitzkit/patreonLoginUrl.ts | 10 ++++ src/hooks/useAdExempt.ts | 11 +++- src/icons/Blitzkit.tsx | 4 +- src/icons/BlitzkitButtonWatermark.tsx | 6 +- src/icons/Wargaming.tsx | 6 +- 11 files changed, 126 insertions(+), 61 deletions(-) create mode 100644 src/app/components/PatreonPlug.tsx create mode 100644 src/core/blitzkit/patreonLoginUrl.ts diff --git a/src/app/auth/[provider]/page.tsx b/src/app/auth/[provider]/page.tsx index 4c63ad7dc..46cfbf8ca 100644 --- a/src/app/auth/[provider]/page.tsx +++ b/src/app/auth/[provider]/page.tsx @@ -25,53 +25,52 @@ export default function Page({ const router = useRouter(); useEffect(() => { - (async () => { - switch (params.provider) { - case 'wargaming': { - if ( - !searchParams.expires_at || - !searchParams.access_token || - !searchParams.account_id - ) { - break; - } - - mutateApp((draft) => { - draft.logins.wargaming = { - id: Number(searchParams.account_id), - token: searchParams.access_token, - expires: Number(searchParams.expires_at) * 1000, - }; - }); - + switch (params.provider) { + case 'wargaming': { + if ( + !searchParams.expires_at || + !searchParams.access_token || + !searchParams.account_id + ) { break; } - case 'patreon': { - if (!searchParams.code) break; + mutateApp((draft) => { + draft.logins.wargaming = { + id: Number(searchParams.account_id), + token: searchParams.access_token, + expires: Number(searchParams.expires_at) * 1000, + }; + }); - const data = (await fetch( - `/api/patreon/auth/${searchParams.code}`, - ).then((response) => response.json())) as PatreonAuthResponse; - - mutateApp((draft) => { - draft.logins.patreon = { - token: data.access_token, - refreshToken: data.refresh_token, - expires: Date.now() + data.expires_in * 1000, - }; - }); - - break; - } - - default: { - console.error(`Unknown provider: ${params.provider}`); - } + break; } - router.push(searchParams.return ?? '/'); - })(); + case 'patreon': { + if (!searchParams.code) break; + + // cannot await here because async breaks router.push :( + fetch(`/api/patreon/auth/${searchParams.code}`) + .then((response) => response.json() as Promise) + .then((data) => { + mutateApp((draft) => { + draft.logins.patreon = { + token: data.access_token, + refreshToken: data.refresh_token, + expires: Date.now() + data.expires_in * 1000, + }; + }); + }); + + break; + } + + default: { + console.error(`Unknown provider: ${params.provider}`); + } + } + + router.push(searchParams.return ?? '/'); }); return ( diff --git a/src/app/components/PatreonPlug.tsx b/src/app/components/PatreonPlug.tsx new file mode 100644 index 000000000..527eba5b1 --- /dev/null +++ b/src/app/components/PatreonPlug.tsx @@ -0,0 +1,44 @@ +'use client'; + +import { CheckIcon } from '@radix-ui/react-icons'; +import { Button, Flex, Link, Text } from '@radix-ui/themes'; +import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl'; +import { useAdExempt } from '../../hooks/useAdExempt'; +import { PatreonIcon } from '../../icons/Patreon'; +import { useApp } from '../../stores/app'; + +export function PatreonPlug() { + const patreon = useApp((state) => state.logins.patreon); + const exempt = useAdExempt(); + + if (exempt) return null; + + return ( + + + Active Patreon supports go ad-free + + + + + + + + {!patreon && ( + + + + )} + + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index d3648388b..6bbbc6b97 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,15 +5,17 @@ import PageWrapper from '../components/PageWrapper'; import { TOOLS } from '../constants/tools'; import { ImgurSize, imgur } from '../core/blitzkit/imgur'; import { Hero } from './components/Hero'; +import { PatreonPlug } from './components/PatreonPlug'; export default function Page() { return ( <> + + { (window as any).msAdsQueue.push(function () { diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index c89f812a8..7689d3ed1 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -27,7 +27,13 @@ export function Footer() { sm: 'row', }} > - + BlitzKit{' '} diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 40f9174e3..1e8f75d51 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -25,6 +25,7 @@ import { TOOLS } from '../../constants/tools'; import { WARGAMING_APPLICATION_ID } from '../../constants/wargamingApplicationID'; import { logoutPatreon } from '../../core/blitz/logoutPatreon'; import { logoutWargaming } from '../../core/blitz/logoutWargaming'; +import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl'; import { BlitzkitWide } from '../../icons/BlitzkitWide'; import { PatreonIcon } from '../../icons/Patreon'; import { WargamingIcon } from '../../icons/Wargaming'; @@ -192,10 +193,7 @@ export default function Navbar() { {!logins.patreon && ( - + @@ -216,10 +214,10 @@ export default function Navbar() { {REGIONS.map((region) => ( - + response.json()) - .then(console.log); + const json = use( + fetch(`/api/patreon/membership/${patreon.token}`, { + cache: 'force-cache', + }).then((response) => response.json()), + ); + + return typeof json === 'boolean' && json; } diff --git a/src/icons/Blitzkit.tsx b/src/icons/Blitzkit.tsx index c8425ef4e..afc98baa4 100644 --- a/src/icons/Blitzkit.tsx +++ b/src/icons/Blitzkit.tsx @@ -36,8 +36,8 @@ export function Blitzkit(props: ComponentProps<'svg'>) { fill="url(#paint4_linear_513_245)" /> diff --git a/src/icons/BlitzkitButtonWatermark.tsx b/src/icons/BlitzkitButtonWatermark.tsx index c3b26f70e..5a9e7d4b5 100644 --- a/src/icons/BlitzkitButtonWatermark.tsx +++ b/src/icons/BlitzkitButtonWatermark.tsx @@ -10,7 +10,7 @@ export function BlitzkitButtonWatermark(props: ComponentProps<'svg'>) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) { fill="white" /> diff --git a/src/icons/Wargaming.tsx b/src/icons/Wargaming.tsx index 458b7951a..dd7e4ca02 100644 --- a/src/icons/Wargaming.tsx +++ b/src/icons/Wargaming.tsx @@ -10,10 +10,10 @@ export function WargamingIcon(props: ComponentProps<'svg'>) { xmlns="http://www.w3.org/2000/svg" {...props} > - +