address the feedback

Author: Ahtesham Quraish

frontends/main/src/app-pages/Articles/ArticleListingPage.tsx

@@ -17,12 +17,8 @@ import { useWebsiteContentList } from "api/hooks/website_content"
 import type { WebsiteContent } from "api/v1"
 import { LocalDate } from "ol-utilities"
 import { RiArrowLeftLine, RiArrowRightLine } from "@remixicon/react"
-import { extractFirstImageFromArticle } from "@/common/articleUtils"
-import {
-  userArticlesView,
-  USER_ARTICLES_CREATE,
-  USER_ARTICLES_LISTING,
-} from "@/common/urls"
+import { extractFirstImage } from "@/common/websiteContentUtils"
+import { articleView, ARTICLES_CREATE, ARTICLES_LISTING } from "@/common/urls"
 
 const PAGE_SIZE = 20
 const MAX_PAGE = 50
@@ -71,14 +67,12 @@ const EmptyState = styled.div`
   gap: 16px;
 `
 
-const UserArticleCard: React.FC<{ article: WebsiteContent }> = ({
-  article,
-}) => {
+const ArticleCard: React.FC<{ article: WebsiteContent }> = ({ article }) => {
   const articleUrl = article.is_published
-    ? userArticlesView(article.slug || String(article.id))
-    : `${USER_ARTICLES_LISTING}${article.id}/draft`
+    ? articleView(article.slug || String(article.id))
+    : `${ARTICLES_LISTING}${article.id}/draft`
 
-  const imageUrl = extractFirstImageFromArticle(article.content)
+  const imageUrl = extractFirstImage(article.content)
 
   return (
     <ArticleCardWrapper forwardClicksToLink>
@@ -103,6 +97,7 @@ const ArticleListingPage: React.FC = () => {
   const { data: articles, isLoading } = useWebsiteContentList({
     limit: PAGE_SIZE,
     offset: (page - 1) * PAGE_SIZE,
+    content_type: "article",
   })
 
   useEffect(() => {
@@ -119,7 +114,7 @@ const ArticleListingPage: React.FC = () => {
       <Container>
         <PageHeader>
           <Typography variant="h3">Articles</Typography>
-          <ButtonLink variant="primary" href={USER_ARTICLES_CREATE}>
+          <ButtonLink variant="primary" href={ARTICLES_CREATE}>
             New Article
           </ButtonLink>
         </PageHeader>
@@ -134,7 +129,7 @@ const ArticleListingPage: React.FC = () => {
                   key={article.id}
                   size={{ xs: 12, sm: 6, md: 4, lg: 3, xl: 3 }}
                 >
-                  <UserArticleCard article={article} />
+                  <ArticleCard article={article} />
                 </Grid2>
               ))}
             </Grid2>
@@ -164,7 +159,7 @@ const ArticleListingPage: React.FC = () => {
             <Typography variant="body1" color="textSecondary">
               Get started by creating your first article.
             </Typography>
-            <ButtonLink variant="primary" href={USER_ARTICLES_CREATE}>
+            <ButtonLink variant="primary" href={ARTICLES_CREATE}>
               New Article
             </ButtonLink>
           </EmptyState>

frontends/main/src/app-pages/WebsiteContent/WebsiteContentDraftListingPage.tsx

@@ -20,7 +20,7 @@ import type {
 } from "api/v1"
 import { LocalDate } from "ol-utilities"
 import { RiArrowLeftLine, RiArrowRightLine } from "@remixicon/react"
-import { extractFirstImageFromArticle } from "@/common/articleUtils"
+import { extractFirstImage } from "@/common/websiteContentUtils"
 import { websiteContentEditView, websiteContentCreateView } from "@/common/urls"
 import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
 import { ButtonLink } from "@mitodl/smoot-design"
@@ -92,7 +92,7 @@ const DraftItem: React.FC<{ article: WebsiteContent; type: string }> = ({
     ? `/${type === "article" ? "articles" : type}/${article.slug || article.id}`
     : websiteContentEditView(type, article.id)
 
-  const imageUrl = extractFirstImageFromArticle(article.content)
+  const imageUrl = extractFirstImage(article.content)
 
   return (
     <DraftArticleCard forwardClicksToLink>

frontends/main/src/app-pages/WebsiteContent/WebsiteContentEditPage.tsx

@@ -9,7 +9,7 @@ import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
 import { styled, LoadingSpinner } from "ol-components"
 import { ArticleEditor } from "@/page-components/TiptapEditor/contentTypes/article/ArticleEditor"
 import { NewsEditor } from "@/page-components/TiptapEditor/contentTypes/news/NewsEditor"
-import { userArticlesView, websiteContentEditView } from "@/common/urls"
+import { articleView, websiteContentEditView } from "@/common/urls"
 import invariant from "tiny-invariant"
 import type { WebsiteContent } from "api/v1"
 
@@ -28,7 +28,7 @@ const Spinner = styled(LoadingSpinner)({
 })
 
 const PUBLISHED_VIEW_URL: Record<string, (slug: string) => string> = {
-  article: (slug) => userArticlesView(slug),
+  article: (slug) => articleView(slug),
   news: (slug) => `/news/${slug}`,
 }
 

frontends/main/src/app-pages/WebsiteContent/WebsiteContentNewPage.tsx

@@ -8,7 +8,7 @@ import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
 import { styled } from "ol-components"
 import { ArticleEditor } from "@/page-components/TiptapEditor/contentTypes/article/ArticleEditor"
 import { NewsEditor } from "@/page-components/TiptapEditor/contentTypes/news/NewsEditor"
-import { userArticlesView, websiteContentEditView } from "@/common/urls"
+import { articleView, websiteContentEditView } from "@/common/urls"
 import invariant from "tiny-invariant"
 import type { WebsiteContent } from "api/v1"
 
@@ -19,7 +19,7 @@ const PageContainer = styled.div(({ theme }) => ({
 }))
 
 const PUBLISHED_VIEW_URL: Record<string, (slug: string) => string> = {
-  article: (slug) => userArticlesView(slug),
+  article: (slug) => articleView(slug),
   news: (slug) => `/news/${slug}`,
 }
 

frontends/main/src/common/urls.ts

@@ -48,18 +48,18 @@ export const newsDraftView = (id: string) =>
 export const newsEditView = (id: number) =>
   generatePath(NEWS_EDIT, { id: String(id) })
 
-// User-created articles (served under /articles)
-export const USER_ARTICLES_LISTING = "/articles/"
-export const USER_ARTICLES_VIEW = "/articles/[id]"
-export const USER_ARTICLES_DRAFT_VIEW = "/articles/[id]/draft"
-export const USER_ARTICLES_EDIT = "/articles/[id]/edit"
-export const USER_ARTICLES_CREATE = "/articles/new"
-export const userArticlesView = (id: string) =>
-  generatePath(USER_ARTICLES_VIEW, { id: String(id) })
-export const userArticlesDraftView = (id: string) =>
-  generatePath(USER_ARTICLES_DRAFT_VIEW, { id: String(id) })
-export const userArticlesEditView = (id: number) =>
-  generatePath(USER_ARTICLES_EDIT, { id: String(id) })
+// Articles (served under /articles)
+export const ARTICLES_LISTING = "/articles/"
+export const ARTICLES_VIEW = "/articles/[id]"
+export const ARTICLES_DRAFT_VIEW = "/articles/[id]/draft"
+export const ARTICLES_EDIT = "/articles/[id]/edit"
+export const ARTICLES_CREATE = "/articles/new"
+export const articleView = (id: string) =>
+  generatePath(ARTICLES_VIEW, { id: String(id) })
+export const articleDraftView = (id: string) =>
+  generatePath(ARTICLES_DRAFT_VIEW, { id: String(id) })
+export const articleEditView = (id: number) =>
+  generatePath(ARTICLES_EDIT, { id: String(id) })
 
 // Generic website content editing routes
 export const WEBSITE_CONTENT_CREATE = "/website_content/[type]/new"

frontends/main/src/common/articleUtils.ts …s/main/src/common/websiteContentUtils.tsfrontends/main/src/common/articleUtils.ts renamed to frontends/main/src/common/websiteContentUtils.ts frontends/main/src/common/articleUtils.ts renamed to frontends/main/src/common/websiteContentUtils.ts

@@ -1,10 +1,10 @@
 /**
  * Recursively traverses a ProseMirror JSON content structure to find the first image.
  *
- * @param content - The ProseMirror JSON content object from an article
+ * @param content - The ProseMirror JSON content object
  * @returns The URL of the first image found, or null if no image exists
  */
-export function extractFirstImageFromArticle(content: unknown): string | null {
+export function extractFirstImage(content: unknown): string | null {
   if (!content || typeof content !== "object") return null
 
   const node = content as Record<string, unknown>
@@ -21,7 +21,7 @@ export function extractFirstImageFromArticle(content: unknown): string | null {
   // Recursively check content array
   if (Array.isArray(node.content)) {
     for (const childNode of node.content) {
-      const imageUrl = extractFirstImageFromArticle(childNode)
+      const imageUrl = extractFirstImage(childNode)
       if (imageUrl) {
         return imageUrl
       }

…ents/TiptapEditor/ArticleViewer.test.tsx …ponents/TiptapEditor/NewsViewer.test.tsxfrontends/main/src/page-components/TiptapEditor/ArticleViewer.test.tsx renamed to frontends/main/src/page-components/TiptapEditor/NewsViewer.test.tsx frontends/main/src/page-components/TiptapEditor/ArticleViewer.test.tsx renamed to frontends/main/src/page-components/TiptapEditor/NewsViewer.test.tsx

@@ -3,8 +3,8 @@ import { screen, renderWithProviders, setMockResponse } from "@/test-utils"
 import { factories, urls } from "api/test-utils"
 import { NewsEditor } from "./contentTypes/news/NewsEditor"
 
-describe("ArticleViewer", () => {
-  test("renders article content", async () => {
+describe("NewsViewer", () => {
+  test("renders content", async () => {
     const user = factories.user.user({
       is_authenticated: true,
       is_article_editor: true,

frontends/main/src/page-components/TiptapEditor/TiptapEditor.tsx

@@ -82,7 +82,7 @@ const Container = styled.div<{
         },
       }
     : {}),
-  "&& .tiptap.ProseMirror.abc > :nth-child(2)": {
+  "&& .tiptap.ProseMirror.tiptap-viewer > :nth-child(2)": {
     paddingTop: "36px",
   },
   "&& .tiptap.ProseMirror, && .tiptap-viewer": {
@@ -299,11 +299,11 @@ const TipTapViewer = ({
   content: JSONContent
   extensions: Array<Extension | Node | Mark>
   bannerViewer?: typeof BannerViewer
-  bylineViewer?: typeof BannerViewer
+  bylineViewer?: typeof ByLineInfoBarViewer
 }) => {
   return (
     <Container readOnly data-testid="editor">
-      <div className="tiptap ProseMirror tiptap-viewer abc">
+      <div className="tiptap ProseMirror tiptap-viewer">
         {renderToReactElement({
           extensions,
           content,

frontends/main/src/page-components/TiptapEditor/core/WebsiteContentEditor.tsx

@@ -20,6 +20,7 @@ import dynamic from "next/dynamic"
 import { Toolbar } from "../vendor/components/tiptap-ui-primitive/toolbar"
 import { TiptapEditor, MainToolbarContent, TipTapViewer } from "../TiptapEditor"
 import { BannerViewer } from "../extensions/node/Banner/BannerNode"
+import { ByLineInfoBarViewer } from "../extensions/node/ByLineInfoBar/ByLineInfoBarViewer"
 import { handleImageUpload } from "../vendor/lib/tiptap-utils"
 import { useSchema } from "../useSchema"
 import { WebsiteContentProvider } from "../WebsiteContentContext"
@@ -162,7 +163,7 @@ export interface WebsiteContentEditorProps {
   article?: WebsiteContent
   backgroundColor?: string
   bannerViewer?: typeof BannerViewer
-  bylineViewer?: typeof BannerViewer
+  bylineViewer?: typeof ByLineInfoBarViewer
 }
 
 const WebsiteContentEditor = ({
@@ -454,7 +455,7 @@ const WebsiteContentEditor = ({
                   content={content}
                   extensions={extensions}
                   bannerViewer={bannerViewer}
-                  bylineViewer={bylineViewer}
+                  bylineViewer={bylineViewer ?? ByLineInfoBarViewer}
                 />
               </>
             ) : (

frontends/main/src/page-components/TiptapEditor/extensions/node/ByLineInfoBar/ByLineInfoBarNode.ts

@@ -33,7 +33,6 @@ export const ByLineInfoBarNode = Node.create({
   },
 
   addNodeView() {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     return ReactNodeViewRenderer(ByLineInfoBar)
   },
 })