Merge remote-tracking branch 'tannerlinsley/master' into alpha

# Conflicts:
#	src/reactjs/tests/useIsFetching.test.tsx
#	src/reactjs/useIsFetching.ts

Author: TkDodo

docs/package.json

@@ -28,6 +28,7 @@
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.3.1",
+    "country-emoji": "^1.5.6",
     "date-fns": "^2.16.1",
     "docsearch.js": "^2.6.3",
     "framer-motion": "^1.11.1",

docs/public/images/bytes-logo.png

@@ -0,0 +1,49 @@
+import React from 'react'
+import useBytesSubmit from './useBytesSubmit'
+
+export default function BytesForm() {
+  const { state, handleSubmit, error } = useBytesSubmit()
+  if (state === 'submitted') {
+    return (
+      <p>Success! Please, check your email to confirm your subscription.</p>
+    )
+  }
+  return (
+    <form onSubmit={handleSubmit}>
+      <div data-element="fields" className="grid relative">
+        <figure
+          className="absolute right-0"
+          style={{ bottom: '72px', right: '-10px' }}
+        >
+          <img
+            height={40}
+            width={40}
+            src="/images/bytes-logo.png"
+            alt="Bytes"
+          />
+        </figure>
+        <input
+          className="border rounded p-2 mb-2 w-full"
+          name="email_address"
+          placeholder="Your email address"
+          type="email"
+          required=""
+        />
+        <button
+          type="submit"
+          className="mb-4 border rounded bg-coral border-none text-white p-2"
+        >
+          {state !== 'loading' ? (
+            <span>Subscribe</span>
+          ) : (
+            <span>Loading...</span>
+          )}
+        </button>
+      </div>
+      <p className="text-gray-400 text-xs">
+        No spam. Unsubscribe at <em>any</em> time.
+      </p>
+      {error && <p className="text-red-600">{error}</p>}
+    </form>
+  )
+}

docs/src/components/BytesForm.js

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import Link from 'next/link'
 import CarbonAds from './CarbonAds'
+import BytesForm from './BytesForm'
+
 export const Footer = props => {
   return (
     <div className="bg-gray-50 border-t border-gray-200">
@@ -91,56 +93,16 @@ export const Footer = props => {
           </div>
           <div className="mt-8 xl:mt-0">
             <h4 className="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
-              Subscribe to our newsletter
+              Subscribe to Bytes
             </h4>
             <p className="mt-4 text-gray-500 text-base leading-6 mb-4">
-              The latest TanStack news, articles, and resources, sent to your
-              inbox.
+              The{' '}
+              <a href="https://bytes.dev/?r=tanstack">
+                best JavaScript newsletter!
+              </a>{' '}
+              Delivered every Monday to over 76,000 devs.
             </p>
-            <form
-              action="https://app.convertkit.com/forms/1513638/subscriptions"
-              className=""
-              method="post"
-              data-sv-form="1513638"
-              data-uid="4fc050bc50"
-              data-format="inline"
-              data-version="5"
-              data-options='{"settings":{"after_subscribe":{"action":"message","success_message":"Success! Please, check your email to confirm your subscription.","redirect_url":""},"modal":{"trigger":null,"scroll_percentage":null,"timer":null,"devices":null,"show_once_every":null},"recaptcha":{"enabled":false},"slide_in":{"display_in":null,"trigger":null,"scroll_percentage":null,"timer":null,"devices":null,"show_once_every":null}}}'
-            >
-              <ul
-                className="formkit-alert formkit-alert-error"
-                data-element="errors"
-                data-group="alert"
-              />
-
-              <div
-                data-element="fields"
-                className="seva-fields grid grid-cols-3 gap-2 max-w-lg"
-              >
-                <input
-                  className="formkit-input border rounded p-2 mb-4 w-full col-span-2"
-                  name="email_address"
-                  placeholder="Your email address"
-                  type="text"
-                  required=""
-                />
-                <button
-                  data-element="submit"
-                  className="formkit-submit mb-4 border rounded bg-coral border-none text-white"
-                >
-                  <span>Subscribe</span>
-                </button>
-              </div>
-              <div
-                data-element="guarantee"
-                className="formkit-guarantee text-gray-400 text-xs mt-4"
-              >
-                <p>I won't send you spam.</p>
-                <p>
-                  Unsubscribe at <em>any</em> time.
-                </p>
-              </div>
-            </form>
+            <BytesForm />
           </div>
         </div>
         <div className="mt-8 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between">

docs/src/components/Footer.js

@@ -20,6 +20,7 @@ import { Seo } from './Seo'
 import MDXComponents from './MDXComponents'
 import Head from 'next/head'
 import { getManifest } from 'manifests/getManifest'
+import BytesForm from './BytesForm'
 
 const getSlugAndTag = path => {
   const parts = path.split('/')
@@ -111,6 +112,31 @@ export const LayoutDocs = props => {
                         On this page
                       </h4>
                       <Toc title={props.meta.title} />
+                      <div className="mt-12">
+                        <h4 className="font-semibold uppercase text-sm mb-2 mt-2 text-gray-500">
+                          Want to skip the docs?
+                        </h4>
+                        <p className='text-sm'>
+                          Fast track your learning and {' '}
+                          <a
+                            href="https://ui.dev/checkout/react-query?from=tanstack"
+                            className="text-blue-600 font-semibold transition-colors duration-150 ease-out"
+                          >
+                            take the offical course ↗️
+                          </a>
+                        </p>
+                      </div>
+                      <div className="mt-12 relative">
+                        <h4 className="font-semibold uppercase text-sm mb-2 mt-2 text-gray-500">
+                          Subscribe to Bytes
+                        </h4>
+                        <p className="mt-4  text-sm leading-6 mb-4">
+                          The best JavaScript newsletter! Delivered every
+                          Monday to over 76,000 devs.
+                        </p>
+                        <BytesForm />
+                        
+                      </div>
                     </div>
                   </div>
                 )}

docs/src/components/LayoutDocs.js

@@ -3,9 +3,11 @@ import Link from 'next/link'
 import logoSrc from '../images/logo.svg'
 import { siteConfig } from 'siteConfig'
 import { Search } from './Search'
+import { PPPBanner } from './PPPBanner'
 
 export const Nav = () => (
   <div className="bg-white border-b border-gray-200">
+    <PPPBanner />
     <div className="container mx-auto">
       <div className="flex flex-wrap items-center">
         <div className="w-60 flex items-center h-16 pt-4 md:pt-0">

docs/src/components/Nav.js

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { flag } from 'country-emoji'
+import useLocalStorage from './useLocalStorage'
+import { AnimatePresence, motion } from 'framer-motion'
+import { IoIosClose } from 'react-icons/io'
+
+function useClientOnlyRender() {
+  const [rendered, setRendered] = React.useState(false)
+  React.useEffect(() => {
+    setRendered(true)
+  }, [])
+  return rendered
+}
+export function PPPBanner() {
+  const [hidden, setHidden] = useLocalStorage('pppbanner-hidden', false)
+  const [data, setData] = useLocalStorage('pppbanner-data', null)
+
+  React.useEffect(() => {
+    // This function has CORS configured to allow
+    // react-query.tanstack.com and tanstack.com
+    if (!data) {
+      fetch('https://ui.dev/api/ppp-discount')
+        .then(res => res.json())
+        .then(res => {
+          if (res?.code) {
+            setData(res)
+          }
+        })
+    }
+  }, [data, setData])
+
+  if (!useClientOnlyRender()) {
+    return null
+  }
+
+  return (
+    <AnimatePresence initial={false}>
+      {data && !hidden && (
+        <motion.div
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: 'auto' }}
+          exit={{ opacity: 0, height: 0 }}
+          className="w-full bg-coral text-white text-center py-2 relative flex items-center justify-center"
+        >
+          <p>
+            {flag(data.code)} We noticed you're in{' '}
+            <strong>{data.country}</strong>. Get{' '}
+            <strong>{data.discount * 100}% off</strong> the Official React Query
+            Course with code{' '}
+            <a
+              className="underline cursor-pointer"
+              href={`/checkout/react-query?from=tanstack&coupon_code=${data.coupon}`}
+            >
+              <strong>{data.coupon}</strong>
+            </a>
+            .
+          </p>
+          <button
+            onClick={() => setHidden(true)}
+            className="absolute right-0"
+            aria-label="Hide Banner"
+          >
+            <IoIosClose size={30} className="text-white" />
+          </button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}

docs/src/components/PPPBanner.js

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+function sendBytesOptIn({ email, influencer, source, referral }) {
+  return fetch(`https://bytes.dev/api/bytes-optin-cors`, {
+    method: 'POST',
+    body: JSON.stringify({ email, influencer, source, referral }),
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+  }).then((res) => res.json())
+}
+
+export default function useBytesSubmit() {
+  const [state, setState] = useState("initial");
+  const [error, setError] = useState(null);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const email = e.target.email_address.value;
+    setState("loading");
+    sendBytesOptIn({ email, influencer: "tanstack"  })
+      .then(() => {
+        setState("submitted");
+      })
+      .catch((err) => {
+        setError(err);
+      });
+  };
+
+  return { handleSubmit, state, error };
+}

docs/src/components/useBytesSubmit.js

@@ -0,0 +1,39 @@
+import * as React from 'react'
+export default function useLocalStorage(key, initialValue) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = React.useState(() => {
+    if (typeof window !== 'undefined') {
+      const item = window.localStorage.getItem(key)
+      try {
+        // Get from local storage by key
+        // Parse stored json or if none return initialValue
+        return item ? JSON.parse(item) : initialValue
+      } catch (error) {
+        return item
+      }
+    }
+    return initialValue
+  })
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = React.useCallback(
+    value => {
+      try {
+        // Allow value to be a function so we have same API as useState
+        // Save state
+        setStoredValue(newStoredValue => {
+          const valueToStore =
+            value instanceof Function ? value(newStoredValue) : value
+          window.localStorage.setItem(key, JSON.stringify(valueToStore))
+          return valueToStore
+        })
+        // Save to local storage
+      } catch (error) {
+        // A more advanced implementation would handle the error case
+      }
+    },
+    [key]
+  )
+  return [storedValue, setValue]
+}

docs/src/components/useLocalStorage.js

@@ -18,9 +18,6 @@ function loadScript(src, attrs = {}) {
 function MyApp({ Component, pageProps }) {
   React.useEffect(() => {
     loadScript('https://buttons.github.io/buttons.js')
-    loadScript('https://tanstack.ck.page/e394781e7a/index.js', {
-      'data-uid': 'e394781e7a',
-    })
   }, [])
 
   return (
@@ -30,25 +27,12 @@ function MyApp({ Component, pageProps }) {
           href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
           rel="stylesheet"
         />
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `
-        @media (max-width: 390px) {
-            .formkit-slide-in {
-              display: none;
-            }
-          }
-          @media (max-height: 740px) {
-            .formkit-slide-in {
-              display: none;
-            }
-          }
-          `,
-          }}
-        />
       </Head>
       {/* eslint-disable-next-line jsx-a11y/alt-text */}
-      <img src="https://static.scarf.sh/a.png?x-pxid=c03d3ddd-b47e-4e26-a9b2-9df68b2ac970" />
+      <img
+        src="https://static.scarf.sh/a.png?x-pxid=c03d3ddd-b47e-4e26-a9b2-9df68b2ac970"
+        className="h-0"
+      />
       <SearchProvider>
         <Component {...pageProps} />
       </SearchProvider>