diff --git a/config/config.json b/config/config.json index 287c07aec..2c3d9086f 100755 --- a/config/config.json +++ b/config/config.json @@ -59,7 +59,7 @@ "//--- contact configs ---//": "", "EMAIL_SUPPORT": "coderplanets@outlook.com", "// GRAPHQL_ENDPOINT": "https://api.coderplanets.com/graphiql", - "BUILD_VERSION": "v2.1.3", + "BUILD_VERSION": "v2.1.5", "// 1000 * 60 * 10 = 10 mins": "", "SSR_CACHE_TIME": 60000 } diff --git a/deploy/production/web.tar.gz b/deploy/production/web.tar.gz index 3dbddd88c..aabeb783e 100755 Binary files a/deploy/production/web.tar.gz and b/deploy/production/web.tar.gz differ diff --git a/src/containers/content/CommunityContent/ThreadContent.tsx b/src/containers/content/CommunityContent/ThreadContent.tsx index ce3e9f261..2090c3aad 100644 --- a/src/containers/content/CommunityContent/ThreadContent.tsx +++ b/src/containers/content/CommunityContent/ThreadContent.tsx @@ -14,11 +14,7 @@ type TProps = { } const ThreadContent: FC = ({ thread }) => { - console.log('# thread: ', thread) - switch (thread) { - // case THREAD.REPO: - // return case THREAD.KANBAN: { return } diff --git a/src/containers/content/CommunityContent/logic.ts b/src/containers/content/CommunityContent/logic.ts index b25bd6275..aa86c4c84 100755 --- a/src/containers/content/CommunityContent/logic.ts +++ b/src/containers/content/CommunityContent/logic.ts @@ -33,9 +33,9 @@ const tabOnChange = (activeThread: TThread): void => { const subPath = activeThread !== ARTICLE_THREAD.POST ? plural(activeThread) : '' - store.markRoute({ mainPath, subPath }) // store.setViewing({ activeThread }) store.setCurThread(activeThread) + store.markRoute({ mainPath, subPath }) } // ############################### diff --git a/src/containers/thread/ArticlesThread/index.tsx b/src/containers/thread/ArticlesThread/index.tsx index 6a5e7b94c..925870072 100755 --- a/src/containers/thread/ArticlesThread/index.tsx +++ b/src/containers/thread/ArticlesThread/index.tsx @@ -61,7 +61,7 @@ const ArticlesThreadContainer: FC = ({ articlesThread: store }) => { ? MobileCardsMainWrapper : MainWrapper - console.log('# got pagedArticlesData: ', pagedArticlesData) + log('# got pagedArticlesData: ', pagedArticlesData) return ( diff --git a/src/containers/thread/ArticlesThread/logic.ts b/src/containers/thread/ArticlesThread/logic.ts index 961538750..5856c3f7d 100755 --- a/src/containers/thread/ArticlesThread/logic.ts +++ b/src/containers/thread/ArticlesThread/logic.ts @@ -113,7 +113,6 @@ const DataSolver = [ { match: asyncRes(EVENT.ARTICLE_THREAD_CHANGE), action: () => { - log('EVENT.ARTICLE_THREAD_CHANGE') // 之前如果请求过,那么 GraphQL 会被缓存,不必重复请求 if (store.isEmpty) loadArticles() }, @@ -169,9 +168,10 @@ const ErrSolver = [ // ############################### // init & uninit // ############################### -export const useInit = (_store: TStore): void => +export const useInit = (_store: TStore): void => { useEffect(() => { store = _store + store.afterInitLoading() sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver)) // if (store.isEmpty) loadArticles() @@ -183,3 +183,4 @@ export const useInit = (_store: TStore): void => sub$.unsubscribe() } }, [_store]) +} diff --git a/src/containers/thread/ArticlesThread/store.ts b/src/containers/thread/ArticlesThread/store.ts index bedb5666d..6e0fbc05f 100755 --- a/src/containers/thread/ArticlesThread/store.ts +++ b/src/containers/thread/ArticlesThread/store.ts @@ -42,7 +42,7 @@ const ArticlesThread = T.model('ArticlesThread', { filters: T.optional(ArticlesFilter, {}), resState: T.optional( T.enumeration('resState', values(TYPE.RES_STATE)), - TYPE.RES_STATE.DONE, + TYPE.RES_STATE.LOADING, ), }) .views((self) => ({ @@ -109,9 +109,21 @@ const ArticlesThread = T.model('ArticlesThread', { }, })) .actions((self) => ({ + afterInitLoading(): void { + const slf = self as TStore + const { totalCount } = slf.pagedArticlesData + + console.log('totalCount -> ', totalCount) + + if (totalCount === 0) { + self.resState = TYPE.RES_STATE.EMPTY + } else { + self.resState = TYPE.RES_STATE.DONE + } + }, // the args pass to server when load articles getLoadArgs(page = 1): Record { - // self.resState = TYPE.RES_STATE.LOADING + self.resState = TYPE.RES_STATE.LOADING const root = getParent(self) as TRootStore return root.getPagedArticleArgs(page, self.filtersData) @@ -121,9 +133,9 @@ const ArticlesThread = T.model('ArticlesThread', { const pagedData = values(res)[0] as TPagedArticles if (pagedData.totalCount === 0) { - // slf.resState = TYPE.RES_STATE.EMPTY + slf.resState = TYPE.RES_STATE.EMPTY } else { - // slf.resState = TYPE.RES_STATE.DONE + slf.resState = TYPE.RES_STATE.DONE } slf.mark(res) diff --git a/src/widgets/PagedArticles/ArticleList.tsx b/src/widgets/PagedArticles/ArticleList.tsx index 72f48ff1c..e6a78fa96 100755 --- a/src/widgets/PagedArticles/ArticleList.tsx +++ b/src/widgets/PagedArticles/ArticleList.tsx @@ -20,7 +20,11 @@ const ArticleList = (props) => { return } - if (resState === TYPE.RES_STATE.EMPTY) { + // 加入 length 的判断是因为 Graphql 客户端如果有缓存的话会导致 RES_STATE 没有更新(因为没有请求) + if ( + (resState === TYPE.RES_STATE.EMPTY && entries.length === 0) || + (resState === TYPE.RES_STATE.DONE && entries.length === 0) + ) { return } @@ -59,6 +63,7 @@ const ArticleList = (props) => { default: // common post + // return

PostItems

return ( {entries.map((entry) => ( diff --git a/src/widgets/PagedArticles/index.tsx b/src/widgets/PagedArticles/index.tsx index eecb998b4..ab501fc5e 100755 --- a/src/widgets/PagedArticles/index.tsx +++ b/src/widgets/PagedArticles/index.tsx @@ -59,11 +59,10 @@ const PagedArticles: FC = ({ {...pagi} onChange={(page) => send(EVENT.REFRESH_ARTICLES, { page })} margin={{ bottom: '60px', top: '60px' }} - > - {/* */} - + /> ) } +/* */ export default memo(PagedArticles) diff --git a/src/widgets/PostItem/DesktopView/Body.tsx b/src/widgets/PostItem/DesktopView/Body.tsx index 614717b18..96ce7734a 100644 --- a/src/widgets/PostItem/DesktopView/Body.tsx +++ b/src/widgets/PostItem/DesktopView/Body.tsx @@ -1,4 +1,5 @@ import { FC, Fragment } from 'react' +import dynamic from 'next/dynamic' import TimeAgo from 'timeago-react' import Link from 'next/link' @@ -9,11 +10,11 @@ import { send, changeToCommunity } from '@/utils/helper' import { SpaceGrow } from '@/widgets/Common' import DigestSentence from '@/widgets/DigestSentence' -import CommunityCard from '@/widgets/Cards/CommunityCard' -import UserCard from '@/widgets/Cards/UserCard' +// import CommunityCard from '@/widgets/Cards/CommunityCard' +// import UserCard from '@/widgets/Cards/UserCard' import Tooltip from '@/widgets/Tooltip' -import ActiveBadge from './ActiveBadge' +// import ActiveBadge from './ActiveBadge' import { Wrapper, @@ -28,6 +29,18 @@ import { ViewsIcon, } from '../styles/desktop_view/body' +const CommunityCard = dynamic(() => import('@/widgets/Cards/CommunityCard'), { + ssr: false, +}) + +const UserCard = dynamic(() => import('@/widgets/Cards/UserCard'), { + ssr: false, +}) + +const ActiveBadge = dynamic(() => import('./ActiveBadge'), { + ssr: false, +}) + type TProps = { curCommunity: TCommunity | null item: TPost diff --git a/src/widgets/PostItem/DesktopView/Header.tsx b/src/widgets/PostItem/DesktopView/Header.tsx index d0ff8248e..9dc7a45d7 100644 --- a/src/widgets/PostItem/DesktopView/Header.tsx +++ b/src/widgets/PostItem/DesktopView/Header.tsx @@ -1,12 +1,13 @@ import { FC } from 'react' import Link from 'next/link' +import dynamic from 'next/dynamic' import type { TPost } from '@/spec' import { ARTICLE_THREAD } from '@/constant' import { parseDomain } from '@/utils/route' import AvatarsRow from '@/widgets/AvatarsRow' -import TagsList from '@/widgets/TagsList' +// import TagsList from '@/widgets/TagsList' import { Wrapper, @@ -18,6 +19,14 @@ import { Participants, } from '../styles/desktop_view/header' +// const AvatarsRow = dynamic(() => import('@/widgets/AvatarsRow'), { +// ssr: false, +// }) + +const TagsList = dynamic(() => import('@/widgets/TagsList'), { + ssr: false, +}) + type TProps = { item: TPost } @@ -35,6 +44,7 @@ const Header: FC = ({ item }) => { {parseDomain(item.linkAddr)} )} + diff --git a/src/widgets/PostItem/DesktopView/index.tsx b/src/widgets/PostItem/DesktopView/index.tsx index 0906fed37..03535d3e5 100644 --- a/src/widgets/PostItem/DesktopView/index.tsx +++ b/src/widgets/PostItem/DesktopView/index.tsx @@ -1,19 +1,21 @@ -import { FC, Fragment, memo } from 'react' +import { FC, Fragment, memo, useEffect, useState } from 'react' +import dynamic from 'next/dynamic' import type { TCommunity, TPost } from '@/spec' import { UPVOTE_LAYOUT } from '@/constant' import { upvoteOnArticleList } from '@/utils/helper' import TheAvatar from '@/widgets/TheAvatar' -import Upvote from '@/widgets/Upvote' - -import { ArticleReadLabel, ArticlePinLabel } from '@/widgets/dynamic' import Header from './Header' import Body from './Body' import { AvatarWrapper, UpvoteWrapper, Main } from '../styles/desktop_view' +let Upvote = null +let ArticleReadLabel = null +let ArticlePinLabel = null + type TProps = { curCommunity: TCommunity | null entry: TPost @@ -23,21 +25,44 @@ type TProps = { } const DigestView: FC = ({ curCommunity, entry }) => { + const [loaded, setLoaded] = useState(false) + + // 如果同步渲染 Upvote, ArticleReadLabel, ArticlePinLabel 等组件会导致难以忍受的卡顿 + // 尤其是在 Tab 切换的时候。手机端因为目前没有这些组件,性能暂无问题。 + // 本不应该存在的无聊问题,蛋疼的解决办法, + useEffect(() => { + const cfg = { ssr: false } + + Upvote = dynamic(() => import('@/widgets/Upvote'), cfg) + ArticleReadLabel = dynamic(() => import('@/widgets/ArticleReadLabel'), cfg) + ArticlePinLabel = dynamic(() => import('@/widgets/ArticlePinLabel'), cfg) + + setTimeout(() => { + setLoaded(true) + }, 200) + }, []) + return ( - - + {loaded && ( + + + + + )} - - upvoteOnArticleList(entry, viewerHasUpvoted) - } - /> + {loaded && ( + + upvoteOnArticleList(entry, viewerHasUpvoted) + } + /> + )}
diff --git a/src/widgets/TheAvatar/PostItemAvatar.tsx b/src/widgets/TheAvatar/PostItemAvatar.tsx index 0f583b8a0..3f66d780e 100644 --- a/src/widgets/TheAvatar/PostItemAvatar.tsx +++ b/src/widgets/TheAvatar/PostItemAvatar.tsx @@ -19,10 +19,14 @@ type TProps = { } const PostItemAvatar: FC = ({ user, onSelect }) => { - const quoteLogin = 'laury2' + // const quoteLogin = 'laury2' return ( onSelect(user)}> - {user.login === quoteLogin ? ( + } + /> + {/* {user.login === quoteLogin ? ( = ({ user, onSelect }) => { src={user.avatar} fallback={} /> - )} - {user.login === quoteLogin ? : } - {user.login === quoteLogin && ( + )} */} + {/* {user.login === quoteLogin ? : } */} + {/* {user.login === quoteLogin && ( - )} + )} */} ) }