add link to recent/comments

components/header.js

@@ -27,6 +27,8 @@ export default function Header ({ sub }) {
   const [fired, setFired] = useState()
   const me = useMe()
   const prefix = sub ? `/~${sub}` : ''
+  // there's always at least 2 on the split, e.g. '/' yields ['','']
+  const topNavKey = path.split('/')[sub ? 2 : 1]
   const { data: subLatestPost } = useQuery(gql`
     query subLatestPost($name: ID!) {
       subLatestPost(name: $name)
@@ -53,7 +55,7 @@ export default function Header ({ sub }) {
             <link rel='shortcut icon' href={me?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />
           </Head>
           <Link href='/notifications' passHref>
-            <Nav.Link className='pl-0 position-relative'>
+            <Nav.Link eventKey='notifications' className='pl-0 position-relative'>
               <NoteIcon />
               {me?.hasNewNotes &&
                 <span className={styles.notification}>
@@ -65,12 +67,12 @@ export default function Header ({ sub }) {
             <NavDropdown
               className={styles.dropdown} title={
                 <Link href={`/${me?.name}`} passHref>
-                  <Nav.Link as='div' className='p-0' onClick={e => e.preventDefault()}>{`@${me?.name}`}</Nav.Link>
+                  <Nav.Link eventKey={me?.name} as='div' className='p-0' onClick={e => e.preventDefault()}>{`@${me?.name}`}</Nav.Link>
                 </Link>
               } alignRight
             >
               <Link href={'/' + me?.name} passHref>
-                <NavDropdown.Item>
+                <NavDropdown.Item eventKey={me?.name}>
                   profile
                   {me && !me.bioId &&
                     <div className='p-1 d-inline-block bg-secondary ml-1'>
@@ -79,14 +81,14 @@ export default function Header ({ sub }) {
                 </NavDropdown.Item>
               </Link>
               <Link href='/wallet' passHref>
-                <NavDropdown.Item>wallet</NavDropdown.Item>
+                <NavDropdown.Item eventKey='wallet'>wallet</NavDropdown.Item>
               </Link>
               <Link href='/satistics?inc=invoice,withdrawal,stacked,spent' passHref>
-                <NavDropdown.Item>satistics</NavDropdown.Item>
+                <NavDropdown.Item eventKey='satistics'>satistics</NavDropdown.Item>
               </Link>
               <NavDropdown.Divider />
               <Link href='/invites' passHref>
-                <NavDropdown.Item>invites
+                <NavDropdown.Item eventKey='invites'>invites
                   {me && !me.hasInvites &&
                     <div className='p-1 d-inline-block bg-success ml-1'>
                       <span className='invisible'>{' '}</span>
@@ -96,7 +98,7 @@ export default function Header ({ sub }) {
               <NavDropdown.Divider />
               <div className='d-flex align-items-center'>
                 <Link href='/settings' passHref>
-                  <NavDropdown.Item>settings</NavDropdown.Item>
+                  <NavDropdown.Item eventKey='settings'>settings</NavDropdown.Item>
                 </Link>
               </div>
               <NavDropdown.Divider />
@@ -110,7 +112,7 @@ export default function Header ({ sub }) {
           {me &&
             <Nav.Item>
               <Link href='/wallet' passHref>
-                <Nav.Link className='text-success px-0 text-nowrap'><WalletSummary me={me} /></Nav.Link>
+                <Nav.Link eventKey='wallet' className='text-success px-0 text-nowrap'><WalletSummary me={me} /></Nav.Link>
               </Link>
             </Nav.Item>}
         </div>
@@ -132,13 +134,13 @@ export default function Header ({ sub }) {
       <>
         <Nav.Item className={className}>
           <Link href={prefix + '/recent'} passHref>
-            <Nav.Link className={styles.navLink}>recent</Nav.Link>
+            <Nav.Link eventKey='recent' className={styles.navLink}>recent</Nav.Link>
           </Link>
         </Nav.Item>
         {!prefix &&
           <Nav.Item className={className}>
             <Link href='/top/posts/week' passHref>
-              <Nav.Link className={styles.navLink}>top</Nav.Link>
+              <Nav.Link eventKey='top' className={styles.navLink}>top</Nav.Link>
             </Link>
           </Nav.Item>}
         <Nav.Item className={className}>
@@ -157,7 +159,7 @@ export default function Header ({ sub }) {
         {me &&
           <Nav.Item className={className}>
             <Link href={prefix + '/post'} passHref>
-              <Nav.Link className={styles.navLinkButton}>post</Nav.Link>
+              <Nav.Link eventKey='post' className={styles.navLinkButton}>post</Nav.Link>
             </Link>
           </Nav.Item>}
       </>
@@ -170,7 +172,7 @@ export default function Header ({ sub }) {
         <Navbar className='pb-0 pb-md-1'>
           <Nav
             className={styles.navbarNav}
-            activeKey={path}
+            activeKey={topNavKey}
           >
             <div className='d-flex'>
               <Link href='/' passHref>
@@ -194,7 +196,7 @@ export default function Header ({ sub }) {
         <Navbar className='pt-0 pb-1 d-md-none'>
           <Nav
             className={`${styles.navbarNav} justify-content-around`}
-            activeKey={path}
+            activeKey={topNavKey}
           >
             <NavItems />
           </Nav>

components/recent-header.js

@@ -0,0 +1,35 @@
+import { Nav, Navbar } from 'react-bootstrap'
+import styles from './header.module.css'
+import Link from 'next/link'
+
+export default function RecentHeader ({ itemType }) {
+  return (
+    <Navbar className='pt-0'>
+      <Nav
+        className={`${styles.navbarNav} justify-content-around`}
+        activeKey={itemType}
+      >
+        <Nav.Item>
+          <Link href='/recent' passHref>
+            <Nav.Link
+              eventKey='posts'
+              className={styles.navLink}
+            >
+              posts
+            </Nav.Link>
+          </Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Link href='/recent/comments' passHref>
+            <Nav.Link
+              eventKey='comments'
+              className={styles.navLink}
+            >
+              comments
+            </Nav.Link>
+          </Link>
+        </Nav.Item>
+      </Nav>
+    </Navbar>
+  )
+}

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "NODE_OPTIONS='--trace-warnings' next dev",
+    "dev": "NODE_OPTIONS='--trace-warnings --inspect' next dev",
     "build": "next build",
     "migrate": "prisma migrate deploy",
     "start": "NODE_OPTIONS='--trace-warnings' next start -p $PORT"

pages/recent/comments.js

@@ -2,6 +2,7 @@ import Layout from '../../components/layout'
 import { getGetServerSideProps } from '../../api/ssrApollo'
 import { MORE_FLAT_COMMENTS } from '../../fragments/comments'
 import CommentsFlat from '../../components/comments-flat'
+import RecentHeader from '../../components/recent-header'
 
 const variables = { sort: 'recent' }
 export const getServerSideProps = getGetServerSideProps(MORE_FLAT_COMMENTS, variables)
@@ -9,6 +10,7 @@ export const getServerSideProps = getGetServerSideProps(MORE_FLAT_COMMENTS, vari
 export default function Index ({ data: { moreFlatComments: { comments, cursor } } }) {
   return (
     <Layout>
+      <RecentHeader itemType='comments' />
       <CommentsFlat
         comments={comments} cursor={cursor}
         variables={{ sort: 'recent' }} includeParent noReply

pages/recent/index.js

@@ -2,6 +2,7 @@ import Layout from '../../components/layout'
 import Items from '../../components/items'
 import { getGetServerSideProps } from '../../api/ssrApollo'
 import { ITEMS } from '../../fragments/items'
+import RecentHeader from '../../components/recent-header'
 
 const variables = { sort: 'recent' }
 export const getServerSideProps = getGetServerSideProps(ITEMS, variables)
@@ -9,6 +10,7 @@ export const getServerSideProps = getGetServerSideProps(ITEMS, variables)
 export default function Index ({ data: { items: { items, cursor } } }) {
   return (
     <Layout>
+      <RecentHeader itemType='posts' />
       <Items
         items={items} cursor={cursor}
         variables={variables} rank