refine reply-only notifications

api/resolvers/notifications.js

@@ -5,7 +5,7 @@ import { getInvoice } from './wallet'
 
 export default {
   Query: {
-    notifications: async (parent, { cursor, filter }, { me, models }) => {
+    notifications: async (parent, { cursor, inc }, { me, models }) => {
       const decodedCursor = decodeCursor(cursor)
       if (!me) {
         throw new AuthenticationError('you must be logged in')
@@ -65,7 +65,7 @@ export default {
       // 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(
-        filter === 'replies'
+        inc === 'replies'
           ? `SELECT DISTINCT "Item".id::TEXT, "Item".created_at AS "sortTime", NULL::BIGINT as "earnedSats",
               'Reply' AS type
              FROM "Item"

api/typeDefs/notifications.js

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

components/header.js

@@ -36,7 +36,7 @@ export default function Header ({ sub }) {
           </Head>
           <Link href='/notifications' passHref>
             <Nav.Link className='pl-0 position-relative'>
-              <NoteIcon className='fill-lgrey' />
+              <NoteIcon />
               {me?.hasNewNotes &&
                 <span className={styles.notification}>
                   <span className='invisible'>{' '}</span>

components/header.module.css

@@ -23,8 +23,8 @@
     background-color: transparent !important;
 }
 
-.navLink:first-child {
+.navLink.active svg {
-    padding-left: 0 !important;
+    fill: var(--theme-navLinkActive);
 }
 
 .notification {

fragments/notifications.js

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

pages/notifications.js

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

pages/notifications/[filter].js

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

styles/globals.scss

@@ -371,6 +371,14 @@ textarea.form-control {
   color: var(--theme-navLinkActive) !important;
 }
 
+.nav-link svg {
+  fill: var(--theme-navLink);
+}
+
+.nav-link.active svg {
+  fill: var(--theme-navLinkActive);
+}
+
 .fill-grey {
   fill: var(--theme-grey);
 }

svgs/chat-3-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.291 20.824L2 22l1.176-5.291A9.956 9.956 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.956 9.956 0 0 1-4.709-1.176z"/></svg>