wip: toggle via mutation, footer placement

Author: Soxasora

api/resolvers/user.js

@@ -927,6 +927,14 @@ export default {
 
       await models.user.update({ where: { id: me.id }, data: { diagnostics } })
       return diagnostics
+    },
+    toggleLiveComments: async (parent, { pauseLiveComments }, { me, models }) => {
+      if (!me) {
+        throw new GqlAuthenticationError()
+      }
+
+      await models.user.update({ where: { id: me.id }, data: { pauseLiveComments } })
+      return pauseLiveComments
     }
   },
 

api/typeDefs/user.js

@@ -57,6 +57,7 @@ export default gql`
     deleteApiKey(id: ID!): User
     disableFreebies: Boolean
     setDiagnostics(diagnostics: Boolean!): Boolean
+    toggleLiveComments(pauseLiveComments: Boolean!): Boolean!
   }
 
   type User {

components/comments.js

@@ -10,9 +10,8 @@ import MoreFooter from './more-footer'
 import { FULL_COMMENTS_THRESHOLD } from '@/lib/constants'
 import useLiveComments from './use-live-comments'
 import { useCommentsNavigatorContext } from './use-comments-navigator'
-import ActionTooltip from './action-tooltip'
 
-export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, commentSats, pauseLiveComments, setPauseLiveComments }) {
+export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, commentSats }) {
   const router = useRouter()
   const sort = router.query.sort || defaultCommentSort(pinned, bio, parentCreatedAt)
 
@@ -31,17 +30,6 @@ export function CommentsHeader ({ handleSort, pinned, bio, parentCreatedAt, comm
         <Nav.Item className='text-muted'>
           {numWithUnits(commentSats)}
         </Nav.Item>
-        <Nav.Item>
-          <Nav.Link
-            eventKey='live'
-            className={styles.navLink}
-            onClick={() => setPauseLiveComments(!pauseLiveComments)}
-          >
-            <ActionTooltip notForm placement='top' overlayText={pauseLiveComments ? 'resume live comments' : 'pause live comments'}>
-              <div className={`${styles.newCommentDot} ${pauseLiveComments ? styles.paused : ''}`} />
-            </ActionTooltip>
-          </Nav.Link>
-        </Nav.Item>
         <div className='ms-auto d-flex'>
           <Nav.Item>
             <Nav.Link
@@ -83,7 +71,7 @@ export default function Comments ({
   const router = useRouter()
 
   // fetch new comments that arrived after the lastCommentAt, and update the item.comments field in cache
-  const { pauseLiveComments, setPauseLiveComments } = useLiveComments(parentId, lastCommentAt || parentCreatedAt, router.query.sort)
+  useLiveComments(parentId, lastCommentAt || parentCreatedAt, router.query.sort)
 
   // new comments navigator, tracks new comments and provides navigation controls
   const { navigator } = useCommentsNavigatorContext()
@@ -106,8 +94,6 @@ export default function Comments ({
                 query: sort === defaultCommentSort(pinned, bio, parentCreatedAt) ? undefined : { sort }
               }, { scroll: false })
             }}
-            pauseLiveComments={pauseLiveComments}
-            setPauseLiveComments={setPauseLiveComments}
           />
         : null}
       {pins.map(item => (

components/footer.js

@@ -16,6 +16,7 @@ import Rewards from './footer-rewards'
 import useDarkMode from './dark-mode'
 import ActionTooltip from './action-tooltip'
 import { useAnimationEnabled } from '@/components/animation'
+import { useLiveCommentsToggle } from './use-live-comments'
 
 const RssPopover = (
   <Popover>
@@ -147,6 +148,8 @@ export default function Footer ({ links = true }) {
 
   const [animationEnabled, toggleAnimation] = useAnimationEnabled()
 
+  const [pauseLiveComments, toggleLiveComments] = useLiveCommentsToggle()
+
   const DarkModeIcon = darkMode ? Sun : Moon
   const LnIcon = animationEnabled ? No : Bolt
 
@@ -164,6 +167,11 @@ export default function Footer ({ links = true }) {
               <ActionTooltip notForm overlayText={`${animationEnabled ? 'disable' : 'enable'} lightning animations`}>
                 <LnIcon onClick={toggleAnimation} width={20} height={20} className='ms-2 fill-grey theme' suppressHydrationWarning />
               </ActionTooltip>
+              <ActionTooltip notForm overlayText={`${pauseLiveComments ? 'disable' : 'enable'} live comments`}>
+                <div className='nav-link p-2 d-inline-flex' style={{ cursor: 'pointer' }} onClick={toggleLiveComments} suppressHydrationWarning>
+                  live comments {pauseLiveComments ? 'on' : 'off'}
+                </div>
+              </ActionTooltip>
             </div>
             <div className='mb-0' style={{ fontWeight: 500 }}>
               <Rewards />

components/use-live-comments.js

@@ -2,8 +2,9 @@ import preserveScroll from './preserve-scroll'
 import { GET_NEW_COMMENTS } from '../fragments/comments'
 import { useEffect, useState } from 'react'
 import { SSR, COMMENT_DEPTH_LIMIT } from '../lib/constants'
-import { useQuery, useApolloClient } from '@apollo/client'
+import { useQuery, useApolloClient, useMutation } from '@apollo/client'
 import { commentsViewedAfterComment } from '../lib/new-comments'
+import { gql } from 'graphql-tag'
 import {
   updateItemQuery,
   updateCommentFragment,
@@ -127,3 +128,35 @@ export default function useLiveComments (rootId, after, sort) {
 
   return { pauseLiveComments, setPauseLiveComments }
 }
+
+export function useLiveCommentsToggle () {
+  const { me } = useMe()
+  const [pauseLiveComments, setPauseLiveComments] = useState(me?.privates?.pauseLiveComments)
+
+  const [mutate] = useMutation(
+    gql`
+      mutation toggleLiveComments($pauseLiveComments: Boolean!) {
+        toggleLiveComments(pauseLiveComments: $pauseLiveComments)
+      }`, {
+      update (cache, { data: { toggleLiveComments } }) {
+        cache.modify({
+          id: `User:${me.id}`,
+          fields: {
+            privates: (existing) => ({
+              ...existing,
+              pauseLiveComments: toggleLiveComments
+            })
+          },
+          optimistic: true
+        })
+        setPauseLiveComments(toggleLiveComments)
+      }
+    }
+  )
+
+  const toggle = () => {
+    mutate({ variables: { pauseLiveComments: !pauseLiveComments } })
+  }
+
+  return [pauseLiveComments, toggle]
+}