From 4c59293678c4abf2b5b542b47668e89cdb6a9194 Mon Sep 17 00:00:00 2001 From: tonyrewin Date: Fri, 9 Sep 2022 15:18:09 +0300 Subject: [PATCH] fix feed --- src/components/Views/Feed.tsx | 68 +++++++++++++++++------------------ src/components/Views/Home.tsx | 10 ++---- src/stores/router.ts | 10 +++--- src/stores/zine/articles.ts | 20 +++++++++-- src/utils/apiClient.ts | 34 ++++++++++-------- 5 files changed, 78 insertions(+), 64 deletions(-) diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx index 3c2b26ca..2bea15a3 100644 --- a/src/components/Views/Feed.tsx +++ b/src/components/Views/Feed.tsx @@ -1,5 +1,5 @@ -import { createEffect, createMemo, For, Show } from 'solid-js' -import { Shout, Topic, Author, Reaction, ReactionKind } from '../../graphql/types.gen' +import { createMemo, For, Show } from 'solid-js' +import { Shout, Reaction, ReactionKind, Topic, Author } from '../../graphql/types.gen' import '../../styles/Feed.scss' import Icon from '../Nav/Icon' import { byCreated, sortBy } from '../../utils/sortby' @@ -9,10 +9,13 @@ import { t } from '../../utils/intl' import { useStore } from '@nanostores/solid' import { session } from '../../stores/auth' import CommentCard from '../Article/Comment' -import { loadRecentArticles, useArticlesStore } from '../../stores/zine/articles' +import { loadMoreAll, useArticlesStore } from '../../stores/zine/articles' import { useReactionsStore } from '../../stores/zine/reactions' import { useAuthorsStore } from '../../stores/zine/authors' import { FeedSidebar } from '../Feed/Sidebar' +import { useTopicsStore } from '../../stores/zine/topics' +import { unique } from '../../utils' +import { AuthorCard } from '../Author/Card' interface FeedProps { recentArticles: Shout[] @@ -27,19 +30,23 @@ const AUTHORSHIP_REACTIONS = [ ] export const FeedPage = (props: FeedProps) => { - const [getPage, setPage] = createSignal(1) - // state - const { getSortedArticles: articles } = useArticlesStore({ sortedArticles: props.articles }) + const { getSortedArticles: articles } = useArticlesStore({ sortedArticles: props.recentArticles }) const reactions = useReactionsStore(props.reactions) const { // getAuthorEntities: authorsBySlug, getSortedAuthors: authors } = useAuthorsStore() // test if it catches preloaded authors const auth = useStore(session) - + const topics = createMemo(() => { + const ttt = [] + articles().forEach((s: Shout) => s.topics.forEach((tpc: Topic) => ttt.push(tpc))) + return unique(ttt) + }) + const { getSortedTopics } = useTopicsStore({ topics: topics() }) // derived const topReactions = createMemo(() => sortBy(reactions(), byCreated)) + const topAuthors = createMemo(() => sortBy(authors(), 'shouts')) // note this became synthetic // methods @@ -49,19 +56,11 @@ export const FeedPage = (props: FeedProps) => { // TODO: list of articles where you are co-author // TODO: preload proposals // TODO: (maybe?) and changes history - console.debug(reactions().filter((r) => r.kind in AUTHORSHIP_REACTIONS)) - - const loadMore = () => { - setPage(getPage() + 1) - //const size = props['size'] || 50 - //const page = (props.page || 1) + 1 - // TODO: loadFeed({ page, size }) - } - - createEffect(() => { - loadRecentArticles({ page: getPage() }) + console.debug(reactions().filter((r) => r.kind in AUTHORSHIP_REACTIONS)) // 2 community self-regulating mechanics + // TODO: query all new posts to be rated for publishing + // TODO: query all reactions where user is in authors list + return [] }) - return ( <>
@@ -88,8 +87,8 @@ export const FeedPage = (props: FeedProps) => { - 0}> - + 0}> + {(article) => } @@ -101,18 +100,17 @@ export const FeedPage = (props: FeedProps) => {
- {/*FIXME NOW*/} - {/**/} + - + {(article) => } @@ -129,10 +127,10 @@ export const FeedPage = (props: FeedProps) => { {(c: Reaction) => } - 0}> + 0}>

{t('Topics')}

- + {(topic) => }
@@ -140,7 +138,7 @@ export const FeedPage = (props: FeedProps) => {

-

diff --git a/src/components/Views/Home.tsx b/src/components/Views/Home.tsx index ae7ce5a8..7755e631 100644 --- a/src/components/Views/Home.tsx +++ b/src/components/Views/Home.tsx @@ -23,7 +23,7 @@ import { topCommented } from '../../stores/zine/top' import { useTopicsStore } from '../../stores/zine/topics' -import { useArticlesStore } from '../../stores/zine/articles' +import { loadMorePublished, useArticlesStore } from '../../stores/zine/articles' type HomeProps = { randomTopics: Topic[] @@ -86,12 +86,6 @@ export const HomePage = (props: HomeProps) => { console.info('[home] mounted') }) - const loadMore = () => { - const size = props['size'] || 50 - const page = (props.page || 1) + 1 - console.log('[home] try to load ' + page + ' page with ' + size + ' items') - // FIXME: loadPublished({ page, size }) - } return ( @@ -145,7 +139,7 @@ export const HomePage = (props: HomeProps) => {

-

diff --git a/src/stores/router.ts b/src/stores/router.ts index 573f1bce..fee11a7f 100644 --- a/src/stores/router.ts +++ b/src/stores/router.ts @@ -44,8 +44,8 @@ router.listen((r) => setResource(r.path)) // signals -const [pageState, setPage] = createSignal() -const [sizeState, setSize] = createSignal() +const [getPage, setPage] = createSignal(1) +const [getSize, setSize] = createSignal(10) export type SortBy = | 'rating' @@ -109,8 +109,8 @@ const updateParams = () => { // get request search query params const paramsDict = { by: by(), // sort name - page: pageState(), // page number - size: sizeState() // entries per page + page: getPage(), // page number + size: getSize() // entries per page // TODO: add q for /search } console.log('[router] updated url with stored params') @@ -138,4 +138,4 @@ if (!isServer) { createEffect(() => router.open(window.location.pathname), [window.location]) } -export { slug, route, setPage, setSize, by, setBy, resource } +export { slug, route, setPage, getPage, getSize, setSize, by, setBy, resource } diff --git a/src/stores/zine/articles.ts b/src/stores/zine/articles.ts index 250629ce..d027db06 100644 --- a/src/stores/zine/articles.ts +++ b/src/stores/zine/articles.ts @@ -3,6 +3,7 @@ import type { Shout } from '../../graphql/types.gen' import type { WritableAtom } from 'nanostores' import { useStore } from '@nanostores/solid' import { apiClient } from '../../utils/apiClient' +import { getPage, setPage } from '../router' let articleEntitiesStore: WritableAtom> let sortedArticlesStore: WritableAtom @@ -69,8 +70,13 @@ const addArticles = (articles: Shout[]) => { } } -export const loadRecentArticles = async ({ page }: { page: number }): Promise => { - const newArticles = await apiClient.getRecentArticles({ page }) +export const loadRecentAllArticles = async ({ page }: { page: number }): Promise => { + const newArticles = await apiClient.getRecentAllArticles({ page, size: 50 }) + addArticles(newArticles) +} + +export const loadRecentPublishedArticles = async ({ page }: { page: number }): Promise => { + const newArticles = await apiClient.getRecentPublishedArticles({ page, size: 50 }) addArticles(newArticles) } @@ -88,3 +94,13 @@ export const useArticlesStore = ({ sortedArticles }: InitialState) => { return { getArticleEntities, getSortedArticles, getArticlesByTopics, getArticlesByAuthors } } + +export const loadMoreAll = () => { + setPage(getPage() + 1) + loadRecentAllArticles({ page: getPage() + 1 }) +} + +export const loadMorePublished = () => { + setPage(getPage() + 1) + loadRecentPublishedArticles({ page: getPage() + 1 }) +} diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts index 609d8ef7..ecfe0e60 100644 --- a/src/utils/apiClient.ts +++ b/src/utils/apiClient.ts @@ -45,11 +45,6 @@ export const apiClient = { const response = await publicGraphQLClient.query(articlesTopMonth, { page: 1, size: 10 }).toPromise() return response.data.articlesTopMonth }, - getRecentPublishedArticles: async () => { - const response = await publicGraphQLClient.query(articlesRecentPublished, {}).toPromise() - - return response.data.recentPublished - }, getRandomTopics: async () => { const response = await publicGraphQLClient.query(topicsRandomQuery, {}).toPromise() @@ -74,7 +69,7 @@ export const apiClient = { return response.data.searchQuery }, - getRecentArticles: async ({ + getRecentAllArticles: async ({ page = 1, size = FEED_PAGE_SIZE }: { @@ -90,6 +85,22 @@ export const apiClient = { return response.data.recentAll }, + getRecentPublishedArticles: async ({ + page = 1, + size = FEED_PAGE_SIZE + }: { + page?: number + size?: number + }): Promise => { + const response = await publicGraphQLClient + .query(articlesRecentPublished, { + page, + size + }) + .toPromise() + + return response.data.recentAll + }, getArticlesForTopics: async ({ topicSlugs, page = 1, @@ -181,12 +192,6 @@ export const apiClient = { }, // feeds - - getPublishedShouts: async ({ page, size }: { page: number; size: number }) => { - const response = await publicGraphQLClient.query(articlesRecentPublished, { page, size }).toPromise() - - return response.data.recentPublished - }, getAllTopics: async () => { const response = await publicGraphQLClient.query(topicsAll, {}).toPromise() return response.data.topicsAll @@ -203,6 +208,9 @@ export const apiClient = { return response.data?.getShoutBySlug }, + + // reactions + getReactionsForShouts: async ({ shoutSlugs, page = 1, @@ -242,8 +250,6 @@ export const apiClient = { return response.data.reactionsByShout }, - // reactions - createReaction: async ({ reaction }) => { const response = await privateGraphQLClient .mutation(reactionCreate, { reaction })