Fix hydration warning on website (#7921)

keystonejs · Sep 13, 2022 · 7aac32c · 7aac32c
1 parent 267d8c1
commit 7aac32c
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 36 deletions.
diff --git a/docs/components/content/CodeBox.tsx b/docs/components/content/CodeBox.tsx
@@ -1,26 +1,31 @@
 /** @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 = {
   code: string;
 } & 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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 }