Merge pull request #369 from mongodb/brooke/refac

Refactor session logic into its own hook

src/app/component/[component]/design-docs/client.tsx

@@ -1,13 +1,21 @@
 'use client';
 
+import { css } from '@emotion/css';
 import { ContentstackRichText } from '@/components/content-stack';
 import { CSNode } from '@/components/content-stack/types';
-import { ErrorBoundary } from 'next/dist/client/components/error-boundary';
 
 interface DesignDocsContentProps {
   content?: CSNode;
 }
 
 export const DesignDocsContent = ({ content }: DesignDocsContentProps) => {
-  return <ContentstackRichText content={content} />;
+  return (
+    <div
+      className={css`
+        max-width: 700px;
+      `}
+    >
+      <ContentstackRichText content={content} />
+    </div>
+  );
 };

src/app/component/[component]/design-docs/page.tsx

@@ -1,5 +1,3 @@
-import { css } from '@emotion/css';
-
 import { fetchComponent } from '@/utils/ContentStack/getContentstackResources';
 import { DesignDocsContent } from './client';
 
@@ -13,11 +11,7 @@ export default async function Page({
   });
 
   return (
-    <div
-      className={css`
-        max-width: 700px; // TODO: Make this responsive
-      `}
-    >
+    <div>
       <DesignDocsContent content={component?.designguidelines} />
     </div>
   );

src/app/component/[component]/layout.tsx

@@ -1,22 +1,22 @@
-"use client";
+'use client';
 
-import { css } from "@emotion/css";
-import { useRouter, usePathname } from "next/navigation";
-import React from "react";
+import { css } from '@emotion/css';
+import { useRouter, usePathname } from 'next/navigation';
+import React from 'react';
 
-import IconButton from "@leafygreen-ui/icon-button";
-import { CodeSandbox, Figma, Github } from "@/components/glyphs";
-import { useDarkMode } from "@leafygreen-ui/leafygreen-provider";
-import { Tabs, Tab } from "@leafygreen-ui/tabs";
-import { color, spacing } from "@leafygreen-ui/tokens";
-import { H2 } from "@leafygreen-ui/typography";
+import IconButton from '@leafygreen-ui/icon-button';
+import { CodeSandbox, Figma, Github } from '@/components/glyphs';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { Tabs, Tab } from '@leafygreen-ui/tabs';
+import { color, spacing } from '@leafygreen-ui/tokens';
+import { H2 } from '@leafygreen-ui/typography';
 
-import useComponentFields from "@/hooks/useComponentFields";
-import { getGithubLink } from "@/utils";
+import { useComponentFields } from '@/hooks';
+import { getGithubLink } from '@/utils';
 
-const liveExamplePath = "live-example";
-const designDocsPath = "design-docs";
-const codeDocsPath = "code-docs";
+const liveExamplePath = 'live-example';
+const designDocsPath = 'design-docs';
+const codeDocsPath = 'code-docs';
 
 export default function ComponentLayout({
   children,
@@ -25,13 +25,13 @@ export default function ComponentLayout({
 }) {
   const router = useRouter();
   const pathname = usePathname();
-  const currentComponent = pathname.split("/")[2];
+  const currentComponent = pathname.split('/')[2];
   const { theme } = useDarkMode();
 
   const component = useComponentFields({ componentName: currentComponent });
 
   const getSelected = () => {
-    const suffix = pathname.split("/")[3];
+    const suffix = pathname.split('/')[3];
     if (suffix === liveExamplePath) {
       return 0;
     }
@@ -61,7 +61,7 @@ export default function ComponentLayout({
       href: component?.codesandbox_url?.href,
       icon: <CodeSandbox />,
     },
-  ]
+  ];
 
   return (
     <div
@@ -75,7 +75,7 @@ export default function ComponentLayout({
           margin-bottom: ${spacing[600]}px;
         `}
       >
-        {currentComponent.split("-").join(" ")}
+        {currentComponent.split('-').join(' ')}
       </H2>
       <Tabs
         selected={getSelected()}
@@ -94,18 +94,20 @@ export default function ComponentLayout({
               height: 100%;
             `}
           >
-            {externalLinks.map(({ 'aria-label': ariaLabel, href, icon }, index) => (
-              <IconButton
-                key={ariaLabel + index}
-                aria-label={ariaLabel}
-                size="large"
-                href={href}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {icon}
-              </IconButton>
-            ))}
+            {externalLinks.map(
+              ({ 'aria-label': ariaLabel, href, icon }, index) => (
+                <IconButton
+                  key={ariaLabel + index}
+                  aria-label={ariaLabel}
+                  size="large"
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {icon}
+                </IconButton>
+              ),
+            )}
           </div>
         }
       >

src/app/layout.tsx

@@ -2,7 +2,7 @@
 
 import { css } from '@emotion/css';
 import { RootStyleRegistry } from '@/components/global';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useMediaQuery } from '@/hooks';
 import LeafyGreenProvider, {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';

src/app/private/page.tsx

@@ -1,34 +1,27 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import Button from "@leafygreen-ui/button";
-import { BasicEmptyState } from "@leafygreen-ui/empty-state";
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Button from '@leafygreen-ui/button';
+import { BasicEmptyState } from '@leafygreen-ui/empty-state';
 // @ts-expect-error
-import ArrowLeftIcon from "@leafygreen-ui/icon/dist/ArrowLeft";
+import ArrowLeftIcon from '@leafygreen-ui/icon/dist/ArrowLeft';
 // @ts-expect-error
-import LogInIcon from "@leafygreen-ui/icon/dist/LogIn";
-import { getSession, login, Session } from "@/auth";
-import { ComingSoon, Security } from "@/components/glyphs";
+import LogInIcon from '@leafygreen-ui/icon/dist/LogIn';
+import { getSession, login, Session } from '@/auth';
+import { ComingSoon, Security } from '@/components/glyphs';
+import { useSession } from '@/hooks';
 
 export default function Private() {
   const router = useRouter();
-  const [session, setSession] = useState<Session | undefined>();
-
-  useEffect(() => {
-    getSession().then((response) => {
-      if (response !== null) {
-        setSession(response);
-      }
-    });
-  }, []);
+  const session = useSession();
 
   return session?.user ? (
     <BasicEmptyState
       title="Coming Soon"
       description="Check back for updates soon"
       primaryButton={
-        <Button leftGlyph={<ArrowLeftIcon />} onClick={() => router.push("/")}>
+        <Button leftGlyph={<ArrowLeftIcon />} onClick={() => router.push('/')}>
           Return to home
         </Button>
       }

src/app/template.tsx

@@ -12,7 +12,7 @@ import {
   SideNavigation,
   Search,
 } from '@/components/global';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useMediaQuery } from '@/hooks';
 import { SIDE_NAV_WIDTH } from '@/constants';
 import { ContentStackContextProvider } from '@/contexts/ContentStackContext';
 import { ComponentFields, ContentPageGroup } from '@/utils/ContentStack/types';

src/components/global/Search.tsx

@@ -7,7 +7,7 @@ import debounce from 'lodash/debounce';
 import LockIcon from '@leafygreen-ui/icon/dist/Lock';
 import { SearchInput, SearchResult } from '@leafygreen-ui/search-input';
 import { spacing } from '@leafygreen-ui/tokens';
-import { getSession, Session } from '@/auth';
+import { useSession } from '@/hooks';
 import { components } from '@/utils/components';
 
 const fuseOptions = {
@@ -22,7 +22,7 @@ const useFuseSearch = (data: any[], options: IFuseOptions<any>) => {
 };
 
 export function Search() {
-  const [session, setSession] = useState<Session | undefined>();
+  const session = useSession();
   const [searchTerm, setSearchTerm] = useState('');
   const [results, setResults] = useState(components);
 
@@ -48,14 +48,6 @@ export function Search() {
     }
   }, [searchTerm]);
 
-  useEffect(() => {
-    getSession().then(response => {
-      if (response !== null) {
-        setSession(response);
-      }
-    });
-  }, []);
-
   return (
     <SearchInput
       aria-label="Search Components"

src/components/global/SideNavigation/SideNavigation.tsx

@@ -22,7 +22,7 @@ import {
 import { MongoDBLogo, SupportedColors } from '@leafygreen-ui/logo';
 import { color, spacing } from '@leafygreen-ui/tokens';
 import { SIDE_NAV_WIDTH } from '@/constants';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useMediaQuery } from '@/hooks';
 import { ComponentMeta, Group, groupedComponents } from '@/utils/components';
 import { Search } from '../Search';
 import { Drawer } from './Drawer';

src/components/global/UserMenu.tsx

@@ -1,27 +1,19 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
-import { css } from "@emotion/css";
-import Button from "@leafygreen-ui/button";
+import { css } from '@emotion/css';
+import Button from '@leafygreen-ui/button';
 // @ts-expect-error
-import CaretDownIcon from "@leafygreen-ui/icon/dist/CaretDown";
+import CaretDownIcon from '@leafygreen-ui/icon/dist/CaretDown';
 // @ts-expect-error
-import LogOutIcon from "@leafygreen-ui/icon/dist/LogOut";
-import { Menu, MenuItem } from "@leafygreen-ui/menu";
-import { Body, Description } from "@leafygreen-ui/typography";
-import { getSession, logout, Session } from "@/auth";
-import { LogIn } from "./LogIn";
+import LogOutIcon from '@leafygreen-ui/icon/dist/LogOut';
+import { Menu, MenuItem } from '@leafygreen-ui/menu';
+import { Body, Description } from '@leafygreen-ui/typography';
+import { logout } from '@/auth';
+import { useSession } from '@/hooks';
+import { LogIn } from './LogIn';
 
 export function UserMenu() {
-  const [session, setSession] = useState<Session | undefined>();
-
-  useEffect(() => {
-    getSession().then((response) => {
-      if (response !== null) {
-        setSession(response);
-      }
-    });
-  }, []);
+  const session = useSession();
 
   return session?.user ? (
     <div

src/components/home/ComponentCard.tsx

@@ -16,7 +16,7 @@ import {
   Notifications,
   Patterns,
 } from '@/components/glyphs';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useMediaQuery } from '@/hooks';
 
 const liveExamplePath = 'live-example';
 

src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useCallbackRef } from './useCallbackRef';
+export { useComponentFields } from './useComponentFields';
+export { useMediaQuery } from './useMediaQuery';
+export { useSession } from './useSession';

src/hooks/useComponentFields.ts

@@ -6,7 +6,7 @@ import { fetchComponent } from '@/utils/ContentStack/getContentstackResources';
 import { ComponentFields } from '@/utils/ContentStack/types';
 
 /** @deprecated */
-export default function useComponentFields({
+export function useComponentFields({
   componentName,
   includeContent = false,
 }: {

src/hooks/useSession.ts

@@ -0,0 +1,18 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getSession, Session } from '@/auth';
+
+export const useSession = () => {
+  const [session, setSession] = useState<Session | undefined>();
+
+  useEffect(() => {
+    getSession().then(response => {
+      if (response !== null) {
+        setSession(response);
+      }
+    });
+  }, []);
+
+  return session;
+};