fix: selectedKeys on Header menu should inject from pathname (#79)

Author: shoota

src/components/organisms/Header/index.tsx

@@ -28,12 +28,14 @@ type Props = {
   title: string
   onTitleClick: (event: React.MouseEvent<HTMLAnchorElement>) => void
   onMenuClick: ComponentProps<typeof Menu>['onClick']
+  tabKey: string
 }
 
 export const Header: React.FC<Props> = ({
   onTitleClick,
   onMenuClick,
   title,
+  tabKey,
 }) => {
   return (
     <StyledHeader>
@@ -44,12 +46,12 @@ export const Header: React.FC<Props> = ({
       </HeaderTitle>
       <StyledMenu
         mode="horizontal"
-        defaultSelectedKeys={['days']}
+        selectedKeys={[tabKey]}
         onClick={onMenuClick}
       >
-        <Menu.Item key="days">日々</Menu.Item>
-        <Menu.Item key="works">写真</Menu.Item>
-        <Menu.Item key="about">私について</Menu.Item>
+        <Menu.Item key="/days">日々</Menu.Item>
+        <Menu.Item key="/works">写真</Menu.Item>
+        <Menu.Item key="/about">私について</Menu.Item>
       </StyledMenu>
     </StyledHeader>
   )

src/components/pages/About/index.tsx

@@ -50,7 +50,7 @@ export const About: React.FC<Props> = ({
         <Col span={16}>
           <ProfileTypography>
             {profileDescriptions.map(desc => (
-              <Paragraph key="">{desc}</Paragraph>
+              <Paragraph key={desc}>{desc}</Paragraph>
             ))}
           </ProfileTypography>
         </Col>

src/components/templates/Layout/index.tsx

@@ -25,13 +25,15 @@ type Props = ComponentProps<typeof Header> & ComponentProps<typeof Footer>
 export const Layout: React.FC<Props> = ({
   children,
   title,
+  tabKey,
   onTitleClick,
   onMenuClick,
   onTwitterClick,
 }) => {
   return (
     <AntLayout style={{ minHeight: '100vh' }}>
       <Header
+        tabKey={tabKey}
         title={title}
         onTitleClick={onTitleClick}
         onMenuClick={onMenuClick}

src/containers/Layout/hooks/useLayout.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, useCallback } from 'react'
-import { useHistory } from 'react-router'
+import { useHistory, useLocation } from 'react-router'
 
 import { Layout } from 'components/templates/Layout'
 import SiteConfig from 'data/site.json'
@@ -9,10 +9,11 @@ const TWITTER_URL = 'https://twitter.com/'
 
 export const useLayout = (): ComponentProps<typeof Layout> => {
   const history = useHistory()
-
+  const { pathname } = useLocation()
+  const currentKey = pathname === '/' ? '/days' : pathname
   const onMenuClick = useCallback(
     ({ key }) => {
-      history.push(`/${key}`)
+      history.push(key)
     },
     [history]
   )
@@ -28,6 +29,7 @@ export const useLayout = (): ComponentProps<typeof Layout> => {
   }, [])
 
   return {
+    tabKey: currentKey,
     title: SiteConfig.blogTitle,
     onMenuClick,
     onTitleClick,

src/containers/Layout/index.tsx

@@ -5,10 +5,17 @@ import { useLayout } from './hooks/useLayout'
 import { Layout } from 'components/templates/Layout'
 
 export const LayoutContainer: React.FC = ({ children }) => {
-  const { title, onTitleClick, onMenuClick, onTwitterClick } = useLayout()
+  const {
+    title,
+    onTitleClick,
+    onMenuClick,
+    onTwitterClick,
+    tabKey,
+  } = useLayout()
   return (
     <Layout
       title={title}
+      tabKey={tabKey}
       onTitleClick={onTitleClick}
       onMenuClick={onMenuClick}
       onTwitterClick={onTwitterClick}