remove use of session where inapproriate

components/header.js

@@ -7,7 +7,7 @@ import { Button, Container, NavDropdown } from 'react-bootstrap'
 import Price from './price'
 import { useMe } from './me'
 import Head from 'next/head'
-import { signOut, signIn } from 'next-auth/client'
+import { signOut, signIn, useSession } from 'next-auth/client'
 import { useLightning } from './lightning'
 import { useEffect } from 'react'
 import { randInRange } from '../lib/rand'
@@ -30,8 +30,13 @@ export default function Header () {
   const router = useRouter()
   const path = router.asPath.split('?')[0]
   const me = useMe()
+  const [, loading] = useSession()
 
   const Corner = () => {
+    if (loading && !me) {
+      return null
+    }
+
     if (me) {
       return (
         <div className='d-flex align-items-center'>

components/reply.js

@@ -50,12 +50,15 @@ export default function Reply ({ parentId, onSuccess, replyOpen }) {
 
   return (
     <div>
+      {replyOpen
+        ? <div className={styles.replyButtons} />
+        : (
           <div
             className={styles.replyButtons}
             onClick={() => setReply(!reply)}
           >
             {reply ? 'cancel' : 'reply'}
-      </div>
+          </div>)}
       <div className={reply ? `${styles.reply}` : 'd-none'}>
         <Form
           initial={{

components/upvote.js

@@ -2,7 +2,7 @@ import { LightningConsumer } from './lightning'
 import UpArrow from '../svgs/lightning-arrow.svg'
 import styles from './upvote.module.css'
 import { gql, useMutation } from '@apollo/client'
-import { signIn, useSession } from 'next-auth/client'
+import { signIn } from 'next-auth/client'
 import { useFundError } from './fund-error'
 import ActionTooltip from './action-tooltip'
 import { useItemAct } from './item-act'
@@ -10,7 +10,6 @@ import Window from '../svgs/window-2-fill.svg'
 import { useMe } from './me'
 
 export default function UpVote ({ item, className }) {
-  const [session] = useSession()
   const { setError } = useFundError()
   const { setItem } = useItemAct()
   const me = useMe()
@@ -97,7 +96,7 @@ export default function UpVote ({ item, className }) {
             ${item?.meVote ? styles.voted : ''}`
           }
             onClick={
-            session
+            me
               ? async (e) => {
                   e.stopPropagation()
                   if (!item) return

components/user-header.js

@@ -1,5 +1,4 @@
 import { Button } from 'react-bootstrap'
-import { useSession } from 'next-auth/client'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import Nav from 'react-bootstrap/Nav'
@@ -9,6 +8,7 @@ import InputGroup from 'react-bootstrap/InputGroup'
 import * as Yup from 'yup'
 import { gql, useApolloClient, useMutation } from '@apollo/client'
 import styles from './user-header.module.css'
+import { useMe } from './me'
 
 const NAME_QUERY =
 gql`
@@ -26,7 +26,7 @@ gql`
 
 export default function UserHeader ({ user }) {
   const [editting, setEditting] = useState(false)
-  const [session] = useSession()
+  const me = useMe()
   const router = useRouter()
   const client = useApolloClient()
   const [setName] = useMutation(NAME_MUTATION)
@@ -70,7 +70,6 @@ export default function UserHeader ({ user }) {
                   throw new Error({ message: error.toString() })
                 }
                 router.replace(`/${name}`)
-                session.user.name = name
 
                 client.writeFragment({
                   id: `User:${user.id}`,
@@ -102,7 +101,7 @@ export default function UserHeader ({ user }) {
           : (
             <div className='d-flex align-items-center'>
               <h2 className='mb-0'>@{user.name}</h2>
-              {session?.user?.name === user.name &&
+              {me?.name === user.name &&
                 <Button variant='link' onClick={() => setEditting(true)}>edit nym</Button>}
             </div>
             )}