collapse 'em

.babelrc

@@ -3,6 +3,18 @@
         "next/babel"
     ],
     "plugins": [
-        "inline-react-svg"
+        [
+            "inline-react-svg",
+            {
+                "svgo": {
+                    "plugins": [
+                        {
+                            "name": "removeViewBox",
+                            "active": false
+                        }
+                    ]
+                }
+            }
+        ]
     ]
 }

api/resolvers/index.js

@@ -1,5 +1,6 @@
 import user from './user'
 import message from './message'
 import item from './item'
+import wallet from './wallet'
 
-export default [user, item, message]
+export default [user, item, message, wallet]

api/resolvers/wallet.js

@@ -0,0 +1,21 @@
+export default {
+  Query: {
+    accounts: async (parent, args, { lnd }) => {
+      console.log('hi')
+      console.log(lnd.wallet.listAccounts)
+      lnd.wallet.listAccounts({}, (err, res) => {
+        console.log(err, res)
+      })
+      return []
+    }
+  },
+
+  Mutation: {
+    createAccount: async (parent, args, { lnd }) => {
+      lnd.default.newAddress({ type: 'p2wpkh', account: 'default' }, (err, res) => {
+        console.log(err, res)
+      })
+      return 'ok'
+    }
+  }
+}

api/typeDefs/index.js

@@ -3,6 +3,7 @@ import { gql } from 'apollo-server-micro'
 import user from './user'
 import message from './message'
 import item from './item'
+import wallet from './wallet'
 
 const link = gql`
   type Query {
@@ -18,4 +19,4 @@ const link = gql`
   }
 `
 
-export default [link, user, item, message]
+export default [link, user, item, message, wallet]

api/typeDefs/wallet.js

@@ -0,0 +1,11 @@
+import { gql } from 'apollo-server-micro'
+
+export default gql`
+  extend type Query {
+    accounts: [String!]
+  }
+
+  extend type Mutation {
+    createAccount: String!
+  }
+`

components/comment.js

@@ -7,6 +7,8 @@ import { useState } from 'react'
 import { gql, useQuery } from '@apollo/client'
 import { timeSince } from '../lib/time'
 import UpVote from './upvote'
+import Eye from '../svgs/eye-fill.svg'
+import EyeClose from '../svgs/eye-close-line.svg'
 
 function Parent ({ item }) {
   const { data } = useQuery(
@@ -44,27 +46,34 @@ function Parent ({ item }) {
 
 export default function Comment ({ item, children, replyOpen, includeParent, cacheId, noComments, noReply }) {
   const [reply, setReply] = useState(replyOpen)
+  const [collapse, setCollapse] = useState(false)
 
   return (
-    <div className={includeParent ? '' : styles.comment}>
+    <div className={includeParent ? '' : `${styles.comment} ${collapse ? styles.collapsed : ''}`}>
       <div className={`${itemStyles.item} ${styles.item}`}>
         <UpVote itemId={item.id} meSats={item.meSats} className={styles.upvote} />
-        <div className={itemStyles.hunk}>
+        <div className={`${itemStyles.hunk} ${styles.hunk}`}>
-          <div className={itemStyles.other}>
+          <div className='d-flex align-items-center'>
-            <span>{item.sats} sats</span>
+            <div className={`${itemStyles.other} ${styles.other}`}>
-            <span> \ </span>
+              <span>{item.sats} sats</span>
-            <span>{item.boost} boost</span>
+              <span> \ </span>
-            <span> \ </span>
+              <span>{item.boost} boost</span>
-            <Link href={`/items/${item.id}`} passHref>
+              <span> \ </span>
-              <a className='text-reset'>{item.ncomments} replies</a>
+              <Link href={`/items/${item.id}`} passHref>
-            </Link>
+                <a className='text-reset'>{item.ncomments} replies</a>
-            <span> \ </span>
+              </Link>
-            <Link href={`/${item.user.name}`} passHref>
+              <span> \ </span>
-              <a>@{item.user.name}</a>
+              <Link href={`/${item.user.name}`} passHref>
-            </Link>
+                <a>@{item.user.name}</a>
-            <span> </span>
+              </Link>
-            <span>{timeSince(new Date(item.createdAt))}</span>
+              <span> </span>
-            {includeParent && <Parent item={item} />}
+              <span>{timeSince(new Date(item.createdAt))}</span>
+              {includeParent && <Parent item={item} />}
+            </div>
+            {!includeParent && (collapse
+              ? <Eye className={styles.collapser} height={10} width={10} onClick={() => setCollapse(false)} />
+              : <EyeClose className={styles.collapser} height={10} width={10} onClick={() => setCollapse(true)} />)}
+
           </div>
           <div className={styles.text}>
             <Text>{item.text}</Text>

components/comment.module.css

@@ -11,6 +11,28 @@
     padding-right: 15px;
 }
 
+.collapsed .hunk {
+    margin-bottom: .5rem;
+}
+
+.collapsed .text,
+.collapsed .children {
+    display: none;
+}
+
+.collapsed .upvote {
+    visibility: hidden;
+    height: 0;
+}
+
+.collapser {
+    cursor: pointer;
+    fill: grey;
+    width: 45px;
+    margin-left: auto;
+    user-select: none;
+}
+
 .reply {
     font-weight: bold;
     cursor: pointer;

components/layout.js

@@ -1,11 +1,19 @@
 import Header from './header'
+import Head from 'next/head'
 import Container from 'react-bootstrap/Container'
 import { LightningProvider } from './lightning'
+import { useRouter } from 'next/router'
 
 export default function Layout ({ noContain, children }) {
+  const router = useRouter()
+  const defaultTitle = router.asPath.split('?')[0].slice(1)
   return (
     <>
       <LightningProvider>
+        <Head>
+          <title>{defaultTitle && `${defaultTitle} \\ `}stacker news</title>
+          <meta name='viewport' content='initial-scale=1.0, width=device-width' />
+        </Head>
         <Header />
         {noContain
           ? children

pages/lnd.js

@@ -0,0 +1,22 @@
+import { gql, useMutation, useQuery } from '@apollo/client'
+import { Button } from 'react-bootstrap'
+import Layout from '../components/layout'
+
+export default function Index () {
+  const [createAccount] = useMutation(gql`
+    mutation {
+      createAccount
+    }`)
+  const { data } = useQuery(gql`
+  {
+    accounts
+  }`)
+  return (
+    <Layout>
+      <Button onClick={createAccount}>create account</Button>
+      {data && data.accounts.map(account =>
+        <div key={account}>account</div>
+      )}
+    </Layout>
+  )
+}

svgs/eye-close-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="M10.13 15.842l-.788 2.94-1.931-.518.787-2.939a10.988 10.988 0 0 1-3.237-1.872l-2.153 2.154-1.415-1.415 2.154-2.153a10.957 10.957 0 0 1-2.371-5.07l.9-.165A16.923 16.923 0 0 0 12 10c3.704 0 7.131-1.185 9.924-3.196l.9.164a10.957 10.957 0 0 1-2.37 5.071l2.153 2.153-1.415 1.415-2.153-2.154a10.988 10.988 0 0 1-3.237 1.872l.787 2.94-1.931.517-.788-2.94a11.072 11.072 0 0 1-3.74 0z"/></svg>

svgs/eye-close-line.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="M9.342 18.782l-1.931-.518.787-2.939a10.988 10.988 0 0 1-3.237-1.872l-2.153 2.154-1.415-1.415 2.154-2.153a10.957 10.957 0 0 1-2.371-5.07l1.968-.359C3.903 10.812 7.579 14 12 14c4.42 0 8.097-3.188 8.856-7.39l1.968.358a10.957 10.957 0 0 1-2.37 5.071l2.153 2.153-1.415 1.415-2.153-2.154a10.988 10.988 0 0 1-3.237 1.872l.787 2.94-1.931.517-.788-2.94a11.072 11.072 0 0 1-3.74 0l-.788 2.94z"/></svg>

svgs/eye-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="M1.181 12C2.121 6.88 6.608 3 12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9zM12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-2a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>

svgs/eye-line.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="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/></svg>

svgs/subtract-line.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="M5 11h14v2H5z"/></svg>