Fix doc warnings (#779)

aws-amplify · Nov 19, 2021 · 1bfdd0f · 1bfdd0f
1 parent 32850d4
commit 1bfdd0f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/docs/src/components/Layout/Footer.tsx b/docs/src/components/Layout/Footer.tsx
@@ -21,7 +21,7 @@ export const Footer = () => {
       </Flex>
       <View textAlign="center">
         <Button
-          as="a"
+          as={Link}
           variation="link"
           gap={tokens.space.small}
           alignItems="baseline"
@@ -33,7 +33,7 @@ export const Footer = () => {
           Github
         </Button>
         <Button
-          as="a"
+          as={Link}
           variation="link"
           gap={tokens.space.small}
           alignItems="baseline"

diff --git a/docs/src/components/Layout/SecondaryNav.tsx b/docs/src/components/Layout/SecondaryNav.tsx
@@ -16,7 +16,11 @@ import {
 
 const NavLinks = ({ items }: { items: ComponentNavItem[] }) => (
   <Collection type="list" items={items} gap="0">
-    {({ href, label }) => <NavLink href={href}>{label}</NavLink>}
+    {({ href, label }) => (
+      <NavLink key={label} href={href}>
+        {label}
+      </NavLink>
+    )}
   </Collection>
 );
 

diff --git a/docs/src/pages/_app.page.tsx b/docs/src/pages/_app.page.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import * as React from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { AmplifyProvider, ColorMode } from '@aws-amplify/ui-react';
@@ -8,11 +8,16 @@ import { Header } from '@/components/Layout/Header';
 import { theme } from '../theme';
 import '../styles/index.scss';
 
+// suppress useLayoutEffect warnings when running outside a browser
+// See: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85#gistcomment-3886909
+// @ts-ignore Cannot assign to 'useLayoutEffect' because it is a read-only property.ts(2540)
+if (typeof window === 'undefined') React.useLayoutEffect = React.useEffect;
+
 function MyApp({ Component, pageProps }) {
   const router = useRouter();
   const { platform = 'react' } = router.query;
-  const [colorMode, setColorMode] = useState<ColorMode>('system');
-  const [themeOverride, setThemeOverride] = useState('');
+  const [colorMode, setColorMode] = React.useState<ColorMode>('system');
+  const [themeOverride, setThemeOverride] = React.useState('');
 
   const favicon =
     process.env.NODE_ENV === 'development'