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

[WIP]

Browse Source
This commit is contained in:
ilya-bkv 2024-03-14 09:22:43 +03:00
parent 75caee909e
commit b44008b229
7 changed files with 48 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/locales/en/translation.json
View File

@ -527,5 +527,7 @@
"yesterday": "yesterday",
"Failed to delete comment": "Failed to delete comment",
"It's OK. Just enter your email to receive a link to change your password": "It's OK. Just enter your email to receive a link to change your password",
"Restore password": "Restore password"
"Restore password": "Restore password",
"Subscribing...": "Subscribing...",
"Unsubscribing...": "Unsubscribing..."
}

4
public/locales/ru/translation.json
View File

@ -554,5 +554,7 @@
"yesterday": "вчера",
"Failed to delete comment": "Не удалось удалить комментарий",
"It's OK. Just enter your email to receive a link to change your password": "Ничего страшного. Просто укажите свою почту, чтобы получить ссылку для смены пароля",
"Restore password": "Восстановить пароль"
"Restore password": "Восстановить пароль",
"Subscribing...": "Подписываем...",
"Unsubscribing...": "Отписываем..."
}

1
src/components/App.tsx
View File

@ -39,6 +39,7 @@ import { InboxPage } from '../pages/inbox.page'
import { HomePage } from '../pages/index.page'
import { ProfileSecurityPage } from '../pages/profile/profileSecurity.page'
import { ProfileSettingsPage } from '../pages/profile/profileSettings.page'
//TODO: ProfileSubscriptionsPage - garbage code?
import { ProfileSubscriptionsPage } from '../pages/profile/profileSubscriptions.page'
import { SearchPage } from '../pages/search.page'
import { TopicPage } from '../pages/topic.page'

24
src/components/Author/AuthorCard/AuthorCard.tsx
View File

@ -34,7 +34,6 @@ export const AuthorCard = (props: Props) => {
const { author, isSessionLoaded, requireAuthentication } = useSession()
const [authorSubs, setAuthorSubs] = createSignal<Array<Author | Topic | Community>>([])
const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
const [isFollowed, setIsFollowed] = createSignal<boolean>()
const isProfileOwner = createMemo(() => author()?.slug === props.author.slug)
const { follow, isOwnerSubscribed, subscribeInAction } = useFollowing()
@ -42,9 +41,10 @@ export const AuthorCard = (props: Props) => {
setAuthorSubs(props.following)
})
const isSubscribed = isOwnerSubscribed(props.author?.id)
createEffect(() => {
console.log("!!! isOwnerSubscribed(props.author?.id):", isOwnerSubscribed(props.author?.id));
setIsFollowed(isOwnerSubscribed(props.author?.id))
console.log('%c!!! isSubscribed:', 'color: #bada55', isSubscribed())
})
const name = createMemo(() => {
@ -88,9 +88,7 @@ export const AuthorCard = (props: Props) => {
})
const handleFollowClick = () => {
console.log("!!! handleFollowClick:");
const value = !isFollowed()
requireAuthentication(() => {
setIsFollowed(value)
follow(FollowingEntity.Author, props.author.slug)
}, 'subscribe')
}
@ -101,7 +99,7 @@ export const AuthorCard = (props: Props) => {
return subscribeInAction().type === 'subscribe' ? t('Subscribing...') : t('Unsubscribing...')
}
if (isOwnerSubscribed(props.author?.id)) {
if (isSubscribed()) {
return (
<>
<span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
@ -130,10 +128,7 @@ export const AuthorCard = (props: Props) => {
<div class={styles.authorAbout} innerHTML={props.author.bio} />
</Show>
<Show
when={
(props.followers && props.followers.length > 0) ||
(props.following && props.following.length > 0)
}
when={(props.followers?.length > 0) || (props.following?.length > 0)}
>
<div class={styles.subscribersContainer}>
<Show when={props.followers && props.followers.length > 0}>
@ -213,10 +208,11 @@ export const AuthorCard = (props: Props) => {
<Show when={authorSubs()?.length}>
<Button
onClick={handleFollowClick}
disabled={Boolean(subscribeInAction())}
value={followButtonText()}
isSubscribeButton={true}
class={clsx({
[stylesButton.subscribed]: isFollowed(),
[stylesButton.subscribed]: isSubscribed(),
})}
/>
</Show>
@ -264,7 +260,7 @@ export const AuthorCard = (props: Props) => {
author={follower}
isFollowed={{
loaded: Boolean(authorSubs()),
value: isOwnerSubscribed(follower.id),
value: isSubscribed(),
}}
/>
)}
@ -313,7 +309,7 @@ export const AuthorCard = (props: Props) => {
<AuthorBadge
isFollowed={{
loaded: Boolean(authorSubs()),
value: isOwnerSubscribed(subscription.id),
value: isSubscribed(),
}}
author={subscription}
/>
@ -321,7 +317,7 @@ export const AuthorCard = (props: Props) => {
<TopicBadge
isFollowed={{
loaded: Boolean(authorSubs()),
value: isOwnerSubscribed(subscription.id),
value: isSubscribed(),
}}
topic={subscription}
/>

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

@ -37,7 +37,6 @@ 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 { page: getPage } = useRouter()
@ -49,19 +48,13 @@ export const AuthorView = (props: Props) => {
const [commented, setCommented] = createSignal<Reaction[]>()
// current author
const [author, setAuthor] = createSignal<Author>()
createEffect(() => {
try {
const a = authorEntities()[props.authorSlug]
setAuthor(a)
} catch (error) {
console.debug(error)
}
})
console.log('%c!!! :', 'color: #bada55', props.author)
const [author, setAuthor] = createSignal<Author>(props.author)
createEffect(async () => {
if (author()?.id && !author().stat) {
const a = await loadAuthor({ slug: '', author_id: author().id })
console.log('%c!!! A2:', 'color: #bada55', props.author)
console.debug('[AuthorView] loaded author:', a)
}
})
@ -69,13 +62,15 @@ export const AuthorView = (props: Props) => {
const bioContainerRef: { current: HTMLDivElement } = { current: null }
const bioWrapperRef: { current: HTMLDivElement } = { current: null }
const fetchData = async (slug) => {
const fetchData = async (author: Author) => {
console.log('%c!!! slug:', 'color: #bada55', author)
try {
const [subscriptionsResult, followersResult] = await Promise.all([
apiClient.getAuthorFollows({ slug }),
apiClient.getAuthorFollowers({ slug }),
apiClient.getAuthorFollows({ author_id: author.id }),
apiClient.getAuthorFollowers({ slug: author.slug }),
])
console.log('%c!!! subscriptionsResult:', 'color: #bada55', subscriptionsResult)
console.log('%c!!! followersResult:', 'color: #bada55', followersResult)
const { authors, topics } = subscriptionsResult
setFollowing([...(authors || []), ...(topics || [])])
setFollowers(followersResult || [])
@ -92,8 +87,6 @@ export const AuthorView = (props: Props) => {
}
}
onMount(() => fetchData(props.authorSlug))
const loadMore = async () => {
saveScrollPosition()
const { hasMore } = await loadShouts({
@ -106,12 +99,11 @@ export const AuthorView = (props: Props) => {
}
onMount(() => {
fetchData(author())
checkBioHeight()
// pagination
if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
loadMore()
loadSubscriptions()
}
})

2
src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
View File

@ -27,6 +27,8 @@ export const ProfileSubscriptions = () => {
const [searchQuery, setSearchQuery] = createSignal('')
const fetchSubscriptions = async () => {
console.log('%c!!! :', 'color: #bada55', 'Профайл fetchSubscriptions' )
try {
const slug = author()?.slug
const authorFollows = await apiClient.getAuthorFollows({ slug })

44
src/context/following.tsx
View File

@ -1,4 +1,4 @@
import { Accessor, JSX, createContext, createEffect, createSignal, useContext } from 'solid-js'
import { Accessor, JSX, createContext, createEffect, createSignal, useContext, createMemo } from "solid-js";
import { createStore } from 'solid-js/store'
import { apiClient } from '../graphql/client/core'
@ -22,7 +22,7 @@ interface FollowingContextType {
loadSubscriptions: () => void
follow: (what: FollowingEntity, slug: string) => Promise<void>
unfollow: (what: FollowingEntity, slug: string) => Promise<void>
isOwnerSubscribed: (id: number | string) => boolean
isOwnerSubscribed: (id: number | string) => Accessor<boolean>
// followers: Accessor<Author[]>
subscribeInAction?: Accessor<SubscribeAction>
}
@ -69,33 +69,26 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
const follow = async (what: FollowingEntity, slug: string) => {
console.log("!!! follow what:", what);
console.log("!!! follow slug:", slug);
// if (!author()) return
setSubscribeInAction({ slug, type: 'subscribe' })
if (!author()) return;
setSubscribeInAction({ slug, type: 'subscribe' });
try {
const result = async () => {
await apiClient.follow({ what, slug })
}
console.log("!!! follow result:", result());
const subscriptionData = await apiClient.follow({ what, slug });
setSubscriptions((prevSubscriptions) => {
const updatedSubs = { ...prevSubscriptions }
if (!updatedSubs[what]) updatedSubs[what] = []
const exists = updatedSubs[what]?.some((entity) => entity.slug === slug)
if (!exists) updatedSubs[what].push(slug)
return updatedSubs
})
if (!prevSubscriptions[what]) prevSubscriptions[what] = [];
prevSubscriptions[what].push(subscriptionData);
return prevSubscriptions;
});
} catch (error) {
console.error(error)
console.error(error);
} finally {
setSubscribeInAction()
setSubscribeInAction(); // Сбрасываем состояние действия подписки.
}
}
const unfollow = async (what: FollowingEntity, slug: string) => {
if (!author()) return
setSubscribeInAction({ slug: slug, type: 'unsubscribe' })
try {
setSubscribeInAction({ slug: slug, type: 'unsubscribe' })
await apiClient.unfollow({ what, slug })
} catch (error) {
console.error(error)
@ -134,12 +127,13 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
}
}
const isOwnerSubscribed = (id?: number | string) => {
if (!author() || !subscriptions) return
const isAuthorSubscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === id)
const isTopicSubscribed = subscriptions.topics?.some((topicEntity) => topicEntity.slug === id)
return !!isAuthorSubscribed || !!isTopicSubscribed
}
const isOwnerSubscribed = (id?: number | string) => createMemo(() => {
console.log('%c!!! WTF:', 'color: #bada55', subscriptions);
if (!author() || !subscriptions) return false;
const isAuthorSubscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === id);
const isTopicSubscribed = subscriptions.topics?.some((topicEntity) => topicEntity.slug === id);
return !!isAuthorSubscribed || !!isTopicSubscribed;
})
const value: FollowingContextType = {
loading,