From 961a122279a262d3e6290436f0bf4eaaba4970c2 Mon Sep 17 00:00:00 2001 From: bniwredyc Date: Mon, 8 May 2023 19:21:06 +0200 Subject: [PATCH 1/2] working publish --- public/locales/en/translation.json | 3 +- public/locales/ru/translation.json | 3 +- src/components/Article/Article.module.scss | 4 + src/components/Article/FullArticle.tsx | 20 ++-- src/components/Draft/Draft.module.scss | 44 +++++++++ src/components/Draft/Draft.tsx | 50 ++++++++++ src/components/Draft/index.ts | 1 + src/components/Editor/Editor.tsx | 4 +- .../EditorFloatingMenu.module.scss | 2 +- src/components/Editor/Panel/Panel.tsx | 24 +++-- .../Editor/extensions/TrailingNode.ts | 70 +++++++++++++ src/components/Feed/ArticleCard.tsx | 8 +- src/components/Nav/HeaderAuth.tsx | 13 +-- .../Views/DraftsView/DraftsView.module.scss | 7 ++ .../Views/DraftsView/DraftsView.tsx | 68 +++++++++++++ src/components/Views/DraftsView/index.ts | 1 + src/components/Views/Edit.module.scss | 1 + src/components/Views/Edit.tsx | 7 +- src/context/editor.tsx | 98 +++++++++++++++---- .../{article-destroy.ts => article-delete.ts} | 0 src/graphql/mutation/article-update.ts | 5 +- src/graphql/mutation/shout-publish.ts | 16 --- src/graphql/query/article-load.ts | 4 +- src/graphql/types.gen.ts | 12 +-- src/pages/article.page.server.ts | 2 +- src/pages/create.page.tsx | 2 +- src/pages/drafts.page.tsx | 37 ++----- src/pages/edit.page.tsx | 4 +- src/stores/router.ts | 4 +- src/stores/zine/articles.ts | 2 +- src/utils/apiClient.ts | 43 +++++--- 31 files changed, 427 insertions(+), 132 deletions(-) create mode 100644 src/components/Draft/Draft.module.scss create mode 100644 src/components/Draft/Draft.tsx create mode 100644 src/components/Draft/index.ts create mode 100644 src/components/Editor/extensions/TrailingNode.ts create mode 100644 src/components/Views/DraftsView/DraftsView.module.scss create mode 100644 src/components/Views/DraftsView/DraftsView.tsx create mode 100644 src/components/Views/DraftsView/index.ts rename src/graphql/mutation/{article-destroy.ts => article-delete.ts} (100%) delete mode 100644 src/graphql/mutation/shout-publish.ts diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 5d9b89ff..fc907cea 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -272,5 +272,6 @@ "user already exist": "user already exists", "view": "view", "zine": "zine", - "Required": "Required" + "Required": "Required", + "Unnamed draft": "Unnamed draft" } diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 0d00d8eb..c2d09cdf 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -293,5 +293,6 @@ "user already exist": "пользователь уже существует", "view": "просмотр", "zine": "журнал", - "Required": "Поле обязательно для заполнения" + "Required": "Поле обязательно для заполнения", + "Unnamed draft": "Unnamed draft" } diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss index 46e10caa..40f186bd 100644 --- a/src/components/Article/Article.module.scss +++ b/src/components/Article/Article.module.scss @@ -368,6 +368,10 @@ img { } } +[data-float] { + max-width: 50%; +} + [data-float='left'] { float: left; } diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 4ec547c9..bca37f77 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -124,14 +124,16 @@ export const FullArticle = (props: ArticleProps) => {
-
- - {mainTopic().title} - -
+ +
+ + {mainTopic().title} + +
+

{props.article.title}

@@ -237,7 +239,7 @@ export const FullArticle = (props: ArticleProps) => {
diff --git a/src/components/Draft/Draft.module.scss b/src/components/Draft/Draft.module.scss new file mode 100644 index 00000000..96b207ca --- /dev/null +++ b/src/components/Draft/Draft.module.scss @@ -0,0 +1,44 @@ +.created { + @include font-size(1.2rem); + + line-height: 1.5rem; + margin-bottom: 20px; + + .icon { + height: 1.2rem; + display: inline-block; + vertical-align: middle; + } +} + +.titleContainer { + @include font-size(2.6rem); + + line-height: 3.2rem; + margin-bottom: 28px; +} + +.title { + font-weight: 700; +} + +.actions { + @include font-size(1.2rem); + + a { + border: 0; + display: inline-block; + } + + a + a { + margin-left: 12px; + } + + .deleteLink { + color: #d00820; + } + + .publishLink { + color: #2bb452; + } +} diff --git a/src/components/Draft/Draft.tsx b/src/components/Draft/Draft.tsx new file mode 100644 index 00000000..484764da --- /dev/null +++ b/src/components/Draft/Draft.tsx @@ -0,0 +1,50 @@ +import { clsx } from 'clsx' +import styles from './Draft.module.scss' +import type { Shout } from '../../graphql/types.gen' +import { Icon } from '../_shared/Icon' +import { formatDate } from '../../utils' +import formatDateTime from '../../utils/formatDateTime' +import { useLocalize } from '../../context/localize' +import { getPagePath, openPage } from '@nanostores/router' +import { router } from '../../stores/router' +import { useEditorContext } from '../../context/editor' + +type Props = { + class?: string + shout: Shout + onPublish: (shout: Shout) => void + onDelete: (shout: Shout) => void +} + +export const Draft = (props: Props) => { + const { t } = useLocalize() + + const handlePublishLinkClick = () => { + props.onPublish(props.shout) + } + + const handleDeleteLinkClick = () => { + props.onDelete(props.shout) + } + + return ( +
+
+ {formatDate(new Date(props.shout.createdAt))}{' '} + {formatDateTime(props.shout.createdAt)()} +
+
+ {props.shout.title || t('Unnamed draft')} {props.shout.subtitle} +
+
+ {t('Edit')} + + {t('Publish')} + + + {t('Delete')} + +
+
+ ) +} diff --git a/src/components/Draft/index.ts b/src/components/Draft/index.ts new file mode 100644 index 00000000..5cab3dab --- /dev/null +++ b/src/components/Draft/index.ts @@ -0,0 +1 @@ +export { Draft } from './Draft' diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index 18f59bb1..ee4cf24a 100644 --- a/src/components/Editor/Editor.tsx +++ b/src/components/Editor/Editor.tsx @@ -42,6 +42,7 @@ import { useEditorContext } from '../../context/editor' import { isTextSelection } from '@tiptap/core' import type { Doc } from 'yjs/dist/src/utils/Doc' import './Prosemirror.scss' +import { TrailingNode } from './extensions/TrailingNode' type EditorProps = { shoutId: number @@ -176,7 +177,8 @@ export const Editor = (props: EditorProps) => { placement: 'left' }, element: floatingMenuRef.current - }) + }), + TrailingNode ] })) diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss index 30f4f763..65487f44 100644 --- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss +++ b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.module.scss @@ -2,10 +2,10 @@ left: 0; position: relative; vertical-align: middle; + padding-top: 5px; button { opacity: 0.3; - vertical-align: text-bottom; transition: opacity 0.3s ease-in-out; &:hover { diff --git a/src/components/Editor/Panel/Panel.tsx b/src/components/Editor/Panel/Panel.tsx index a5ed3f81..becfa831 100644 --- a/src/components/Editor/Panel/Panel.tsx +++ b/src/components/Editor/Panel/Panel.tsx @@ -10,7 +10,7 @@ import { getPagePath } from '@nanostores/router' import { router } from '../../../stores/router' type Props = { - shoutSlug: string + shoutId: number } export const Panel = (props: Props) => { @@ -18,7 +18,7 @@ export const Panel = (props: Props) => { const { isEditorPanelVisible, wordCounter, - actions: { toggleEditorPanel } + actions: { toggleEditorPanel, saveShout, publishShout } } = useEditorContext() const containerRef: { current: HTMLElement } = { @@ -37,6 +37,14 @@ export const Panel = (props: Props) => { } }) + const handleSaveLinkClick = () => { + saveShout() + } + + const handlePublishLinkClick = () => { + publishShout() + } + return (