allow just showing replies in notifications

api/resolvers/notifications.js

@@ -5,7 +5,7 @@ import { getInvoice } from './wallet'
 
 export default {
   Query: {
-    notifications: async (parent, { cursor }, { me, models }) => {
+    notifications: async (parent, { cursor, filter }, { me, models }) => {
       const decodedCursor = decodeCursor(cursor)
       if (!me) {
         throw new AuthenticationError('you must be logged in')
@@ -64,8 +64,18 @@ export default {
       // HACK to make notifications faster, we only return a limited sub set of the unioned
       // queries ... we only ever need at most LIMIT+current offset in the child queries to
       // have enough items to return in the union
-      const notifications = await models.$queryRaw(`
+      const notifications = await models.$queryRaw(
-        (SELECT DISTINCT "Item".id::TEXT, "Item".created_at AS "sortTime", NULL::BIGINT as "earnedSats",
+        filter === 'replies'
+          ? `SELECT DISTINCT "Item".id::TEXT, "Item".created_at AS "sortTime", NULL::BIGINT as "earnedSats",
+              'Reply' AS type
+             FROM "Item"
+             JOIN "Item" p ON "Item".path <@ p.path
+             WHERE p."userId" = $1
+              AND "Item"."userId" <> $1 AND "Item".created_at <= $2
+              ORDER BY "sortTime" DESC
+             OFFSET $3
+             LIMIT ${LIMIT}`
+          : `(SELECT DISTINCT "Item".id::TEXT, "Item".created_at AS "sortTime", NULL::BIGINT as "earnedSats",
           'Reply' AS type
           FROM "Item"
           JOIN "Item" p ON "Item".path <@ p.path

api/typeDefs/notifications.js

@@ -2,7 +2,7 @@ import { gql } from 'apollo-server-micro'
 
 export default gql`
   extend type Query {
-    notifications(cursor: String): Notifications
+    notifications(cursor: String, filter: String): Notifications
   }
 
   type Votification {

fragments/notifications.js

@@ -6,8 +6,8 @@ export const NOTIFICATIONS = gql`
   ${ITEM_FIELDS}
   ${INVITE_FIELDS}
 
-  query Notifications($cursor: String) {
+  query Notifications($cursor: String, $filter: String) {
-    notifications(cursor: $cursor) {
+    notifications(cursor: $cursor, filter: $filter) {
       cursor
       lastChecked
       notifications {

pages/notifications.js

@@ -1,17 +0,0 @@
-import { getGetServerSideProps } from '../api/ssrApollo'
-import Layout from '../components/layout'
-import Notifications from '../components/notifications'
-import { NOTIFICATIONS } from '../fragments/notifications'
-
-export const getServerSideProps = getGetServerSideProps(NOTIFICATIONS)
-
-export default function NotificationPage ({ data: { notifications: { notifications, cursor, lastChecked } } }) {
-  return (
-    <Layout>
-      <Notifications
-        notifications={notifications} cursor={cursor}
-        lastChecked={lastChecked}
-      />
-    </Layout>
-  )
-}

pages/notifications/[filter].js

@@ -0,0 +1,5 @@
+import NotificationPage, { getServerSideProps as getSSProps } from './index'
+
+export const getServerSideProps = getSSProps
+
+export default NotificationPage

pages/notifications/index.js

@@ -0,0 +1,55 @@
+import { Nav, Navbar } from 'react-bootstrap'
+import { getGetServerSideProps } from '../../api/ssrApollo'
+import Layout from '../../components/layout'
+import Notifications from '../../components/notifications'
+import { NOTIFICATIONS } from '../../fragments/notifications'
+import styles from '../../components/header.module.css'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export const getServerSideProps = getGetServerSideProps(NOTIFICATIONS)
+
+export default function NotificationPage ({ data: { notifications: { notifications, cursor, lastChecked } } }) {
+  const router = useRouter()
+
+  return (
+    <Layout>
+      <NotificationHeader />
+      <Notifications
+        notifications={notifications} cursor={cursor}
+        lastChecked={lastChecked} variables={{ filter: router.query?.filter }}
+      />
+    </Layout>
+  )
+}
+
+export function NotificationHeader () {
+  const router = useRouter()
+  return (
+    <Navbar className='pt-0'>
+      <Nav
+        className={`${styles.navbarNav} justify-content-around`}
+        activeKey={router.asPath}
+      >
+        <Nav.Item>
+          <Link href='/notifications' passHref>
+            <Nav.Link
+              className={styles.navLink}
+            >
+              all
+            </Nav.Link>
+          </Link>
+        </Nav.Item>
+        <Nav.Item>
+          <Link href='/notifications/replies' passHref>
+            <Nav.Link
+              className={styles.navLink}
+            >
+              replies
+            </Nav.Link>
+          </Link>
+        </Nav.Item>
+      </Nav>
+    </Navbar>
+  )
+}