From e8b7e65023bd22e700164ccf4e613503dca7eca9 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Thu, 29 Feb 2024 11:04:58 -0600 Subject: [PATCH 1/6] fix(LatestPaperItem.tsx): remove unnecessary interpolation in Link component URL The unnecessary interpolation in the Link component URL has been removed to fix the url to the single publication route. --- .../src/features/Frontpage/LatestPaperItem.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/dicty-frontpage/src/features/Frontpage/LatestPaperItem.tsx b/apps/dicty-frontpage/src/features/Frontpage/LatestPaperItem.tsx index d08936645f..73bef019a9 100644 --- a/apps/dicty-frontpage/src/features/Frontpage/LatestPaperItem.tsx +++ b/apps/dicty-frontpage/src/features/Frontpage/LatestPaperItem.tsx @@ -39,11 +39,7 @@ const LatestPaperItem = ({ data }: LatestPaperItemProperties) => {
  • - + {`${authors}. (${date}). `} {`${title} `} From 8ef1b0f1d584aa394878aa6d066081681ab55d39 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Thu, 29 Feb 2024 14:05:14 -0600 Subject: [PATCH 2/6] feat(EditablePages): introduce components for adding, rendering, and editing editable content pages The changes introduce new components for handling different aspects of the editable pages feature. The AddPageEditor component allows authorized users to add a new page by providing necessary information and saving it. The ContentEditor component renders the view for editable content pages, displaying the content in a read-only mode. The EditEditor component allows authorized users to edit existing content pages by providing updated content and saving the changes. The EditableEditor component renders editable content pages with a toolbar displaying information about the last update. These components enhance the functionality and user experience of the editable pages feature. --- .../src/EditablePages/AddPageEditor.tsx | 66 +++++++++++++++++++ .../src/EditablePages/ContentEditor.tsx | 20 ++++++ .../src/EditablePages/EditEditor.tsx | 63 ++++++++++++++++++ .../src/EditablePages/EditableEditor.tsx | 24 +++++++ 4 files changed, 173 insertions(+) create mode 100644 packages/ui-common/src/EditablePages/AddPageEditor.tsx create mode 100644 packages/ui-common/src/EditablePages/ContentEditor.tsx create mode 100644 packages/ui-common/src/EditablePages/EditEditor.tsx create mode 100644 packages/ui-common/src/EditablePages/EditableEditor.tsx diff --git a/packages/ui-common/src/EditablePages/AddPageEditor.tsx b/packages/ui-common/src/EditablePages/AddPageEditor.tsx new file mode 100644 index 0000000000..2d47fa9038 --- /dev/null +++ b/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 ( + + ) +} + +export { AddPageEditor } diff --git a/packages/ui-common/src/EditablePages/ContentEditor.tsx b/packages/ui-common/src/EditablePages/ContentEditor.tsx new file mode 100644 index 0000000000..b15ec7ecb4 --- /dev/null +++ b/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 +} + +/** + * A React component that renders the a view for editable content pages. + * + * @returns The rendered ContentView component. + */ +const ContentEditor = ({ data }: ContentEditorProperties) => ( + +) + +export { ContentEditor } diff --git a/packages/ui-common/src/EditablePages/EditEditor.tsx b/packages/ui-common/src/EditablePages/EditEditor.tsx new file mode 100644 index 0000000000..a5e65d9e55 --- /dev/null +++ b/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 + 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 ( + + ) +} + +export { EditEditor } diff --git a/packages/ui-common/src/EditablePages/EditableEditor.tsx b/packages/ui-common/src/EditablePages/EditableEditor.tsx new file mode 100644 index 0000000000..bb3925d2e4 --- /dev/null +++ b/packages/ui-common/src/EditablePages/EditableEditor.tsx @@ -0,0 +1,24 @@ +/* eslint-disable camelcase */ +import { type ContentBySlugQuery } from "dicty-graphql-schema" +import { Editor } from "editor" +import { EditableContentToolbar } from "./EditableContentToolbar" + +type EditableEditorProperties = { + data: NonNullable +} + +const EditableEditor = ({ data }: EditableEditorProperties) => { + const { updated_at, updated_by, content, slug } = data + + return ( + <> + + + + ) +} + +export { EditableEditor } From 4c7f8d6cb6814035833b6defee00498a2e3e6c02 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Thu, 29 Feb 2024 14:06:55 -0600 Subject: [PATCH 3/6] -commit refactor: replace Editor with Editors specific to each view. The changes were made to improve code readability and maintainability. The unused imports and variables were removed, and the components were refactored to use more descriptive names. Wrapping the components in a Container component provides consistent styling and layout across the application. --- .../src/EditablePages/AddPageView.tsx | 57 ++++------------- .../src/EditablePages/ContentView.tsx | 10 +-- .../ui-common/src/EditablePages/EditView.tsx | 64 +++---------------- .../src/EditablePages/EditableView.tsx | 23 ++----- 4 files changed, 33 insertions(+), 121 deletions(-) diff --git a/packages/ui-common/src/EditablePages/AddPageView.tsx b/packages/ui-common/src/EditablePages/AddPageView.tsx index db5008340f..b7f0add3a8 100644 --- a/packages/ui-common/src/EditablePages/AddPageView.tsx +++ b/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 ( - ( + + - ) -} + +) export { AddPageView } diff --git a/packages/ui-common/src/EditablePages/ContentView.tsx b/packages/ui-common/src/EditablePages/ContentView.tsx index e22c08e6af..1970454e15 100644 --- a/packages/ui-common/src/EditablePages/ContentView.tsx +++ b/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 @@ -11,10 +12,9 @@ type ContentViewProperties = { * @returns The rendered ContentView component. */ const ContentView = ({ data }: ContentViewProperties) => ( - + + + ) export { ContentView } diff --git a/packages/ui-common/src/EditablePages/EditView.tsx b/packages/ui-common/src/EditablePages/EditView.tsx index 8b59c71e3f..a0d73768f1 100644 --- a/packages/ui-common/src/EditablePages/EditView.tsx +++ b/packages/ui-common/src/EditablePages/EditView.tsx @@ -1,63 +1,17 @@ -/* 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" +import { Container } from "@material-ui/core" +import { type ContentBySlugQuery } from "dicty-graphql-schema" +import { EditEditor } from "./EditEditor" -type ContentViewProperties = { +type EditViewProperties = { data: NonNullable userId: string token: string } -const EditView = ({ data, userId, token }: ContentViewProperties) => { - 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 ( - - ) -} +const EditView = ({ data, userId, token }: EditViewProperties) => ( + + + +) export { EditView } diff --git a/packages/ui-common/src/EditablePages/EditableView.tsx b/packages/ui-common/src/EditablePages/EditableView.tsx index 9c1abfa673..be7ee3b165 100644 --- a/packages/ui-common/src/EditablePages/EditableView.tsx +++ b/packages/ui-common/src/EditablePages/EditableView.tsx @@ -1,24 +1,15 @@ -/* eslint-disable camelcase */ +import { Container } from "@material-ui/core" import { type ContentBySlugQuery } from "dicty-graphql-schema" -import { Editor } from "editor" -import { EditableContentToolbar } from "./EditableContentToolbar" +import { EditableEditor } from "./EditableEditor" type EditableViewProperties = { data: NonNullable } -const EditableView = ({ data }: EditableViewProperties) => { - const { updated_at, updated_by, content, slug } = data - - return ( - <> - - - - ) -} +const EditableView = ({ data }: EditableViewProperties) => ( + + + +) export { EditableView } From 68b57f99dee213b7984c221cfe3570c6a6ea419c Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Thu, 29 Feb 2024 14:09:14 -0600 Subject: [PATCH 4/6] feat(ui-common): add new components for editable pages and content toolbar This commit adds new components to the ui-common package. The components added are: - AddPageEditor - ContentEditor - EditableEditor - EditEditor - EditableContentToolbar These components are useful for building editable pages and provide additional functionality for editing content and managing the toolbar. --- packages/ui-common/src/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/ui-common/src/index.ts b/packages/ui-common/src/index.ts index 716c941c38..d42d5b1e5d 100644 --- a/packages/ui-common/src/index.ts +++ b/packages/ui-common/src/index.ts @@ -2,7 +2,12 @@ export * from "./LoadingDisplay" export * from "./EditablePages/ContentView" export * from "./EditablePages/EditableView" export * from "./EditablePages/EditView" +export * from "./EditablePages/AddPageEditor" +export * from "./EditablePages/ContentEditor" +export * from "./EditablePages/EditableEditor" +export * from "./EditablePages/EditEditor" export * from "./EditablePages/AddPageView" +export * from "./EditablePages/EditableContentToolbar" export * from "./FullPageLoadingDisplay" export * from "./DateDisplay" export * from "./DictyTab" From f35e6dfe231919f51629b9ff65423f0a169a03fe Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Thu, 29 Feb 2024 14:09:34 -0600 Subject: [PATCH 5/6] fix(FrontPageApp.tsx): change maxWidth value from "lg" to "xl" in Container component to allow for wider content The maxWidth value in the Container component has been changed from "lg" to "xl" to allow for wider content. This change improves the layout of the FrontPageApp component by providing more space for the content within the Container. --- apps/dicty-frontpage/src/app/layout/FrontPageApp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/dicty-frontpage/src/app/layout/FrontPageApp.tsx b/apps/dicty-frontpage/src/app/layout/FrontPageApp.tsx index 766ac68bb4..75c566bae4 100644 --- a/apps/dicty-frontpage/src/app/layout/FrontPageApp.tsx +++ b/apps/dicty-frontpage/src/app/layout/FrontPageApp.tsx @@ -38,7 +38,7 @@ const FrontPageApp = () => {
    - + From 5a7fc7e0cce403039526d74f5de9769d54d22067 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Thu, 29 Feb 2024 14:10:01 -0600 Subject: [PATCH 6/6] fix(pages): change EditView component to EditEditor, EditableView to EditableEditor, ContentView to ContentEditor These components have been swapped to versions without any layout stylings. The previously used components were wrapped in Containers that had stylings for margins. In the context of DSC landing page, these margins are not necessary and detracted from the appearance of the editable content. --- apps/stock-center/src/pages/index/edit.tsx | 4 ++-- apps/stock-center/src/pages/index/editable.tsx | 8 ++++++-- apps/stock-center/src/pages/index/index.tsx | 4 ++-- apps/stock-center/src/pages/index/show.tsx | 4 ++-- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/apps/stock-center/src/pages/index/edit.tsx b/apps/stock-center/src/pages/index/edit.tsx index 91dccdaf91..ecefe16f01 100644 --- a/apps/stock-center/src/pages/index/edit.tsx +++ b/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) => ( - { {match(result) .with( { data: { contentBySlug: P.select({ content: P.string }) } }, - (content) => , + (content) => , ) .with({ loading: true }, () => ) .with({ error: P.not(undefined) }, () => ) diff --git a/apps/stock-center/src/pages/index/index.tsx b/apps/stock-center/src/pages/index/index.tsx index db37d47a2f..ad993046d0 100644 --- a/apps/stock-center/src/pages/index/index.tsx +++ b/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) => , + (content) => , ) .with({ loading: true }, () => ) .with({ error: P.not(undefined) }, () => ) diff --git a/apps/stock-center/src/pages/index/show.tsx b/apps/stock-center/src/pages/index/show.tsx index db37d47a2f..ad993046d0 100644 --- a/apps/stock-center/src/pages/index/show.tsx +++ b/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) => , + (content) => , ) .with({ loading: true }, () => ) .with({ error: P.not(undefined) }, () => )