From 36e4a7de36a79e2db5b3261fbd6b6813d112a4e2 Mon Sep 17 00:00:00 2001 From: Tyler McGinnis <2933430+tylermcginnis@users.noreply.github.com> Date: Fri, 25 Oct 2024 18:07:45 -0600 Subject: [PATCH] Update query.gg callouts --- app/components/DocsCalloutQueryGG.tsx | 39 ++++++--- app/components/QueryGGBanner.tsx | 86 +++++++++++++------ app/hooks/useQueryGGPPPDiscount.ts | 28 ++++++ app/images/query-corner-fish-bottom-right.svg | 1 + app/images/query-corner-top-left.svg | 1 + app/images/query-corner-top-right.svg | 1 + app/images/query-header-course.svg | 1 + .../_libraries.query.$version.index.tsx | 58 ------------- 8 files changed, 119 insertions(+), 96 deletions(-) create mode 100644 app/hooks/useQueryGGPPPDiscount.ts create mode 100644 app/images/query-corner-fish-bottom-right.svg create mode 100644 app/images/query-corner-top-left.svg create mode 100644 app/images/query-corner-top-right.svg create mode 100644 app/images/query-header-course.svg diff --git a/app/components/DocsCalloutQueryGG.tsx b/app/components/DocsCalloutQueryGG.tsx index 26033f6a..145b0b92 100644 --- a/app/components/DocsCalloutQueryGG.tsx +++ b/app/components/DocsCalloutQueryGG.tsx @@ -1,27 +1,40 @@ import { LogoQueryGGSmall } from '~/components/LogoQueryGGSmall' +import { useQueryGGPPPDiscount } from '~/hooks/useQueryGGPPPDiscount' + +export function DocsCalloutQueryGG() { + const ppp = useQueryGGPPPDiscount() -export function DocsCalloutQueryGG(props: React.HTMLProps) { return ( -
+
Want to Skip the Docs?
-
- “This course is the best way to learn how to use React Query in - real-world applications.” +
+ “If you're serious about *really* understanding React Query, there's + no better way than with query.gg” —Tanner Linsley
- - Get the course - + + {ppp && ( + <> +

+ To help make query.gg more accessible, you can enable a regional + discount of {ppp.discount * 100}% off for being in {ppp.flag}{' '} + {ppp.country}. +

+ + )} +
-
+ ) } diff --git a/app/components/QueryGGBanner.tsx b/app/components/QueryGGBanner.tsx index 2c3290af..8c33f7f9 100644 --- a/app/components/QueryGGBanner.tsx +++ b/app/components/QueryGGBanner.tsx @@ -1,34 +1,70 @@ -import { IoIosClose } from 'react-icons/io' -import { useLocalStorage } from '~/utils/useLocalStorage' -import { useClientOnlyRender } from '~/utils/useClientOnlyRender' +import { useEffect, useState } from 'react' +import headerCourse from '~/images/query-header-course.svg' +import cornerTopLeft from '~/images/query-corner-top-left.svg' +import cornerTopRight from '~/images/query-corner-top-right.svg' +import cornerFishBottomRight from '~/images/query-corner-fish-bottom-right.svg' +import { useQueryGGPPPDiscount } from '~/hooks/useQueryGGPPPDiscount' export function QueryGGBanner() { - const [hidden, setHidden] = useLocalStorage('pppbanner-hidden', false) + const ppp = useQueryGGPPPDiscount() - if (!useClientOnlyRender()) { - return null + let body = ( + <> +

+ “If you're serious about *really* understanding React Query, there's no + better way than with query.gg” +

+

—Tanner Linsley

+ + ) + + if (ppp) { + body = ( + <> +

+ We noticed you’re in {ppp.flag} {ppp.country} +

+

+ To help make query.gg more globally accessible, you can enable a + regional discount of {ppp.discount * 100}% off. +

+ + ) } return ( - <> - {!hidden && ( -
-

- Want to skip the docs? Check out{' '} - - query.gg - {' '} - – the simplest way to master React Query. -

- + ) } diff --git a/app/hooks/useQueryGGPPPDiscount.ts b/app/hooks/useQueryGGPPPDiscount.ts new file mode 100644 index 00000000..3062e322 --- /dev/null +++ b/app/hooks/useQueryGGPPPDiscount.ts @@ -0,0 +1,28 @@ +import { useState, useEffect } from 'react' + +type Discount = { + code: string + country: string + discount: number + flag: string +} + +export function useQueryGGPPPDiscount() { + const [ppp, setPPP] = useState(null) + + useEffect(() => { + const handleFetch = async () => { + try { + const res = await fetch('https://ppp.uidotdev.workers.dev/') + const data = await res.json() + setPPP(data) + } catch (e) { + setPPP(null) + } + } + + handleFetch() + }, []) + + return ppp +} diff --git a/app/images/query-corner-fish-bottom-right.svg b/app/images/query-corner-fish-bottom-right.svg new file mode 100644 index 00000000..21ca01c1 --- /dev/null +++ b/app/images/query-corner-fish-bottom-right.svg @@ -0,0 +1 @@ +three-eyed fish \ No newline at end of file diff --git a/app/images/query-corner-top-left.svg b/app/images/query-corner-top-left.svg new file mode 100644 index 00000000..5db58393 --- /dev/null +++ b/app/images/query-corner-top-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/images/query-corner-top-right.svg b/app/images/query-corner-top-right.svg new file mode 100644 index 00000000..987be575 --- /dev/null +++ b/app/images/query-corner-top-right.svg @@ -0,0 +1 @@ +moon with a face \ No newline at end of file diff --git a/app/images/query-header-course.svg b/app/images/query-header-course.svg new file mode 100644 index 00000000..959fedbb --- /dev/null +++ b/app/images/query-header-course.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/routes/_libraries.query.$version.index.tsx b/app/routes/_libraries.query.$version.index.tsx index 49bf53f2..64019658 100644 --- a/app/routes/_libraries.query.$version.index.tsx +++ b/app/routes/_libraries.query.$version.index.tsx @@ -253,64 +253,6 @@ export default function VersionIndex() {
-
-
- -
-
-
- Created by{' '} - - Dominik Dorfmeister - {' '} - and{' '} - - ui.dev - -
-
- -
- “This is the best way to learn how to use React Query in - real-world applications.” -
—Tanner Linsley
-
- -
-
- - - - Save time by learning with a guided approach -
-
- - - - Get hands-on experience building a real-world application -
-
- - - - Never worry about data fetching again -
-
- - Get the course - -
-
-
-