diff --git a/src/containers/content/ArticleContent/DesktopView/ArticleLayout.tsx b/src/containers/content/ArticleContent/DesktopView/ArticleLayout.tsx deleted file mode 100755 index d80d2a64f..000000000 --- a/src/containers/content/ArticleContent/DesktopView/ArticleLayout.tsx +++ /dev/null @@ -1,85 +0,0 @@ -/* - * - * general ArticleContent for Post, Job, Blog, Radar .. - * - */ - -import { FC, useRef } from 'react' -import dynamic from 'next/dynamic' - -import { buildLog } from '@/logger' -import { bond } from '@/mobx' - -import useMetric from '@/hooks/useMetric' -// import ArticleSticker from '@/containers/tool/ArticleSticker' -// import ArticleFooter from '@/containers/unit/ArticleFooter' -import ArtimentBody from '@/widgets/ArtimentBody' -// import Comments from '@/containers/unit/Comments' -import LavaLampLoading from '@/widgets/Loading/LavaLampLoading' -import ViewportTracker from '@/widgets/ViewportTracker' - -import SideInfo from './SideInfo' - -import type { TStore } from '../store' - -import { - Wrapper, - InnerWrapper, - ArticleWrapper, - CommentsWrapper, -} from '../styles/desktop_view/article_layout' - -import { useInit, checkAnchor } from '../logic' - -/* eslint-disable-next-line */ -const log = buildLog('C:PostContent') - -const Comments = dynamic(() => import('@/containers/unit/Comments'), { - /* eslint-disable react/display-name */ - loading: () => , - ssr: false, -}) - -type TProps = { - articleContent?: TStore - testid?: string -} - -const ArticleContentContainer: FC = ({ articleContent: store, testid }) => { - useInit(store) - const metric = useMetric() - - const { viewingArticle: article } = store - const ref = useRef() - - if (!article.id) return null - - return ( - - - {/* checkAnchor(ref?.current)} - onLeave={() => checkAnchor(ref?.current)} - /> */} -
- - {/* {!!article.linkAddr && } */} - - - - checkAnchor(ref?.current)} - onLeave={() => checkAnchor(ref?.current)} - /> - - - -
- - - - - ) -} - -export default bond(ArticleContentContainer, 'articleContent') as FC diff --git a/src/containers/content/ArticleContent/DesktopView/ChangelogLayout.tsx b/src/containers/content/ArticleContent/DesktopView/ChangelogLayout.tsx deleted file mode 100644 index 41bb58ef4..000000000 --- a/src/containers/content/ArticleContent/DesktopView/ChangelogLayout.tsx +++ /dev/null @@ -1,79 +0,0 @@ -/* - * - * general ArticleContent for Post, Job, Blog, Radar .. - * - */ - -import { FC, useRef } from 'react' -import dynamic from 'next/dynamic' - -import { buildLog } from '@/logger' -import { bond } from '@/mobx' - -import useMetric from '@/hooks/useMetric' -// import ArticleSticker from '@/containers/tool/ArticleSticker' -// import ArticleFooter from '@/containers/unit/ArticleFooter' -import ArtimentBody from '@/widgets/ArtimentBody' -// import Comments from '@/containers/unit/Comments' -import LavaLampLoading from '@/widgets/Loading/LavaLampLoading' -import ViewportTracker from '@/widgets/ViewportTracker' - -import type { TStore } from '../store' - -import { - Wrapper, - InnerWrapper, - ArticleWrapper, - CommentsWrapper, -} from '../styles/desktop_view/changelog_layout' - -import { useInit, checkAnchor } from '../logic' - -/* eslint-disable-next-line */ -const log = buildLog('C:PostContent') - -const Comments = dynamic(() => import('@/containers/unit/Comments'), { - /* eslint-disable react/display-name */ - loading: () => , - ssr: false, -}) - -type TProps = { - articleContent?: TStore - testid?: string -} - -const ArticleContentContainer: FC = ({ articleContent: store, testid }) => { - useInit(store) - const metric = useMetric() - - const { viewingArticle: article } = store - const ref = useRef() - - if (!article.id) return null - - return ( - - - {/* checkAnchor(ref?.current)} - onLeave={() => checkAnchor(ref?.current)} - /> */} - - {/* {!!article.linkAddr && } */} - - - - checkAnchor(ref?.current)} - onLeave={() => checkAnchor(ref?.current)} - /> - - - - - - ) -} - -export default bond(ArticleContentContainer, 'articleContent') as FC diff --git a/src/containers/content/ArticleContent/DesktopView/index.tsx b/src/containers/content/ArticleContent/DesktopView/index.tsx deleted file mode 100755 index 96771645c..000000000 --- a/src/containers/content/ArticleContent/DesktopView/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { observer } from 'mobx-react' -import METRIC from '@/constant/metric' - -import useMetric from '@/hooks/useMetric' - -import ArticleLayout from './ArticleLayout' -import ChangelogLayout from './ChangelogLayout' - -const ArticleContent = (props) => { - const metric = useMetric() - - switch (metric) { - case METRIC.CHANGELOG_ARTICLE: { - return - } - default: { - return - } - } -} - -export default observer(ArticleContent) diff --git a/src/containers/content/ArticleContent/MobileView/ArticleLayout.tsx b/src/containers/content/ArticleContent/MobileView/ArticleLayout.tsx deleted file mode 100644 index e3ad4c79e..000000000 --- a/src/containers/content/ArticleContent/MobileView/ArticleLayout.tsx +++ /dev/null @@ -1,85 +0,0 @@ -/* - * - * general ArticleContent for Post, Job, Blog, Radar .. - * - */ - -import { FC, useRef } from 'react' -import dynamic from 'next/dynamic' - -import { buildLog } from '@/logger' -import { bond } from '@/mobx' - -import useMetric from '@/hooks/useMetric' -import ArticleFooter from '@/containers/unit/ArticleFooter' -import ArtimentBody from '@/widgets/ArtimentBody' -// import Comments from '@/containers/unit/Comments' -import LavaLampLoading from '@/widgets/Loading/LavaLampLoading' -import ViewportTracker from '@/widgets/ViewportTracker' - -import type { TStore } from '../store' - -import { - Wrapper, - InnerWrapper, - ArticleWrapper, - CommentsWrapper, -} from '../styles/desktop_view/article_layout' - -import { useInit, checkAnchor } from '../logic' - -/* eslint-disable-next-line */ -const log = buildLog('C:PostContent') - -// const ArticleFooter = dynamic(() => import('@/containers/unit/ArticleFooter'), { -// /* eslint-disable react/display-name */ -// loading: () => , -// ssr: false, -// }) - -const Comments = dynamic(() => import('@/containers/unit/Comments'), { - /* eslint-disable react/display-name */ - loading: () => , - ssr: false, -}) - -type TProps = { - articleContent?: TStore - testid?: string -} - -const ArticleContentContainer: FC = ({ articleContent: store, testid }) => { - useInit(store) - const metric = useMetric() - - const { viewingArticle: article } = store - const ref = useRef() - - if (!article.id) return null - - return ( - - - {/* checkAnchor(ref?.current)} - onLeave={() => checkAnchor(ref?.current)} - /> */} -
- - - - - checkAnchor(ref?.current)} - onLeave={() => checkAnchor(ref?.current)} - /> - - - -
- - - ) -} - -export default bond(ArticleContentContainer, 'articleContent') as FC diff --git a/src/containers/content/ArticleContent/MobileView/index.tsx b/src/containers/content/ArticleContent/MobileView/index.tsx deleted file mode 100755 index 9c041a217..000000000 --- a/src/containers/content/ArticleContent/MobileView/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import ArticleLayout from './ArticleLayout' - -const ArticleContent = (props) => { - const { metric } = props - - switch (metric) { - default: { - return - } - } -} - -export default ArticleContent diff --git a/src/containers/content/ArticleContent/index.tsx b/src/containers/content/ArticleContent/index.tsx deleted file mode 100755 index 1ad9ec81f..000000000 --- a/src/containers/content/ArticleContent/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -/* - * - * PostContent - * - */ - -// import { Fragment } from 'react' - -import DesktopView from './DesktopView' -import MobileView from './MobileView' - -const ArticleContent = (props) => { - const { isMobile } = props - - return <>{!isMobile ? : } -} - -export default ArticleContent diff --git a/src/containers/content/ArticleContent/logic.ts b/src/containers/content/ArticleContent/logic.ts deleted file mode 100755 index abd907126..000000000 --- a/src/containers/content/ArticleContent/logic.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { useEffect } from 'react' - -import EVENT from '@/constant/event' -import ERR from '@/constant/err' - -import { isElementInViewport } from '@/dom' -import { errRescue } from '@/signal' -import { buildLog } from '@/logger' -import asyncSuit from '@/async' - -import type { TStore } from './store' -import S from './schema' - -const { SR71, $solver, asyncRes, asyncErr } = asyncSuit -const sr71$ = new SR71({ - /* @ts-ignore */ - receive: [EVENT.REFRESH_POSTS], -}) - -let sub$ = null -let store: TStore | undefined - -/* eslint-disable-next-line */ -const log = buildLog('L:PostContent') - -export const checkAnchor = (el: HTMLElement): void => - isElementInViewport(el) ? articleInAnchor() : articleOutAnchor() - -export const articleInAnchor = (): void => { - if (store) store.mark({ articleInViewport: true }) -} - -export const articleOutAnchor = (): void => { - if (store) store.mark({ articleInViewport: false }) -} - -const loadPost = (): void => { - const { id } = store.viewingArticle - sr71$.query(S.post, { id, userHasLogin: store.isLogin }) -} - -// ############################### -// Data & Error handlers -// ############################### - -const DataSolver = [ - { - match: asyncRes('post'), - action: ({ post }) => store.setViewing({ post }), - }, - { - match: asyncRes(EVENT.REFRESH_POSTS), - action: () => loadPost(), - }, -] -const ErrSolver = [ - { - match: asyncErr(ERR.GRAPHQL), - action: () => { - // - }, - }, - { - match: asyncErr(ERR.TIMEOUT), - action: ({ details }) => errRescue({ type: ERR.TIMEOUT, details, path: 'PostContent' }), - }, - { - match: asyncErr(ERR.NETWORK), - action: () => errRescue({ type: ERR.NETWORK, path: 'PostContent' }), - }, -] - -// ############################### -// init & uninit -// ############################### -export const useInit = (_store: TStore): void => { - useEffect(() => { - store = _store - // log('effect init') - - sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver)) - return () => { - if (!sub$) return - sr71$.stop() - sub$.unsubscribe() - } - }, [_store]) -} diff --git a/src/containers/content/ArticleContent/schema.ts b/src/containers/content/ArticleContent/schema.ts deleted file mode 100755 index 32460c7e9..000000000 --- a/src/containers/content/ArticleContent/schema.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { gql } from 'urql/core' -import { P } from '@/schemas' - -const post = gql` - ${P.post} -` -const schema = { - post, -} - -export default schema diff --git a/src/containers/content/ArticleContent/store.ts b/src/containers/content/ArticleContent/store.ts deleted file mode 100755 index 5ac6ab66f..000000000 --- a/src/containers/content/ArticleContent/store.ts +++ /dev/null @@ -1,42 +0,0 @@ -/* - * ArticleContent store - * - */ - -import type { TRootStore, TRoute, TArticle } from '@/spec' - -import { T, getParent, markStates, Instance } from '@/mobx' -import { buildLog } from '@/logger' - -/* eslint-disable-next-line */ -const log = buildLog('S:ArticleContentStore') - -const ArticleContent = T.model('ArticleContent', { - articleInViewport: T.opt(T.bool, true), -}) - .views((self) => ({ - get curRoute(): TRoute { - const root = getParent(self) as TRootStore - return root.curRoute - }, - get isLogin(): boolean { - const root = getParent(self) as TRootStore - return root.account.isLogin - }, - get viewingArticle(): TArticle { - const root = getParent(self) as TRootStore - return root.viewingArticle - }, - })) - .actions((self) => ({ - setViewing(sobj: Record): void { - const root = getParent(self) as TRootStore - root.setViewing(sobj) - }, - mark(sobj: Record): void { - markStates(sobj, self) - }, - })) - -export type TStore = Instance -export default ArticleContent diff --git a/src/containers/content/ArticleContent/styles/desktop_view/article_layout.ts b/src/containers/content/ArticleContent/styles/desktop_view/article_layout.ts deleted file mode 100755 index af563e58d..000000000 --- a/src/containers/content/ArticleContent/styles/desktop_view/article_layout.ts +++ /dev/null @@ -1 +0,0 @@ -export { Wrapper, InnerWrapper, ArticleWrapper, CommentsWrapper } from '.' diff --git a/src/containers/content/ArticleContent/styles/desktop_view/changelog_layout.ts b/src/containers/content/ArticleContent/styles/desktop_view/changelog_layout.ts deleted file mode 100644 index d309601af..000000000 --- a/src/containers/content/ArticleContent/styles/desktop_view/changelog_layout.ts +++ /dev/null @@ -1,12 +0,0 @@ -import styled from 'styled-components' - -import css from '@/css' - -import { Wrapper as WrapperBase } from '.' - -export { InnerWrapper, ArticleWrapper, CommentsWrapper } from '.' - -export const Wrapper = styled(WrapperBase)` - ${css.row('justify-center')}; - padding: 0; -` diff --git a/src/containers/content/ArticleContent/styles/mobile_view.ts b/src/containers/content/ArticleContent/styles/mobile_view.ts deleted file mode 100755 index df94e1ade..000000000 --- a/src/containers/content/ArticleContent/styles/mobile_view.ts +++ /dev/null @@ -1,43 +0,0 @@ -import styled from 'styled-components' - -import type { TTestable } from '@/spec' -import css, { WIDTH } from '@/css' - -export const Wrapper = styled.article.attrs(({ testid }) => ({ - 'data-test-id': testid, -}))` - ${css.rowGrow('justify-center')}; - position: relative; - padding-top: 20px; - min-height: 300px; - - ${css.media.tablet` - padding: 8px 0; - `}; -` -export const InnerWrapper = styled.div` - ${css.row()}; - width: 100%; - padding: 0 6vw; -` -export const MainWrapper = styled.div` - flex-grow: 1; - max-width: ${WIDTH.ARTICLE.CONTENT}; - - ${css.media.tablet` - width: 100%; - `}; -` -export const ArticleWrapper = styled.div` - font-size: 15px; - background: transparent; - min-height: 20vh; - margin-right: 0; -` -export const BodyHeaderWrapper = styled.div` - margin-top: -18px; - margin-bottom: 18px; -` -export const CommentsWrapper = styled.div` - margin-top: 30px; -` diff --git a/src/containers/content/ArticleContent/tests/index.test.js b/src/containers/content/ArticleContent/tests/index.test.js deleted file mode 100755 index a73384fbd..000000000 --- a/src/containers/content/ArticleContent/tests/index.test.js +++ /dev/null @@ -1,10 +0,0 @@ -// import React from 'react' -// import { shallow } from 'enzyme' - -// import ArticleContent from '..' - -describe('TODO ', () => { - it('Expect to have unit tests specified', () => { - expect(true).toEqual(true) - }) -}) diff --git a/src/containers/content/ArticleContent/tests/store.test.js b/src/containers/content/ArticleContent/tests/store.test.js deleted file mode 100755 index c7a4bb629..000000000 --- a/src/containers/content/ArticleContent/tests/store.test.js +++ /dev/null @@ -1,10 +0,0 @@ -/* - * ArticleContent store test - * - */ - -// import ArticleContent from '..' - -it('TODO: store test ArticleContent', () => { - expect(1 + 1).toBe(2) -}) diff --git a/src/containers/digest/ArticleDigest/DesktopView/BackTo.tsx b/src/containers/digest/ArticleDigest/DesktopView/BackTo.tsx deleted file mode 100644 index df6e0f2b9..000000000 --- a/src/containers/digest/ArticleDigest/DesktopView/BackTo.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { FC } from 'react' - -import { Wrapper, ArrowIcon, Title } from '../styles/desktop_view/back_to' - -const BackTo: FC = () => { - return ( - - - 返回 - - ) -} - -export default BackTo diff --git a/src/containers/digest/ArticleDigest/DesktopView/ChangelogLayout.tsx b/src/containers/digest/ArticleDigest/DesktopView/ChangelogLayout.tsx deleted file mode 100644 index 6e2118fcc..000000000 --- a/src/containers/digest/ArticleDigest/DesktopView/ChangelogLayout.tsx +++ /dev/null @@ -1,71 +0,0 @@ -/* - * ChangelogLayout - */ - -import { FC, memo } from 'react' -import Router from 'next/router' - -import type { TChangelog, TMetric } from '@/spec' -import METRIC from '@/constant/metric' -import { ARTICLE_THREAD } from '@/constant/thread' - -import { buildLog } from '@/logger' - -// import ArchivedSign from '@/widgets/ArchivedSign' -import { SpaceGrow } from '@/widgets/Common' -import ArticleBaseStats from '@/widgets/ArticleBaseStats' - -// import ArticleBelongCommunity from '@/widgets/ArticleBelongCommunity' -// import ArticleMenu from '@/widgets/ArticleMenu' -// import BackTo from './BackTo' - -import { - Wrapper, - BackBtnWrapper, - ArrowIcon, - Topping, - Title, - SubTitle, - Avatar, - AuthorName, - BottomInfo, -} from '../styles/desktop_view/changelog_layout' - -/* eslint-disable-next-line */ -const log = buildLog('C:ArticleDigest') - -type TProps = { - article: TChangelog - metric?: TMetric -} - -const ChangelogLayout: FC = ({ metric = METRIC.ARTICLE, article }) => { - const { id, author, title } = article - const backUrl = `/${article.originalCommunitySlug}/${ARTICLE_THREAD.CHANGELOG}` - - return ( - - - Router.push(backUrl)}> - - 更新日志 - - - - - {title} - <SubTitle>{id}</SubTitle> - - - - - {author.nickname} - - - {/* */} - - - ) -} - -export default memo(ChangelogLayout) diff --git a/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx b/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx deleted file mode 100755 index f216d8490..000000000 --- a/src/containers/digest/ArticleDigest/DesktopView/FixedHeader.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { FC, memo } from 'react' - -import type { TArticle, TMetric } from '@/spec' -import { ARTICLE_CAT, ARTICLE_STATE } from '@/constant/gtd' -import METRIC from '@/constant/metric' - -import { SpaceGrow } from '@/widgets/Common' -import Upvote from '@/widgets/Upvote' -import ArticleCatState from '@/widgets/ArticleCatState' -import ArticleBaseStats from '@/widgets/ArticleBaseStats' - -import { Wrapper, InnerWrapper, ContentWrapper, Title } from '../styles/desktop_view/fixed_header' - -type TProps = { - article: TArticle - metric?: TMetric - show?: boolean - testid?: string -} -const FixedHeader: FC = ({ - article, - show = false, - metric = METRIC.ARTICLE, - testid = 'article-fixed-header', -}) => { - const { upvotesCount, meta, viewerHasUpvoted } = article - - return ( - - - - {article.id === '239' && } - {article.id === '231' && } - {article.id === '227' && } - {article.id === '228' && ( - - )} - {article.id === '226' && ( - - )} - {article.id === '225' && ( - - )} - {article.title} - - - - - - - ) -} - -export default memo(FixedHeader) diff --git a/src/containers/digest/ArticleDigest/DesktopView/Header.tsx b/src/containers/digest/ArticleDigest/DesktopView/Header.tsx deleted file mode 100644 index 7c3ca34af..000000000 --- a/src/containers/digest/ArticleDigest/DesktopView/Header.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { FC } from 'react' -import { observer } from 'mobx-react' - -import { assetSrc } from '@/helper' - -import { ANCHOR } from '@/constant/dom' -import { ROUTE } from '@/constant/route' - -import useViewingCommunity from '@/hooks/useViewingCommunity' -import MobileThreadNavi from '@/widgets/MobileThreadNavi' -import AccountUnit from '@/widgets/AccountUnit' - -import { - Wrapper, - InnerWrapper, - Community, - CommunityLogo, - CommunityTitle, - Main, - LinkItem, - MobileNaviWrapper, -} from '../styles/desktop_view/header' - -const Header: FC = () => { - const { slug, title, logo } = useViewingCommunity() - - return ( - - - - - {title} - - -
- 讨论区 - 看板 - 更新日志 - 帮助台 - 关于 -
- - - - - - - - - ) -} - -export default observer(Header) diff --git a/src/containers/digest/ArticleDigest/DesktopView/Layout.tsx b/src/containers/digest/ArticleDigest/DesktopView/Layout.tsx deleted file mode 100755 index 8fecd58bd..000000000 --- a/src/containers/digest/ArticleDigest/DesktopView/Layout.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { FC, memo } from 'react' -import type { TArticle, TMetric } from '@/spec' - -import METRIC from '@/constant/metric' - -import PostLayout from './PostLayout' -import ChangelogLayout from './ChangelogLayout' - -type TProps = { - article: TArticle - metric?: TMetric -} - -const Layout: FC = ({ article, metric = METRIC.ARTICLE }) => { - switch (metric) { - case METRIC.CHANGELOG_ARTICLE: { - return - } - default: { - return - } - } -} - -export default memo(Layout) diff --git a/src/containers/digest/ArticleDigest/DesktopView/dynamic.tsx b/src/containers/digest/ArticleDigest/DesktopView/dynamic.tsx deleted file mode 100755 index d0cf94a66..000000000 --- a/src/containers/digest/ArticleDigest/DesktopView/dynamic.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import dynamic from 'next/dynamic' - -export const CollectionFolder = dynamic( - () => import('@/containers/tool/CollectionFolder'), - { - ssr: false, - }, -) - -export const FixedHeader = dynamic(() => import('./FixedHeader'), { - ssr: false, -}) diff --git a/src/containers/digest/ArticleDigest/DesktopView/index.tsx b/src/containers/digest/ArticleDigest/DesktopView/index.tsx deleted file mode 100755 index 90419d728..000000000 --- a/src/containers/digest/ArticleDigest/DesktopView/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/* - * ArticleDigest - */ - -import { FC } from 'react' -import { isNil } from 'ramda' - -import useMetric from '@/hooks/useMetric' - -import { buildLog } from '@/logger' -import { bond } from '@/mobx' - -import ViewportTracker from '@/widgets/ViewportTracker' -import FixedHeader from './FixedHeader' -import Header from './Header' -import Layout from './Layout' - -import type { TStore } from '../store' -import { Wrapper, InnerWrapper, BannerContent } from '../styles/desktop_view' -import { useInit, inAnchor, outAnchor } from '../logic' - -/* eslint-disable-next-line */ -const log = buildLog('C:ArticleDigest') - -type TProps = { - articleDigest?: TStore - testid?: string -} - -const ArticleDigestContainer: FC = ({ - articleDigest: store, - testid = 'article-digest', -}) => { - // const { isMobile } = useMobileDetect() - useInit(store) - const metric = useMetric() - - const { viewingArticle, inViewport } = store - if (isNil(viewingArticle.id)) return null - - return ( - - {/* @ts-ignore */} - {/* {!isMobile && } */} - {/* @ts-ignore */} - - -
- - - - - - - ) -} - -export default bond(ArticleDigestContainer, 'articleDigest') as FC diff --git a/src/containers/digest/ArticleDigest/MobileView/BackTo.tsx b/src/containers/digest/ArticleDigest/MobileView/BackTo.tsx deleted file mode 100644 index 66254c05f..000000000 --- a/src/containers/digest/ArticleDigest/MobileView/BackTo.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { FC } from 'react' - -import { Wrapper, ArrowIcon, Title } from '../styles/mobile_view/back_to' - -const BackTo: FC = () => { - return ( - - - 返回 - - ) -} - -export default BackTo diff --git a/src/containers/digest/ArticleDigest/MobileView/FixedHeader.tsx b/src/containers/digest/ArticleDigest/MobileView/FixedHeader.tsx deleted file mode 100644 index 23e27a77a..000000000 --- a/src/containers/digest/ArticleDigest/MobileView/FixedHeader.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { FC, memo } from 'react' - -import type { TArticle, TMetric } from '@/spec' -import { ARTICLE_CAT, ARTICLE_STATE } from '@/constant/gtd' -import METRIC from '@/constant/metric' - -import { SpaceGrow, DesktopOnly } from '@/widgets/Common' -import ArticleCatState from '@/widgets/ArticleCatState' -import ArticleBaseStats from '@/widgets/ArticleBaseStats' - -import { Wrapper, InnerWrapper, ContentWrapper, Title } from '../styles/mobile_view/fixed_header' - -type TProps = { - article: TArticle - metric?: TMetric - show?: boolean - testid?: string -} -const FixedHeader: FC = ({ - article, - show = false, - metric = METRIC.ARTICLE, - testid = 'article-fixed-header', -}) => { - return ( - - - - {article.id === '239' && } - {article.id === '231' && } - {article.id === '227' && } - {article.id === '228' && ( - - )} - {article.id === '226' && ( - - )} - {article.id === '225' && ( - - )} - {article.title} - - - - - - - - ) -} - -export default memo(FixedHeader) diff --git a/src/containers/digest/ArticleDigest/MobileView/Header.tsx b/src/containers/digest/ArticleDigest/MobileView/Header.tsx deleted file mode 100644 index ec7ee1d41..000000000 --- a/src/containers/digest/ArticleDigest/MobileView/Header.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { FC } from 'react' -import { observer } from 'mobx-react' - -import type { TMetric } from '@/spec' - -import useViewingCommunity from '@/hooks/useViewingCommunity' -import { assetSrc } from '@/helper' - -import { ANCHOR } from '@/constant/dom' -import { ROUTE } from '@/constant/route' - -import MobileThreadNavi from '@/widgets/MobileThreadNavi' - -import { - Wrapper, - InnerWrapper, - Community, - CommunityLogo, - CommunityTitle, - Main, - LinkItem, - Account, - AccountIcon, - MobileNaviWrapper, -} from '../styles/mobile_view/header' - -type TProps = { - metric: TMetric -} - -const Header: FC = ({ metric }) => { - const community = useViewingCommunity() - - return ( - - - - - {community.title} - - -
- 讨论区 - 看板 - 更新日志 - 帮助台 - 关于 -
- - - - - - - - - - - ) -} - -export default observer(Header) diff --git a/src/containers/digest/ArticleDigest/MobileView/Layout.tsx b/src/containers/digest/ArticleDigest/MobileView/Layout.tsx deleted file mode 100755 index 1147a02da..000000000 --- a/src/containers/digest/ArticleDigest/MobileView/Layout.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { FC, memo } from 'react' -import type { TArticle } from '@/spec' - -import PostLayout from './PostLayout' - -type TProps = { - article: TArticle -} - -const Layout: FC = ({ article }) => { - return -} - -export default memo(Layout) diff --git a/src/containers/digest/ArticleDigest/MobileView/PostLayout.tsx b/src/containers/digest/ArticleDigest/MobileView/PostLayout.tsx deleted file mode 100755 index 9c3322eaa..000000000 --- a/src/containers/digest/ArticleDigest/MobileView/PostLayout.tsx +++ /dev/null @@ -1,83 +0,0 @@ -/* - * PostLayout - */ - -import { FC, memo } from 'react' - -import type { TPost, TMetric } from '@/spec' -import { ARTICLE_CAT, ARTICLE_STATE } from '@/constant/gtd' -import METRIC from '@/constant/metric' -import { buildLog } from '@/logger' - -// import ArchivedSign from '@/widgets/ArchivedSign' -import Upvote from '@/widgets/Upvote' -import ArticleBaseStats from '@/widgets/ArticleBaseStats' -// import ArticleBelongCommunity from '@/widgets/ArticleBelongCommunity' -// import ArticleMenu from '@/widgets/ArticleMenu' -import ReadableDate from '@/widgets/ReadableDate' -import ArticleCatState from '@/widgets/ArticleCatState' - -// import BackTo from './BackTo' - -import { - Wrapper, - Topping, - PublishDateInfo, - Title, - BottomInfo, - Divider, -} from '../styles/mobile_view/post_layout' - -/* eslint-disable-next-line */ -const log = buildLog('C:ArticleDigest') - -type TProps = { - article: TPost - metric?: TMetric -} - -const PostLayout: FC = ({ metric = METRIC.ARTICLE, article }) => { - const { - title, - insertedAt, - // isArchived, - // archivedAt, - upvotesCount, - meta, - viewerHasUpvoted, - } = article - - return ( - - {/* */} - -
- {article.id === '239' && } - {article.id === '231' && } - {article.id === '227' && } - {article.id === '228' && } - {article.id === '226' && } - {article.id === '225' && ( - - )} -
- - - - - - {title} - - - - {/* */} - - - ) -} - -export default memo(PostLayout) diff --git a/src/containers/digest/ArticleDigest/MobileView/dynamic.tsx b/src/containers/digest/ArticleDigest/MobileView/dynamic.tsx deleted file mode 100644 index e411cdf5a..000000000 --- a/src/containers/digest/ArticleDigest/MobileView/dynamic.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import dynamic from 'next/dynamic' - -export const CollectionFolder = dynamic(() => import('@/containers/tool/CollectionFolder'), { - ssr: false, -}) - -export const FixedHeader = dynamic(() => import('./FixedHeader'), { - ssr: false, -}) diff --git a/src/containers/digest/ArticleDigest/MobileView/index.tsx b/src/containers/digest/ArticleDigest/MobileView/index.tsx deleted file mode 100755 index 0773d12dc..000000000 --- a/src/containers/digest/ArticleDigest/MobileView/index.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/* - * ArticleDigest - */ - -import { FC } from 'react' -import { isNil } from 'ramda' - -import type { TMetric } from '@/spec' -import METRIC from '@/constant/metric' - -import { buildLog } from '@/logger' -import { bond } from '@/mobx' - -import ViewportTracker from '@/widgets/ViewportTracker' -import FixedHeader from './FixedHeader' -import Header from './Header' -import Layout from './Layout' - -import type { TStore } from '../store' -import { Wrapper, InnerWrapper, BannerContent } from '../styles/mobile_view' -import { useInit, inAnchor, outAnchor } from '../logic' - -/* eslint-disable-next-line */ -const log = buildLog('C:ArticleDigest') - -type TProps = { - articleDigest?: TStore - testid?: string - metric?: TMetric -} - -const ArticleDigestContainer: FC = ({ - articleDigest: store, - testid = 'article-digest', - metric = METRIC.ARTICLE, -}) => { - useInit(store) - - const { viewingArticle, inViewport } = store - - if (isNil(viewingArticle.id)) return null - - return ( - - - -
- - - - - - - ) -} - -export default bond(ArticleDigestContainer, 'articleDigest') as FC diff --git a/src/containers/digest/ArticleDigest/index.tsx b/src/containers/digest/ArticleDigest/index.tsx deleted file mode 100755 index 0e926e371..000000000 --- a/src/containers/digest/ArticleDigest/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -/* - * - * ArticleDigest - * - */ - -// import { Fragment } from 'react' -import DesktopView from './DesktopView' -import MobileView from './MobileView' - -const ArticleDigest = (props) => { - const { isMobile } = props - - return <>{isMobile ? : } -} - -export default ArticleDigest diff --git a/src/containers/digest/ArticleDigest/logic.ts b/src/containers/digest/ArticleDigest/logic.ts deleted file mode 100755 index 49d259b83..000000000 --- a/src/containers/digest/ArticleDigest/logic.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { useEffect } from 'react' - -import EVENT from '@/constant/event' -import ERR from '@/constant/err' -import asyncSuit from '@/async' -import { send, errRescue } from '@/signal' -import { buildLog } from '@/logger' - -import type { TStore } from './store' -import S from './schema' - -/* eslint-disable-next-line */ -const log = buildLog('L:ArticleDigest') - -const { SR71, $solver, asyncRes, asyncErr } = asyncSuit -const sr71$ = new SR71() - -let store: TStore | undefined -let sub$ = null - -export const inAnchor = (): void => { - if (store) store.mark({ inViewport: true }) -} - -export const outAnchor = (): void => { - if (store) store.mark({ inViewport: false }) -} - -export const onListReactionUsers = (type, data): void => - send(EVENT.USER_LISTER_OPEN, { - type, - data: { ...data, thread: store.activeThread }, - }) - -export const subscribeCommunity = (): void => { - const { viewingArticle } = store - const communityId = viewingArticle.originalCommunity.id - - sr71$.mutate(S.subscribeCommunity, { communityId }) -} - -export const unsubscribeCommunity = (): void => { - const { viewingArticle } = store - const communityId = viewingArticle.originalCommunity.id - sr71$.mutate(S.unsubscribeCommunity, { communityId }) -} - -export const loadCommunity = (): void => { - const { viewingArticle, isLogin } = store - if (!isLogin) return - - const { slug } = viewingArticle.originalCommunity - sr71$.query(S.community, { slug }) -} - -// ############################### -// Data & Error handlers -// ############################### - -const DataSolver = [ - { - match: asyncRes('community'), - action: ({ community }) => { - const { viewerHasSubscribed, subscribersCount } = community - store.mark({ viewerHasSubscribed, subscribersCount }) - }, - }, - - { - match: asyncRes('subscribeCommunity'), - action: () => loadCommunity(), - }, - { - match: asyncRes('unsubscribeCommunity'), - action: () => loadCommunity(), - }, -] -const ErrSolver = [ - { - match: asyncErr(ERR.GRAPHQL), - action: () => { - // - }, - }, - { - match: asyncErr(ERR.TIMEOUT), - action: ({ details }) => errRescue({ type: ERR.TIMEOUT, details, path: 'AccountEditor' }), - }, - { - match: asyncErr(ERR.NETWORK), - action: () => errRescue({ type: ERR.NETWORK, path: 'ArticleDigest' }), - }, -] - -// ############################### -// init & uninit -// ############################### -export const useInit = (_store: TStore): void => { - useEffect(() => { - store = _store - // log('effect init') - if (!sub$) { - sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver)) - } - - loadCommunity() - - return () => { - // log('effect uninit') - store.reset() - sr71$.stop() - sub$.unsubscribe() - } - }, [_store]) -} diff --git a/src/containers/digest/ArticleDigest/schema.ts b/src/containers/digest/ArticleDigest/schema.ts deleted file mode 100755 index e6ad140f5..000000000 --- a/src/containers/digest/ArticleDigest/schema.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { gql } from 'urql/core' - -const community = gql` - query community($slug: String) { - community(slug: $slug) { - viewerHasSubscribed - subscribersCount - } - } -` - -const post = gql` - query ($id: ID!) { - post(id: $id) { - id - commentsCount - collectsCount - upvotesCount - viewerHasCollected - viewerHasUpvoted - } - } -` - -const subscribeCommunity = gql` - mutation ($communityId: ID!) { - subscribeCommunity(communityId: $communityId) { - id - slug - } - } -` -const unsubscribeCommunity = gql` - mutation ($communityId: ID!) { - unsubscribeCommunity(communityId: $communityId) { - id - slug - } - } -` - -const schema = { - community, - post, - subscribeCommunity, - unsubscribeCommunity, -} - -export default schema diff --git a/src/containers/digest/ArticleDigest/store.ts b/src/containers/digest/ArticleDigest/store.ts deleted file mode 100755 index 462f62138..000000000 --- a/src/containers/digest/ArticleDigest/store.ts +++ /dev/null @@ -1,91 +0,0 @@ -/* - * ArticleDigest store - * - */ - -import { merge } from 'ramda' - -import type { TRootStore, TThread, TArticle } from '@/spec' -import TYPE from '@/constant/type' - -import { T, getParent, markStates, toJS, Instance } from '@/mobx' - -const ArticleDigest = T.model('ArticleDigest', { - loading: T.opt(T.bool, false), - viewerHasSubscribed: T.opt(T.bool, false), - subscribersCount: T.opt(T.number, -1), - - action: T.opt(T.enum('action', [TYPE.FAVORITE, TYPE.STAR]), TYPE.FAVORITE), - scrollDirection: T.opt(T.enum('scrollDirection', ['up', 'down']), 'down'), - inViewport: T.opt(T.bool, true), -}) - .views((self) => ({ - get isMobile(): boolean { - const root = getParent(self) as TRootStore - - return root.isMobile - }, - get isLogin(): boolean { - const root = getParent(self) as TRootStore - return root.account.isLogin - }, - get viewingArticle(): TArticle { - const root = getParent(self) as TRootStore - const article = toJS(root.viewing.viewingArticle) - const slf = self as TStore - - if (!slf.isLogin) { - return toJS(article) - } - - const { viewerHasSubscribed, subscribersCount } = self - const originalCommunity = merge(article.originalCommunity, { - viewerHasSubscribed, - subscribersCount: - subscribersCount === -1 ? article.originalCommunity.subscribersCount : subscribersCount, - }) - - // @ts-ignore - return merge(article, { originalCommunity }) - }, - get activeThread(): TThread { - const root = getParent(self) as TRootStore - - const { activeThread } = root.viewing - return activeThread - }, - get starLoading(): boolean { - const { action, loading } = self - if (action === TYPE.STAR && loading) return true - return false - }, - get favoriteLoading(): boolean { - const { action, loading } = self - if (action === TYPE.FAVORITE && loading) return true - return false - }, - })) - .actions((self) => ({ - authWarning(options): void { - const root = getParent(self) as TRootStore - root.authWarning(options) - }, - setViewing(sobj): void { - const root = getParent(self) as TRootStore - root.setViewing(sobj) - }, - syncArticle(item): void { - const root = getParent(self) as TRootStore - root.viewing.syncArticle(item) - }, - reset(): void { - self.subscribersCount = -1 - self.viewerHasSubscribed = false - }, - mark(sobj: Record): void { - markStates(sobj, self) - }, - })) - -export type TStore = Instance -export default ArticleDigest diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/back_to.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/back_to.ts deleted file mode 100644 index 4a548cdc3..000000000 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/back_to.ts +++ /dev/null @@ -1,35 +0,0 @@ -import styled from 'styled-components' -import Link from 'next/link' - -import css, { theme } from '@/css' - -import ArrowSVG from '@/icons/Arrow' - -export const Wrapper = styled.div` - ${css.row('align-center')}; - position: absolute; - left: -180px; - top: 50px; - opacity: 0.8; - - &:hover { - opacity: 1; - } - - transition: all 0.2s; -` -export const ArrowIcon = styled(ArrowSVG)` - ${css.size(11)}; - fill: ${theme('article.info')}; - margin-right: 6px; -` - -export const Title = styled(Link)` - font-size: 13px; - color: ${theme('article.info')}; - text-decoration: none; - - ${Wrapper}:hover & { - text-decoration: underline; - } -` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts deleted file mode 100755 index 6a4664dd2..000000000 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts +++ /dev/null @@ -1,68 +0,0 @@ -import styled from 'styled-components' - -import type { TTestable, TMetric, TActive } from '@/spec' -import css, { theme, zIndex } from '@/css' -import Img from '@/Img' - -type TWrapper = TTestable & TActive -export const Wrapper = styled.nav.attrs(({ testid }) => ({ - 'data-test-id': testid, -}))` - ${css.row('justify-center')}; - top: ${({ show }) => (show ? 0 : '-48px;')}; - opacity: ${({ show }) => (show ? 1 : 0)}; - z-index: ${({ show }) => (show ? zIndex.articleFixedHeader : -1)}; - - position: fixed; - top: 0; - left: 0; - width: 100%; - - transition-property: top, opacity; - transition-duration: 0.25s; - transition-timing-function: ease-out; -` -export const InnerWrapper = styled.div<{ metric: TMetric }>` - ${css.row('align-both')}; - /* background: white; */ - background: radial-gradient(circle, rgb(255 255 255) 15%, rgb(255 255 255 / 0%) 56%), - radial-gradient(circle, rgb(255 255 255 / 53%) 30%, transparent 68%); - backdrop-filter: blur(8px); - - width: 100%; - height: 46px; - ${({ metric }) => css.fitPageWidth(metric)}; - border-radius: 5px; - border-top-left-radius: 0; - border-top-right-radius: 0; - padding: 0 10px; - padding-left: 0; -` -export const ContentWrapper = styled.div<{ metric: TMetric }>` - ${css.row('align-center', 'justify-between')}; - width: 100%; - height: 100%; - padding: 0 200px; -` -export const Cover = styled(Img)` - ${css.size(28)}; - margin-right: 15px; -` -export const Title = styled.div` - ${css.cutRest('300px')}; - color: ${theme('article.title')}; - font-weight: 500; - font-size: 17px; - - ${css.media.mobile` - font-size: 14px; - font-weight: 400; - height: 24px; - ${css.cutRest('210px')}; - `}; -` -export const Desc = styled.div` - color: ${theme('article.digest')}; - font-size: 14px; - ${css.cutRest('300px')}; -` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/header.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/header.ts deleted file mode 100644 index aed1cb685..000000000 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/header.ts +++ /dev/null @@ -1,74 +0,0 @@ -import styled from 'styled-components' -import Link from 'next/link' - -import css, { theme } from '@/css' - -import Img from '@/Img' - -export const Wrapper = styled.div` - ${css.row('align-both')}; - position: relative; - background: transparent; - width: 100%; -` -export const InnerWrapper = styled.div` - ${css.row('align-center', 'justify-between')}; - width: 100%; - height: 54px; -` -export const Community = styled.div` - ${css.row('align-both')}; - width: 100px; -` -export const CommunityLogo = styled(Img)` - ${css.size(20)}; -` -export const CommunityTitle = styled.div` - color: ${theme('article.title')}; - font-size: 14px; - font-weight: 500; - margin-left: 8px; -` - -export const Main = styled.div` - ${css.row('align-both')}; - gap: 0 32px; - width: 100%; - height: 100%; - - border-bottom: 1px solid transparent; - border-image: linear-gradient( - 0.35turn, - transparent, - ${theme('divider')}, - ${theme('divider')}, - ${theme('divider')}, - transparent - ); - - border-image-slice: 1; - - ${css.media.mobile` - display: none; - `}; -` -export const LinkItem = styled(Link)` - font-size: 13px; - color: ${theme('article.digest')}; - font-weight: 400; - text-decoration: none; - - &:hover { - font-weight: 500; - text-decoration: none; - color: ${theme('article.title')}; - } -` -export const MobileNaviWrapper = styled.div` - display: none; - - ${css.media.mobile` - ${css.rowGrow('align-center')}; - margin-left: 10px; - `} -` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts deleted file mode 100755 index 97e5cd311..000000000 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/metric.ts +++ /dev/null @@ -1,28 +0,0 @@ -import type { TMetric, TThread, TFlexRule } from '@/spec' - -export const getDigestHeight = (metric: TMetric): string => { - switch (metric) { - default: { - return '252px' - } - } -} - -/** - * for fixedheader sticker margin-left offset - */ -export const getFixStickerOffset = (metric: TMetric): string => { - switch (metric) { - default: { - return '0' - } - } -} - -export const getFixStickerAlign = (thread: TThread): TFlexRule => { - switch (thread) { - default: { - return 'justify-center' - } - } -} diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/back_to.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/back_to.ts deleted file mode 100644 index 4a548cdc3..000000000 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/back_to.ts +++ /dev/null @@ -1,35 +0,0 @@ -import styled from 'styled-components' -import Link from 'next/link' - -import css, { theme } from '@/css' - -import ArrowSVG from '@/icons/Arrow' - -export const Wrapper = styled.div` - ${css.row('align-center')}; - position: absolute; - left: -180px; - top: 50px; - opacity: 0.8; - - &:hover { - opacity: 1; - } - - transition: all 0.2s; -` -export const ArrowIcon = styled(ArrowSVG)` - ${css.size(11)}; - fill: ${theme('article.info')}; - margin-right: 6px; -` - -export const Title = styled(Link)` - font-size: 13px; - color: ${theme('article.info')}; - text-decoration: none; - - ${Wrapper}:hover & { - text-decoration: underline; - } -` diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/fixed_header.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/fixed_header.ts deleted file mode 100644 index 47e738726..000000000 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/fixed_header.ts +++ /dev/null @@ -1,78 +0,0 @@ -import styled from 'styled-components' - -import type { TTestable, TMetric, TActive } from '@/spec' -import css, { theme, zIndex } from '@/css' -import Img from '@/Img' - -type TWrapper = TTestable & TActive -export const Wrapper = styled.nav.attrs(({ testid }) => ({ - 'data-test-id': testid, -}))` - ${css.row('justify-center')}; - top: ${({ show }) => (show ? 0 : '-48px;')}; - opacity: ${({ show }) => (show ? 1 : 0)}; - z-index: ${({ show }) => (show ? zIndex.articleFixedHeader : -1)}; - - position: fixed; - top: 0; - left: 0; - width: 100%; - - transition-property: top, opacity; - transition-duration: 0.25s; - transition-timing-function: ease-out; -` -export const InnerWrapper = styled.div<{ metric: TMetric }>` - ${css.row('align-both')}; - /* background: white; */ - background: radial-gradient(circle, rgb(255 255 255) 15%, rgb(255 255 255 / 0%) 56%), - radial-gradient(circle, rgb(255 255 255 / 53%) 30%, transparent 68%); - backdrop-filter: blur(8px); - - width: 100%; - height: 46px; - ${({ metric }) => css.fitPageWidth(metric)}; - border-radius: 5px; - border-top-left-radius: 0; - border-top-right-radius: 0; - padding: 0 10px; - padding-left: 0; - - ${css.media.mobile` - height: 36px; - background: radial-gradient(circle,rgb(255 255 255) 15%,rgb(255 255 255 / 0%) 56%),radial-gradient(circle,rgb(255 255 255 / 70%) 80% 68%); - backdrop-filter: blur(10px); - `}; -` -export const ContentWrapper = styled.div<{ metric: TMetric }>` - ${css.row('align-center', 'justify-between')}; - width: 100%; - height: 100%; - ${({ metric }) => css.fitContentWidth(metric)}; - - ${css.media.mobile` - margin-left: 15px; - `}; -` -export const Cover = styled(Img)` - ${css.size(28)}; - margin-right: 15px; -` -export const Title = styled.div` - ${css.cutRest('300px')}; - color: ${theme('article.title')}; - font-weight: 500; - font-size: 17px; - - ${css.media.mobile` - font-size: 14px; - font-weight: 400; - height: 24px; - ${css.cutRest('230px')}; - `}; -` -export const Desc = styled.div` - color: ${theme('article.digest')}; - font-size: 14px; - ${css.cutRest('300px')}; -` diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/header.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/header.ts deleted file mode 100644 index 898eaa6c3..000000000 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/header.ts +++ /dev/null @@ -1,108 +0,0 @@ -import styled from 'styled-components' -import Link from 'next/link' - -import type { TMetric } from '@/spec' -import css, { theme } from '@/css' - -import AccountSVG from '@/icons/Acount' -import Img from '@/Img' - -export const Wrapper = styled.div` - ${css.row('align-both')}; - position: relative; - background: transparent; - width: 100%; -` -export const InnerWrapper = styled.div` - display: none; - ${css.media.mobile` - ${css.row('align-center', 'justify-between')}; - width: 100%; - height: 40px; - padding: 0 20px; - padding-top: 2px; - padding-left: 14px; - `}; -` -export const Community = styled.div` - ${css.row('align-both')}; - width: 100px; -` -export const CommunityLogo = styled(Img)` - ${css.size(20)}; -` -export const CommunityTitle = styled.div` - color: ${theme('article.title')}; - font-size: 14px; - font-weight: 500; - margin-left: 8px; -` - -export const Main = styled.div<{ metric: TMetric }>` - ${css.row('align-both')}; - gap: 0 32px; - width: 100%; - ${({ metric }) => css.fitContentWidth(metric)}; - margin-left: -20px !important; - height: 100%; - - border-bottom: 1px solid transparent; - border-image: linear-gradient( - 0.35turn, - transparent, - ${theme('divider')}, - ${theme('divider')}, - ${theme('divider')}, - transparent - ); - - border-image-slice: 1; - - ${css.media.mobile` - display: none; - `}; -` -export const LinkItem = styled(Link)` - font-size: 13px; - color: ${theme('article.digest')}; - font-weight: 400; - text-decoration: none; - - &:hover { - font-weight: 500; - text-decoration: none; - color: ${theme('article.title')}; - } -` - -export const Account = styled.div`` - -const hoverEffect = ` - opacity: 0.8; - - &:hover { - opacity: 1; - cursor: pointer; - } - transition: all 0.2s; -` - -export const AccountIcon = styled(AccountSVG)` - fill: ${theme('article.digest')}; - ${css.size(16)}; - margin-right: 14px; - - ${css.media.mobile` - ${css.size(14)}; - margin-right: 0; - `}; - ${hoverEffect} -` -export const MobileNaviWrapper = styled.div` - display: none; - - ${css.media.mobile` - ${css.rowGrow('align-center')}; - margin-left: 10px; - `} -` diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/index.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/index.ts deleted file mode 100755 index d8e0df67d..000000000 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/index.ts +++ /dev/null @@ -1,26 +0,0 @@ -import styled from 'styled-components' - -import type { TTestable, TMetric } from '@/spec' -import css, { theme } from '@/css' - -type TWrapper = { metric: TMetric } & TTestable -export const Wrapper = styled.nav.attrs(({ testid }) => ({ - 'data-test-id': testid, -}))` - ${css.column('justify-center')}; - position: relative; - background: transparent; - border-bottom: ${theme('banner.spliter')}; - width: 100%; - - height: auto; - margin-bottom: 16px; - min-height: 240px; -` -export const InnerWrapper = styled.div` - width: 100%; -` -export const BannerContent = styled.div` - ${css.row('justify-center')}; - width: 100%; -` diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/metric.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/metric.ts deleted file mode 100644 index 97e5cd311..000000000 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/metric.ts +++ /dev/null @@ -1,28 +0,0 @@ -import type { TMetric, TThread, TFlexRule } from '@/spec' - -export const getDigestHeight = (metric: TMetric): string => { - switch (metric) { - default: { - return '252px' - } - } -} - -/** - * for fixedheader sticker margin-left offset - */ -export const getFixStickerOffset = (metric: TMetric): string => { - switch (metric) { - default: { - return '0' - } - } -} - -export const getFixStickerAlign = (thread: TThread): TFlexRule => { - switch (thread) { - default: { - return 'justify-center' - } - } -} diff --git a/src/containers/digest/ArticleDigest/styles/mobile_view/post_layout.ts b/src/containers/digest/ArticleDigest/styles/mobile_view/post_layout.ts deleted file mode 100755 index 6ddab5ab5..000000000 --- a/src/containers/digest/ArticleDigest/styles/mobile_view/post_layout.ts +++ /dev/null @@ -1,87 +0,0 @@ -import Link from 'next/link' -import styled from 'styled-components' - -import type { TMetric } from '@/spec' -import METRIC from '@/constant/metric' -import css, { theme } from '@/css' - -import DotDivider from '@/widgets/DotDivider' - -export const Wrapper = styled.div<{ metric: TMetric }>` - ${({ metric }) => css.fitContentWidth(metric)}; - width: 100%; - margin-top: 50px; - position: relative; - - ${css.media.mobile` - margin-top: 24px; - margin-left: 0; - padding: 0 20px; - `}; -` -export const Topping = styled.div` - ${css.row('align-center')}; - margin-bottom: 14px; - position: relative; - - ${css.media.mobile` - margin-bottom: 8px; - `}; -` -export const PublishDateInfo = styled.div` - font-size: 10px; - color: ${theme('article.digest')}; -` -export const CommunityInfo = styled.div` - ${css.row('align-start', 'justify-center')}; - margin-top: 5px; - ${css.fitStickerWidth(METRIC.ARTICLE)}; -` -export const Title = styled.div` - font-size: 26px; - color: ${theme('article.title')}; - margin-bottom: 30px; - ${css.lineClamp(3)}; - - ${css.media.mobile` - font-size: 20px; - margin-bottom: 15px; - `}; -` -export const BottomInfo = styled.div` - ${css.row('align-center', 'justify-between')}; - padding-bottom: 30px; - border-bottom: 1px solid; - padding-left: 2px; - padding-right: 2px; - border-bottom-color: ${theme('divider')}; - width: 100%; - color: ${theme('article.digest')}; - - ${css.media.mobile` - padding-left: 0; - padding-right: 0; - `}; -` -export const AuthorName = styled(Link)` - color: ${theme('article.digest')}; - text-decoration: none; - font-size: 14px; - margin-bottom: 1px; - - &:hover { - text-decoration: underline; - color: ${theme('article.digest')}; - cursor: pointer; - } -` - -export const Divider = styled(DotDivider)` - margin-left: 12px; - margin-right: 12px; - - ${css.media.mobile` - margin-left: 8px; - margin-right: 8px; - `}; -` diff --git a/src/containers/digest/ArticleDigest/tests/store.test.ts b/src/containers/digest/ArticleDigest/tests/store.test.ts deleted file mode 100755 index 9ce41d297..000000000 --- a/src/containers/digest/ArticleDigest/tests/store.test.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - * ArticleDigest store test - * - */ - -// import ArticleDigest from '..' - -it('TODO: store test ArticleDigest', () => { - expect(1 + 1).toBe(2) -}) diff --git a/src/containers/tool/ArticleSticker/store.ts b/src/containers/tool/ArticleSticker/store.ts index b3dea66ad..4e2871488 100755 --- a/src/containers/tool/ArticleSticker/store.ts +++ b/src/containers/tool/ArticleSticker/store.ts @@ -35,13 +35,16 @@ const ArticleSticker = T.model('ArticleSticker', { }, get isArticleDigestInViewport(): boolean { const root = getParent(self) as TRootStore - return root.articleDigest.inViewport + // return root.articleDigest.inViewport + // TODO: + return true }, get isArticleInViewport(): boolean { const root = getParent(self) as TRootStore - const { articleInViewport } = root.articleContent + // const { articleInViewport } = root.articleContent - return articleInViewport + // TODO: + return true }, get showLeftSticker(): boolean { const { isArticleDigestInViewport, isLeftStickerLocked, bodyScrollDirection } = self as TStore diff --git a/src/containers/unit/ModeLine/store.ts b/src/containers/unit/ModeLine/store.ts index e54ee5e52..49b0b78ce 100755 --- a/src/containers/unit/ModeLine/store.ts +++ b/src/containers/unit/ModeLine/store.ts @@ -43,7 +43,8 @@ const ModeLine = T.model('ModeLine', { get isArticleBarVisiable(): boolean { const root = getParent(self) as TRootStore - return !root.articleDigest.inViewport + // TODO: + return true }, get isTopBarVisiable(): boolean { const slf = self as TStore @@ -79,7 +80,9 @@ const ModeLine = T.model('ModeLine', { }, get isArticleDigestInViewport(): boolean { const root = getParent(self) as TRootStore - return root.articleDigest.inViewport + // return root.articleDigest.inViewport + // TODO: + return true }, get isCommunityBlockExpand(): boolean { const slf = self as TStore diff --git a/src/pages/[community]/changelog/[id].tsx b/src/pages/[community]/changelog/[id].tsx index c5121b428..581535d34 100644 --- a/src/pages/[community]/changelog/[id].tsx +++ b/src/pages/[community]/changelog/[id].tsx @@ -8,28 +8,39 @@ import { HCN } from '@/constant/name' import { ARTICLE_THREAD } from '@/constant/thread' import METRIC from '@/constant/metric' -import { ssrFetchPrepare, ssrRescue, ssrError } from '@/utils' +import { + ssrFetchPrepare, + ssrRescue, + ssrError, + ssrParseDashboard, + ssrParseWallpaper, + ssrBaseStates, +} from '@/utils' import { useStore } from '@/stores/init' import GlobalLayout from '@/containers/layout/GlobalLayout' -import ArticleDigest from '@/containers/digest/ArticleDigest' -import ArticleContent from '@/containers/content/ArticleContent' +import ArticleChangelog from '@/widgets/Article/Changelog' import LavaLampLoading from '@/widgets/Loading/LavaLampLoading' import { P } from '@/schemas' const loader = async (context, opt = {}) => { const { query } = context - const { gqClient } = ssrFetchPrepare(context, opt) + const { gqClient, userHasLogin } = ssrFetchPrepare(context, opt) const community = query.community || HCN // query data const sessionState = gqClient.request(P.sessionState) + const curCommunity = gqClient.request(P.community, { + slug: community, + userHasLogin, + }) const changelog = gqClient.request(P.changelog, { community, id: query.id, userHasLogin: false }) return { ...(await sessionState), + ...(await curCommunity), ...(await changelog), } } @@ -52,15 +63,28 @@ export const getServerSideProps: GetServerSideProps = async (context) => { } } + const { community, changelog } = resp + + const dashboard = ssrParseDashboard(community) + const wallpaper = ssrParseWallpaper(community) + const initProps = { + ...ssrBaseStates(resp), metric: METRIC.CHANGELOG_ARTICLE, globalLayout: { isMobile: device?.isMobile, }, viewing: { - changelog: resp.changelog, + community, + changelog, activeThread: ARTICLE_THREAD.CHANGELOG, }, + wallpaperEditor: { + ...wallpaper, + }, + dashboardThread: { + ...dashboard, + }, } return { @@ -77,13 +101,10 @@ const ChangelogPage = (props) => { const { isFallback } = useRouter() if (isFallback) return - const { globalLayout } = props - return ( - - + ) diff --git a/src/pages/[community]/post/[id].tsx b/src/pages/[community]/post/[id].tsx index 53a69c2ed..188a2d61b 100644 --- a/src/pages/[community]/post/[id].tsx +++ b/src/pages/[community]/post/[id].tsx @@ -19,8 +19,8 @@ import { import { useStore } from '@/stores/init' import GlobalLayout from '@/containers/layout/GlobalLayout' -import ArticleDigest from '@/containers/digest/ArticleDigest' -import ArticleContent from '@/containers/content/ArticleContent' + +import ArticlePost from '@/widgets/Article/Post' import LavaLampLoading from '@/widgets/Loading/LavaLampLoading' import { P } from '@/schemas' @@ -102,13 +102,10 @@ const PostPage = (props) => { const { isFallback } = useRouter() if (isFallback) return - const { globalLayout } = props - return ( - - + ) diff --git a/src/stores/RootStore/index.ts b/src/stores/RootStore/index.ts index b2d622479..4486c3cfc 100755 --- a/src/stores/RootStore/index.ts +++ b/src/stores/RootStore/index.ts @@ -29,8 +29,6 @@ import { ThemeDefaults, ErrorBoxStore, - // threads - ArticleDigestStore, // content CommunityContentStore, // ExploreContentStore, @@ -71,7 +69,6 @@ import { KanbanThreadStore, UserPublishedArticlesStore, CollectionFolderStore, - ArticleContentStore, ArticleViewerStore, ArticlesThreadStore, ThreadSidebarStore, @@ -122,9 +119,6 @@ const rootStore = T.model({ errorBox: T.opt(ErrorBoxStore, {}), - // banners - articleDigest: T.opt(ArticleDigestStore, {}), - // content communityContent: T.opt(CommunityContentStore, {}), @@ -165,7 +159,6 @@ const rootStore = T.model({ kanbanThread: T.opt(KanbanThreadStore, {}), userPublishedArticles: T.opt(UserPublishedArticlesStore, {}), collectionFolder: T.opt(CollectionFolderStore, {}), - articleContent: T.opt(ArticleContentStore, {}), articleViewer: T.opt(ArticleViewerStore, {}), articlesThread: T.opt(ArticlesThreadStore, {}), threadSidebar: T.opt(ThreadSidebarStore, {}), diff --git a/src/stores/index.ts b/src/stores/index.ts index c37fba6ea..270324f06 100755 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -30,9 +30,6 @@ export { default as UserListerStore } from '@/containers/user/UserLister/store' // -// pages banners store -export { default as ArticleDigestStore } from '@/containers/digest/ArticleDigest/store' - // contents store export { default as CommunityContentStore } from '@/containers/content/CommunityContent/store' @@ -76,7 +73,6 @@ export { default as ChangelogThreadStore } from '@/containers/thread/ChangelogTh export { default as KanbanThreadStore } from '@/containers/thread/KanbanThread/store' // export { default as BlogEditorStore } from '@/containers/editor/BlogEditor/store' export { default as CollectionFolderStore } from '@/containers/tool/CollectionFolder/store' -export { default as ArticleContentStore } from '@/containers/content/ArticleContent/store' export { default as ArticleViewerStore } from '@/containers/viewer/ArticleViewer/store' export { default as ArticlesThreadStore } from '@/containers/thread/ArticlesThread/store' export { default as ThreadSidebarStore } from '@/containers/thread/ThreadSidebar/store' diff --git a/src/widgets/AnimatedCount/styles/index.ts b/src/widgets/AnimatedCount/styles/index.ts index cb851e6b1..cf4ec582b 100755 --- a/src/widgets/AnimatedCount/styles/index.ts +++ b/src/widgets/AnimatedCount/styles/index.ts @@ -6,6 +6,7 @@ type TWrapper = { count: number } & TActive export const Wrapper = styled.div` font-weight: ${({ count }) => (count > 0 ? 500 : 400)}; - opacity: ${({ count }) => (count === 0 ? 0.8 : 1)}; + opacity: ${({ count }) => (count === 0 ? 0.85 : 1)}; + filter: brightness(1.2); ` export const holder = 1 diff --git a/src/widgets/AnimatedCount/styles/metric.ts b/src/widgets/AnimatedCount/styles/metric.ts index e5c45ac24..83ca76938 100755 --- a/src/widgets/AnimatedCount/styles/metric.ts +++ b/src/widgets/AnimatedCount/styles/metric.ts @@ -7,7 +7,7 @@ export const getFontSize = (size: TSize): number => { return 13 } case SIZE.MEDIUM: { - return 16 + return 17 } case SIZE.LARGE: { return 23 diff --git a/src/widgets/Article/Changelog/Content.tsx b/src/widgets/Article/Changelog/Content.tsx new file mode 100644 index 000000000..0d4e22b55 --- /dev/null +++ b/src/widgets/Article/Changelog/Content.tsx @@ -0,0 +1,59 @@ +/* + * + * general ArticleContent for Changelog, Job, Blog, Radar .. + * + */ + +import { FC, useRef } from 'react' +import dynamic from 'next/dynamic' + +import type { TChangelog } from '@/spec' +import { buildLog } from '@/logger' + +import ArtimentBody from '@/widgets/ArtimentBody' +import LavaLampLoading from '@/widgets/Loading/LavaLampLoading' +// import ViewportTracker from '@/widgets/ViewportTracker' + +import { Wrapper, InnerWrapper, ArticleWrapper, CommentsWrapper } from '../styles/changelog/content' + +/* eslint-disable-next-line */ +const log = buildLog('C:ChangelogContent') + +const Comments = dynamic(() => import('@/containers/unit/Comments'), { + /* eslint-disable react/display-name */ + loading: () => , + ssr: false, +}) + +type TProps = { + article: TChangelog +} + +const Content: FC = ({ article }) => { + const ref = useRef() + + return ( + + + {/* checkAnchor(ref?.current)} + onLeave={() => checkAnchor(ref?.current)} + /> */} + + {/* {!!article.linkAddr && } */} + + + + {/* checkAnchor(ref?.current)} + onLeave={() => checkAnchor(ref?.current)} + /> */} + + + + + + ) +} + +export default Content diff --git a/src/widgets/Article/Changelog/Digest.tsx b/src/widgets/Article/Changelog/Digest.tsx new file mode 100644 index 000000000..5c5d4a409 --- /dev/null +++ b/src/widgets/Article/Changelog/Digest.tsx @@ -0,0 +1,79 @@ +/* + * ChankgelogLayout + */ + +import { FC, memo } from 'react' +import Router from 'next/router' + +import type { TChangelog } from '@/spec' + +import useMetric from '@/hooks/useMetric' +import { ARTICLE_THREAD } from '@/constant/thread' + +import { buildLog } from '@/logger' + +// import ArchivedSign from '@/widgets/ArchivedSign' +import { SpaceGrow } from '@/widgets/Common' +import ArticleBaseStats from '@/widgets/ArticleBaseStats' +import Share from '@/widgets/Share' +import ArticleSettingMenu from '@/widgets/ArticleSettingMenu' + +// import ArticleBelongCommunity from '@/widgets/ArticleBelongCommunity' +// import ArticleMenu from '@/widgets/ArticleMenu' +// import BackTo from './BackTo' + +import { + Wrapper, + BackBtnWrapper, + ArrowIcon, + LeftPart, + Topping, + Title, + SubTitle, + Avatar, + AuthorName, + BottomInfo, +} from '../styles/changelog/digest' + +/* eslint-disable-next-line */ +const log = buildLog('C:ArticleDigest') + +type TProps = { + article: TChangelog +} + +const ChangelogLayout: FC = ({ article }) => { + const metric = useMetric() + const { innerId, author, title } = article + + const backUrl = `/${article.originalCommunitySlug}/${ARTICLE_THREAD.CHANGELOG}` + + return ( + + + + Router.push(backUrl)}> + + 讨论区 + + + + + + + {title} + <SubTitle>{innerId}</SubTitle> + + + + + {author.nickname} + + + + + + ) +} + +export default memo(ChangelogLayout) diff --git a/src/widgets/Article/Changelog/index.tsx b/src/widgets/Article/Changelog/index.tsx new file mode 100644 index 000000000..d2b4f7650 --- /dev/null +++ b/src/widgets/Article/Changelog/index.tsx @@ -0,0 +1,40 @@ +import { FC, useState } from 'react' + +import useViewingArticle from '@/hooks/useViewingArticle' +import useMetric from '@/hooks/useMetric' + +import Header from '@/widgets/CommunityDigest/HeaderLayout' +import ViewportTracker from '@/widgets/ViewportTracker' + +import Digest from './Digest' +import Content from './Content' + +import { Wrapper, InnerWrapper, HeaderWrapper, BannerContent, Main } from '../styles/changelog' + +const Changelog: FC = () => { + const { article } = useViewingArticle() + + const metric = useMetric() + + const [inViewport, setInViewport] = useState(false) + + return ( + + {/* */} + + +
+ + +
+ + +
+ + + setInViewport(true)} onLeave={() => setInViewport(false)} /> + + ) +} + +export default Changelog diff --git a/src/widgets/Article/Post/Content.tsx b/src/widgets/Article/Post/Content.tsx new file mode 100644 index 000000000..e80056b6d --- /dev/null +++ b/src/widgets/Article/Post/Content.tsx @@ -0,0 +1,59 @@ +/* + * + * general ArticleContent for Post, Job, Blog, Radar .. + * + */ + +import { FC, useRef } from 'react' +import dynamic from 'next/dynamic' + +import type { TPost } from '@/spec' +import { buildLog } from '@/logger' + +import ArtimentBody from '@/widgets/ArtimentBody' +import LavaLampLoading from '@/widgets/Loading/LavaLampLoading' +// import ViewportTracker from '@/widgets/ViewportTracker' + +import { Wrapper, InnerWrapper, ArticleWrapper, CommentsWrapper } from '../styles/post/content' + +/* eslint-disable-next-line */ +const log = buildLog('C:PostContent') + +const Comments = dynamic(() => import('@/containers/unit/Comments'), { + /* eslint-disable react/display-name */ + loading: () => , + ssr: false, +}) + +type TProps = { + article: TPost +} + +const Content: FC = ({ article }) => { + const ref = useRef() + + return ( + + + {/* checkAnchor(ref?.current)} + onLeave={() => checkAnchor(ref?.current)} + /> */} + + {/* {!!article.linkAddr && } */} + + + + {/* checkAnchor(ref?.current)} + onLeave={() => checkAnchor(ref?.current)} + /> */} + + + + + + ) +} + +export default Content diff --git a/src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx b/src/widgets/Article/Post/Digest.tsx old mode 100755 new mode 100644 similarity index 70% rename from src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx rename to src/widgets/Article/Post/Digest.tsx index 1ee0c8659..ce9bbe778 --- a/src/containers/digest/ArticleDigest/DesktopView/PostLayout.tsx +++ b/src/widgets/Article/Post/Digest.tsx @@ -5,16 +5,15 @@ import { FC, memo } from 'react' import Router from 'next/router' -import type { TPost, TMetric } from '@/spec' +import type { TPost } from '@/spec' -import METRIC from '@/constant/metric' +import useMetric from '@/hooks/useMetric' import { ARTICLE_THREAD } from '@/constant/thread' import { buildLog } from '@/logger' // import ArchivedSign from '@/widgets/ArchivedSign' import { SpaceGrow } from '@/widgets/Common' -import Upvote from '@/widgets/Upvote' import ArticleBaseStats from '@/widgets/ArticleBaseStats' import Share from '@/widgets/Share' import ArticleSettingMenu from '@/widgets/ArticleSettingMenu' @@ -28,25 +27,24 @@ import { BackBtnWrapper, ArrowIcon, LeftPart, - RightPart, Topping, Title, SubTitle, Avatar, AuthorName, BottomInfo, -} from '../styles/desktop_view/post_layout' +} from '../styles/post/digest' /* eslint-disable-next-line */ const log = buildLog('C:ArticleDigest') type TProps = { article: TPost - metric?: TMetric } -const PostLayout: FC = ({ metric = METRIC.ARTICLE, article }) => { - const { id, author, title, upvotesCount, meta, viewerHasUpvoted } = article +const PostLayout: FC = ({ article }) => { + const metric = useMetric() + const { innerId, author, title } = article const backUrl = `/${article.originalCommunitySlug}/${ARTICLE_THREAD.POST}` @@ -64,25 +62,16 @@ const PostLayout: FC = ({ metric = METRIC.ARTICLE, article }) => { {title} - <SubTitle>{id}</SubTitle> + <SubTitle>{innerId}</SubTitle> {author.nickname} - + - - - - ) } diff --git a/src/containers/content/ArticleContent/DesktopView/SideInfo.tsx b/src/widgets/Article/Post/SideInfo.tsx similarity index 77% rename from src/containers/content/ArticleContent/DesktopView/SideInfo.tsx rename to src/widgets/Article/Post/SideInfo.tsx index 6e5725184..0ee3b9595 100644 --- a/src/containers/content/ArticleContent/DesktopView/SideInfo.tsx +++ b/src/widgets/Article/Post/SideInfo.tsx @@ -6,6 +6,7 @@ import { ARTICLE_CAT, ARTICLE_STATE } from '@/constant/gtd' import { AVATAR_LAYOUT } from '@/constant/layout' import { Br } from '@/widgets/Common' +import Upvote from '@/widgets/Upvote' import ArticleCatState from '@/widgets/ArticleCatState' import TagsList from '@/widgets/TagsList' import ReadableDate from '@/widgets/ReadableDate' @@ -20,19 +21,27 @@ import { Label, Count, Value, -} from '../styles/desktop_view/side_info' +} from '../styles/post/side_info' type TProps = { article: TPost } const SideInfo: FC = ({ article }) => { - const { insertedAt, articleTags, upvotesCount, meta } = article + const { insertedAt, articleTags, upvotesCount, meta, viewerHasUpvoted } = article const { latestUpvotedUsers } = meta return ( + + @@ -54,7 +63,7 @@ const SideInfo: FC = ({ article }) => { - +
diff --git a/src/widgets/Article/Post/index.tsx b/src/widgets/Article/Post/index.tsx new file mode 100644 index 000000000..490c6238a --- /dev/null +++ b/src/widgets/Article/Post/index.tsx @@ -0,0 +1,42 @@ +import { FC, useState } from 'react' + +import useViewingArticle from '@/hooks/useViewingArticle' +import useMetric from '@/hooks/useMetric' + +import Header from '@/widgets/CommunityDigest/HeaderLayout' +import ViewportTracker from '@/widgets/ViewportTracker' + +import Digest from './Digest' +import Content from './Content' +import SideInfo from './SideInfo' + +import { Wrapper, InnerWrapper, HeaderWrapper, BannerContent, Main } from '../styles/post' + +const Post: FC = () => { + const { article } = useViewingArticle() + + const metric = useMetric() + + const [inViewport, setInViewport] = useState(false) + + return ( + + {/* */} + + +
+ + +
+ + +
+ + + + setInViewport(true)} onLeave={() => setInViewport(false)} /> + + ) +} + +export default Post diff --git a/src/widgets/Article/index.tsx b/src/widgets/Article/index.tsx new file mode 100644 index 000000000..303806eec --- /dev/null +++ b/src/widgets/Article/index.tsx @@ -0,0 +1,30 @@ +/* + * + * Article + * + */ + +import { FC, memo } from 'react' + +import { buildLog } from '@/logger' +import { Wrapper } from './styles' + +/* eslint-disable-next-line */ +const log = buildLog('c:Article:index') + +type TProps = { + testid?: string +} + +const Article: FC = ({ testid = 'article' }) => { + return ( + +
+

Article widgets

+

impress me

+
+ + ) +} + +export default memo(Article) diff --git a/src/containers/content/ArticleContent/styles/desktop_view/index.tsx b/src/widgets/Article/styles/changelog/content.ts old mode 100755 new mode 100644 similarity index 50% rename from src/containers/content/ArticleContent/styles/desktop_view/index.tsx rename to src/widgets/Article/styles/changelog/content.ts index 8530e4be7..2100453fe --- a/src/containers/content/ArticleContent/styles/desktop_view/index.tsx +++ b/src/widgets/Article/styles/changelog/content.ts @@ -1,35 +1,25 @@ import styled from 'styled-components' -import type { TTestable, TMetric } from '@/spec' import css from '@/css' -type TWrapper = { metric: TMetric } & TTestable -export const Wrapper = styled.article.attrs(({ testid }) => ({ - 'data-test-id': testid, -}))` +export const Wrapper = styled.div` ${css.row('justify-center')}; position: relative; min-height: 250px; width: 100%; - ${({ metric }) => css.fitPageWidth(metric)}; - ${css.media.mobile` padding: 0 20px; margin-left: 0; `}; ` -export const InnerWrapper = styled.div<{ metric: TMetric }>` - ${css.row('align-start', 'justify-between')}; +export const InnerWrapper = styled.div` width: 100%; - ${({ metric }) => css.fitContentWidth(metric)}; ` export const ArticleWrapper = styled.div` font-size: 15px; - /* border-radius: 5px; */ - background: transparent; - min-height: 200px; + max-width: 580px; ` export const BodyHeaderWrapper = styled.div` margin-top: -18px; diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout.ts b/src/widgets/Article/styles/changelog/digest.ts old mode 100755 new mode 100644 similarity index 90% rename from src/containers/digest/ArticleDigest/styles/desktop_view/post_layout.ts rename to src/widgets/Article/styles/changelog/digest.ts index 2ef7736c0..9f2813191 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/post_layout.ts +++ b/src/widgets/Article/styles/changelog/digest.ts @@ -19,18 +19,11 @@ export const LeftPart = styled.div` flex-grow: 1; max-width: 600px; ` -export const RightPart = styled.div` - ${css.row('justify-center')}; - height: 100%; - width: 200px; - margin-top: 37px; - padding-left: 20px; -` export const Topping = styled.div` ${css.row('align-both')}; margin-left: -2px; margin-bottom: 16px; - padding-right: 16px; + padding-right: 30px; position: relative; ` export const BackBtnWrapper = styled.div` @@ -63,10 +56,11 @@ export const CommunityInfo = styled.div` ${css.fitStickerWidth(METRIC.ARTICLE)}; ` export const Title = styled.div` - font-size: 26px; + font-size: 22px; color: ${theme('article.title')}; - margin-bottom: 14px; - max-width: 620px; + margin-bottom: 18px; + max-width: 600px; + font-weight: 500; ${css.media.mobile` font-size: 20px; @@ -78,7 +72,7 @@ export const SubTitle = styled.span` display: inline-block; color: ${theme('article.digest')}; opacity: 0.4; - font-size: 22px; + font-size: 18px; margin-left: 10px; margin-top: -2px; @@ -86,7 +80,7 @@ export const SubTitle = styled.span` content: '#'; margin-top: 1px; margin-right: 3px; - font-size: 19px; + font-size: 16px; } ` export const BottomInfo = styled.div` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts b/src/widgets/Article/styles/changelog/index.ts old mode 100755 new mode 100644 similarity index 71% rename from src/containers/digest/ArticleDigest/styles/desktop_view/index.ts rename to src/widgets/Article/styles/changelog/index.ts index 4ed18b1b1..459474c17 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/index.ts +++ b/src/widgets/Article/styles/changelog/index.ts @@ -1,9 +1,7 @@ import styled from 'styled-components' import type { TTestable, TMetric } from '@/spec' -import css, { theme } from '@/css' - -import { getDigestHeight } from './metric' +import css from '@/css' type TWrapper = { metric: TMetric } & TTestable export const Wrapper = styled.nav.attrs(({ testid }) => ({ @@ -12,18 +10,23 @@ export const Wrapper = styled.nav.attrs(({ testid }) => ({ ${css.column('align-center')}; position: relative; background: transparent; - min-height: ${({ metric }) => getDigestHeight(metric)}; + min-height: 248px; height: auto; margin-bottom: 24px; width: 100%; ${({ metric }) => css.fitPageWidth(metric)}; ` +export const HeaderWrapper = styled.div` + margin-left: -16px; +` export const InnerWrapper = styled.div<{ metric: TMetric }>` width: 100%; ${({ metric }) => css.fitContentWidth(metric)}; ` export const BannerContent = styled.div` - ${css.row('justify-center')}; - border-bottom: 1px solid; - border-bottom-color: ${theme('divider')}; + ${css.row('justify-start')}; +` +export const Main = styled.div` + padding-right: 30px; + flex-grow: 1; ` diff --git a/src/containers/content/ArticleContent/styles/index.ts b/src/widgets/Article/styles/index.ts old mode 100755 new mode 100644 similarity index 72% rename from src/containers/content/ArticleContent/styles/index.ts rename to src/widgets/Article/styles/index.ts index 11610f431..9f62c59ef --- a/src/containers/content/ArticleContent/styles/index.ts +++ b/src/widgets/Article/styles/index.ts @@ -2,9 +2,11 @@ import styled from 'styled-components' import type { TTestable } from '@/spec' +// import Img from '@/Img' +// import { theme } from '@/css' + export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, -}))` - // -` +}))`` + export const Title = styled.div`` diff --git a/src/widgets/Article/styles/post/content.ts b/src/widgets/Article/styles/post/content.ts new file mode 100644 index 000000000..2100453fe --- /dev/null +++ b/src/widgets/Article/styles/post/content.ts @@ -0,0 +1,30 @@ +import styled from 'styled-components' + +import css from '@/css' + +export const Wrapper = styled.div` + ${css.row('justify-center')}; + position: relative; + min-height: 250px; + width: 100%; + + ${css.media.mobile` + padding: 0 20px; + margin-left: 0; + `}; +` +export const InnerWrapper = styled.div` + width: 100%; +` +export const ArticleWrapper = styled.div` + font-size: 15px; + min-height: 200px; + max-width: 580px; +` +export const BodyHeaderWrapper = styled.div` + margin-top: -18px; + margin-bottom: 18px; +` +export const CommentsWrapper = styled.div` + margin-top: 35px; +` diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/changelog_layout.ts b/src/widgets/Article/styles/post/digest.ts similarity index 88% rename from src/containers/digest/ArticleDigest/styles/desktop_view/changelog_layout.ts rename to src/widgets/Article/styles/post/digest.ts index f0ac8e5d8..9f2813191 100644 --- a/src/containers/digest/ArticleDigest/styles/desktop_view/changelog_layout.ts +++ b/src/widgets/Article/styles/post/digest.ts @@ -10,16 +10,20 @@ import ArrowSVG from '@/icons/Arrow' import DotDivider from '@/widgets/DotDivider' export const Wrapper = styled.div<{ metric: TMetric }>` - ${css.column('align-start')}; - margin-left: 20px; + ${css.row('align-start', 'justify-between')}; + width: 100%; margin-top: 50px; position: relative; ` +export const LeftPart = styled.div` + flex-grow: 1; + max-width: 600px; +` export const Topping = styled.div` ${css.row('align-both')}; margin-left: -2px; margin-bottom: 16px; - margin-top: -5px; + padding-right: 30px; position: relative; ` export const BackBtnWrapper = styled.div` @@ -52,10 +56,11 @@ export const CommunityInfo = styled.div` ${css.fitStickerWidth(METRIC.ARTICLE)}; ` export const Title = styled.div` - font-size: 26px; + font-size: 22px; color: ${theme('article.title')}; - margin-bottom: 14px; - max-width: 620px; + margin-bottom: 18px; + max-width: 600px; + font-weight: 500; ${css.media.mobile` font-size: 20px; @@ -67,7 +72,7 @@ export const SubTitle = styled.span` display: inline-block; color: ${theme('article.digest')}; opacity: 0.4; - font-size: 22px; + font-size: 18px; margin-left: 10px; margin-top: -2px; @@ -75,7 +80,7 @@ export const SubTitle = styled.span` content: '#'; margin-top: 1px; margin-right: 3px; - font-size: 19px; + font-size: 16px; } ` export const BottomInfo = styled.div` @@ -105,5 +110,6 @@ export const AuthorName = styled(Link)` ` export const Divider = styled(DotDivider)` + margin-left: 12px; margin-right: 12px; ` diff --git a/src/widgets/Article/styles/post/index.ts b/src/widgets/Article/styles/post/index.ts new file mode 100644 index 000000000..459474c17 --- /dev/null +++ b/src/widgets/Article/styles/post/index.ts @@ -0,0 +1,32 @@ +import styled from 'styled-components' + +import type { TTestable, TMetric } from '@/spec' +import css from '@/css' + +type TWrapper = { metric: TMetric } & TTestable +export const Wrapper = styled.nav.attrs(({ testid }) => ({ + 'data-test-id': testid, +}))` + ${css.column('align-center')}; + position: relative; + background: transparent; + min-height: 248px; + height: auto; + margin-bottom: 24px; + width: 100%; + ${({ metric }) => css.fitPageWidth(metric)}; +` +export const HeaderWrapper = styled.div` + margin-left: -16px; +` +export const InnerWrapper = styled.div<{ metric: TMetric }>` + width: 100%; + ${({ metric }) => css.fitContentWidth(metric)}; +` +export const BannerContent = styled.div` + ${css.row('justify-start')}; +` +export const Main = styled.div` + padding-right: 30px; + flex-grow: 1; +` diff --git a/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx b/src/widgets/Article/styles/post/side_info.ts similarity index 87% rename from src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx rename to src/widgets/Article/styles/post/side_info.ts index 59f496abd..904ce2759 100644 --- a/src/containers/content/ArticleContent/styles/desktop_view/side_info.tsx +++ b/src/widgets/Article/styles/post/side_info.ts @@ -8,17 +8,11 @@ import { AVATAR_LAYOUT } from '@/constant/layout' import Img from '@/Img' export const Wrapper = styled.div` - height: 300px; + min-height: 300px; width: 230px; - min-width: 200px; - padding-bottom: 30px; - margin-top: 5px; - margin-right: -18px; -` -export const InnerWrapper = styled.div` - width: 100%: - height: auto; - padding-left: 60px; + min-width: 180px; + padding-top: 18px; + margin-top: 75px; border-left: 1px solid transparent; border-image: linear-gradient( @@ -32,11 +26,16 @@ export const InnerWrapper = styled.div` border-image-slice: 1; ` +export const InnerWrapper = styled.div` + width: 100%: + height: auto; + padding-left: 56px; + +` export const Label = styled.div` font-size: 13px; - color: ${theme('article.digest')}; + color: ${theme('article.title')}; margin-bottom: 12px; - font-weight: 600; ` export const Count = styled.span` color: ${theme('article.digest')}; diff --git a/src/containers/digest/ArticleDigest/tests/index.test.ts b/src/widgets/Article/tests/index.test.ts old mode 100755 new mode 100644 similarity index 67% rename from src/containers/digest/ArticleDigest/tests/index.test.ts rename to src/widgets/Article/tests/index.test.ts index a491de1f4..2576315bc --- a/src/containers/digest/ArticleDigest/tests/index.test.ts +++ b/src/widgets/Article/tests/index.test.ts @@ -1,9 +1,9 @@ // import React from 'react' // import { shallow } from 'enzyme' -// import ArticleDigest from '..' +// import Article from '..' -describe('TODO ', () => { +describe('TODO
', () => { it('Expect to have unit tests specified', () => { expect(true).toEqual(true) }) diff --git a/src/widgets/Upvote/ArticleLayout.tsx b/src/widgets/Upvote/ArticleLayout.tsx index 1fc3da89a..13882b2b5 100755 --- a/src/widgets/Upvote/ArticleLayout.tsx +++ b/src/widgets/Upvote/ArticleLayout.tsx @@ -8,11 +8,11 @@ import { FC, memo } from 'react' import { buildLog } from '@/logger' -import { UPVOTE_LAYOUT } from '@/constant/layout' +import usePrimaryColor from '@/hooks/usePrimaryColor' +import useTheme from '@/hooks/useTheme' import AnimatedCount from '@/widgets/AnimatedCount' -import UpvoteBtn from './UpvoteBtn' -import { Wrapper, Button, UpWrapper, CountWrapper, Alias } from './styles/article_layout' +import { Wrapper, Button, UpvoteIcon, CountWrapper, Alias } from './styles/article_layout' /* eslint-disable-next-line */ const log = buildLog('w:Upvote:index') @@ -30,22 +30,19 @@ const Upvote: FC = ({ viewerHasUpvoted = false, onAction = log, }) => { + const primaryColor = usePrimaryColor() + const { themeMap } = useTheme() + const numColor = themeMap.rainbow[primaryColor.toLowerCase()] + return ( - - 投票 ) } diff --git a/src/widgets/Upvote/styles/article_layout.ts b/src/widgets/Upvote/styles/article_layout.ts index 124e4c495..d73b901bb 100755 --- a/src/widgets/Upvote/styles/article_layout.ts +++ b/src/widgets/Upvote/styles/article_layout.ts @@ -1,40 +1,45 @@ import styled from 'styled-components' -import type { TTestable } from '@/spec' -import css, { theme } from '@/css' +import type { TColorName, TTestable } from '@/spec' +import UpvoteSVG from '@/icons/Upvote' +import css, { theme, rainbow, rainbowLight } from '@/css' export const Wrapper = styled.div.attrs(({ testid }) => ({ 'data-test-id': testid, }))` ${css.column('align-both')}; ` -export const Alias = styled.div` - font-size: 13px; - color: ${theme('article.info')}; - font-weight: 400; +export const UpvoteIcon = styled(UpvoteSVG)<{ color: TColorName }>` + ${css.size(15)}; + fill: ${({ color }) => rainbow(color)}; + transform: scale(1, 0.8); + filter: brightness(1.2); ` -export const Button = styled.div` - ${css.column('align-both')}; +export const Button = styled.div<{ color: TColorName }>` + ${css.row('align-both')}; border: 1px solid; - border-color: ${theme('button.upvoteBorder')}; + border-color: ${({ color }) => rainbow(color)}; background: ${theme('alphaBg')}; - margin-top: -3px; - border-radius: 10px; - padding: 7px 10px; - padding-bottom: 7px; - margin-bottom: 8px; + border-radius: 14px; + width: 172px; + padding: 10px 0; + padding-top: 11px; &:hover { - border-color: ${theme('lightText')}; + background-color: ${({ color }) => rainbowLight(color)}; cursor: pointer; } transition: 0.2s all; ` -export const UpWrapper = styled.div` - margin-left: 5px; -` export const CountWrapper = styled.div` - margin-top: -4px; + margin-left: 8px; +` +export const Alias = styled.div<{ color: TColorName }>` + font-size: 15px; + color: ${({ color }) => rainbow(color)}; + margin-left: 5px; + font-weight: 400; + filter: brightness(1.2); ` diff --git a/tsconfig.json b/tsconfig.json index cfc65271d..35faf0a95 100755 --- a/tsconfig.json +++ b/tsconfig.json @@ -73,7 +73,7 @@ ], "incremental": true }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": ["next-env.d.ts", "**/*.tsx", "**/*.ts", ".next/types/**/*.ts"], "exclude": ["node_modules", "**/*.test.ts"], "removeComments": true } diff --git a/utils/css/metric.ts b/utils/css/metric.ts index 03cb6f46f..1e747b278 100755 --- a/utils/css/metric.ts +++ b/utils/css/metric.ts @@ -54,11 +54,9 @@ export const WIDTH = { // STICKER_LAPTOPL: '220px', }, CHANGELOG_ARTICLE: { - PAGE: '1250px', - CONTENT: '580px', - CONTENT_OFFSET: '50px', - CONTENT_OFFSET_LAPTOPL: '0', - CONTENT_OFFSET_DESKTOPL: '0', + PAGE: '1320px', + CONTENT: '860px', + CONTENT_OFFSET: '18px', }, BLOG_ARTICLE: { PAGE: '1460px',