Pulling fix/latest-papers-link into develop

apps/dicty-frontpage/src/app/layout/FrontPageApp.tsx

@@ -38,7 +38,7 @@ const FrontPageApp = () => {
       <HeaderWithAuth clientRouter={frontpageRouter} />
       <NavbarWithAuth theme={navTheme} />
       <main className={classes.main}>
-        <Container maxWidth="lg">
+        <Container maxWidth="xl">
           <ErrorBoundary>
             <RouterProvider router={frontpageRouter} />
           </ErrorBoundary>

apps/dicty-frontpage/src/features/Frontpage/LatestPaperItem.tsx

@@ -39,11 +39,7 @@ const LatestPaperItem = ({ data }: LatestPaperItemProperties) => {
     <li className={listItem}>
       <Box className={mainContent}>
         <Typography className={mainContent}>
-          <Link
-            className={link}
-            to={`/publication/${
-              import.meta.env.VITE_PUBLICATION_URL
-            }/${pubmedId}`}>
+          <Link className={link} to={`/publication/${pubmedId}`}>
             {`${authors}. (${date}). `}
           </Link>
           {`${title} `}

apps/stock-center/src/pages/index/edit.tsx

@@ -7,7 +7,7 @@ import {
   CatalogLinks,
   FileLinks,
 } from "@dictybase/ui-dsc"
-import { EditView, LoadingDisplay, OtherError } from "@dictybase/ui-common"
+import { EditEditor, LoadingDisplay, OtherError } from "@dictybase/ui-common"
 import { useContentBySlugQuery } from "dicty-graphql-schema"
 import { match, P } from "ts-pattern"
 import { ACCESS, useTokenAndUser } from "auth"
@@ -33,7 +33,7 @@ const EditHomepage = () => {
             .with(
               { data: { contentBySlug: P.select({ content: P.string }) } },
               (content) => (
-                <EditView
+                <EditEditor
                   data={content}
                   userId={user?.email as string}
                   token={token as string}

apps/stock-center/src/pages/index/editable.tsx

@@ -7,7 +7,11 @@ import {
   CatalogLinks,
   FileLinks,
 } from "@dictybase/ui-dsc"
-import { EditableView, LoadingDisplay, OtherError } from "@dictybase/ui-common"
+import {
+  EditableEditor,
+  LoadingDisplay,
+  OtherError,
+} from "@dictybase/ui-common"
 import { useContentBySlugQuery } from "dicty-graphql-schema"
 import { match, P } from "ts-pattern"
 import { ACCESS } from "auth"
@@ -30,7 +34,7 @@ const EditableHomepage = () => {
           {match(result)
             .with(
               { data: { contentBySlug: P.select({ content: P.string }) } },
-              (content) => <EditableView data={content} />,
+              (content) => <EditableEditor data={content} />,
             )
             .with({ loading: true }, () => <LoadingDisplay rows={4} />)
             .with({ error: P.not(undefined) }, () => <OtherError />)

apps/stock-center/src/pages/index/index.tsx

@@ -7,7 +7,7 @@ import {
   CatalogLinks,
   FileLinks,
 } from "@dictybase/ui-dsc"
-import { ContentView, LoadingDisplay, OtherError } from "@dictybase/ui-common"
+import { LoadingDisplay, OtherError, ContentEditor } from "@dictybase/ui-common"
 import { useContentBySlugQuery } from "dicty-graphql-schema"
 import { match, P } from "ts-pattern"
 import { ACCESS } from "auth"
@@ -31,7 +31,7 @@ const ShowHomepage = () => {
           {match(result)
             .with(
               { data: { contentBySlug: P.select({ content: P.string }) } },
-              (content) => <ContentView data={content} />,
+              (content) => <ContentEditor data={content} />,
             )
             .with({ loading: true }, () => <LoadingDisplay rows={4} />)
             .with({ error: P.not(undefined) }, () => <OtherError />)

apps/stock-center/src/pages/index/show.tsx

@@ -7,7 +7,7 @@ import {
   CatalogLinks,
   FileLinks,
 } from "@dictybase/ui-dsc"
-import { ContentView, LoadingDisplay, OtherError } from "@dictybase/ui-common"
+import { LoadingDisplay, OtherError, ContentEditor } from "@dictybase/ui-common"
 import { useContentBySlugQuery } from "dicty-graphql-schema"
 import { match, P } from "ts-pattern"
 import { ACCESS } from "auth"
@@ -31,7 +31,7 @@ const ShowHomepage = () => {
           {match(result)
             .with(
               { data: { contentBySlug: P.select({ content: P.string }) } },
-              (content) => <ContentView data={content} />,
+              (content) => <ContentEditor data={content} />,
             )
             .with({ loading: true }, () => <LoadingDisplay rows={4} />)
             .with({ error: P.not(undefined) }, () => <OtherError />)

packages/ui-common/src/EditablePages/AddPageEditor.tsx

@@ -0,0 +1,66 @@
+import { useNavigate } from "react-router-dom"
+import { useCreateContentMutation } from "dicty-graphql-schema"
+import { Editor } from "editor"
+import { createAddPageToolbar } from "./createAddPageToolbar"
+
+type AddPageEditorProperties = {
+  userId: string
+  token: string
+  namespace: string
+  slug: string
+  contentPath: string
+}
+
+/**
+ * This is the view component so an authorized user can add a new page.
+ */
+const AddPageEditor = ({
+  userId,
+  token,
+  namespace,
+  slug,
+  contentPath,
+}: AddPageEditorProperties) => {
+  const navigate = useNavigate()
+  const [createContent] = useCreateContentMutation({
+    context: {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  })
+
+  const handleSaveClick = async (value: any) => {
+    try {
+      await createContent({
+        variables: {
+          input: {
+            name: slug,
+            // eslint-disable-next-line camelcase
+            created_by: userId,
+            content: value,
+            namespace,
+          },
+        },
+      })
+      navigate("../editable", { relative: "path" })
+    } catch {
+      // Toggle some error notification
+    }
+  }
+
+  const handleCancelClick = () => {
+    navigate("../notfoundauth", { relative: "path" })
+  }
+
+  return (
+    <Editor
+      toolbar={createAddPageToolbar(contentPath)}
+      handleSave={handleSaveClick}
+      handleCancel={handleCancelClick}
+      editable
+    />
+  )
+}
+
+export { AddPageEditor }

packages/ui-common/src/EditablePages/AddPageView.tsx

@@ -1,7 +1,5 @@
-import { useNavigate } from "react-router-dom"
-import { useCreateContentMutation } from "dicty-graphql-schema"
-import { Editor } from "editor"
-import { createAddPageToolbar } from "./createAddPageToolbar"
+import { Container } from "@material-ui/core"
+import { AddPageEditor } from "./AddPageEditor"
 
 type AddPageViewProperties = {
   userId: string
@@ -20,47 +18,16 @@ const AddPageView = ({
   namespace,
   slug,
   contentPath,
-}: AddPageViewProperties) => {
-  const navigate = useNavigate()
-  const [createContent] = useCreateContentMutation({
-    context: {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    },
-  })
-
-  const handleSaveClick = async (value: any) => {
-    try {
-      await createContent({
-        variables: {
-          input: {
-            name: slug,
-            // eslint-disable-next-line camelcase
-            created_by: userId,
-            content: value,
-            namespace,
-          },
-        },
-      })
-      navigate("../editable", { relative: "path" })
-    } catch {
-      // Toggle some error notification
-    }
-  }
-
-  const handleCancelClick = () => {
-    navigate("../notfoundauth", { relative: "path" })
-  }
-
-  return (
-    <Editor
-      toolbar={createAddPageToolbar(contentPath)}
-      handleSave={handleSaveClick}
-      handleCancel={handleCancelClick}
-      editable
+}: AddPageViewProperties) => (
+  <Container>
+    <AddPageEditor
+      userId={userId}
+      token={token}
+      contentPath={contentPath}
+      slug={slug}
+      namespace={namespace}
     />
-  )
-}
+  </Container>
+)
 
 export { AddPageView }

packages/ui-common/src/EditablePages/ContentEditor.tsx

@@ -0,0 +1,20 @@
+import { type ContentBySlugQuery } from "dicty-graphql-schema"
+import { Editor } from "editor"
+
+type ContentEditorProperties = {
+  data: NonNullable<ContentBySlugQuery["contentBySlug"]>
+}
+
+/**
+ * A React component that renders the a view for editable content pages.
+ *
+ * @returns The rendered ContentView component.
+ */
+const ContentEditor = ({ data }: ContentEditorProperties) => (
+  <Editor
+    editable={false}
+    content={{ storageKey: data.slug, editorState: data.content }}
+  />
+)
+
+export { ContentEditor }

packages/ui-common/src/EditablePages/ContentView.tsx

@@ -1,5 +1,6 @@
+import { Container } from "@material-ui/core"
 import { type ContentBySlugQuery } from "dicty-graphql-schema"
-import { Editor } from "editor"
+import { ContentEditor } from "./ContentEditor"
 
 type ContentViewProperties = {
   data: NonNullable<ContentBySlugQuery["contentBySlug"]>
@@ -11,10 +12,9 @@ type ContentViewProperties = {
  * @returns The rendered ContentView component.
  */
 const ContentView = ({ data }: ContentViewProperties) => (
-  <Editor
-    editable={false}
-    content={{ storageKey: data.slug, editorState: data.content }}
-  />
+  <Container>
+    <ContentEditor data={data} />
+  </Container>
 )
 
 export { ContentView }

packages/ui-common/src/EditablePages/EditEditor.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable camelcase */
+import { useNavigate } from "react-router-dom"
+import {
+  type ContentBySlugQuery,
+  useUpdateContentMutation,
+} from "dicty-graphql-schema"
+import { Editor } from "editor"
+import { createToolbarWrapper } from "./createToolbarWrapper"
+
+type EditEditorProperties = {
+  data: NonNullable<ContentBySlugQuery["contentBySlug"]>
+  userId: string
+  token: string
+}
+
+const EditEditor = ({ data, userId, token }: EditEditorProperties) => {
+  const { id, updated_by, updated_at, slug, content } = data
+  const [updateContent] = useUpdateContentMutation({
+    context: {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  })
+  const navigate = useNavigate()
+  const onSave = async (contentValue: string) => {
+    try {
+      await updateContent({
+        variables: {
+          input: {
+            id,
+            updated_by: userId,
+            content: contentValue,
+          },
+        },
+      })
+      navigate("../editable", { relative: "path" })
+    } catch {
+      // Toggle some error notification
+    }
+  }
+  const onCancel = () => {
+    navigate("../editable", { relative: "path" })
+  }
+
+  const Toolbar = createToolbarWrapper(
+    updated_at,
+    updated_by.first_name,
+    updated_by.last_name,
+  )
+
+  return (
+    <Editor
+      toolbar={Toolbar}
+      handleSave={onSave}
+      handleCancel={onCancel}
+      editable
+      content={{ storageKey: slug, editorState: content }}
+    />
+  )
+}
+
+export { EditEditor }