turn #1063 logic into a component for use in all comment lists

components/comment.js

@@ -10,7 +10,6 @@ import EyeClose from '@/svgs/eye-close-line.svg'
 import { useRouter } from 'next/router'
 import CommentEdit from './comment-edit'
 import { ANON_USER_ID, COMMENT_DEPTH_LIMIT, UNKNOWN_LINK_REL } from '@/lib/constants'
-import { ignoreClick } from '@/lib/clicks'
 import PayBounty from './pay-bounty'
 import BountyIcon from '@/svgs/bounty-bag.svg'
 import ActionTooltip from './action-tooltip'
@@ -25,6 +24,7 @@ import { DownZap } from './dont-link-this'
 import Skull from '@/svgs/death-skull.svg'
 import { commentSubTreeRootId } from '@/lib/item'
 import Pin from '@/svgs/pushpin-fill.svg'
+import LinkToContext from './link-to-context'
 
 function Parent ({ item, rootText }) {
   const root = useRoot()
@@ -76,17 +76,17 @@ export function CommentFlat ({ item, rank, siblingComments, ...props }) {
             {rank}
           </div>)
         : <div />}
-      <div
+      <LinkToContext
-        className={`clickToContext ${siblingComments ? 'py-3' : 'py-2'}`}
+        className={siblingComments ? 'py-3' : 'py-2'}
         onClick={e => {
-          if (ignoreClick(e)) return
           router.push(href, as)
         }}
+        href={href}
       >
         <RootProvider root={item.root}>
           <Comment item={item} {...props} />
         </RootProvider>
-      </div>
+      </LinkToContext>
     </>
   )
 }

components/items.js

@@ -66,7 +66,7 @@ export default function Items ({ ssrData, variables = {}, query, destructureData
 export function ListItem ({ item, ...props }) {
   return (
     item.parentId
-      ? <CommentFlat item={item} noReply includeParent clickToContext {...props} />
+      ? <CommentFlat item={item} noReply includeParent {...props} />
       : (item.isJob
           ? <ItemJob item={item} />
           : (item.searchText

components/link-to-context.js

@@ -0,0 +1,17 @@
+import classNames from 'classnames'
+import styles from './link-to-context.module.css'
+import Link from 'next/link'
+
+export default function LinkToContext ({ children, onClick, href, className, ...props }) {
+  return (
+    <div className={classNames(className, styles.linkBoxParent, 'clickToContext')}>
+      <Link
+        className={styles.linkBox}
+        onClick={onClick}
+        href={href}
+        {...props}
+      />
+      {children}
+    </div>
+  )
+}

components/link-to-context.module.css

@@ -0,0 +1,30 @@
+.linkBox {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.linkBox ~ * {
+    position: relative;
+}
+
+.linkBoxParent {
+    position: relative;
+}
+
+.linkBoxParent > * {
+    pointer-events: none;
+}
+
+.linkBoxParent :global(.upvoteParent),
+.linkBoxParent :global(.pointer),
+.linkBoxParent a,
+.linkBoxParent form,
+.linkBoxParent textarea,
+.linkBoxParent button,
+.linkBoxParent input,
+.linkBoxParent iframe {
+    pointer-events: auto !important;
+}

components/notifications.js

@@ -28,6 +28,7 @@ import BountyIcon from '@/svgs/bounty-bag.svg'
 import { LongCountdown } from './countdown'
 import { nextBillingWithGrace } from '@/lib/territory'
 import { commentSubTreeRootId } from '@/lib/item'
+import LinkToContext from './link-to-context'
 
 function Notification ({ n, fresh }) {
   const type = n.__typename
@@ -60,26 +61,23 @@ function NotificationLayout ({ children, nid, href, as, fresh }) {
   const router = useRouter()
   if (!href) return <div className={fresh ? styles.fresh : ''}>{children}</div>
   return (
-    <div
+    <LinkToContext
-      className={`position-relative clickToContext ${styles.notificationLayout} ${fresh ? styles.fresh : ''} ${router?.query?.nid === nid ? 'outline-it' : ''}`}
+      className={`${fresh ? styles.fresh : ''} ${router?.query?.nid === nid ? 'outline-it' : ''}`}
+      onClick={async (e) => {
+        e.preventDefault()
+        nid && await router.replace({
+          pathname: router.pathname,
+          query: {
+            ...router.query,
+            nid
+          }
+        }, router.asPath, { ...router.options, shallow: true })
+        router.push(href, as)
+      }}
+      href={href}
     >
-      <Link
-        className={styles.linkBox}
-        onClick={async (e) => {
-          e.preventDefault()
-          nid && await router.replace({
-            pathname: router.pathname,
-            query: {
-              ...router.query,
-              nid
-            }
-          }, router.asPath, { ...router.options, shallow: true })
-          router.push(href, as)
-        }}
-        href={typeof href === 'string' ? href : href.query.commentId ? as + '?commentId=' + href.query.commentId : as}
-      />
       {children}
-    </div>
+    </LinkToContext>
   )
 }
 

components/notifications.module.css

@@ -26,31 +26,4 @@
 
 .subFormGroup > div {
     margin-right: 0 !important;
-}
-
-.linkBox {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
-.linkBox ~ * {
-    position: relative;
-}
-
-.notificationLayout > * {
-    pointer-events: none;
-}
-
-.notificationLayout :global(.upvoteParent),
-.notificationLayout :global(.pointer),
-.notificationLayout a,
-.notificationLayout form,
-.notificationLayout textarea,
-.notificationLayout button,
-.notificationLayout input,
-.notificationLayout iframe {
-    pointer-events: auto !important;
 }