discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Merge branch 'editable-comments' into 'dev'

Browse Source 
Editable comments

See merge request discoursio/discoursio-webapp!11
This commit is contained in:
Igor 2023-02-07 12:48:45 +00:00
commit b18e1f42cd
12 changed files with 144 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Article/Comment.module.scss
View File

@ -138,7 +138,6 @@
}
}
.commentAuthor,
.commentDate,
.commentRating {
@include font-size(1.2rem);
}
@ -147,12 +146,32 @@
font-size: 12px;
margin-right: 12px;
}
.commentDate {
color: rgb(0 0 0 / 30%);
.commentDates {
flex: 1;
display: flex;
gap: 1rem;
align-items: center;
justify-content: flex-start;
color: rgba(0, 0, 0, 0.3);
font-size: 1.2rem;
margin-bottom: 4px;
color: rgb(0 0 0 / 30%);
@include font-size(1.2rem);
.date {
.icon {
line-height: 1;
width: 1rem;
display: inline-block;
opacity: 0.6;
margin-right: 0.5rem;
vertical-align: middle;
}
@include media-breakpoint-down(md) {
margin-left: 1rem;
}
}
}
.commentDetails {
display: flex;

84
src/components/Article/Comment.tsx
View File

@ -1,21 +1,17 @@
import styles from './Comment.module.scss'
import { Icon } from '../_shared/Icon'
import { AuthorCard } from '../Author/Card'
import { Show, createMemo, createSignal, For } from 'solid-js'
import { Show, createMemo, createSignal, For, lazy, Suspense } from 'solid-js'
import { clsx } from 'clsx'
import type { Author, Reaction } from '../../graphql/types.gen'
import { t } from '../../utils/intl'
import { createReaction, deleteReaction } from '../../stores/zine/reactions'
import { createReaction, deleteReaction, updateReaction } from '../../stores/zine/reactions'
import MD from './MD'
import { formatDate } from '../../utils'
import { SharePopup } from './SharePopup'
import stylesHeader from '../Nav/Header.module.scss'
import Userpic from '../Author/Userpic'
import { useSession } from '../../context/session'
import { ReactionKind } from '../../graphql/types.gen'
import CommentEditor from '../_shared/CommentEditor'
import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
import { getDescription } from '../../utils/meta'
const CommentEditor = lazy(() => import('../_shared/CommentEditor'))
type Props = {
comment: Reaction
@ -27,7 +23,7 @@ type Props = {
export const Comment = (props: Props) => {
const [isReplyVisible, setIsReplyVisible] = createSignal(false)
const [loading, setLoading] = createSignal<boolean>(false)
const [submitted, setSubmitted] = createSignal<boolean>(false)
const [editMode, setEditMode] = createSignal<boolean>(false)
const { session } = useSession()
const canEdit = createMemo(() => props.comment.createdBy?.slug === session()?.user?.slug)
@ -61,16 +57,33 @@ export const Comment = (props: Props) => {
}
)
setIsReplyVisible(false)
setSubmitted(true)
setLoading(false)
} catch (error) {
console.error('[handleCreate reaction]:', error)
}
}
const formattedDate = createMemo(() =>
formatDate(new Date(comment()?.createdAt), { hour: 'numeric', minute: 'numeric' })
)
const formattedDate = (date) =>
createMemo(() => formatDate(new Date(date), { hour: 'numeric', minute: 'numeric' }))
const toggleEditMode = () => {
setEditMode((oldEditMode) => !oldEditMode)
}
const handleUpdate = async (value) => {
setLoading(true)
try {
await updateReaction(props.comment.id, {
kind: ReactionKind.Comment,
body: value,
shout: props.comment.shout.id
})
setEditMode(false)
setLoading(false)
} catch (error) {
console.error('[handleCreate reaction]:', error)
}
}
return (
<li class={styles.comment}>
@ -102,7 +115,15 @@ export const Comment = (props: Props) => {
<div class={styles.articleAuthor}>{t('Author')}</div>
</Show>
<div class={styles.commentDate}>{formattedDate()}</div>
<div class={styles.commentDates}>
<div class={styles.date}>{formattedDate(comment()?.createdAt)}</div>
<Show when={comment()?.updatedAt}>
<div class={styles.date}>
<Icon name="edit" class={styles.icon} />
{t('Edited')} {formattedDate(comment()?.updatedAt)}
</div>
</Show>
</div>
<div
class={styles.commentRating}
classList={{
@ -116,12 +137,12 @@ export const Comment = (props: Props) => {
</div>
</div>
</Show>
<div
class={styles.commentBody}
contenteditable={canEdit()}
id={'comment-' + (comment().id || '')}
>
<MD body={body()} />
<div class={styles.commentBody} id={'comment-' + (comment().id || '')}>
<Show when={editMode()} fallback={<MD body={body()} />}>
<Suspense fallback={<p>Loading...</p>}>
<CommentEditor initialContent={body()} onSubmit={(value) => handleUpdate(value)} />
</Suspense>
</Show>
</div>
<Show when={!props.compact}>
@ -136,14 +157,13 @@ export const Comment = (props: Props) => {
</button>
<Show when={canEdit()}>
{/*FIXME implement edit comment modal*/}
{/*<button*/}
{/* class={clsx(styles.commentControl, styles.commentControlEdit)}*/}
{/* onClick={() => showModal('editComment')}*/}
{/*>*/}
{/* <Icon name="edit" class={styles.icon} />*/}
{/* {t('Edit')}*/}
{/*</button>*/}
<button
class={clsx(styles.commentControl, styles.commentControlEdit)}
onClick={toggleEditMode}
>
<Icon name="edit" class={styles.icon} />
{t('Edit')}
</button>
<button
class={clsx(styles.commentControl, styles.commentControlDelete)}
onClick={() => remove()}
@ -174,13 +194,9 @@ export const Comment = (props: Props) => {
</div>
<Show when={isReplyVisible()}>
<ShowOnlyOnClient>
<CommentEditor
initialValue={''}
clear={submitted()}
onSubmit={(value) => handleCreate(value)}
/>
</ShowOnlyOnClient>
<Suspense fallback={<p>{t('Loading')}</p>}>
<CommentEditor placeholder={''} onSubmit={(value) => handleCreate(value)} />
</Suspense>
</Show>
</Show>
</div>

31
src/components/Article/CommentsTree.tsx
View File

@ -1,4 +1,4 @@
import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
import { Show, createMemo, createSignal, onMount, For } from 'solid-js'
import Comment from './Comment'
import { t } from '../../utils/intl'
import styles from '../../styles/Article.module.scss'
@ -11,6 +11,7 @@ import { Author, ReactionKind } from '../../graphql/types.gen'
import { useSession } from '../../context/session'
import CommentEditor from '../_shared/CommentEditor'
import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
import Button from '../_shared/Button'
const ARTICLE_COMMENTS_PAGE_SIZE = 50
const MAX_COMMENT_LEVEL = 6
@ -27,9 +28,11 @@ export const CommentsTree = (props: Props) => {
const [isCommentsLoading, setIsCommentsLoading] = createSignal(false)
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
const { sortedReactions, loadReactionsBy } = useReactionsStore()
const reactions = createMemo<Reaction[]>(() =>
sortedReactions().sort(commentsOrder() === 'rating' ? byStat('rating') : byCreated)
)
const { session } = useSession()
const loadMore = async () => {
try {
@ -85,26 +88,22 @@ export const CommentsTree = (props: Props) => {
<ul class={clsx(styles.commentsViewSwitcher, 'view-switcher')}>
<li classList={{ selected: commentsOrder() === 'createdAt' || !commentsOrder() }}>
<a
href="#"
onClick={(ev) => {
ev.preventDefault()
<Button
variant="inline"
value={t('By time')}
onClick={() => {
setCommentsOrder('createdAt')
}}
>
{t('By time')}
</a>
/>
</li>
<li classList={{ selected: commentsOrder() === 'rating' }}>
<a
href="#"
onClick={(ev) => {
ev.preventDefault()
<Button
variant="inline"
value={t('By rating')}
onClick={() => {
setCommentsOrder('rating')
}}
>
{t('By rating')}
</a>
/>
</li>
</ul>
</div>
@ -128,7 +127,7 @@ export const CommentsTree = (props: Props) => {
</Show>
<ShowOnlyOnClient>
<CommentEditor
initialValue={t('Write a comment...')}
placeholder={t('Write a comment...')}
clear={submitted()}
onSubmit={(value) => handleSubmitComment(value)}
/>

13
src/components/_shared/Button/Button.module.scss
View File

@ -27,6 +27,19 @@
}
}
&.inline {
font-weight: 700;
font-size: 16px;
line-height: 21px;
color: #696969;
&.hover,
&.active {
text-decoration: underline;
color: #141414;
}
}
&:disabled,
&:disabled:hover {
cursor: default;

2
src/components/_shared/Button/Button.tsx
View File

@ -5,7 +5,7 @@ import styles from './Button.module.scss'
type Props = {
value: string | JSX.Element
size?: 'S' | 'M' | 'L'
variant?: 'primary' | 'secondary'
variant?: 'primary' | 'secondary' | 'inline'
type?: 'submit' | 'button'
loading?: boolean
disabled?: boolean

12
src/components/_shared/CommentEditor/CommentEditor.tsx
View File

@ -8,7 +8,7 @@ import { t } from '../../../utils/intl'
import { schema } from './schema'
import { EditorState } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
import { DOMSerializer } from 'prosemirror-model'
import { DOMParser as ProseDOMParser, DOMSerializer } from 'prosemirror-model'
import { renderGrouped } from 'prosemirror-menu'
import { buildMenuItems } from './menu'
import { keymap } from 'prosemirror-keymap'
@ -20,9 +20,10 @@ import { useSession } from '../../../context/session'
import { showModal } from '../../../stores/ui'
type Props = {
initialValue: string
placeholder?: string
onSubmit: (value: string) => void
clear?: boolean
initialContent?: string
}
const htmlContainer = typeof document === 'undefined' ? null : document.createElement('div')
@ -37,14 +38,19 @@ const CommentEditor = (props: Props) => {
const editorElRef: { current: HTMLDivElement } = { current: null }
const menuElRef: { current: HTMLDivElement } = { current: null }
const editorViewRef: { current: EditorView } = { current: null }
const domNew = new DOMParser().parseFromString(`<div>${props.initialContent}</div>`, 'text/xml')
const doc = ProseDOMParser.fromSchema(schema).parse(domNew)
const initEditor = () => {
editorViewRef.current = new EditorView(editorElRef.current, {
state: EditorState.create({
schema,
doc: props.initialContent ? doc : null,
plugins: [
history(),
customKeymap(),
placeholder(props.initialValue),
placeholder(props.placeholder),
keymap({ 'Mod-z': undo, 'Mod-y': redo }),
keymap(baseKeymap)
]

4
src/graphql/mutation/reaction-destroy.ts
View File

@ -1,8 +1,8 @@
import { gql } from '@urql/core'
export default gql`
mutation DeleteReactionMutation($reaction: Int!) {
deleteReaction(reaction: $reaction) {
mutation DeleteReactionMutation($id: Int!) {
deleteReaction(id: $id) {
error
reaction {
id

25
src/graphql/mutation/reaction-update.ts
View File

@ -1,32 +1,13 @@
import { gql } from '@urql/core'
export default gql`
mutation UpdateReactionMutation($reaction: ReactionInput!) {
updateReaction(reaction: $reaction) {
mutation UpdateReactionMutation($id: Int!, $reaction: ReactionInput!) {
updateReaction(id: $id, reaction: $reaction) {
error
reaction {
id
createdBy {
slug
name
userpic
}
body
kind
range
createdAt
updatedAt
shout
replyTo {
id
createdBy {
slug
userpic
name
}
body
kind
}
replyTo
}
}
}

11
src/graphql/types.gen.ts
View File

@ -537,11 +537,13 @@ export enum ReactionKind {
Disagree = 'DISAGREE',
Dislike = 'DISLIKE',
Disproof = 'DISPROOF',
Footnote = 'FOOTNOTE',
Like = 'LIKE',
Proof = 'PROOF',
Propose = 'PROPOSE',
Quote = 'QUOTE',
Reject = 'REJECT'
Reject = 'REJECT',
Remark = 'REMARK'
}
export enum ReactionStatus {
@ -656,12 +658,9 @@ export type Stat = {
}
export type Subscription = {
collabUpdate?: Maybe<Reaction>
newMessage?: Maybe<Message>
}
export type SubscriptionCollabUpdateArgs = {
collab: Scalars['Int']
newReaction?: Maybe<Reaction>
newShout?: Maybe<Shout>
}
export type Token = {

4
src/locales/ru.json
View File

@ -17,6 +17,7 @@
"By name": "По имени",
"By popularity": "По популярности",
"By rating": "По популярности",
"By time": "По времени",
"By relevance": "По релевантности",
"By shouts": "По публикациям",
"By signing up you agree with our": "Регистрируясь, вы соглашаетесь с",
@ -222,5 +223,6 @@
"Write a comment...": "Написать комментарий...",
"Add comment": "Комментировать",
"My subscriptions": "Подписки",
"Nothing here yet": "Здесь пока ничего нет"
"Nothing here yet": "Здесь пока ничего нет",
"Edited": "Отредактирован"
}

18
src/stores/zine/reactions.ts
View File

@ -1,6 +1,6 @@
import type { Reaction, ReactionInput } from '../../graphql/types.gen'
import { apiClient } from '../../utils/apiClient'
import { createSignal } from 'solid-js'
import { createEffect, createSignal } from 'solid-js'
// TODO: import { roomConnect } from '../../utils/p2p'
export const REACTIONS_AMOUNT_PER_PAGE = 100
@ -34,15 +34,21 @@ export const createReaction = async (
setSortedReactions((prev) => [...prev, reaction])
}
export const deleteReaction = async (reactionId: number) => {
const reaction = await apiClient.destroyReaction(reactionId)
export const deleteReaction = async (id: number) => {
const reaction = await apiClient.destroyReaction(id)
console.debug('[deleteReaction]:', reaction.reaction.id)
setSortedReactions(sortedReactions().filter((item) => item.id !== reaction.reaction.id))
}
export const updateReaction = async (reaction: Reaction) => {
const { reaction: r } = await apiClient.updateReaction({ reaction })
return r
export const updateReaction = async (id: number, input: ReactionInput) => {
const reaction = await apiClient.updateReaction(id, input)
const editedReactionIndex = sortedReactions().findIndex((r) => r.id === id)
const newSortedReactions = [...sortedReactions()]
newSortedReactions[editedReactionIndex] = {
...newSortedReactions[editedReactionIndex],
...reaction
}
setSortedReactions(newSortedReactions)
}
export const useReactionsStore = () => {

12
src/utils/apiClient.ts
View File

@ -237,14 +237,16 @@ export const apiClient = {
return response.data.createReaction.reaction
},
destroyReaction: async (id: number) => {
const response = await privateGraphQLClient.mutation(reactionDestroy, { reaction: id }).toPromise()
const response = await privateGraphQLClient.mutation(reactionDestroy, { id: id }).toPromise()
console.debug('[destroyReaction]:', response)
return response.data.deleteReaction
},
updateReaction: async (reaction) => {
const response = await privateGraphQLClient.mutation(reactionUpdate, reaction).toPromise()
return response.data.createReaction
updateReaction: async (id: number, input: ReactionInput) => {
const response = await privateGraphQLClient
.mutation(reactionUpdate, { id: id, reaction: input })
.toPromise()
console.debug('[updateReaction]:', response)
return response.data.updateReaction.reaction
},
getAuthorsBy: async (options: QueryLoadAuthorsByArgs) => {
const resp = await publicGraphQLClient.query(authorsLoadBy, options).toPromise()