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

fmt

Browse Source
This commit is contained in:
Untone 2024-07-22 14:29:33 +03:00
parent 01e7dec615
commit b61b19a119
8 changed files with 146 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,12 +4,7 @@ import { useFeed } from '~/context/feed'
import { useLocalize } from '~/context/localize'
import { COMMENTS_PER_PAGE, useReactions } from '~/context/reactions'
import { useSession } from '~/context/session'
import {
Reaction,
ReactionKind,
ReactionSort,
Shout
} from '~/graphql/schema/core.gen'
import { Reaction, ReactionKind, ReactionSort, Shout } from '~/graphql/schema/core.gen'
import { byCreated, byStat } from '~/lib/sort'
import { SortFunction } from '~/types/common'
import { Button } from '../_shared/Button'

12
src/components/Article/RatingControl.tsx
View File

@ -26,8 +26,14 @@ export const RatingControl = (props: RatingControlProps) => {
const [_, changeSearchParams] = useSearchParams()
const snackbar = useSnackbar()
const { session } = useSession()
const { reactionEntities, reactionsByShout, createReaction, deleteReaction, loadShoutRatings, loadCommentRatings } =
useReactions()
const {
reactionEntities,
reactionsByShout,
createReaction,
deleteReaction,
loadShoutRatings,
loadCommentRatings
} = useReactions()
const [myRate, setMyRate] = createSignal<Reaction | undefined>()
const [ratingReactions, setRatingReactions] = createSignal<Reaction[]>([])
const [isLoading, setIsLoading] = createSignal(false)
@ -85,7 +91,7 @@ export const RatingControl = (props: RatingControlProps) => {
}
}))
}
} catch(err) {
} catch (err) {
snackbar?.showSnackbar({ type: 'error', body: `${t('Error')}: ${error || err || ''}` })
}
setIsLoading(false)

208
src/components/Editor/SimplifiedEditor.tsx
View File

@ -262,135 +262,135 @@ const SimplifiedEditor = (props: Props) => {
return (
<ShowOnlyOnClient>
<Suspense>
<div
ref={(el) => (wrapperEditorElRef = el)}
class={clsx(styles.SimplifiedEditor, {
[styles.smallHeight]: props.smallHeight,
[styles.minimal]: props.variant === 'minimal',
[styles.bordered]: props.variant === 'bordered',
[styles.isFocused]: isFocused() || !isEmpty(),
[styles.labelVisible]: props.label && counter() > 0
})}
>
<Show when={props.maxLength && editor()}>
<div class={styles.limit}>{maxLength - counter()}</div>
</Show>
<Show when={props.label && counter() > 0}>
<div class={styles.label}>{props.label}</div>
</Show>
<div
ref={(el) => (wrapperEditorElRef = el)}
class={clsx(styles.SimplifiedEditor, {
[styles.smallHeight]: props.smallHeight,
[styles.minimal]: props.variant === 'minimal',
[styles.bordered]: props.variant === 'bordered',
[styles.isFocused]: isFocused() || !isEmpty(),
[styles.labelVisible]: props.label && counter() > 0
})}
>
<Show when={props.maxLength && editor()}>
<div class={styles.limit}>{maxLength - counter()}</div>
</Show>
<Show when={props.label && counter() > 0}>
<div class={styles.label}>{props.label}</div>
</Show>
<Show when={props.maxHeight} fallback={<div ref={(el) => (editorElRef = el)} />}>
<div style={maxHeightStyle} ref={(el) => (editorElRef = el)} />
</Show>
<Show when={props.maxHeight} fallback={<div ref={(el) => (editorElRef = el)} />}>
<div style={maxHeightStyle} ref={(el) => (editorElRef = el)} />
</Show>
<Show when={!props.onlyBubbleControls}>
<div class={clsx(styles.controls, { [styles.alwaysVisible]: props.controlsAlwaysVisible })}>
<div class={styles.actions}>
<Popover content={t('Bold')}>
{(triggerRef: (el: HTMLElement) => void) => (
<button
ref={triggerRef}
type="button"
class={clsx(styles.actionButton, { [styles.active]: isBold() })}
onClick={() => editor()?.chain().focus().toggleBold().run()}
>
<Icon name="editor-bold" />
</button>
)}
</Popover>
<Popover content={t('Italic')}>
{(triggerRef) => (
<button
ref={triggerRef}
type="button"
class={clsx(styles.actionButton, { [styles.active]: isItalic() })}
onClick={() => editor()?.chain().focus().toggleItalic().run()}
>
<Icon name="editor-italic" />
</button>
)}
</Popover>
<Popover content={t('Add url')}>
{(triggerRef) => (
<button
ref={triggerRef}
type="button"
onClick={handleShowLinkBubble}
class={clsx(styles.actionButton, { [styles.active]: isLink() })}
>
<Icon name="editor-link" />
</button>
)}
</Popover>
<Show when={props.quoteEnabled}>
<Popover content={t('Add blockquote')}>
<Show when={!props.onlyBubbleControls}>
<div class={clsx(styles.controls, { [styles.alwaysVisible]: props.controlsAlwaysVisible })}>
<div class={styles.actions}>
<Popover content={t('Bold')}>
{(triggerRef: (el: HTMLElement) => void) => (
<button
ref={triggerRef}
type="button"
class={clsx(styles.actionButton, { [styles.active]: isBold() })}
onClick={() => editor()?.chain().focus().toggleBold().run()}
>
<Icon name="editor-bold" />
</button>
)}
</Popover>
<Popover content={t('Italic')}>
{(triggerRef) => (
<button
ref={triggerRef}
type="button"
onClick={() => editor()?.chain().focus().toggleBlockquote().run()}
class={clsx(styles.actionButton, { [styles.active]: isBlockquote() })}
class={clsx(styles.actionButton, { [styles.active]: isItalic() })}
onClick={() => editor()?.chain().focus().toggleItalic().run()}
>
<Icon name="editor-quote" />
<Icon name="editor-italic" />
</button>
)}
</Popover>
</Show>
<Show when={props.imageEnabled}>
<Popover content={t('Add image')}>
<Popover content={t('Add url')}>
{(triggerRef) => (
<button
ref={triggerRef}
type="button"
onClick={() => showModal('simplifiedEditorUploadImage')}
class={clsx(styles.actionButton, { [styles.active]: isBlockquote() })}
onClick={handleShowLinkBubble}
class={clsx(styles.actionButton, { [styles.active]: isLink() })}
>
<Icon name="editor-image-dd-full" />
<Icon name="editor-link" />
</button>
)}
</Popover>
</Show>
</div>
<Show when={!props.onChange}>
<div class={styles.buttons}>
<Show when={isCancelButtonVisible()}>
<Button value={t('Cancel')} variant="secondary" onClick={handleClear} />
<Show when={props.quoteEnabled}>
<Popover content={t('Add blockquote')}>
{(triggerRef) => (
<button
ref={triggerRef}
type="button"
onClick={() => editor()?.chain().focus().toggleBlockquote().run()}
class={clsx(styles.actionButton, { [styles.active]: isBlockquote() })}
>
<Icon name="editor-quote" />
</button>
)}
</Popover>
</Show>
<Show when={!props.isPosting} fallback={<Loading />}>
<Button
value={props.submitButtonText ?? t('Send')}
variant="primary"
disabled={isEmpty()}
onClick={() => props.onSubmit?.(html() || '')}
/>
<Show when={props.imageEnabled}>
<Popover content={t('Add image')}>
{(triggerRef) => (
<button
ref={triggerRef}
type="button"
onClick={() => showModal('simplifiedEditorUploadImage')}
class={clsx(styles.actionButton, { [styles.active]: isBlockquote() })}
>
<Icon name="editor-image-dd-full" />
</button>
)}
</Popover>
</Show>
</div>
<Show when={!props.onChange}>
<div class={styles.buttons}>
<Show when={isCancelButtonVisible()}>
<Button value={t('Cancel')} variant="secondary" onClick={handleClear} />
</Show>
<Show when={!props.isPosting} fallback={<Loading />}>
<Button
value={props.submitButtonText ?? t('Send')}
variant="primary"
disabled={isEmpty()}
onClick={() => props.onSubmit?.(html() || '')}
/>
</Show>
</div>
</Show>
</div>
</Show>
<Show when={props.imageEnabled}>
<Portal>
<Modal variant="narrow" name="simplifiedEditorUploadImage">
<UploadModalContent onClose={(value) => value && renderImage(value)} />
</Modal>
</Portal>
</Show>
<Show when={!!editor()}>
<Show when={props.onlyBubbleControls}>
<TextBubbleMenu
shouldShow={true}
isCommonMarkup={true}
editor={editor() as Editor}
ref={(el) => (textBubbleMenuRef = el)}
/>
</Show>
</div>
</Show>
<Show when={props.imageEnabled}>
<Portal>
<Modal variant="narrow" name="simplifiedEditorUploadImage">
<UploadModalContent onClose={(value) => value && renderImage(value)} />
</Modal>
</Portal>
</Show>
<Show when={!!editor()}>
<Show when={props.onlyBubbleControls}>
<TextBubbleMenu
shouldShow={true}
isCommonMarkup={true}
<LinkBubbleMenuModule
editor={editor() as Editor}
ref={(el) => (textBubbleMenuRef = el)}
ref={(el) => (linkBubbleMenuRef = el)}
onClose={handleHideLinkBubble}
/>
</Show>
<LinkBubbleMenuModule
editor={editor() as Editor}
ref={(el) => (linkBubbleMenuRef = el)}
onClose={handleHideLinkBubble}
/>
</Show>
</div>
</div>
</Suspense>
</ShowOnlyOnClient>
)

1
src/components/Views/Author/Author.tsx
View File

@ -261,7 +261,6 @@ export const AuthorView = (props: AuthorViewProps) => {
</Show>
<AuthorFeed />
</Match>
</Switch>
</div>

10
src/components/_shared/LoadMoreWrapper.tsx
View File

@ -53,14 +53,12 @@ export const LoadMoreWrapper = (props: LoadMoreProps) => {
return (
<>
{props.children}
<Show when={isLoading()}><Loading /></Show>
<Show when={isLoading()}>
<Loading />
</Show>
<Show when={isLoadMoreButtonVisible() && !props.hidden && !isLoading()}>
<div class="load-more-container">
<Button
onClick={loadItems}
value={t('Load more')}
title={`${items().length} ${t('loaded')}`}
/>
<Button onClick={loadItems} value={t('Load more')} title={`${items().length} ${t('loaded')}`} />
</div>
</Show>
</>

25
src/context/reactions.tsx
View File

@ -2,7 +2,12 @@ import type { JSX } from 'solid-js'
import { createContext, onCleanup, useContext } from 'solid-js'
import { createStore, reconcile } from 'solid-js/store'
import { loadCommentRatings, loadReactions, loadShoutComments, loadShoutRatings } from '~/graphql/api/public'
import {
loadCommentRatings,
loadReactions,
loadShoutComments,
loadShoutRatings
} from '~/graphql/api/public'
import createReactionMutation from '~/graphql/mutation/core/reaction-create'
import destroyReactionMutation from '~/graphql/mutation/core/reaction-destroy'
import updateReactionMutation from '~/graphql/mutation/core/reaction-update'
@ -69,7 +74,11 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
return result
}
const loadShoutRatingsAdding = async (shout: number, limit = RATINGS_PER_PAGE, offset = 0): Promise<Reaction[]> => {
const loadShoutRatingsAdding = async (
shout: number,
limit = RATINGS_PER_PAGE,
offset = 0
): Promise<Reaction[]> => {
const fetcher = await loadShoutRatings({ shout, limit, offset })
const result = (await fetcher()) || []
console.debug('[context.reactions] shout ratings loaded', result)
@ -77,7 +86,11 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
return result
}
const loadCommentRatingsAdding = async (comment: number, limit = RATINGS_PER_PAGE, offset = 0): Promise<Reaction[]> => {
const loadCommentRatingsAdding = async (
comment: number,
limit = RATINGS_PER_PAGE,
offset = 0
): Promise<Reaction[]> => {
const fetcher = await loadCommentRatings({ comment, limit, offset })
const result = (await fetcher()) || []
console.debug('[context.reactions] shout ratings loaded', result)
@ -85,7 +98,11 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
return result
}
const loadShoutCommentsAdding = async (shout: number, limit = COMMENTS_PER_PAGE, offset = 0): Promise<Reaction[]> => {
const loadShoutCommentsAdding = async (
shout: number,
limit = COMMENTS_PER_PAGE,
offset = 0
): Promise<Reaction[]> => {
const fetcher = await loadShoutComments({ shout, limit, offset })
const result = (await fetcher()) || []
console.debug('[context.reactions] shout comments loaded', result)

6
src/graphql/api/public.ts
View File

@ -62,7 +62,7 @@ export const loadShouts = (options: LoadShoutsOptions) => {
}
export const loadShoutComments = (options: QueryLoad_Shout_RatingsArgs) => {
const page = `${options.offset || 0}-${(options.limit||1) + (options.offset || 0)}`
const page = `${options.offset || 0}-${(options.limit || 1) + (options.offset || 0)}`
return cache(async () => {
const resp = await defaultClient.query(loadShoutCommentsQuery, options).toPromise()
const result = resp?.data?.load_reactions_by
@ -71,7 +71,7 @@ export const loadShoutComments = (options: QueryLoad_Shout_RatingsArgs) => {
}
export const loadShoutRatings = (options: QueryLoad_Shout_RatingsArgs) => {
const page = `${options.offset || 0}-${(options.limit||1) + (options.offset || 0)}`
const page = `${options.offset || 0}-${(options.limit || 1) + (options.offset || 0)}`
return cache(async () => {
const resp = await defaultClient.query(loadShoutRatingsQuery, options).toPromise()
const result = resp?.data?.load_reactions_by
@ -81,7 +81,7 @@ export const loadShoutRatings = (options: QueryLoad_Shout_RatingsArgs) => {
// biome-ignore lint/suspicious/noExplicitAny: FIXME: wait backend
export const loadCommentRatings = (options: any) => {
const page = `${options.offset || 0}-${(options.limit||1) + (options.offset || 0)}`
const page = `${options.offset || 0}-${(options.limit || 1) + (options.offset || 0)}`
return cache(async () => {
const resp = await defaultClient.query(loadCommentRatingsQuery, options).toPromise()
const result = resp?.data?.load_reactions_by

6
src/routes/author/[slug]/[...tab].tsx
View File

@ -54,7 +54,10 @@ export default function AuthorPage(props: RouteSectionProps<AuthorPageProps>) {
const { authorsEntities } = useAuthors()
const { addFeed, feedByAuthor } = useFeed()
const { t } = useLocalize()
const author = createAsync(async() => props.data.author || authorsEntities()[props.params.slug] || await fetchAuthor(props.params.slug))
const author = createAsync(
async () =>
props.data.author || authorsEntities()[props.params.slug] || (await fetchAuthor(props.params.slug))
)
const shoutsByAuthor = createMemo(() => feedByAuthor()[props.params.slug])
const title = createMemo(() => `${author()?.name || ''}`)
const cover = createMemo(() =>
@ -74,7 +77,6 @@ export default function AuthorPage(props: RouteSectionProps<AuthorPageProps>) {
}
})
// author shouts
const loadAuthorShoutsMore = async (offset: number) => {
const loadedShouts = await fetchAuthorShouts(props.params.slug, offset)