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

Merge branch 'dev' of https://github.com/Discours/discoursio-webapp into fix/all-topics-page

Browse Source
This commit is contained in:
kvakazyambra 2024-04-01 23:32:43 +03:00
commit 24cd1c54a8
9 changed files with 107 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ProfileSettings/ProfileSettings.tsx
View File

@ -33,6 +33,7 @@ export const ProfileSettings = () => {
const { t } = useLocalize()
const [prevForm, setPrevForm] = createStore({})
const [isFormInitialized, setIsFormInitialized] = createSignal(false)
const [isSaving, setIsSaving] = createSignal(false)
const [social, setSocial] = createSignal([])
const [addLinkForm, setAddLinkForm] = createSignal<boolean>(false)
const [incorrectUrl, setIncorrectUrl] = createSignal<boolean>(false)
@ -70,16 +71,20 @@ export const ProfileSettings = () => {
const handleSubmit = async (event: Event) => {
event.preventDefault()
setIsSaving(true)
if (nameInputRef.current.value.length === 0) {
setNameError(t('Required'))
nameInputRef.current.focus()
setIsSaving(false)
return
}
if (slugInputRef.current.value.length === 0) {
setSlugError(t('Required'))
slugInputRef.current.focus()
setIsSaving(false)
return
}
try {
await submit(form)
setPrevForm(clone(form))
@ -91,6 +96,8 @@ export const ProfileSettings = () => {
return
}
showSnackbar({ type: 'error', body: t('Error') })
} finally {
setIsSaving(false)
}
await loadAuthor() // renews author's profile
@ -359,7 +366,12 @@ export const ProfileSettings = () => {
}
onClick={handleCancel}
/>
<Button onClick={handleSubmit} variant="primary" value={t('Save settings')} />
<Button
onClick={handleSubmit}
variant="primary"
disabled={isSaving()}
value={isSaving() ? t('Saving...') : t('Save settings')}
/>
</div>
</div>
</div>

2
src/components/Topic/Full.tsx
View File

@ -40,7 +40,7 @@ export const FullTopic = (props: Props) => {
return (
<div class={clsx(styles.topicHeader, 'col-md-16 col-lg-12 offset-md-4 offset-lg-6')}>
<h1>#{props.topic?.title}</h1>
<p>{props.topic?.body}</p>
<p innerHTML={props.topic?.body} />
<div class={clsx(styles.topicActions)}>
<Button
variant="primary"

2
src/components/Topic/TopicBadge/TopicBadge.tsx
View File

@ -67,7 +67,7 @@ export const TopicBadge = (props: Props) => {
</div>
}
>
<div class={clsx('text-truncate', styles.description)}>{props.topic.body}</div>
<div innerHTML={props.topic.body} class={clsx('text-truncate', styles.description)} />
</Show>
</a>
</div>

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

@ -29,8 +29,6 @@ import stylesArticle from '../../Article/Article.module.scss'
import styles from './Author.module.scss'
type Props = {
shouts: Shout[]
author: Author
authorSlug: string
}
export const PRERENDERED_ARTICLES_COUNT = 12
@ -39,8 +37,8 @@ const LOAD_MORE_PAGE_SIZE = 9
export const AuthorView = (props: Props) => {
const { t } = useLocalize()
const { loadSubscriptions } = useFollowing()
const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
const { authorEntities } = useAuthorsStore({ authors: [props.author] })
const { sortedArticles } = useArticlesStore()
const { authorEntities } = useAuthorsStore()
const { page: getPage, searchParams } = useRouter()
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
const [isBioExpanded, setIsBioExpanded] = createSignal(false)
@ -200,10 +198,10 @@ export const AuthorView = (props: Props) => {
</ul>
</div>
<div class={clsx('col-md-8', styles.additionalControls)}>
<Show when={props.author?.stat?.rating || props.author?.stat?.rating === 0}>
<Show when={author()?.stat?.rating || author()?.stat?.rating === 0}>
<div class={styles.ratingContainer}>
{t('All posts rating')}
<AuthorShoutsRating author={props.author} class={styles.ratingControl} />
<AuthorShoutsRating author={author()} class={styles.ratingControl} />
</div>
</Show>
</div>

52
src/components/Views/Expo/Expo.tsx
View File

@ -24,34 +24,31 @@ type Props = {
layout: LayoutType
}
export const PRERENDERED_ARTICLES_COUNT = 37
const LOAD_MORE_PAGE_SIZE = 11
export const PRERENDERED_ARTICLES_COUNT = 36
const LOAD_MORE_PAGE_SIZE = 12
export const Expo = (props: Props) => {
const [isLoaded, setIsLoaded] = createSignal<boolean>(Boolean(props.shouts))
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
const [randomTopArticles, setRandomTopArticles] = createSignal<Shout[]>([])
const [randomTopMonthArticles, setRandomTopMonthArticles] = createSignal<Shout[]>([])
const [favoriteTopArticles, setFavoriteTopArticles] = createSignal<Shout[]>([])
const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal<Shout[]>([])
const { t } = useLocalize()
// const { sortedArticles } = useArticlesStore({
// shouts: isLoaded() ? props.shouts : [],
// })
const { sortedArticles } = useArticlesStore({
shouts: props.shouts || [],
shouts: isLoaded() ? props.shouts : [],
layout: props.layout,
})
const getLoadShoutsFilters = (additionalFilters: LoadShoutsFilters = {}): LoadShoutsFilters => {
const filters = { featured: true, ...additionalFilters }
const filters = { ...additionalFilters }
if (!filters.layouts) filters.layouts = []
if (props.layout) {
filters.layouts.push(props.layout)
} else {
filters.layouts.push('article')
filters.layouts.push('audio', 'video', 'image', 'literature')
}
return filters
@ -80,13 +77,12 @@ export const Expo = (props: Props) => {
const loadRandomTopArticles = async () => {
const options: LoadShoutsOptions = {
filters: getLoadShoutsFilters(),
filters: { ...getLoadShoutsFilters(), featured: true },
limit: 10,
random_limit: 100,
}
const result = await apiClient.getRandomTopShouts({ options })
setRandomTopArticles(result)
setFavoriteTopArticles(result)
}
const loadRandomTopMonthArticles = async () => {
@ -94,19 +90,15 @@ export const Expo = (props: Props) => {
const after = getUnixtime(new Date(now.setMonth(now.getMonth() - 1)))
const options: LoadShoutsOptions = {
filters: getLoadShoutsFilters({ after }),
filters: { ...getLoadShoutsFilters({ after }), reacted: true },
limit: 10,
random_limit: 10,
}
const result = await apiClient.getRandomTopShouts({ options })
setRandomTopMonthArticles(result)
setReactedTopMonthArticles(result)
}
const pages = createMemo<Shout[][]>(() =>
splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
)
onMount(() => {
if (isLoaded()) {
return
@ -130,8 +122,8 @@ export const Expo = (props: Props) => {
() => props.layout,
() => {
resetSortedArticles()
setRandomTopArticles([])
setRandomTopMonthArticles([])
setFavoriteTopArticles([])
setReactedTopMonthArticles([])
loadMore(PRERENDERED_ARTICLES_COUNT + LOAD_MORE_PAGE_SIZE)
loadRandomTopArticles()
loadRandomTopMonthArticles()
@ -202,7 +194,7 @@ export const Expo = (props: Props) => {
</li>
</ul>
<div class="row">
<For each={sortedArticles().slice(0, PRERENDERED_ARTICLES_COUNT / 2)}>
<For each={sortedArticles().slice(0, LOAD_MORE_PAGE_SIZE)}>
{(shout) => (
<div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
<ArticleCard
@ -214,10 +206,10 @@ export const Expo = (props: Props) => {
</div>
)}
</For>
<Show when={randomTopMonthArticles()?.length > 0} keyed={true}>
<ArticleCardSwiper title={t('Top month articles')} slides={randomTopMonthArticles()} />
<Show when={reactedTopMonthArticles()?.length > 0} keyed={true}>
<ArticleCardSwiper title={t('Top month articles')} slides={reactedTopMonthArticles()} />
</Show>
<For each={sortedArticles().slice(PRERENDERED_ARTICLES_COUNT / 2, PRERENDERED_ARTICLES_COUNT)}>
<For each={sortedArticles().slice(LOAD_MORE_PAGE_SIZE, LOAD_MORE_PAGE_SIZE * 2)}>
{(shout) => (
<div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
<ArticleCard
@ -229,12 +221,10 @@ export const Expo = (props: Props) => {
</div>
)}
</For>
<Show when={randomTopArticles()?.length > 0} keyed={true}>
<ArticleCardSwiper title={t('Favorite')} slides={randomTopArticles()} />
<Show when={favoriteTopArticles()?.length > 0} keyed={true}>
<ArticleCardSwiper title={t('Favorite')} slides={favoriteTopArticles()} />
</Show>
<For each={pages()}>
{(page) => (
<For each={page}>
<For each={sortedArticles().slice(LOAD_MORE_PAGE_SIZE * 2)}>
{(shout) => (
<div class="col-md-6 mt-md-5 col-sm-8 mt-sm-3">
<ArticleCard
@ -246,8 +236,6 @@ export const Expo = (props: Props) => {
</div>
)}
</For>
)}
</For>
</div>
<Show when={isLoadMoreButtonVisible()}>
<div class={styles.showMore}>

57
src/components/Views/Topic.tsx
View File

@ -1,8 +1,8 @@
import type { Shout, Topic } from '../../graphql/schema/core.gen'
import { LoadShoutsOptions, Shout, Topic } from '../../graphql/schema/core.gen'
import { Meta } from '@solidjs/meta'
import { clsx } from 'clsx'
import { For, Show, createEffect, createMemo, createSignal, onMount } from 'solid-js'
import { For, Show, createEffect, createMemo, createSignal, on, onMount } from 'solid-js'
import { useLocalize } from '../../context/localize'
import { useRouter } from '../../stores/router'
@ -21,7 +21,9 @@ import { Row3 } from '../Feed/Row3'
import { FullTopic } from '../Topic/Full'
import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper'
import { apiClient } from '../../graphql/client/core'
import styles from '../../styles/Topic.module.scss'
import { getUnixtime } from '../../utils/getServerDate'
type TopicsPageSearchParams = {
by: 'comments' | '' | 'recent' | 'viewed' | 'rating' | 'commented'
@ -43,14 +45,55 @@ export const TopicView = (props: Props) => {
const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
const { topicEntities } = useTopicsStore({ topics: [props.topic] })
const { authorsByTopic } = useAuthorsStore()
const [favoriteTopArticles, setFavoriteTopArticles] = createSignal<Shout[]>([])
const [reactedTopMonthArticles, setReactedTopMonthArticles] = createSignal<Shout[]>([])
console.log('%c!!! :', 'color: #bada55', sortedArticles())
const [topic, setTopic] = createSignal<Topic>()
createEffect(() => {
const topics = topicEntities()
if (props.topicSlug && !topic() && topics) {
setTopic(topics[props.topicSlug])
}
})
const loadRandomTopArticles = async (topic: string) => {
const options: LoadShoutsOptions = {
filters: { featured: true, topic: topic },
limit: 10,
random_limit: 100,
}
const result = await apiClient.getRandomTopShouts({ options })
setFavoriteTopArticles(result)
}
const loadRandomTopMonthArticles = async (topic: string) => {
const now = new Date()
const after = getUnixtime(new Date(now.setMonth(now.getMonth() - 1)))
const options: LoadShoutsOptions = {
filters: { after: after, featured: true, topic: topic },
limit: 10,
random_limit: 10,
}
const result = await apiClient.getRandomTopShouts({ options })
setReactedTopMonthArticles(result)
}
createEffect(
on(
() => topic(),
() => {
loadRandomTopArticles(topic()?.slug)
loadRandomTopMonthArticles(topic()?.slug)
},
{ defer: true },
),
)
const title = createMemo(
() =>
`#${capitalize(
@ -170,9 +213,9 @@ export const TopicView = (props: Props) => {
beside={sortedArticles()[4]}
wrapper={'author'}
/>
<ArticleCardSwiper title={title()} slides={sortedArticles().slice(5, 11)} />
<Show when={reactedTopMonthArticles()?.length > 0} keyed={true}>
<ArticleCardSwiper title={t('Top month articles')} slides={reactedTopMonthArticles()} />
</Show>
<Beside
beside={sortedArticles()[12]}
title={t('Top viewed')}
@ -183,8 +226,10 @@ export const TopicView = (props: Props) => {
<Row2 articles={sortedArticles().slice(13, 15)} isEqual={true} />
<Row1 article={sortedArticles()[15]} />
<Show when={favoriteTopArticles()?.length > 0} keyed={true}>
<ArticleCardSwiper title={t('Favorite')} slides={favoriteTopArticles()} />
</Show>
<Show when={sortedArticles().length > 15}>
<ArticleCardSwiper slides={sortedArticles().slice(16, 22)} />
<Row3 articles={sortedArticles().slice(23, 26)} />
<Row2 articles={sortedArticles().slice(26, 28)} />
</Show>

10
src/context/following.tsx
View File

@ -2,14 +2,14 @@ import { Accessor, JSX, createContext, createEffect, createSignal, useContext }
import { createStore } from 'solid-js/store'
import { apiClient } from '../graphql/client/core'
import { AuthorFollows, FollowingEntity } from '../graphql/schema/core.gen'
import { AuthorFollowsResult, FollowingEntity } from '../graphql/schema/core.gen'
import { useSession } from './session'
interface FollowingContextType {
loading: Accessor<boolean>
subscriptions: AuthorFollows
setSubscriptions: (subscriptions: AuthorFollows) => void
subscriptions: AuthorFollowsResult
setSubscriptions: (subscriptions: AuthorFollowsResult) => void
setFollowing: (what: FollowingEntity, slug: string, value: boolean) => void
loadSubscriptions: () => void
follow: (what: FollowingEntity, slug: string) => Promise<void>
@ -23,7 +23,7 @@ export function useFollowing() {
return useContext(FollowingContext)
}
const EMPTY_SUBSCRIPTIONS: AuthorFollows = {
const EMPTY_SUBSCRIPTIONS: AuthorFollowsResult = {
topics: [],
authors: [],
communities: [],
@ -31,7 +31,7 @@ const EMPTY_SUBSCRIPTIONS: AuthorFollows = {
export const FollowingProvider = (props: { children: JSX.Element }) => {
const [loading, setLoading] = createSignal<boolean>(false)
const [subscriptions, setSubscriptions] = createStore<AuthorFollows>(EMPTY_SUBSCRIPTIONS)
const [subscriptions, setSubscriptions] = createStore<AuthorFollowsResult>(EMPTY_SUBSCRIPTIONS)
const { author, session } = useSession()
const fetchData = async () => {

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

@ -1,6 +1,6 @@
import type {
Author,
AuthorFollows,
AuthorFollowsResult,
CommonResult,
FollowingEntity,
LoadShoutsOptions,
@ -134,7 +134,7 @@ export const apiClient = {
slug?: string
author_id?: number
user?: string
}): Promise<AuthorFollows> => {
}): Promise<AuthorFollowsResult> => {
const response = await publicGraphQLClient.query(authorFollows, params).toPromise()
return response.data.get_author_follows
},

8
src/pages/author.page.tsx
View File

@ -56,17 +56,11 @@ export const AuthorPage = (props: PageProps) => {
onCleanup(() => resetSortedArticles())
const usePrerenderedData = props.author?.slug === slug()
return (
<PageLayout title={props.seo?.title || t('Discours')}>
<ReactionsProvider>
<Show when={isLoaded()} fallback={<Loading />}>
<AuthorView
author={usePrerenderedData ? props.author : null}
shouts={usePrerenderedData ? props.authorShouts : null}
authorSlug={slug()}
/>
<AuthorView authorSlug={slug()} />
</Show>
</ReactionsProvider>
</PageLayout>