improve resolver and provide sats/$

api/resolvers/item.js

@@ -1,5 +1,21 @@
 import { UserInputError, AuthenticationError } from 'apollo-server-micro'
 
+async function comments (models, id) {
+  const flat = await models.$queryRaw(`
+        WITH RECURSIVE base AS (
+          ${SELECT}, ARRAY[row_number() OVER (${ORDER_BY_SATS}, "Item".path)] AS sort_path
+          FROM "Item"
+          ${LEFT_JOIN_SATS}
+          WHERE "parentId" = ${id}
+        UNION ALL
+          ${SELECT}, p.sort_path || row_number() OVER (${ORDER_BY_SATS}, "Item".path)
+          FROM base p
+          JOIN "Item" ON ltree2text(subpath("Item"."path", 0, -1)) = p."path"
+          ${LEFT_JOIN_SATS})
+        SELECT * FROM base ORDER BY sort_path`)
+  return nestComments(flat, id)[0]
+}
+
 export default {
   Query: {
     items: async (parent, args, { models }) => {
@@ -18,10 +34,13 @@ export default {
         ORDER BY created_at DESC`)
     },
     item: async (parent, { id }, { models }) => {
-      return (await models.$queryRaw(`
+      const item = (await models.$queryRaw(`
         ${SELECT}
         FROM "Item"
         WHERE id = ${id}`))[0]
+
+      item.comments = comments(models, id)
+      return item
     },
     userItems: async (parent, { userId }, { models }) => {
       return await models.$queryRaw(`
@@ -126,22 +145,6 @@ export default {
         WHERE path <@ text2ltree(${item.path}) AND id != ${item.id}`
       return count
     },
-    comments: async (item, args, { models }) => {
-      const flat = await models.$queryRaw(`
-        WITH RECURSIVE base AS (
-          ${SELECT}, ARRAY[row_number() OVER (${ORDER_BY_SATS}, "Item".path)] AS sort_path
-          FROM "Item"
-          ${LEFT_JOIN_SATS}
-          WHERE "parentId" = ${item.id}
-        UNION ALL
-          ${SELECT}, p.sort_path || row_number() OVER (${ORDER_BY_SATS}, "Item".path)
-          FROM base p
-          JOIN "Item" ON ltree2text(subpath("Item"."path", 0, -1)) = p."path"
-          ${LEFT_JOIN_SATS})
-        SELECT * FROM base ORDER BY sort_path`)
-      const comments = nestComments(flat, item.id)[0]
-      return comments
-    },
     sats: async (item, args, { models }) => {
       const { sum: { sats } } = await models.vote.aggregate({
         sum: {

components/header.js

@@ -22,7 +22,7 @@ export default function Header () {
           <Link href={'/' + session.user.name} passHref>
             <NavDropdown.Item>profile</NavDropdown.Item>
           </Link>
-          <NavDropdown.Item className='text-muted' onClick={signOut}>logout</NavDropdown.Item>
+          <NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>
         </NavDropdown>
       )
     } else {
@@ -34,7 +34,7 @@ export default function Header () {
     <>
       <Container className='px-sm-0'>
         <Navbar className={styles.navbar}>
-          <Nav className='w-100 justify-content-sm-between justify-content-start flex-wrap align-items-center' activeKey={router.asPath.split('?')[0]}>
+          <Nav className='w-100 justify-content-between flex-wrap align-items-center' activeKey={router.asPath.split('?')[0]}>
             <Link href='/' passHref>
               <Navbar.Brand className={`${styles.brand} mr-2 d-none d-sm-block`}>STACKER NEWS</Navbar.Brand>
             </Link>

components/layout.js

@@ -10,7 +10,7 @@ export default function Layout ({ noContain, children }) {
         {noContain
           ? children
           : (
-            <Container className='my-1 px-sm-0'>
+            <Container className='my-1 mb-5 px-sm-0'>
               {children}
             </Container>
             )}

components/price.js

@@ -1,8 +1,12 @@
+import { useState } from 'react'
+import { Button } from 'react-bootstrap'
 import useSWR from 'swr'
 
 const fetcher = url => fetch(url).then(res => res.json())
 
 export default function Price () {
+  const [asSats, setAsSats] = useState(false)
+
   const { data } = useSWR(
     'https://api.coinbase.com/v2/prices/BTC-USD/spot',
     fetcher,
@@ -12,5 +16,19 @@ export default function Price () {
 
   if (!data) return null
 
-  return '$' + data.data.amount
+  const fixed = n => Number.parseFloat(n).toFixed(2)
+  const handleClick = () => setAsSats(!asSats)
+  if (asSats) {
+    return (
+      <Button className='text-reset' onClick={handleClick} variant='link'>
+        {fixed(100000000 / data.data.amount) + ' sats/$'}
+      </Button>
+    )
+  }
+
+  return (
+    <Button className='text-reset' onClick={handleClick} variant='link'>
+      {'$' + fixed(data.data.amount)}
+    </Button>
+  )
 }

pages/api/graphql.js

@@ -7,6 +7,7 @@ import { getSession } from 'next-auth/client'
 const apolloServer = new ApolloServer({
   typeDefs,
   resolvers,
+  tracing: true,
   context: async ({ req }) => {
     const session = await getSession({ req })
     return {