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

-npm-run-format

Browse Source
This commit is contained in:
Untone 2024-04-15 21:01:00 +03:00
parent e3a2aaf73a
commit 6e48e64497
4 changed files with 120 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/node-ci.yml vendored
View File

@ -16,7 +16,7 @@ jobs:
run: npm run typecheck run: npm run typecheck
- name: Lint with Biome - name: Lint with Biome
run: npx biome ci . run: npm run check:code
- name: Lint styles - name: Lint styles
run: npm run lint:styles run: npm run lint:styles

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

@ -1,169 +1,169 @@
import type { Author, Reaction, Shout, Topic } from "../../../graphql/schema/core.gen"; import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen'
import { getPagePath } from "@nanostores/router"; import { getPagePath } from '@nanostores/router'
import { Meta, Title } from "@solidjs/meta"; import { Meta, Title } from '@solidjs/meta'
import { clsx } from "clsx"; import { clsx } from 'clsx'
import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from "solid-js"; import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from 'solid-js'
import { useFollowing } from "../../../context/following"; import { useFollowing } from '../../../context/following'
import { useLocalize } from "../../../context/localize"; import { useLocalize } from '../../../context/localize'
import { useSession } from "../../../context/session"; import { useSession } from '../../../context/session'
import { apiClient } from "../../../graphql/client/core"; import { apiClient } from '../../../graphql/client/core'
import { router, useRouter } from "../../../stores/router"; import { router, useRouter } from '../../../stores/router'
import { loadShouts, useArticlesStore } from "../../../stores/zine/articles"; import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
import { loadAuthor, useAuthorsStore } from "../../../stores/zine/authors"; import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors'
import { getImageUrl } from "../../../utils/getImageUrl"; import { getImageUrl } from '../../../utils/getImageUrl'
import { getDescription } from "../../../utils/meta"; import { getDescription } from '../../../utils/meta'
import { restoreScrollPosition, saveScrollPosition } from "../../../utils/scroll"; import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
import { splitToPages } from "../../../utils/splitToPages"; import { splitToPages } from '../../../utils/splitToPages'
import { Comment } from "../../Article/Comment"; import { Comment } from '../../Article/Comment'
import { AuthorCard } from "../../Author/AuthorCard"; import { AuthorCard } from '../../Author/AuthorCard'
import { AuthorShoutsRating } from "../../Author/AuthorShoutsRating"; import { AuthorShoutsRating } from '../../Author/AuthorShoutsRating'
import { Row1 } from "../../Feed/Row1"; import { Row1 } from '../../Feed/Row1'
import { Row2 } from "../../Feed/Row2"; import { Row2 } from '../../Feed/Row2'
import { Row3 } from "../../Feed/Row3"; import { Row3 } from '../../Feed/Row3'
import { Loading } from "../../_shared/Loading"; import { Loading } from '../../_shared/Loading'
import { MODALS, hideModal } from "../../../stores/ui"; import { MODALS, hideModal } from '../../../stores/ui'
import { byCreated } from "../../../utils/sortby"; import { byCreated } from '../../../utils/sortby'
import stylesArticle from "../../Article/Article.module.scss"; import stylesArticle from '../../Article/Article.module.scss'
import styles from "./Author.module.scss"; import styles from './Author.module.scss'
type Props = { type Props = {
authorSlug: string; authorSlug: string
shouts?: Shout[]; shouts?: Shout[]
author?: Author; author?: Author
}; }
export const PRERENDERED_ARTICLES_COUNT = 12; export const PRERENDERED_ARTICLES_COUNT = 12
const LOAD_MORE_PAGE_SIZE = 9; const LOAD_MORE_PAGE_SIZE = 9
export const AuthorView = (props: Props) => { export const AuthorView = (props: Props) => {
const { t } = useLocalize(); const { t } = useLocalize()
const { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing(); const { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing()
const { session } = useSession(); const { session } = useSession()
const { sortedArticles } = useArticlesStore({ shouts: props.shouts }); const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
const { authorEntities } = useAuthorsStore({ authors: [props.author] }); const { authorEntities } = useAuthorsStore({ authors: [props.author] })
const { page: getPage, searchParams } = useRouter(); const { page: getPage, searchParams } = useRouter()
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false); const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
const [isBioExpanded, setIsBioExpanded] = createSignal(false); const [isBioExpanded, setIsBioExpanded] = createSignal(false)
const [author, setAuthor] = createSignal<Author>(); const [author, setAuthor] = createSignal<Author>()
const [followers, setFollowers] = createSignal([]); const [followers, setFollowers] = createSignal([])
const [following, setFollowing] = createSignal<Array<Author | Topic>>([]); // flat AuthorFollowsResult const [following, setFollowing] = createSignal<Array<Author | Topic>>([]) // flat AuthorFollowsResult
const [showExpandBioControl, setShowExpandBioControl] = createSignal(false); const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
const [commented, setCommented] = createSignal<Reaction[]>(); const [commented, setCommented] = createSignal<Reaction[]>()
const modal = MODALS[searchParams().m]; const modal = MODALS[searchParams().m]
// current author // current author
createEffect(async () => { createEffect(async () => {
await loadAuthor({ slug: props.authorSlug }); await loadAuthor({ slug: props.authorSlug })
}) })
createEffect( () => { createEffect(() => {
if (props.authorSlug && session()?.user?.app_data?.profile?.slug === props.authorSlug) { if (props.authorSlug && session()?.user?.app_data?.profile?.slug === props.authorSlug) {
console.info("my own profile"); console.info('my own profile')
const { profile, authors, topics } = session().user.app_data; const { profile, authors, topics } = session().user.app_data
setFollowers(myFollowers); setFollowers(myFollowers)
setAuthor(profile); setAuthor(profile)
setFollowing([...authors, ...topics]); setFollowing([...authors, ...topics])
} else { } else {
try { try {
const a = authorEntities()[props.authorSlug]; const a = authorEntities()[props.authorSlug]
setAuthor(a); setAuthor(a)
// TODO: add following data retrieval // TODO: add following data retrieval
console.debug("[Author] expecting following data fetched"); console.debug('[Author] expecting following data fetched')
} catch (error) { } catch (error) {
console.debug(error); console.debug(error)
} }
} }
}); })
createEffect(async () => { createEffect(async () => {
if (author()?.id && !author().stat) { if (author()?.id && !author().stat) {
const a = await loadAuthor({ slug: "", author_id: author().id }); const a = await loadAuthor({ slug: '', author_id: author().id })
console.debug("[AuthorView] loaded author:", a); console.debug('[AuthorView] loaded author:', a)
} }
}); })
const bioContainerRef: { current: HTMLDivElement } = { current: null }; const bioContainerRef: { current: HTMLDivElement } = { current: null }
const bioWrapperRef: { current: HTMLDivElement } = { current: null }; const bioWrapperRef: { current: HTMLDivElement } = { current: null }
const fetchData = async (slug) => { const fetchData = async (slug) => {
try { try {
const [subscriptionsResult, followersResult] = await Promise.all([ const [subscriptionsResult, followersResult] = await Promise.all([
apiClient.getAuthorFollows({ slug }), apiClient.getAuthorFollows({ slug }),
apiClient.getAuthorFollowers({ slug }), apiClient.getAuthorFollowers({ slug }),
]); ])
const { authors, topics } = subscriptionsResult; const { authors, topics } = subscriptionsResult
setFollowing([...(authors || []), ...(topics || [])]); setFollowing([...(authors || []), ...(topics || [])])
setFollowers(followersResult || []); setFollowers(followersResult || [])
console.info("[components.Author] following data loaded"); console.info('[components.Author] following data loaded')
} catch (error) { } catch (error) {
console.error("[components.Author] fetch error", error); console.error('[components.Author] fetch error', error)
}
} }
};
const checkBioHeight = () => { const checkBioHeight = () => {
if (bioContainerRef.current) { if (bioContainerRef.current) {
setShowExpandBioControl(bioContainerRef.current.offsetHeight > bioWrapperRef.current.offsetHeight); setShowExpandBioControl(bioContainerRef.current.offsetHeight > bioWrapperRef.current.offsetHeight)
}
} }
};
onMount(() => { onMount(() => {
fetchData(props.authorSlug); fetchData(props.authorSlug)
if (!modal) { if (!modal) {
hideModal(); hideModal()
} }
}); })
const loadMore = async () => { const loadMore = async () => {
saveScrollPosition(); saveScrollPosition()
const { hasMore } = await loadShouts({ const { hasMore } = await loadShouts({
filters: { author: props.authorSlug }, filters: { author: props.authorSlug },
limit: LOAD_MORE_PAGE_SIZE, limit: LOAD_MORE_PAGE_SIZE,
offset: sortedArticles().length, offset: sortedArticles().length,
}); })
setIsLoadMoreButtonVisible(hasMore); setIsLoadMoreButtonVisible(hasMore)
restoreScrollPosition(); restoreScrollPosition()
}; }
onMount(() => { onMount(() => {
checkBioHeight(); checkBioHeight()
// pagination // pagination
if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) { if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
loadMore(); loadMore()
loadSubscriptions(); loadSubscriptions()
} }
}); })
const pages = createMemo<Shout[][]>(() => const pages = createMemo<Shout[][]>(() =>
splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE), splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
); )
const fetchComments = async (commenter: Author) => { const fetchComments = async (commenter: Author) => {
const data = await apiClient.getReactionsBy({ const data = await apiClient.getReactionsBy({
by: { comment: false, created_by: commenter.id }, by: { comment: false, created_by: commenter.id },
}); })
setCommented(data); setCommented(data)
}; }
createEffect(() => { createEffect(() => {
if (author()) { if (author()) {
fetchComments(author()); fetchComments(author())
} }
}); })
const ogImage = createMemo(() => const ogImage = createMemo(() =>
author()?.pic author()?.pic
? getImageUrl(author()?.pic, { width: 1200 }) ? getImageUrl(author()?.pic, { width: 1200 })
: getImageUrl("production/image/logo_image.png"), : getImageUrl('production/image/logo_image.png'),
); )
const description = createMemo(() => getDescription(author()?.bio)); const description = createMemo(() => getDescription(author()?.bio))
const handleDeleteComment = (id: number) => { const handleDeleteComment = (id: number) => {
setCommented((prev) => prev.filter((comment) => comment.id !== id)); setCommented((prev) => prev.filter((comment) => comment.id !== id))
}; }
return ( return (
<div class={styles.authorPage}> <div class={styles.authorPage}>
@ -185,20 +185,20 @@ export const AuthorView = (props: Props) => {
<div class={styles.authorHeader}> <div class={styles.authorHeader}>
<AuthorCard author={author()} followers={followers() || []} following={following() || []} /> <AuthorCard author={author()} followers={followers() || []} following={following() || []} />
</div> </div>
<div class={clsx(styles.groupControls, "row")}> <div class={clsx(styles.groupControls, 'row')}>
<div class="col-md-16"> <div class="col-md-16">
<ul class="view-switcher"> <ul class="view-switcher">
<li <li
classList={{ classList={{
"view-switcher__item--selected": getPage().route === "author", 'view-switcher__item--selected': getPage().route === 'author',
}} }}
> >
<a <a
href={getPagePath(router, "author", { href={getPagePath(router, 'author', {
slug: props.authorSlug, slug: props.authorSlug,
})} })}
> >
{t("Publications")} {t('Publications')}
</a> </a>
<Show when={author().stat}> <Show when={author().stat}>
<span class="view-switcher__counter">{author().stat.shouts}</span> <span class="view-switcher__counter">{author().stat.shouts}</span>
@ -206,15 +206,15 @@ export const AuthorView = (props: Props) => {
</li> </li>
<li <li
classList={{ classList={{
"view-switcher__item--selected": getPage().route === "authorComments", 'view-switcher__item--selected': getPage().route === 'authorComments',
}} }}
> >
<a <a
href={getPagePath(router, "authorComments", { href={getPagePath(router, 'authorComments', {
slug: props.authorSlug, slug: props.authorSlug,
})} })}
> >
{t("Comments")} {t('Comments')}
</a> </a>
<Show when={author().stat}> <Show when={author().stat}>
<span class="view-switcher__counter">{author().stat.comments}</span> <span class="view-switcher__counter">{author().stat.comments}</span>
@ -222,24 +222,24 @@ export const AuthorView = (props: Props) => {
</li> </li>
<li <li
classList={{ classList={{
"view-switcher__item--selected": getPage().route === "authorAbout", 'view-switcher__item--selected': getPage().route === 'authorAbout',
}} }}
> >
<a <a
onClick={() => checkBioHeight()} onClick={() => checkBioHeight()}
href={getPagePath(router, "authorAbout", { href={getPagePath(router, 'authorAbout', {
slug: props.authorSlug, slug: props.authorSlug,
})} })}
> >
{t("Profile")} {t('Profile')}
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div class={clsx("col-md-8", styles.additionalControls)}> <div class={clsx('col-md-8', styles.additionalControls)}>
<Show when={author()?.stat?.rating || author()?.stat?.rating === 0}> <Show when={author()?.stat?.rating || author()?.stat?.rating === 0}>
<div class={styles.ratingContainer}> <div class={styles.ratingContainer}>
{t("All posts rating")} {t('All posts rating')}
<AuthorShoutsRating author={author()} class={styles.ratingControl} /> <AuthorShoutsRating author={author()} class={styles.ratingControl} />
</div> </div>
</Show> </Show>
@ -250,7 +250,7 @@ export const AuthorView = (props: Props) => {
</div> </div>
<Switch> <Switch>
<Match when={getPage().route === "authorAbout"}> <Match when={getPage().route === 'authorAbout'}>
<div class="wide-container"> <div class="wide-container">
<div class="row"> <div class="row">
<div class="col-md-20 col-lg-18"> <div class="col-md-20 col-lg-18">
@ -264,17 +264,17 @@ export const AuthorView = (props: Props) => {
<Show when={showExpandBioControl()}> <Show when={showExpandBioControl()}>
<button <button
class={clsx("button button--subscribe-topic", styles.longBioExpandedControl)} class={clsx('button button--subscribe-topic', styles.longBioExpandedControl)}
onClick={() => setIsBioExpanded(!isBioExpanded())} onClick={() => setIsBioExpanded(!isBioExpanded())}
> >
{t("Show more")} {t('Show more')}
</button> </button>
</Show> </Show>
</div> </div>
</div> </div>
</div> </div>
</Match> </Match>
<Match when={getPage().route === "authorComments"}> <Match when={getPage().route === 'authorComments'}>
<div class="wide-container"> <div class="wide-container">
<div class="row"> <div class="row">
<div class="col-md-20 col-lg-18"> <div class="col-md-20 col-lg-18">
@ -294,7 +294,7 @@ export const AuthorView = (props: Props) => {
</div> </div>
</div> </div>
</Match> </Match>
<Match when={getPage().route === "author"}> <Match when={getPage().route === 'author'}>
<Show when={sortedArticles().length === 1}> <Show when={sortedArticles().length === 1}>
<Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} /> <Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
</Show> </Show>
@ -332,12 +332,12 @@ export const AuthorView = (props: Props) => {
<Show when={isLoadMoreButtonVisible()}> <Show when={isLoadMoreButtonVisible()}>
<p class="load-more-container"> <p class="load-more-container">
<button class="button" onClick={loadMore}> <button class="button" onClick={loadMore}>
{t("Load more")} {t('Load more')}
</button> </button>
</p> </p>
</Show> </Show>
</Match> </Match>
</Switch> </Switch>
</div> </div>
); )
}; }

5
src/components/_shared/SolidSwiper/ImageSwiper.tsx
View File

@ -53,12 +53,11 @@ export const ImageSwiper = (props: Props) => {
register() register()
SwiperCore.use([Pagination, Navigation, Manipulation]) SwiperCore.use([Pagination, Navigation, Manipulation])
while (!mainSwipeRef.current || !mainSwipeRef.current.swiper) { while (!mainSwipeRef.current || !mainSwipeRef.current.swiper) {
await new Promise(resolve => setTimeout(resolve, 10)); // wait 10 ms await new Promise((resolve) => setTimeout(resolve, 10)) // wait 10 ms
} }
mainSwipeRef.current.swiper.on('slideChange', handleSlideChange); mainSwipeRef.current.swiper.on('slideChange', handleSlideChange)
}) })
onMount(() => { onMount(() => {
const updateDirection = () => { const updateDirection = () => {
const width = window.innerWidth const width = window.innerWidth

2
src/stores/zine/authors.ts
View File

@ -1,5 +1,5 @@
import { createLazyMemo } from '@solid-primitives/memo' import { createLazyMemo } from '@solid-primitives/memo'
import { createEffect, createSignal } from "solid-js"; import { createEffect, createSignal } from 'solid-js'
import { apiClient } from '../../graphql/client/core' import { apiClient } from '../../graphql/client/core'
import { Author, QueryLoad_Authors_ByArgs } from '../../graphql/schema/core.gen' import { Author, QueryLoad_Authors_ByArgs } from '../../graphql/schema/core.gen'