chore: update components that use StaticQueries

- remove unneeded components whose job was to perform staticQuery and just do staticQuery in component

src/components/scaffold/Header.stories.tsx

@@ -1,18 +1,14 @@
 import React from "react"
 import { Meta, Story } from "@storybook/react/types-6-0"
 
-import { HeaderBase, HeaderBaseProps } from "components/scaffold/Header"
+import Header, { HeaderProps } from "components/scaffold/Header"
 
 export default {
-  component: HeaderBase,
+  component: Header,
   title: "Scaffold/Header",
-  args: {
-    title: "Isaiah Smith",
-    avatar: "https://api.adorable.io/avatars/100/sample.png",
-  },
 } as Meta
 
-const Template: Story<HeaderBaseProps> = args => <HeaderBase {...args} />
+const Template: Story<HeaderProps> = args => <Header {...args} />
 
 export const Basic = Template.bind({})
 

src/components/scaffold/Header.tsx

@@ -48,20 +48,52 @@ const useStyles = makeStyles(({ spacing, palette, shadows }) => ({
   },
 }))
 
-export type HeaderBaseProps = {
-  title: string
-  avatar?: string
-  onOpen?: () => void
+type HeaderData = {
+  avatar: {
+    childImageSharp: {
+      fixed: {
+        src: string
+      }
+    }
+  }
+  site: {
+    siteMetadata: {
+      title: string
+    }
+  }
+}
+
+export type HeaderProps = {
   simple?: boolean
 }
 
-export const HeaderBase: FC<HeaderBaseProps> = ({ title, avatar, onOpen, simple }) => {
+const Header: FC<HeaderProps> = ({ simple }) => {
   const classes = useStyles()
   const breakpoint = useBreakpoint()
+  const { setOpen } = useContext(SideNavContext)
+  const data: HeaderData = useStaticQuery(graphql`
+    query HeaderQuery {
+      avatar: file(absolutePath: { regex: "/profile-pic.png/" }) {
+        childImageSharp {
+          fixed(width: 100, height: 100) {
+            src
+          }
+        }
+      }
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+
+  const title = data.site.siteMetadata.title
+  const avatar = data.avatar.childImageSharp.fixed.src
 
   const nameAndAvatar = (className?: string) => (
     <Box className={cx(classes.nameAndAvatar, className)}>
-      {avatar && <Avatar className={classes.avatar} src={avatar} />}
+      <Avatar className={classes.avatar} src={avatar} />
       <Typography className={classes.title} variant="h6" align="center">
         <Link className={classes.link} to="/">
           {title}
@@ -73,11 +105,16 @@ export const HeaderBase: FC<HeaderBaseProps> = ({ title, avatar, onOpen, simple
   const simpleHeaderContent = (
     <>
       {nameAndAvatar(classes.centered)}
-      {onOpen && (
-        <IconButton className={classes.menuButton} edge="start" color="inherit" aria-label="menu" onClick={onOpen}>
-          <MenuRounded />
-        </IconButton>
-      )}
+
+      <IconButton
+        className={classes.menuButton}
+        edge="start"
+        color="inherit"
+        aria-label="menu"
+        onClick={() => setOpen(true)}
+      >
+        <MenuRounded />
+      </IconButton>
     </>
   )
 
@@ -98,32 +135,4 @@ export const HeaderBase: FC<HeaderBaseProps> = ({ title, avatar, onOpen, simple
   )
 }
 
-const Header = (): JSX.Element => {
-  const { setOpen } = useContext(SideNavContext)
-  const data = useStaticQuery(graphql`
-    query HeaderQuery {
-      avatar: file(absolutePath: { regex: "/profile-pic.png/" }) {
-        childImageSharp {
-          fixed(width: 100, height: 100) {
-            src
-          }
-        }
-      }
-      site {
-        siteMetadata {
-          title
-        }
-      }
-    }
-  `)
-
-  return (
-    <HeaderBase
-      title={data.site.siteMetadata.title}
-      avatar={data.avatar.childImageSharp.fixed.src}
-      onOpen={() => setOpen(true)}
-    />
-  )
-}
-
 export default Header

src/components/scaffold/SideNavDrawerContent.stories.tsx

@@ -1,15 +1,15 @@
 import React from "react"
 import { Meta, Story } from "@storybook/react/types-6-0"
 
-import { SideNavDrawerContentBase, SideNavDrawerContentBaseProps } from "components/scaffold/SideNavDrawerContent"
+import SideNavDrawerContent, { SideNavDrawerContentProps } from "components/scaffold/SideNavDrawerContent"
 
 export default {
-  component: SideNavDrawerContentBase,
+  component: SideNavDrawerContent,
   title: "Scaffold/SideNavDrawerContent",
   args: {
     title: "Isaiah Smith",
     avatar: "https://api.adorable.io/avatars/100/sample.png",
   },
 } as Meta
 
-export const Basic: Story<SideNavDrawerContentBaseProps> = args => <SideNavDrawerContentBase {...args} />
+export const Basic: Story<SideNavDrawerContentProps> = args => <SideNavDrawerContent {...args} />

src/components/scaffold/SideNavDrawerContent.tsx

@@ -57,46 +57,29 @@ const useStyles = makeStyles(({ spacing, shadows, palette }) => ({
   },
 }))
 
-export type SideNavDrawerContentBaseProps = {
-  className?: string
-  title: string
-  avatar?: string
-  onClick?: () => void
-}
-
-export const SideNavDrawerContentBase: FC<SideNavDrawerContentBaseProps> = ({ className, onClick, title, avatar }) => {
-  const classes = useStyles()
-
-  return (
-    <Box className={cx(classes.content, className)}>
-      <InsetBox className={classes.inset} variant="vertical">
-        {avatar && (
-          <Box className={classes.avatarContainer}>
-            <Avatar className={classes.avatar} src={avatar} />
-          </Box>
-        )}
-        <Typography className={classes.title} variant="h6" align="center">
-          {title}
-        </Typography>
-        <Socials className={classes.socials} size={2} />
-      </InsetBox>
-      <Box flexGrow={1}>
-        <NavigationButtons className={classes.buttons} onClick={onClick} />
-      </Box>
-      <InsetBox className={classes.toggleWrapper} variant="vertical">
-        <DarkModeToggle />
-      </InsetBox>
-    </Box>
-  )
+type SideNavDrawerContentData = {
+  avatar: {
+    childImageSharp: {
+      fixed: {
+        src: string
+      }
+    }
+  }
+  site: {
+    siteMetadata: {
+      title: string
+    }
+  }
 }
 
 export type SideNavDrawerContentProps = {
   className?: string
   onClick?: () => void
 }
 
-const SideNavDrawerContent: FC<SideNavDrawerContentProps> = props => {
-  const data = useStaticQuery(graphql`
+const SideNavDrawerContent: FC<SideNavDrawerContentProps> = ({ className, onClick }) => {
+  const classes = useStyles()
+  const data: SideNavDrawerContentData = useStaticQuery(graphql`
     query SideNavDrawerContentQuery {
       avatar: file(absolutePath: { regex: "/profile-pic.png/" }) {
         childImageSharp {
@@ -112,12 +95,28 @@ const SideNavDrawerContent: FC<SideNavDrawerContentProps> = props => {
       }
     }
   `)
+
+  const title = data.site.siteMetadata.title
+  const avatar = data.avatar.childImageSharp.fixed.src
+
   return (
-    <SideNavDrawerContentBase
-      {...props}
-      title={data.site.siteMetadata.title}
-      avatar={data.avatar.childImageSharp.fixed.src}
-    />
+    <Box className={cx(classes.content, className)}>
+      <InsetBox className={classes.inset} variant="vertical">
+        <Box className={classes.avatarContainer}>
+          <Avatar className={classes.avatar} src={avatar} />
+        </Box>
+        <Typography className={classes.title} variant="h6" align="center">
+          {title}
+        </Typography>
+        <Socials className={classes.socials} size={2} />
+      </InsetBox>
+      <Box flexGrow={1}>
+        <NavigationButtons className={classes.buttons} onClick={onClick} />
+      </Box>
+      <InsetBox className={classes.toggleWrapper} variant="vertical">
+        <DarkModeToggle />
+      </InsetBox>
+    </Box>
   )
 }
 

src/pages/about.stories.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+import { Meta, Story } from "@storybook/react/types-6-0"
+
+import About from "pages/about"
+
+export default {
+  component: About,
+  title: "Pages/About",
+} as Meta
+
+export const Basic: Story = args => <About />

src/pages/about.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from "react"
+import { Link, graphql, PageProps, useStaticQuery } from "gatsby"
+
+import Layout from "components/Layout"
+import SEO from "components/SEO"
+
+type AboutData = {
+  site: {
+    siteMetadata: {
+      title: string
+    }
+  }
+}
+
+const About: FC<PageProps> = ({ location }) => {
+  const data: AboutData = useStaticQuery(
+    graphql`
+      query AboutQuery {
+        site {
+          siteMetadata {
+            title
+          }
+        }
+      }
+    `
+  )
+
+  return (
+    <Layout location={location} title={data.site.siteMetadata.title}>
+      <SEO title="About" />
+      <p>This is my about page!</p>
+    </Layout>
+  )
+}
+
+export default About