From 364d72eea9f2e1749e8e11f9b4c02bac447766e1 Mon Sep 17 00:00:00 2001
From: mitchellhamilton <mitchell@hamil.town>
Date: Tue, 13 Sep 2022 13:26:52 +1000
Subject: [PATCH] Fix hydration warning on website

---
 docs/components/content/CodeBox.tsx      | 21 +++++++++++++--------
 docs/components/docs/CopyToClipboard.tsx | 21 +--------------------
 docs/components/docs/Heading.tsx         |  6 +++---
 docs/package.json                        |  2 +-
 docs/pages/_app.tsx                      |  5 +----
 5 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/docs/components/content/CodeBox.tsx b/docs/components/content/CodeBox.tsx
index 95e3f8fcac1..83f06f9349c 100644
--- a/docs/components/content/CodeBox.tsx
+++ b/docs/components/content/CodeBox.tsx
@@ -1,10 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import type { HTMLAttributes } from 'react';
-import { useToasts } from '@keystone-ui/toast';
+import { HTMLAttributes, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
 import copy from 'clipboard-copy';
 
+import { CheckIcon } from '@keystone-ui/icons/icons/CheckIcon';
 import { Copy } from '../icons/Copy';
 
 type CodeBoxProps = {
@@ -12,15 +12,20 @@ type CodeBoxProps = {
 } & HTMLAttributes<HTMLElement>;
 
 export function CodeBox({ code, ...props }: CodeBoxProps) {
-  const { addToast } = useToasts();
+  const [didJustCopy, setDidJustCopy] = useState(false);
+  useEffect(() => {
+    if (didJustCopy) {
+      const timeout = setTimeout(() => setDidJustCopy(false), 1000);
+      return () => clearTimeout(timeout);
+    }
+  }, [didJustCopy]);
 
   const handleCopy = async () => {
     try {
       await copy(code);
-      addToast({ title: 'Copied to clipboard', tone: 'positive' });
-    } catch (e) {
-      addToast({ title: 'Failed to copy to clipboard', tone: 'negative' });
-    }
+      setDidJustCopy(true);
+      // we don't want to do anything if the copy fails
+    } catch {}
   };
 
   return (
@@ -60,7 +65,7 @@ export function CodeBox({ code, ...props }: CodeBoxProps) {
           alignItems: 'center',
         }}
       >
-        <Copy css={{ height: '1.5rem' }} />
+        {didJustCopy ? <CheckIcon color="green" /> : <Copy css={{ height: '1.5rem' }} />}
       </button>
     </div>
   );
diff --git a/docs/components/docs/CopyToClipboard.tsx b/docs/components/docs/CopyToClipboard.tsx
index 30e26d13e91..591eb68b568 100644
--- a/docs/components/docs/CopyToClipboard.tsx
+++ b/docs/components/docs/CopyToClipboard.tsx
@@ -1,28 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { useToasts } from '@keystone-ui/toast';
 import { jsx } from '@emotion/react';
-import copy from 'clipboard-copy';
 
 import { Link } from '../icons/Link';
 
-export function CopyToClipboard({ value }: { value: string }) {
-  const { addToast } = useToasts();
-
-  const handleCopy = () => {
-    if (typeof value !== 'string' || typeof window === 'undefined') return;
-
-    const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
-    const text = `${url}#${value}`;
-
-    try {
-      copy(text);
-      addToast({ title: 'Copied to clipboard', tone: 'positive' });
-    } catch (e) {
-      addToast({ title: 'Failed to copy to clipboard', tone: 'negative' });
-    }
-  };
-
+export function HeadingIdLink({ value }: { value: string }) {
   return (
     <a
       href={`#${value}`}
@@ -48,7 +30,6 @@ export function CopyToClipboard({ value }: { value: string }) {
           color: 'var(--link)',
         },
       }}
-      onClick={handleCopy}
     >
       <Link css={{ height: '1rem' }} />
     </a>
diff --git a/docs/components/docs/Heading.tsx b/docs/components/docs/Heading.tsx
index 595ef88e3a7..37f7a9057ea 100644
--- a/docs/components/docs/Heading.tsx
+++ b/docs/components/docs/Heading.tsx
@@ -4,7 +4,7 @@ import slugify from '@sindresorhus/slugify';
 import { jsx } from '@emotion/react';
 import { ReactNode } from 'react';
 
-import { CopyToClipboard } from './CopyToClipboard';
+import { HeadingIdLink } from './CopyToClipboard';
 
 /*
  * !THIS IS OLD. PLEASE USE THE Type COMPONENT INSTEAD!
@@ -58,7 +58,7 @@ type HeadingProps = BaseHeadingProps & {
 };
 
 export function Heading({ level, id, children, ...props }: HeadingProps) {
-  const hasCopy = level > 1 && level < 5;
+  const hasHeadingIdLink = level > 1 && level < 5;
   const computedId = id === undefined ? getAnchor(children) : id;
   const Tag = `h${level}` as const;
   return (
@@ -84,7 +84,7 @@ export function Heading({ level, id, children, ...props }: HeadingProps) {
           },
         }}
       >
-        {hasCopy && <CopyToClipboard value={computedId} />}
+        {hasHeadingIdLink && <HeadingIdLink value={computedId} />}
         {children}
       </span>
     </Tag>
diff --git a/docs/package.json b/docs/package.json
index d6af70308ce..cd0589442f1 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -18,7 +18,7 @@
     "@emotion/weak-memoize": "^0.3.0",
     "@keystone-6/fields-document": "^4.1.0",
     "@keystone-ui/core": "^5.0.1",
-    "@keystone-ui/toast": "^6.0.1",
+    "@keystone-ui/icons": "^6.0.1",
     "@markdoc/markdoc": "^0.1.5",
     "@mdx-js/loader": "next",
     "@mdx-js/react": "next",
diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
index 5cc99f3cb72..8d01ccf7c13 100644
--- a/docs/pages/_app.tsx
+++ b/docs/pages/_app.tsx
@@ -1,6 +1,5 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { ToastProvider } from '@keystone-ui/toast';
 import { jsx, Global, css, CacheProvider } from '@emotion/react';
 import type { AppProps } from 'next/app';
 import { cache } from '@emotion/css';
@@ -100,9 +99,7 @@ export default function App({ Component, pageProps }: AppProps) {
         />
       </Head>
       <SkipLinks />
-      <ToastProvider>
-        <Component {...pageProps} />
-      </ToastProvider>
+      <Component {...pageProps} />
     </CacheProvider>
   );
 }