Refactor post and comment handling; enhance sharing logic

wsd-frontend/next.config.mjs

@@ -42,42 +42,42 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 
 export default withPWA(
   withSentryConfig(withBundleAnalyzer(nextConfig), {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
 
-    org: 'why-so-dank',
-    project: 'wsd-front-end',
+  org: 'why-so-dank',
+  project: 'wsd-front-end',
 
-    // Only print logs for uploading source maps in CI
-    silent: !process.env.CI,
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
 
-    // For all available options, see:
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: true,
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
 
-    // Automatically annotate React components to show their full name in breadcrumbs and session replay
-    reactComponentAnnotation: {
-      enabled: true,
-    },
+  // Automatically annotate React components to show their full name in breadcrumbs and session replay
+  reactComponentAnnotation: {
+    enabled: true,
+  },
 
-    // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-    // This can increase your server load as well as your hosting bill.
-    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-    // side errors will fail.
-    tunnelRoute: '/monitoring',
+  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  tunnelRoute: '/monitoring',
 
-    // Hides source maps from generated client bundles
-    hideSourceMaps: true,
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
 
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
 
-    // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
-    // See the following for more information:
-    // https://docs.sentry.io/product/crons/
-    // https://vercel.com/docs/cron-jobs
-    automaticVercelMonitors: true,
+  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: true,
   })
 )

wsd-frontend/src/app/(app)/posts/[hex]/comment/[commentHex]/page.tsx

@@ -0,0 +1,58 @@
+import { type Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import _ from 'lodash'
+
+import MemePost from '@/components/wsd/MemePost/MemePost'
+
+import { includesType } from '@/api'
+import config from '@/config'
+import { getWSDMetadata } from '@/lib/metadata'
+import { getWSDAPI } from '@/lib/serverHooks'
+import { InvalidHEXError, hexToUUIDv4, suppress } from '@/lib/utils'
+
+export async function generateMetadata(props: {
+  params: Promise<{ hex: string; commentHex?: string }>
+}): Promise<Metadata | undefined> {
+  const params = await props.params
+  const wsd = getWSDAPI()
+  const postId = suppress<string, undefined>([InvalidHEXError], () => hexToUUIDv4(params.hex))
+  const commentParamId = params.commentHex
+
+  if (!_.isUndefined(postId)) {
+    const { data: post } = await wsd.post(postId, { include: 'tags' })
+    if (!_.isUndefined(post)) {
+      if (!_.isUndefined(commentParamId)) {
+        const commentId = suppress<string, undefined>([InvalidHEXError], () => hexToUUIDv4(commentParamId))
+        if (!_.isUndefined(commentId)) {
+          const { data: comment } = await wsd.postComment(commentId, { include: 'user' })
+          if (!_.isUndefined(comment)) {
+            const commentData = includesType(comment, 'user', 'User')
+
+            // @TODO: Handle comment body
+            return await getWSDMetadata({
+              title: `${commentData.user.username} - commented on ${post.title}`,
+              image: post.is_nsfw ? config.nsfw_image : post.image,
+            })
+          } else {
+            return notFound()
+          }
+        }
+      }
+
+      return await getWSDMetadata({
+        title: post.title,
+        description: post.title,
+        image: post.is_nsfw ? config.nsfw_image : post.image,
+      })
+    }
+  }
+  return notFound()
+}
+
+export default async function CommentPostPage(props: {
+  params: Promise<{ hex: string; commentHex: string }>
+  searchParams: Promise<any>
+}) {
+  return <MemePost params={props.params} searchParams={props.searchParams} />
+}

wsd-frontend/src/app/(app)/posts/[hex]/page.tsx

@@ -1,24 +1,14 @@
-import type { Metadata } from 'next'
-import Link from 'next/link'
+import { type Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
 import _ from 'lodash'
 
-import { Button, buttonVariants } from '@/components/shadcn/button'
-import { Overlay, OverlayClose, OverlayContent, OverlayTitle, OverlayTrigger } from '@/components/shadcn/overlay'
-import { ScrollToHashContainer } from '@/components/shadcn/scroll-to-hash-container'
-import { Separator } from '@/components/shadcn/separator'
-import AuthenticatedOnlyActionButton from '@/components/wsd/AuthenticatedOnlyActionButton'
-import Meme from '@/components/wsd/Meme'
-import MemeComment from '@/components/wsd/MemeComment'
-import NewComment from '@/components/wsd/NewComment'
+import MemePost from '@/components/wsd/MemePost/MemePost'
 
-import { APIQuery, APIType, includesType } from '@/api'
 import config from '@/config'
 import { getWSDMetadata } from '@/lib/metadata'
 import { getWSDAPI } from '@/lib/serverHooks'
-import { getKeys } from '@/lib/typeHelpers'
-import { InvalidHEXError, cn, hexToUUIDv4, suppress } from '@/lib/utils'
+import { InvalidHEXError, hexToUUIDv4, suppress } from '@/lib/utils'
 
 export async function generateMetadata(props: { params: Promise<{ hex: string }> }): Promise<Metadata | undefined> {
   const params = await props.params
@@ -38,6 +28,17 @@ export async function generateMetadata(props: { params: Promise<{ hex: string }>
   return notFound()
 }
 
+export default async function PostPage(props: { params: Promise<{ hex: string }>; searchParams: Promise<any> }) {
+  const postHex = (await props.params).hex
+  const params = new Promise<{
+    hex: string
+    commentHex?: string
+  }>((resolve) => {
+    resolve({ hex: postHex, commentHex: undefined })
+  })
+  return <MemePost params={params} searchParams={props.searchParams} />
+}
+/*
 export default async function PostPage(props: {
   params: Promise<{ hex: string }>
   searchParams: Promise<APIQuery<'/v0/post-comments/'>>
@@ -132,3 +133,5 @@ export default async function PostPage(props: {
   }
   return notFound()
 }
+
+ */

wsd-frontend/src/components/shadcn/scroll-to-hash-container.tsx

@@ -1,28 +1,38 @@
 'use client'
 
-import { useEffect, useRef, PropsWithChildren } from 'react'
+import { PropsWithChildren, useEffect, useRef } from 'react'
 
 type ScrollToHashContainerProps = PropsWithChildren<{
-  hash: string
+  hash?: string
+  shouldScroll?: boolean
   offset?: number
+  className?: string
 }>
 
-function ScrollToHashContainer({ hash, offset = 0, children }: ScrollToHashContainerProps) {
+function ScrollToHashContainer({ hash, shouldScroll, className, offset = 0, children }: ScrollToHashContainerProps) {
   const ref = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    const shouldScroll = window.location.hash === `#${hash}`
-    if (shouldScroll && ref.current) {
+    if (hash === undefined && shouldScroll === undefined) return
+    let shouldScrollPage = false
+    if (hash && window.location.hash === `#${hash}`) {
+      shouldScrollPage = true
+    }
+    if (shouldScroll !== undefined && shouldScroll !== shouldScrollPage) {
+      shouldScrollPage = shouldScroll
+    }
+    if (shouldScrollPage && ref.current) {
       requestAnimationFrame(() => {
         if (!ref.current) return
         const top = ref.current.offsetTop - offset
         window.scrollTo({ top, behavior: 'smooth' })
       })
     }
-  }, [hash])
+  }, [hash, shouldScroll, offset])
 
   return (
-    <div ref={ref}>  {/* Adding id here causes the browser's auto scroll behavior to kick in */}
+    <div ref={ref}
+         className={className}>  {/* Adding id here causes the browser's auto scroll behavior to kick in */}
       {children}
     </div>
   )