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

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

@ -53,12 +53,11 @@ export const ImageSwiper = (props: Props) => {
register()
SwiperCore.use([Pagination, Navigation, Manipulation])
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(() => {
const updateDirection = () => {
const width = window.innerWidth

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

@ -1,5 +1,5 @@
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 { Author, QueryLoad_Authors_ByArgs } from '../../graphql/schema/core.gen'