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

Merge pull request #409 from Discours/feature/editor-buttons

Browse Source 
canEdit-fix
This commit is contained in:
Tony 2024-02-19 14:30:21 +03:00 committed by GitHub
commit cbfe03c04e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 43 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,12 +38,17 @@ export const Comment = (props: Props) => {
const [loading, setLoading] = createSignal(false)
const [editMode, setEditMode] = createSignal(false)
const [clearEditor, setClearEditor] = createSignal(false)
const { author } = useSession()
const { author, session } = useSession()
const { createReaction, deleteReaction, updateReaction } = useReactions()
const { showConfirm } = useConfirm()
const { showSnackbar } = useSnackbar()
const isCommentAuthor = createMemo(() => props.comment.created_by?.slug === author()?.slug)
const canEdit = createMemo(
() =>
Boolean(author()?.id) &&
(props.comment?.created_by?.id === author().id || session()?.user?.roles.includes('editor')),
)
const comment = createMemo(() => props.comment)
const body = createMemo(() => (comment().body || '').trim())
@ -93,7 +98,8 @@ export const Comment = (props: Props) => {
const handleUpdate = async (value) => {
setLoading(true)
try {
await updateReaction(props.comment.id, {
await updateReaction({
id: props.comment.id,
kind: ReactionKind.Comment,
body: value,
shout: props.comment.shout.id,
@ -108,9 +114,7 @@ export const Comment = (props: Props) => {
return (
<li
id={`comment_${comment().id}`}
class={clsx(styles.comment, props.class, {
[styles.isNew]: !isCommentAuthor() && comment()?.created_at > props.lastSeen,
})}
class={clsx(styles.comment, props.class, { [styles.isNew]: comment()?.created_at > props.lastSeen })}
>
<Show when={!!body()}>
<div class={styles.commentContent}>
@ -189,7 +193,7 @@ export const Comment = (props: Props) => {
{loading() ? t('Loading') : t('Reply')}
</button>
</ShowIfAuthenticated>
<Show when={isCommentAuthor()}>
<Show when={canEdit()}>
<button
class={clsx(styles.commentControl, styles.commentControlEdit)}
onClick={toggleEditMode}

13
src/components/Article/FullArticle.tsx
View File

@ -75,10 +75,17 @@ export const FullArticle = (props: Props) => {
const [isReactionsLoaded, setIsReactionsLoaded] = createSignal(false)
const [isActionPopupActive, setIsActionPopupActive] = createSignal(false)
const { t, formatDate, lang } = useLocalize()
const { author, isAuthenticated, requireAuthentication } = useSession()
const { author, session, isAuthenticated, requireAuthentication } = useSession()
const formattedDate = createMemo(() => formatDate(new Date(props.article.published_at * 1000)))
const canEdit = () => props.article.authors?.some((a) => Boolean(a) && a?.slug === author()?.slug)
const canEdit = createMemo(
() =>
Boolean(author()?.id) &&
(props.article?.authors?.some((a) => Boolean(a) && a?.id === author().id) ||
props.article?.created_by?.id === author().id ||
session()?.user?.roles.includes('editor')),
)
const mainTopic = createMemo(() => {
const mainTopicSlug = props.article.topics.length > 0 ? props.article.main_topic : null
@ -544,7 +551,7 @@ export const FullArticle = (props: Props) => {
</Show>
<FeedArticlePopup
isOwner={canEdit()}
canEdit={canEdit()}
containerCssClass={clsx(stylesHeader.control, styles.articlePopupOpener)}
onShareClick={() => showModal('share')}
onInviteClick={() => showModal('inviteMembers')}

14
src/components/Feed/ArticleCard/ArticleCard.tsx
View File

@ -106,7 +106,7 @@ const LAYOUT_ASPECT = {
export const ArticleCard = (props: ArticleCardProps) => {
const { t, lang, formatDate } = useLocalize()
const { author } = useSession()
const { author, session } = useSession()
const { changeSearchParams } = useRouter()
const [isActionPopupActive, setIsActionPopupActive] = createSignal(false)
const [isCoverImageLoadError, setIsCoverImageLoadError] = createSignal(false)
@ -120,9 +120,13 @@ export const ArticleCard = (props: ArticleCardProps) => {
props.article.published_at ? formatDate(new Date(props.article.published_at * 1000)) : '',
)
const canEdit = () =>
props.article.authors?.some((a) => a && a?.slug === author()?.slug) ||
props.article.created_by?.id === author()?.id
const canEdit = createMemo(
() =>
Boolean(author()?.id) &&
(props.article?.authors?.some((a) => Boolean(a) && a?.id === author().id) ||
props.article?.created_by?.id === author().id ||
session()?.user?.roles.includes('editor')),
)
const scrollToComments = (event) => {
event.preventDefault()
@ -365,7 +369,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
<div class={styles.shoutCardDetailsItem}>
<FeedArticlePopup
isOwner={canEdit()}
canEdit={canEdit()}
containerCssClass={stylesHeader.control}
onShareClick={() => props.onShare(props.article)}
onInviteClick={props.onInvite}

8
src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx
View File

@ -10,7 +10,7 @@ import { SoonChip } from '../../_shared/SoonChip'
import styles from './FeedArticlePopup.module.scss'
type Props = {
isOwner: boolean
canEdit: boolean
onInviteClick: () => void
onShareClick: () => void
} & Omit<PopupProps, 'children'>
@ -41,7 +41,7 @@ export const FeedArticlePopup = (props: Props) => {
{t('Share')}
</button>
</li>
<Show when={!props.isOwner}>
<Show when={!props.canEdit}>
<li>
<button
class={styles.action}
@ -67,7 +67,7 @@ export const FeedArticlePopup = (props: Props) => {
{t('Invite experts')}
</button>
</li>
<Show when={!props.isOwner}>
<Show when={!props.canEdit}>
<li>
<button class={clsx(styles.action, styles.soon)} role="button">
{t('Subscribe to comments')} <SoonChip />
@ -79,7 +79,7 @@ export const FeedArticlePopup = (props: Props) => {
{t('Add to bookmarks')} <SoonChip />
</button>
</li>
{/*<Show when={!props.isOwner}>*/}
{/*<Show when={!props.canEdit}>*/}
{/* <li>*/}
{/* <button*/}
{/* class={styles.action}*/}

6
src/context/reactions.tsx
View File

@ -18,7 +18,7 @@ type ReactionsContextType = {
offset?: number
}) => Promise<Reaction[]>
createReaction: (reaction: ReactionInput) => Promise<void>
updateReaction: (id: number, reaction: ReactionInput) => Promise<void>
updateReaction: (reaction: ReactionInput) => Promise<void>
deleteReaction: (id: number) => Promise<void>
}
@ -88,8 +88,8 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
}
}
const updateReaction = async (id: number, input: ReactionInput): Promise<void> => {
const reaction = await apiClient.updateReaction(id, input)
const updateReaction = async (input: ReactionInput): Promise<void> => {
const reaction = await apiClient.updateReaction(input)
setReactionEntities(reaction.id, reaction)
}

10
src/graphql/client/core.ts
View File

@ -178,15 +178,13 @@ export const apiClient = {
console.debug('[graphql.client.core] createReaction:', response)
return response.data.create_reaction.reaction
},
destroyReaction: async (id: number) => {
const response = await apiClient.private.mutation(reactionDestroy, { id: id }).toPromise()
destroyReaction: async (reaction_id: number) => {
const response = await apiClient.private.mutation(reactionDestroy, { reaction_id }).toPromise()
console.debug('[graphql.client.core] destroyReaction:', response)
return response.data.delete_reaction.reaction
},
updateReaction: async (id: number, input: ReactionInput) => {
const response = await apiClient.private
.mutation(reactionUpdate, { id: id, reaction: input })
.toPromise()
updateReaction: async (reaction: ReactionInput) => {
const response = await apiClient.private.mutation(reactionUpdate, { reaction }).toPromise()
console.debug('[graphql.client.core] updateReaction:', response)
return response.data.update_reaction.reaction
},

4
src/graphql/mutation/core/reaction-update.ts
View File

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