add more filters to recent

api/resolvers/item.js

@@ -126,6 +126,21 @@ export async function filterClause (me, models) {
   return clause
 }
 
+function recentClause (type) {
+  switch (type) {
+    case 'links':
+      return ' AND url IS NOT NULL'
+    case 'discussions':
+      return ' AND url IS NULL AND bio = false AND "pollCost"  IS NULL'
+    case 'polls':
+      return ' AND "pollCost" IS NOT NULL'
+    case 'bios':
+      return ' AND bio = true'
+    default:
+      return ''
+  }
+}
+
 export default {
   Query: {
     itemRepetition: async (parent, { parentId }, { me, models }) => {
@@ -170,7 +185,7 @@ export default {
         comments
       }
     },
-    items: async (parent, { sub, sort, cursor, name, within }, { me, models }) => {
+    items: async (parent, { sub, sort, type, cursor, name, within }, { me, models }) => {
       const decodedCursor = decodeCursor(cursor)
       let items; let user; let pins; let subFull
 
@@ -212,6 +227,7 @@ export default {
             ${subClause(3)}
             ${activeOrMine()}
             ${await filterClause(me, models)}
+            ${recentClause(type)}
             ORDER BY created_at DESC
             OFFSET $2
             LIMIT ${LIMIT}`, decodedCursor.time, decodedCursor.offset, sub || 'NULL')

api/typeDefs/item.js

@@ -2,7 +2,7 @@ import { gql } from 'apollo-server-micro'
 
 export default gql`
   extend type Query {
-    items(sub: String, sort: String, cursor: String, name: String, within: String): Items
+    items(sub: String, sort: String, type: String, cursor: String, name: String, within: String): Items
     moreFlatComments(sort: String!, cursor: String, name: String, within: String): Comments
     item(id: ID!): Item
     comments(id: ID!, sort: String): [Item!]!

components/job-form.js

@@ -185,9 +185,13 @@ export default function JobForm ({ item, sub }) {
         <PromoteJob item={item} sub={sub} storageKeyPrefix={storageKeyPrefix} />
         {item && <StatusControl item={item} />}
         <div className='d-flex align-items-center mt-3'>
+          {item
+            ? <SubmitButton variant='secondary'>save</SubmitButton>
+            : (
               <ActionTooltip overlayText='1000 sats'>
-            <SubmitButton variant='secondary'>{item ? 'save' : <>post <small> 1000 sats</small></>}</SubmitButton>
+                <SubmitButton variant='secondary'>post <small> 1000 sats</small></SubmitButton>
               </ActionTooltip>
+              )}
         </div>
       </Form>
     </>

components/recent-header.js

@@ -1,35 +1,25 @@
-import { Nav, Navbar } from 'react-bootstrap'
+import { Form, Select } from './form'
-import styles from './header.module.css'
+import { useRouter } from 'next/router'
-import Link from 'next/link'
+
+export default function RecentHeader ({ type }) {
+  const router = useRouter()
 
-export default function RecentHeader ({ itemType }) {
   return (
-    <Navbar className='pt-0'>
+    <Form
-      <Nav
+      initial={{
-        className={`${styles.navbarNav} justify-content-around`}
+        type: router.query.type || type || 'posts'
-        activeKey={itemType}
+      }}
     >
-        <Nav.Item>
+      <div className='text-muted font-weight-bold mt-1 mb-3 d-flex justify-content-end align-items-center'>
-          <Link href='/recent' passHref>
+        <Select
-            <Nav.Link
+          groupClassName='mb-0 ml-2'
-              eventKey='posts'
+          className='w-auto'
-              className={styles.navLink}
+          name='type'
-            >
+          size='sm'
-              posts
+          items={['posts', 'comments', 'links', 'discussions', 'polls', 'bios']}
-            </Nav.Link>
+          onChange={(formik, e) => router.push(e.target.value === 'posts' ? '/recent' : `/recent/${e.target.value}`)}
-          </Link>
+        />
-        </Nav.Item>
+      </div>
-        <Nav.Item>
+    </Form>
-          <Link href='/recent/comments' passHref>
-            <Nav.Link
-              eventKey='comments'
-              className={styles.navLink}
-            >
-              comments
-            </Nav.Link>
-          </Link>
-        </Nav.Item>
-      </Nav>
-    </Navbar>
   )
 }

fragments/items.js

@@ -56,8 +56,8 @@ export const ITEM_FIELDS = gql`
 export const ITEMS = gql`
   ${ITEM_FIELDS}
 
-  query items($sub: String, $sort: String, $cursor: String, $name: String, $within: String) {
+  query items($sub: String, $sort: String, $type: String, $cursor: String, $name: String, $within: String) {
-    items(sub: $sub, sort: $sort, cursor: $cursor, name: $name, within: $within) {
+    items(sub: $sub, sort: $sort, type: $type, cursor: $cursor, name: $name, within: $within) {
       cursor
       items {
         ...ItemFields

lib/apollo.js

@@ -50,7 +50,7 @@ function getClient (uri) {
               }
             },
             items: {
-              keyArgs: ['sub', 'sort', 'name', 'within'],
+              keyArgs: ['sub', 'sort', 'type', 'name', 'within'],
               merge (existing, incoming) {
                 if (isFirstPage(incoming.cursor, existing?.items)) {
                   return incoming

pages/recent/[type].js

@@ -0,0 +1,22 @@
+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'
+import { useRouter } from 'next/router'
+
+const variables = { sort: 'recent' }
+export const getServerSideProps = getGetServerSideProps(ITEMS, variables)
+
+export default function Index ({ data: { items: { items, cursor } } }) {
+  const router = useRouter()
+  return (
+    <Layout>
+      <RecentHeader />
+      <Items
+        items={items} cursor={cursor}
+        variables={{ ...variables, type: router.query.type }} rank
+      />
+    </Layout>
+  )
+}

pages/recent/comments.js

@@ -10,7 +10,7 @@ export const getServerSideProps = getGetServerSideProps(MORE_FLAT_COMMENTS, vari
 export default function Index ({ data: { moreFlatComments: { comments, cursor } } }) {
   return (
     <Layout>
-      <RecentHeader itemType='comments' />
+      <RecentHeader type='comments' />
       <CommentsFlat
         comments={comments} cursor={cursor}
         variables={{ sort: 'recent' }} includeParent noReply

pages/recent/index.js

@@ -10,7 +10,7 @@ export const getServerSideProps = getGetServerSideProps(ITEMS, variables)
 export default function Index ({ data: { items: { items, cursor } } }) {
   return (
     <Layout>
-      <RecentHeader itemType='posts' />
+      <RecentHeader type='posts' />
       <Items
         items={items} cursor={cursor}
         variables={variables} rank

pages/users/[when].js

@@ -67,7 +67,7 @@ const dateFormatter = when => {
       case 'forever':
         return `${('0' + (date.getMonth() % 12 + 1)).slice(-2)}/${String(date.getFullYear()).slice(-2)}`
       default:
-        return `${date.getHours() % 12 || 12}${date.getHours() >= 12 ? 'p' : 'a'}`
+        return `${date.getHours() % 12 || 12}${date.getHours() >= 12 ? 'pm' : 'am'}`
     }
   }
 }