diff --git a/src/app/[community]/about/loading.tsx b/src/app/[community]/(articles)/about/loading.tsx similarity index 100% rename from src/app/[community]/about/loading.tsx rename to src/app/[community]/(articles)/about/loading.tsx diff --git a/src/app/[community]/(articles)/about/page.tsx b/src/app/[community]/(articles)/about/page.tsx new file mode 100644 index 000000000..2f1f70928 --- /dev/null +++ b/src/app/[community]/(articles)/about/page.tsx @@ -0,0 +1,9 @@ +'use client' + +import AboutThread from '@/containers/thread/AboutThread' + +const CommunityAboutPage = () => { + return +} + +export default CommunityAboutPage diff --git a/src/app/[community]/changelog/[id]/page.tsx b/src/app/[community]/(articles)/changelog/[id]/page.tsx similarity index 100% rename from src/app/[community]/changelog/[id]/page.tsx rename to src/app/[community]/(articles)/changelog/[id]/page.tsx diff --git a/src/app/[community]/changelog/loading.tsx b/src/app/[community]/(articles)/changelog/loading.tsx similarity index 100% rename from src/app/[community]/changelog/loading.tsx rename to src/app/[community]/(articles)/changelog/loading.tsx diff --git a/src/app/[community]/(articles)/changelog/page.tsx b/src/app/[community]/(articles)/changelog/page.tsx new file mode 100644 index 000000000..d88ba958b --- /dev/null +++ b/src/app/[community]/(articles)/changelog/page.tsx @@ -0,0 +1,9 @@ +'use client' + +import ChangelogThread from '@/containers/thread/ChangelogThread' + +const CommunityChangelogPage = () => { + return +} + +export default CommunityChangelogPage diff --git a/src/app/[community]/doc/loading.tsx b/src/app/[community]/(articles)/doc/loading.tsx similarity index 100% rename from src/app/[community]/doc/loading.tsx rename to src/app/[community]/(articles)/doc/loading.tsx diff --git a/src/app/[community]/(articles)/doc/page.tsx b/src/app/[community]/(articles)/doc/page.tsx new file mode 100644 index 000000000..a47f10c93 --- /dev/null +++ b/src/app/[community]/(articles)/doc/page.tsx @@ -0,0 +1,9 @@ +'use client' + +import DocThread from '@/containers//thread/DocThread' + +const CommunityDocPage = () => { + return +} + +export default CommunityDocPage diff --git a/src/app/[community]/kanban/loading.tsx b/src/app/[community]/(articles)/kanban/loading.tsx similarity index 100% rename from src/app/[community]/kanban/loading.tsx rename to src/app/[community]/(articles)/kanban/loading.tsx diff --git a/src/app/[community]/(articles)/kanban/page.tsx b/src/app/[community]/(articles)/kanban/page.tsx new file mode 100644 index 000000000..38a5374dc --- /dev/null +++ b/src/app/[community]/(articles)/kanban/page.tsx @@ -0,0 +1,9 @@ +'use client' + +import KanbanThread from '@/containers//thread/KanbanThread' + +const CommunityKanbanPage = () => { + return +} + +export default CommunityKanbanPage diff --git a/src/app/[community]/(articles)/layout.tsx b/src/app/[community]/(articles)/layout.tsx new file mode 100644 index 000000000..fc2aa2f4b --- /dev/null +++ b/src/app/[community]/(articles)/layout.tsx @@ -0,0 +1,32 @@ +'use client' + +import { observer } from 'mobx-react-lite' + +import { BANNER_LAYOUT } from '@/constant/layout' + +import useMetric from '@/hooks/useMetric' +import useBannerLayout from '@/hooks/useBannerLayout' + +import CommunityDigest from '@/widgets/CommunityDigest' + +import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper } from './styles' + +const Layout = ({ children }) => { + const metric = useMetric() + + const bannerLayout = useBannerLayout() + const isSidebarLayout = bannerLayout === BANNER_LAYOUT.SIDEBAR + const LayoutWrapper = isSidebarLayout ? SidebarWrapper : Wrapper + + return ( + + + + + {children} + + + ) +} + +export default observer(Layout) diff --git a/src/app/[community]/(articles)/post/[id]/layout.tsx b/src/app/[community]/(articles)/post/[id]/layout.tsx new file mode 100644 index 000000000..7f6648d17 --- /dev/null +++ b/src/app/[community]/(articles)/post/[id]/layout.tsx @@ -0,0 +1,18 @@ +'use client' + +import useMetric from '@/hooks/useMetric' + +import { Wrapper, InnerWrapper } from '@/widgets/Article/styles/post' + +const Layout = ({ children }) => { + const metric = useMetric() + + return ( + + {/* */} + {children} + + ) +} + +export default Layout diff --git a/src/app/[community]/(articles)/post/[id]/loading.tsx b/src/app/[community]/(articles)/post/[id]/loading.tsx new file mode 100644 index 000000000..2826177c7 --- /dev/null +++ b/src/app/[community]/(articles)/post/[id]/loading.tsx @@ -0,0 +1,9 @@ +const Loading = () => { + return ( +
+

post id loading

+
+ ) +} + +export default Loading diff --git a/src/app/[community]/post/[id]/page.tsx b/src/app/[community]/(articles)/post/[id]/page.tsx similarity index 100% rename from src/app/[community]/post/[id]/page.tsx rename to src/app/[community]/(articles)/post/[id]/page.tsx diff --git a/src/app/[community]/(articles)/post/loading.tsx b/src/app/[community]/(articles)/post/loading.tsx new file mode 100644 index 000000000..75223ab3e --- /dev/null +++ b/src/app/[community]/(articles)/post/loading.tsx @@ -0,0 +1,9 @@ +const Loading = () => { + return ( +
+

post loading

+
+ ) +} + +export default Loading diff --git a/src/app/[community]/(articles)/post/page.tsx b/src/app/[community]/(articles)/post/page.tsx new file mode 100644 index 000000000..5feab18b3 --- /dev/null +++ b/src/app/[community]/(articles)/post/page.tsx @@ -0,0 +1,19 @@ +'use client' + +import useIsSidebarLayout from '@/hooks/useIsSidebarLayout' + +import PostThread from '@/containers//thread/PostThread' +import { Br } from '@/widgets/Common' + +const CommunityPostPage = () => { + const isSidebarLayout = useIsSidebarLayout() + + return ( + <> + {isSidebarLayout &&
} + + + ) +} + +export default CommunityPostPage diff --git a/src/containers/content/CommunityContent/styles/index.ts b/src/app/[community]/(articles)/styles/index.tsx old mode 100755 new mode 100644 similarity index 89% rename from src/containers/content/CommunityContent/styles/index.ts rename to src/app/[community]/(articles)/styles/index.tsx index f93c383eb..f94caf881 --- a/src/containers/content/CommunityContent/styles/index.ts +++ b/src/app/[community]/(articles)/styles/index.tsx @@ -5,7 +5,7 @@ import { BANNER_LAYOUT } from '@/constant/layout' import css, { theme } from '@/css' -export const BaseWrapper = styled.div.attrs(({ $testid }) => ({ +const BaseWrapper = styled.div.attrs(({ $testid }) => ({ 'data-test-id': $testid, }))` min-height: 70vh; @@ -32,10 +32,6 @@ export const BaseInnerWrapper = styled.div<{ metric?: TMetric }>` padding: 0; `}; ` -export const BaseContentWrapper = styled.div` - ${css.column()}; - width: 100%; -` export const Wrapper = styled(BaseWrapper)<{ metric?: TMetric }>` ${css.column('justify-start', 'align-center')}; @@ -67,4 +63,7 @@ export const InnerWrapper = styled(BaseInnerWrapper)<{ $bannerLayout?: TBannerLa margin-left: 0; `}; ` -export const ContentWrapper = styled(BaseContentWrapper)`` +export const ContentWrapper = styled.div` + ${css.column()}; + width: 100%; +` diff --git a/src/app/[community]/about/page.tsx b/src/app/[community]/about/page.tsx deleted file mode 100644 index 2a66515a6..000000000 --- a/src/app/[community]/about/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -'use client' - -import AboutContent from '@/containers/content/CommunityContent/AboutContent' - -const CommunityAboutPage = () => { - return -} - -export default CommunityAboutPage diff --git a/src/app/[community]/changelog/page.tsx b/src/app/[community]/changelog/page.tsx deleted file mode 100644 index 0710f6100..000000000 --- a/src/app/[community]/changelog/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -'use client' - -import ChangeLogContent from '@/containers/content/CommunityContent/ChangeLogContent' - -const CommunityChangelogPage = () => { - return -} - -export default CommunityChangelogPage diff --git a/src/app/[community]/dashboard/layout.tsx b/src/app/[community]/dashboard/layout.tsx index 1f2280e40..645ad1cb6 100644 --- a/src/app/[community]/dashboard/layout.tsx +++ b/src/app/[community]/dashboard/layout.tsx @@ -1,28 +1,26 @@ 'use client' import { observer } from 'mobx-react-lite' + import useDashboardSettings from '@/hooks/useDashboardSettings' +import useMetric from '@/hooks/useMetric' import CommunityDigest from '@/widgets/CommunityDigest' -import { - Wrapper as WrapperRoot, - InnerWrapper, - ContentWrapper, - // MobileCardsWrapper, -} from '@/containers/content/CommunityContent/styles/dashboard_content' +import { Wrapper as WrapperRoot, InnerWrapper, ContentWrapper } from './styles' import { Wrapper, MainWrapper } from '@/containers/thread/DashboardThread/styles' import SideMenu from '@/containers/thread/DashboardThread/SideMenu' const Layout = ({ children }) => { const { curTab, touched } = useDashboardSettings() + const metric = useMetric() return ( - + diff --git a/src/app/[community]/dashboard/styles/index.ts b/src/app/[community]/dashboard/styles/index.ts new file mode 100644 index 000000000..86fcbea8c --- /dev/null +++ b/src/app/[community]/dashboard/styles/index.ts @@ -0,0 +1,41 @@ +import styled from 'styled-components' + +import type { TMetric, TTestable } from '@/spec' +import css from '@/css' + +export const BaseWrapper = styled.div.attrs(({ $testid }) => ({ + 'data-test-id': $testid, +}))` + min-height: 70vh; + width: 100%; + + ${css.media.tablet` + width: 100%; + margin: 0; + padding: .6em; + padding-top: 0; + padding-right: 0; + `}; +` + +export const Wrapper = styled(BaseWrapper)<{ metric?: TMetric }>` + ${css.column('justify-start', 'align-center')}; + + ${css.media.mobile` + padding-left: 0; + `}; +` + +export const InnerWrapper = styled.div<{ metric: TMetric }>` + ${({ metric }) => css.fitContentWidth(metric)}; + + width: 100%; + margin-top: 15px; + padding-top: 0; + ${css.column('align-center')}; +` + +export const ContentWrapper = styled.div` + ${css.column()}; + width: 100%; +` diff --git a/src/app/[community]/doc/page.tsx b/src/app/[community]/doc/page.tsx deleted file mode 100644 index f3d861819..000000000 --- a/src/app/[community]/doc/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -'use client' - -import DocContent from '@/containers/content/CommunityContent/DocContent' - -const CommunityDocPage = () => { - return -} - -export default CommunityDocPage diff --git a/src/app/[community]/kanban/page.tsx b/src/app/[community]/kanban/page.tsx deleted file mode 100644 index ac68acfad..000000000 --- a/src/app/[community]/kanban/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -'use client' - -import KanbanContent from '@/containers/content/CommunityContent/KanbanContent' - -const CommunityKanbanPage = () => { - return -} - -export default CommunityKanbanPage diff --git a/src/app/[community]/page.tsx b/src/app/[community]/page.tsx index 63b4e596b..5feab18b3 100644 --- a/src/app/[community]/page.tsx +++ b/src/app/[community]/page.tsx @@ -1,23 +1,19 @@ 'use client' -import Link from 'next/link' +import useIsSidebarLayout from '@/hooks/useIsSidebarLayout' -import PostContent from '@/containers/content/CommunityContent/PostContent' +import PostThread from '@/containers//thread/PostThread' +import { Br } from '@/widgets/Common' -const CommunityPage = () => { - // const rootStore = useRootStore() - - // console.log('## in community render, ', data) +const CommunityPostPage = () => { + const isSidebarLayout = useIsSidebarLayout() return ( -
-
- go to test -
- - -
+ <> + {isSidebarLayout &&
} + + ) } -export default CommunityPage +export default CommunityPostPage diff --git a/src/app/[community]/post/page.tsx b/src/app/[community]/post/page.tsx deleted file mode 100644 index c5abcc2a3..000000000 --- a/src/app/[community]/post/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -'use client' - -import PostContent from '@/containers/content/CommunityContent/PostContent' - -const CommunityPostPage = () => { - return -} - -export default CommunityPostPage diff --git a/src/app/providers/RootStoreProvider.tsx b/src/app/providers/RootStoreProvider.tsx index 1f977365c..243a47e59 100644 --- a/src/app/providers/RootStoreProvider.tsx +++ b/src/app/providers/RootStoreProvider.tsx @@ -7,6 +7,7 @@ import { enableStaticRendering } from 'mobx-react-lite' import { useStore } from '@/stores/init' import { + useMetric, useSession, useCommunity, useTags, @@ -32,6 +33,7 @@ type TProps = { const RootStoreWrapper: FC = ({ children, token }) => { const userHasLogin = !!token + const metric = useMetric() const activeThread = useThreadParam() // console.log('## activeThread: ', activeThread) @@ -50,6 +52,7 @@ const RootStoreWrapper: FC = ({ children, token }) => { const filterSearchParams = useFilterSearchParams() const store = useStore({ + metric, ...sesstion, articles: { pagedPosts, diff --git a/src/app/queries/index.ts b/src/app/queries/index.ts index 00770791a..be8f55d1e 100644 --- a/src/app/queries/index.ts +++ b/src/app/queries/index.ts @@ -7,10 +7,11 @@ import { values, includes } from 'ramda' import { useQuery } from '@urql/next' import { usePathname, useSearchParams } from 'next/navigation' -import type { TCommunity } from '@/spec' +import type { TCommunity, TMetric } from '@/spec' import { P } from '@/schemas' import { DEFAULT_THEME } from '@/config' import { THREAD, ARTICLE_THREAD } from '@/constant/thread' +import METRIC from '@/constant/metric' import URL_PARAM from '@/constant/url_param' import { ARTICLE_CAT, ARTICLE_STATE, ARTICLE_ORDER } from '@/constant/gtd' @@ -43,6 +44,17 @@ import { export { parseCommunity, useThreadParam } from './helper' +export const useMetric = (): TMetric => { + const thread = useThreadParam() + const articleParams = useArticleParams() + + if (includes(thread, values(ARTICLE_THREAD)) && articleParams.id) { + return METRIC.ARTICLE + } + + return METRIC.COMMUNITY +} + export const useSession = (): TSessionRes => { const isStaticQuery = useIsStaticQuery() diff --git a/src/containers/content/CommunitiesContent/store.js b/src/containers/content/CommunitiesContent/store.js deleted file mode 100755 index bfd7ef4b8..000000000 --- a/src/containers/content/CommunitiesContent/store.js +++ /dev/null @@ -1,134 +0,0 @@ -/* - * ExploreContentStore store - * - */ - -import { propEq, findIndex } from 'ramda' - -import { ICON_CMD } from '@/config' -import { T, getParent, markStates, toJS } from '@/mobx' -import { Trans } from '@/i18n' -import { PagedCommunities, PagedCategories, emptyPagi } from '@/model' - -const ExploreContentStore = T.model('ExploreContentStore', { - // current active sidbar menu id - activeCatalogId: T.maybeNull(T.string), - pagedCommunities: T.opt(PagedCommunities, emptyPagi), - searching: T.opt(T.bool, false), - // cur active category - /* category: T.opt(T.string, ''), */ - // for UI loading state - subscribing: T.opt(T.bool, false), - subscribingId: T.maybeNull(T.string), - pagedCategories: T.maybeNull(PagedCategories), - // search status - isSearchMode: T.opt(T.bool, false), - searchResultCount: T.opt(T.number, 0), - searchValue: T.opt(T.string, ''), - showSearchMask: T.opt(T.bool, true), - showCreateHint: T.opt(T.bool, true), - showSearchHint: T.opt(T.bool, false), - searchfocused: T.opt(T.bool, false), -}) - .views((self) => ({ - get root() { - return getParent(self) - }, - get isLogin() { - return self.root.account.isLogin - }, - get curRoute() { - return self.root.curRoute - }, - get searchStatus() { - const { searchValue, searchfocused } = self - let { showSearchMask, showCreateHint, showSearchHint } = self - - const isSearchMode = searchValue.length !== 0 - // is has search value, then do not show mask even is input is blur - showSearchMask = searchValue.length === 0 ? showSearchMask : false - - const searchResultCount = self.pagedCommunities.totalCount - - showCreateHint = !searchfocused && !isSearchMode - showSearchHint = !showCreateHint && !isSearchMode - const showSearchResultHint = isSearchMode - - return { - isSearchMode, - searchValue, - showSearchMask, - showCreateHint, - showSearchHint, - showSearchResultHint, - searchfocused, - searchResultCount, - } - }, - get pagedCommunitiesData() { - return toJS(self.pagedCommunities) - }, - get showFilterSidebar() { - // if (self.pagedCommunitiesData.entries.length === 0) return false - // const isSearchMode = searchValue.length !== 0 - return self.searchValue.length === 0 - }, - get pagiInfo() { - const { pageNumber, pageSize, totalCount } = self.pagedCommunitiesData - - return { - pageNumber, - pageSize, - totalCount, - } - }, - get activeMenuId() { - const { entries } = toJS(self.pagedCategories) - return self.activeCatalogId || entries[0].id - }, - get pagedCategoriesData() { - const { entries } = toJS(self.pagedCategories) - return entries.map((item) => ({ - id: item.id, - slug: item.slug, - title: Trans(item.title), - icon: `${ICON_CMD}/catalogs/${item.slug}.svg`, - })) - }, - })) - .actions((self) => ({ - updateEditing(sobj) { - self.mark(sobj) - }, - authWarning(options) { - self.root.authWarning(options) - }, - toggleSubscribe(community) { - const index = findIndex(propEq(community.id, 'id'), self.pagedCommunities.entries) - if (index === -1) return false - - if (self.pagedCommunities.entries[index].viewerHasSubscribed) { - self.pagedCommunities.entries[index].viewerHasSubscribed = false - self.pagedCommunities.entries[index].subscribersCount -= 1 - } else { - self.pagedCommunities.entries[index].viewerHasSubscribed = true - self.pagedCommunities.entries[index].subscribersCount += 1 - } - }, - addSubscribedCommunity(community) { - self.root.account.addSubscribedCommunity(community) - self.root.exploreContent.toggleSubscribe(community) - }, - removeSubscribedCommunity(community) { - self.root.account.removeSubscribedCommunity(community) - self.root.exploreContent.toggleSubscribe(community) - }, - markRoute(query) { - self.root.markRoute(query) - }, - mark(sobj) { - markStates(sobj, self) - }, - })) - -export default ExploreContentStore diff --git a/src/containers/content/CommunityContent/AboutContent.tsx b/src/containers/content/CommunityContent/AboutContent.tsx deleted file mode 100755 index 036e9e747..000000000 --- a/src/containers/content/CommunityContent/AboutContent.tsx +++ /dev/null @@ -1,55 +0,0 @@ -/* - * CommunityContent - */ - -import { FC } from 'react' -import { observer } from 'mobx-react-lite' -import useMobileDetect from '@groupher/use-mobile-detect-hook' - -import useBannerLayout from '@/hooks/useBannerLayout' -import useMetric from '@/hooks/useMetric' - -import { BANNER_LAYOUT } from '@/constant/layout' - -import AboutThread from '@/containers/thread/AboutThread' -import CommunityDigest from '@/widgets/CommunityDigest' - -import { useStore } from './store' -import { useInit } from './logic' - -import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper, MobileCardsWrapper } from './styles' - -/** - * only for AboutThread, but link to the common communityContent store - */ -const AboutContent: FC = () => { - const store = useStore() - useInit(store) - - const metric = useMetric() - const bannerLayout = useBannerLayout() - const { isMobile } = useMobileDetect() - - const LayoutWrapper = bannerLayout === BANNER_LAYOUT.SIDEBAR ? SidebarWrapper : Wrapper - - return ( - - - {isMobile ? ( - - - - - - ) : ( - - - - - - )} - - ) -} - -export default observer(AboutContent) diff --git a/src/containers/content/CommunityContent/ChangeLogContent.tsx b/src/containers/content/CommunityContent/ChangeLogContent.tsx deleted file mode 100755 index eb8ade44d..000000000 --- a/src/containers/content/CommunityContent/ChangeLogContent.tsx +++ /dev/null @@ -1,54 +0,0 @@ -/* - * CommunityContent - */ - -import { FC } from 'react' -import useMobileDetect from '@groupher/use-mobile-detect-hook' - -import useMetric from '@/hooks/useMetric' -import useBannerLayout from '@/hooks/useBannerLayout' - -import { BANNER_LAYOUT } from '@/constant/layout' - -import ChangelogThread from '@/containers/thread/ChangelogThread' -import CommunityDigest from '@/widgets/CommunityDigest' - -import { useStore } from './store' -import { useInit } from './logic' - -import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper, MobileCardsWrapper } from './styles' - -/** - * only for AboutThread, but link to the common communityContent store - */ -const ChangelogContent: FC = () => { - const store = useStore() - useInit(store) - const metric = useMetric() - const bannerLayout = useBannerLayout() - - const { globalLayout } = store - const { isMobile } = useMobileDetect() - const LayoutWrapper = globalLayout.banner === BANNER_LAYOUT.SIDEBAR ? SidebarWrapper : Wrapper - - return ( - - - {isMobile ? ( - - - - - - ) : ( - - - - - - )} - - ) -} - -export default ChangelogContent diff --git a/src/containers/content/CommunityContent/DocContent.tsx b/src/containers/content/CommunityContent/DocContent.tsx deleted file mode 100644 index 68fdbec4e..000000000 --- a/src/containers/content/CommunityContent/DocContent.tsx +++ /dev/null @@ -1,54 +0,0 @@ -/* - * CommunityContent - */ - -import { FC } from 'react' -import { observer } from 'mobx-react-lite' -import useMobileDetect from '@groupher/use-mobile-detect-hook' - -import { BANNER_LAYOUT } from '@/constant/layout' -import useMetric from '@/hooks/useMetric' -import useBannerLayout from '@/hooks/useBannerLayout' -import DocThread from '@/containers//thread/DocThread' -import CommunityDigest from '@/widgets/CommunityDigest' - -import { useStore } from './store' -import { useInit } from './logic' - -import { Wrapper, InnerWrapper, SidebarWrapper, ContentWrapper, MobileCardsWrapper } from './styles' - -/** - * only for AboutThread, but link to the common communityContent store - */ -const DocContent: FC = () => { - const store = useStore() - useInit(store) - const metric = useMetric() - - const bannerLayout = useBannerLayout() - const { isMobile } = useMobileDetect() - - const isSidebarLayout = bannerLayout === BANNER_LAYOUT.SIDEBAR - const LayoutWrapper = isSidebarLayout ? SidebarWrapper : Wrapper - - return ( - - - {isMobile ? ( - - - - - - ) : ( - - - - - - )} - - ) -} - -export default observer(DocContent) diff --git a/src/containers/content/CommunityContent/KanbanContent.tsx b/src/containers/content/CommunityContent/KanbanContent.tsx deleted file mode 100755 index 1bc5806f9..000000000 --- a/src/containers/content/CommunityContent/KanbanContent.tsx +++ /dev/null @@ -1,48 +0,0 @@ -/* - * CommunityContent - */ - -import { FC } from 'react' -import { observer } from 'mobx-react-lite' - -import { BANNER_LAYOUT } from '@/constant/layout' -import useBannerLayout from '@/hooks/useBannerLayout' -import useMetric from '@/hooks/useMetric' - -import KanbanThread from '@/containers//thread/KanbanThread' -import CommunityDigest from '@/widgets/CommunityDigest' - -import { useStore } from './store' -import { useInit } from './logic' - -import { Wrapper, InnerWrapper, SidebarWrapper, ContentWrapper, MobileCardsWrapper } from './styles' - -/** - * only for AboutThread, but link to the common communityContent store - */ -const KanbanContent: FC = () => { - const store = useStore() - useInit(store) - const bannerLayout = useBannerLayout() - const metric = useMetric() - - const LayoutWrapper = bannerLayout === BANNER_LAYOUT.SIDEBAR ? SidebarWrapper : Wrapper - - return ( - - - - - - - - - - - - - - ) -} - -export default observer(KanbanContent) diff --git a/src/containers/content/CommunityContent/PostContent.tsx b/src/containers/content/CommunityContent/PostContent.tsx deleted file mode 100755 index 5d842fbb5..000000000 --- a/src/containers/content/CommunityContent/PostContent.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/* - * CommunityContent - */ - -import { FC } from 'react' -import { observer } from 'mobx-react-lite' - -import { BANNER_LAYOUT } from '@/constant/layout' -// import { THREAD } from '@/constant/thread' -import useMetric from '@/hooks/useMetric' -import useBannerLayout from '@/hooks/useBannerLayout' - -import PostThread from '@/containers//thread/PostThread' -import CommunityDigest from '@/widgets/CommunityDigest' -import { Br } from '@/widgets/Common' -// import SidebarLayoutHeader from '@/widgets/SidebarLayoutHeader' - -import { useStore } from './store' -import { useInit } from './logic' - -import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper, MobileCardsWrapper } from './styles' - -/** - * only for AboutThread, but link to the common communityContent store - */ -const PostContent: FC = () => { - const store = useStore() - useInit(store) - const metric = useMetric() - const bannerLayout = useBannerLayout() - - const { isMobile } = store - - const isSidebarLayout = bannerLayout === BANNER_LAYOUT.SIDEBAR - const LayoutWrapper = isSidebarLayout ? SidebarWrapper : Wrapper - - return ( - - - - {isMobile && ( - - - - - - )} - - {!isMobile && ( - - - {isSidebarLayout &&
} - - - - )} - - ) -} - -export default observer(PostContent) diff --git a/src/containers/content/CommunityContent/SubscribedList/ExpandButton.tsx b/src/containers/content/CommunityContent/SubscribedList/ExpandButton.tsx deleted file mode 100755 index 91d870a7c..000000000 --- a/src/containers/content/CommunityContent/SubscribedList/ExpandButton.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/* - * - * Expand Button - * - */ - -import { FC, memo } from 'react' - -import { ICON } from '@/config' -import { buildLog } from '@/logger' - -import { Wrapper, ArrowIcon, Text } from '../styles/subscribed_list/expand_button' - -/* eslint-disable-next-line */ -const log = buildLog('C:CommunityContent') - -type TProps = { - isExpanded?: boolean - onClick?: () => void -} - -const ExpandButton: FC = ({ isExpanded = false, onClick }) => { - return ( - - - {isExpanded ? 展开 : 收起} - - ) -} - -export default memo(ExpandButton) diff --git a/src/containers/content/CommunityContent/SubscribedList/ItemMenu.tsx b/src/containers/content/CommunityContent/SubscribedList/ItemMenu.tsx deleted file mode 100755 index 9dfb2a885..000000000 --- a/src/containers/content/CommunityContent/SubscribedList/ItemMenu.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/* - * - * CommunityContent - * - */ - -import { FC, memo } from 'react' - -import { ICON } from '@/config' -import { buildLog } from '@/logger' - -import { Wrapper, Item, Icon, Title } from '../styles/subscribed_list/item_menu' - -/* eslint-disable-next-line */ -const log = buildLog('C:CommunityContent') - -const ItemMenu: FC = () => { - return ( - - - - 置顶 - - - - 取消关注 - - - ) -} - -export default memo(ItemMenu) diff --git a/src/containers/content/CommunityContent/SubscribedList/index.tsx b/src/containers/content/CommunityContent/SubscribedList/index.tsx deleted file mode 100755 index 6b9b03b30..000000000 --- a/src/containers/content/CommunityContent/SubscribedList/index.tsx +++ /dev/null @@ -1,90 +0,0 @@ -/* - * User subscribed communities list - */ - -import { FC, memo, Fragment, useState } from 'react' - -import type { TCommunity } from '@/spec' -import { ICON } from '@/config' -import { HCN } from '@/constant/name' -import { assetSrc } from '@/helper' - -import { changeToCommunity } from '@/signal' -import { buildLog } from '@/logger' - -import DotDivider from '@/widgets/DotDivider' -import Tooltip from '@/widgets/Tooltip' -import { Br, SpaceGrow } from '@/widgets/Common' - -import ItemMenu from './ItemMenu' -import ExpandButton from './ExpandButton' - -import { - Wrapper, - Item, - ActiveDot, - Logo, - Title, - HeadTitle, - HeadNum, - Option, - OptionIcon, -} from '../styles/subscribed_list' - -/* eslint-disable-next-line */ -const log = buildLog('C:CommunityContent') - -type TProps = { - communities: TCommunity[] - community: TCommunity -} - -const SubscribedList: FC = ({ community, communities }) => { - const [expand, setExpand] = useState(false) - const activeCommunity = community - - return ( - -
- - 我的关注 - {communities.length} - -
- changeToCommunity(HCN)}> - - 首页 - - {communities.slice(0, 15).map((community) => ( - - - {community.slug === activeCommunity.slug && } - - - changeToCommunity(community.slug)} - > - {community.title} - - - } - placement="bottom" - hideOnClick={false} - trigger="click" - noPadding - > - - - - - ))} - setExpand(!expand)} /> - - ) -} - -export default memo(SubscribedList) diff --git a/src/containers/content/CommunityContent/WipThread.tsx b/src/containers/content/CommunityContent/WipThread.tsx deleted file mode 100755 index eda485052..000000000 --- a/src/containers/content/CommunityContent/WipThread.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { FC, memo } from 'react' - -import { joinUS } from '@/signal' - -import Linker from '@/widgets/Linker' -import Button from '@/widgets/Buttons/Button' - -import { Wrapper, WipIcon, Title, Desc, Ul, Li, InnerLinker } from './styles/wip_thread' - -type TProps = { - title?: string -} - -const WipThread: FC = ({ title = '该' }) => { - return ( - - - Oops，{title}版块设计施工中 ... - 该功能预计在内测阶段完成，如果你有兴趣或建议，欢迎在以下渠道参与共建 / 内测： -
    -
  • - 社区： - -
    • -
  • 邮件：groupher@outlook.com
    • -
  • - - Github： - - -
    • -
  • - - IM 交流: - - -
    • -
- - ) -} - -export default memo(WipThread) diff --git a/src/containers/content/CommunityContent/logic.ts b/src/containers/content/CommunityContent/logic.ts deleted file mode 100755 index 8cfae38b2..000000000 --- a/src/containers/content/CommunityContent/logic.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { useEffect } from 'react' -import { values, includes } from 'ramda' - -import type { TThread } from '@/spec' -import { ARTICLE_THREAD } from '@/constant/thread' -import EVENT from '@/constant/event' -import ERR from '@/constant/err' - -import { plural } from '@/fmt' -import asyncSuit from '@/async' -import { send, errRescue } from '@/signal' -import { buildLog } from '@/logger' - -import type { TStore } from './store' - -/* eslint-disable-next-line */ -const log = buildLog('L:CommunityContent') - -// import S from './schema' -const { SR71, $solver, asyncRes, asyncErr } = asyncSuit -const sr71$ = new SR71({ - // @ts-ignore - receive: [EVENT.COMMUNITY_THREAD_CHANGE], -}) - -let store: TStore | undefined -let sub$ = null - -/** - * tab 改变时统一同步路由和 viewing, 以便在下层收到广播后 viewing 已经就绪 - */ -const tabOnChange = (activeThread: TThread): void => { - const { curCommunity } = store - - const mainPath = curCommunity.slug - const subPath = activeThread !== ARTICLE_THREAD.POST ? plural(activeThread) : '' - - // store.setViewing({ activeThread }) - store.setCurThread(activeThread) - store.markRoute({ mainPath, subPath }) -} - -// ############################### -// Data & Error handlers -// ############################### - -const DataSolver = [ - { - match: asyncRes(EVENT.COMMUNITY_THREAD_CHANGE), - action: (res) => { - const { data } = res[EVENT.COMMUNITY_THREAD_CHANGE] - tabOnChange(data) - if (includes(data, values(ARTICLE_THREAD))) { - return send(EVENT.ARTICLE_THREAD_CHANGE, { data }) - } - // TODO: other THREAD - }, - }, -] - -const ErrSolver = [ - { - match: asyncErr(ERR.GRAPHQL), - action: () => { - /** */ - }, - }, - { - match: asyncErr(ERR.TIMEOUT), - action: ({ details }) => { - errRescue({ type: ERR.TIMEOUT, details, path: 'CommunityContent' }) - }, - }, - { - match: asyncErr(ERR.NETWORK), - action: () => { - errRescue({ type: ERR.NETWORK, path: 'CommunityContent' }) - }, - }, -] - -// ############################### -// init & uninit -// ############################### -export const useInit = (_store: TStore): void => { - useEffect(() => { - store = _store - log('effect init', store) - sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver)) - - return () => { - // log('effect uninit') - sr71$.stop() - sub$.unsubscribe() - } - }, [_store]) -} - -export const holder = 1 diff --git a/src/containers/content/CommunityContent/schema.ts b/src/containers/content/CommunityContent/schema.ts deleted file mode 100755 index 0f23ccf55..000000000 --- a/src/containers/content/CommunityContent/schema.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { gql } from 'urql/core' - -const simpleMutation = gql` - mutation ($id: ID!) { - post(id: $id) { - id - } - } -` -const simpleQuery = gql` - query ($filter: filter!) { - post(id: $id) { - id - } - } -` - -const schema = { - simpleMutation, - simpleQuery, -} - -export default schema diff --git a/src/containers/content/CommunityContent/store.ts b/src/containers/content/CommunityContent/store.ts deleted file mode 100755 index a47bd51e4..000000000 --- a/src/containers/content/CommunityContent/store.ts +++ /dev/null @@ -1,61 +0,0 @@ -/* - * CommunityContent store - * - */ - -import type { TRootStore, TAccount, TCommunity, TThread, TGlobalLayout } from '@/spec' -import { T, getParent, markStates, toJS, Instance, useMobxContext } from '@/mobx' -import { sortByIndex } from '@/helper' - -const CommunityContent = T.model('CommunityContent', {}) - .views((self) => ({ - get isMobile(): boolean { - const root = getParent(self) as TRootStore - - return root.isMobile - }, - get curCommunity(): TCommunity { - const root = getParent(self) as TRootStore - return toJS(root.viewing.community) - }, - get curThread(): TThread { - const root = getParent(self) as TRootStore - return root.viewing.activeThread - }, - get accountInfo(): TAccount { - const root = getParent(self) as TRootStore - return root.accountInfo - }, - get subscribedCommunitiesData(): TCommunity[] { - const root = getParent(self) as TRootStore - const { subscribedCommunities } = root.account - - return subscribedCommunities ? sortByIndex(subscribedCommunities.entries) : [] - }, - get globalLayout(): TGlobalLayout { - const root = getParent(self) as TRootStore - return root.dashboardThread.globalLayout - }, - })) - .actions((self) => ({ - setCurThread(thread: TThread): void { - const root = getParent(self) as TRootStore - root.setCurThread(thread) - }, - setViewing(sobj): void { - const root = getParent(self) as TRootStore - root.setViewing(sobj) - }, - markRoute(query): void { - const root = getParent(self) as TRootStore - root.markRoute(query) - }, - mark(sobj: Record): void { - markStates(sobj, self) - }, - })) - -export type TStore = Instance -export const useStore = (): TStore => useMobxContext().store.communityContent - -export default CommunityContent diff --git a/src/containers/content/CommunityContent/styles/dashboard_content.ts b/src/containers/content/CommunityContent/styles/dashboard_content.ts deleted file mode 100644 index d1cc1d8ff..000000000 --- a/src/containers/content/CommunityContent/styles/dashboard_content.ts +++ /dev/null @@ -1,11 +0,0 @@ -import styled from 'styled-components' - -import css from '@/css' - -import { InnerWrapper as BaseInnerWrapper } from '.' - -export { Wrapper, ContentWrapper, MobileCardsWrapper } from '.' - -export const InnerWrapper = styled(BaseInnerWrapper)` - ${css.column('align-center')}; -` diff --git a/src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts b/src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts deleted file mode 100755 index 35646edb0..000000000 --- a/src/containers/content/CommunityContent/styles/subscribed_list/expand_button.ts +++ /dev/null @@ -1,30 +0,0 @@ -import styled from 'styled-components' - -import Img from '@/Img' -import css, { theme } from '@/css' - -export const Wrapper = styled.div` - ${css.row('align-center')}; - cursor: pointer; -` -export const ArrowIcon = styled(Img)<{ reverse?: boolean }>` - ${css.size(14)}; - fill: ${theme('article.digest')}; - transform: ${({ reverse }) => (reverse ? 'rotate(180deg)' : '')}; - ${Wrapper}:hover & { - fill: ${theme('article.title')}; - } - - transition: all 0.2s; -` -export const Text = styled.div` - color: ${theme('article.digest')}; - font-size: 14px; - margin-left: 8px; - - ${Wrapper}:hover & { - fill: ${theme('article.title')}; - } - - transition: all 0.2s; -` diff --git a/src/containers/content/CommunityContent/styles/subscribed_list/index.ts b/src/containers/content/CommunityContent/styles/subscribed_list/index.ts deleted file mode 100755 index f5b2f694f..000000000 --- a/src/containers/content/CommunityContent/styles/subscribed_list/index.ts +++ /dev/null @@ -1,113 +0,0 @@ -import styled from 'styled-components' - -import type { TActive } from '@/spec' -import css, { theme } from '@/css' - -import Img from '@/Img' - -export const Wrapper = styled.div` - width: 132px; - min-width: 132px; - margin-top: 10px; - margin-right: 20px; - height: 400px; - color: #5b7b81; - padding-top: 10px; - padding-left: 10px; -` -export const HeadTitle = styled.div` - ${css.row('align-center')}; - font-size: 14px; - font-weight: bold; -` -export const HeadNum = styled.div` - color: ${theme('article.digest')}; - font-size: 12px; - opacity: 0.9; - margin-top: 1px; - font-weight: normal; -` -export const Divider = styled.div` - width: 80px; - height: 1px; - background: #004757; - margin-top: 8px; - margin-bottom: 10px; -` -export const Item = styled.div` - position: relative; - ${css.row('align-center')}; - font-size: 14px; - margin-bottom: 15px; - - &:hover { - cursor: pointer; - } -` -export const ActiveDot = styled.div` - ${css.circle(5)}; - position: absolute; - left: -20px; - top: 8px; - background: #139c9e; -` -export const Logo = styled(Img)` - fill: ${theme('article.digest')}; - ${css.size(18)}; - border-radius: 5px; - margin-right: 7px; - filter: saturate(0.5); -` -export const Title = styled.div` - ${css.cutRest('70px')}; - color: ${({ $active }) => ($active ? theme('article.title') : theme('article.digest'))}; - - ${Item}:hover & { - color: ${theme('article.title')}; - cursor: pointer; - } -` - -export const Option = styled.div`` -export const OptionIcon = styled(Img)` - ${css.size(15)}; - fill: ${theme('article.digest')}; - transform: rotate(90deg); - opacity: 0; - - &:hover { - fill: ${theme('article.title')}; - cursor: pointer; - } - - ${Item}:hover & { - opacity: 1; - } -` - -export const Menu = styled.div` - padding: 8px; - padding-bottom: 2px; -` -export const MenuItem = styled.div` - ${css.row('align-center')}; - margin-bottom: 8px; - cursor: pointer; -` -export const MenuIcon = styled(Img)` - ${css.size(14)}; - fill: ${theme('article.digest')}; - - ${MenuItem}:hover & { - fill: ${theme('article.title')}; - } -` -export const MenuTitle = styled.div` - font-size: 13px; - fill: ${theme('article.digest')}; - margin-left: 5px; - - ${MenuItem}:hover & { - color: ${theme('article.title')}; - } -` diff --git a/src/containers/content/CommunityContent/styles/subscribed_list/item_menu.ts b/src/containers/content/CommunityContent/styles/subscribed_list/item_menu.ts deleted file mode 100755 index 8fbb11f50..000000000 --- a/src/containers/content/CommunityContent/styles/subscribed_list/item_menu.ts +++ /dev/null @@ -1,31 +0,0 @@ -import styled from 'styled-components' - -import Img from '@/Img' -import css, { theme } from '@/css' - -export const Wrapper = styled.div` - padding: 8px; - padding-bottom: 2px; -` -export const Item = styled.div` - ${css.row('align-center')}; - margin-bottom: 8px; - cursor: pointer; -` -export const Icon = styled(Img)` - ${css.size(14)}; - fill: ${theme('article.digest')}; - - ${Item}:hover & { - fill: ${theme('article.title')}; - } -` -export const Title = styled.div` - font-size: 13px; - fill: ${theme('article.digest')}; - margin-left: 5px; - - ${Item}:hover & { - color: ${theme('article.title')}; - } -` diff --git a/src/containers/content/CommunityContent/styles/wip_thread.ts b/src/containers/content/CommunityContent/styles/wip_thread.ts deleted file mode 100755 index 19be0f8a8..000000000 --- a/src/containers/content/CommunityContent/styles/wip_thread.ts +++ /dev/null @@ -1,44 +0,0 @@ -import styled from 'styled-components' - -import css, { theme } from '@/css' -import WipSVG from '@/icons/Wip' - -export const Wrapper = styled.div` - width: 100%; - height: 300px; - padding: 60px; - padding-top: 40px; - - ${css.media.mobile` - padding-left: 15px; - padding-right: 15px; - `}; -` -export const WipIcon = styled(WipSVG)` - ${css.size(80)}; - fill: ${theme('article.digest')}; - margin-bottom: 20px; -` -export const Title = styled.div` - color: ${theme('article.title')}; - font-size: 16px; -` -export const Desc = styled.div` - color: ${theme('article.digest')}; - font-size: 14px; - margin-top: 10px; - margin-bottom: 20px; -` -export const Ul = styled.ul` - list-style: disc; - color: ${theme('article.digest')}; - margin-left: 18px; -` -export const Li = styled.li` - margin-bottom: 8px; - line-height: 1.4; - font-size: 14px; -` -export const InnerLinker = styled.div` - ${css.row('align-center')}; -` diff --git a/src/containers/content/CommunityContent/tests/index.test.ts b/src/containers/content/CommunityContent/tests/index.test.ts deleted file mode 100755 index 484b6075d..000000000 --- a/src/containers/content/CommunityContent/tests/index.test.ts +++ /dev/null @@ -1,10 +0,0 @@ -// import React from 'react' -// import { shallow } from 'enzyme' - -// import CommunityContent from '..' - -describe('TODO ', () => { - it('Expect to have unit tests specified', () => { - expect(true).toEqual(true) - }) -}) diff --git a/src/containers/content/CommunityContent/tests/store.test.ts b/src/containers/content/CommunityContent/tests/store.test.ts deleted file mode 100755 index b275e907e..000000000 --- a/src/containers/content/CommunityContent/tests/store.test.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - * CommunityContent store test - * - */ - -// import CommunityContent from '..' - -it('TODO: store test CommunityContent', () => { - expect(1 + 1).toBe(2) -}) diff --git a/src/containers/thread/KanbanThread/index.tsx b/src/containers/thread/KanbanThread/index.tsx index 75637f130..a0be995e0 100755 --- a/src/containers/thread/KanbanThread/index.tsx +++ b/src/containers/thread/KanbanThread/index.tsx @@ -6,6 +6,7 @@ import { FC } from 'react' import { observer } from 'mobx-react-lite' +import useIsSidebarLayout from '@/hooks/useIsSidebarLayout' import CustomScroller from '@/widgets/CustomScroller' import Actions from './Actions' @@ -15,11 +16,9 @@ import { Wrapper, ColumnsWrapper, MobileColumnsWrapper, MobileColumnsInner } fro // const log = buildLog('C:KanbanThread') -type TProps = { - isSidebarLayout?: boolean -} +const KanbanThread: FC = () => { + const isSidebarLayout = useIsSidebarLayout() -const KanbanThread: FC = ({ isSidebarLayout = false }) => { return ( diff --git a/src/containers/tool/Drawer/logic.ts b/src/containers/tool/Drawer/logic.ts index d5941a926..e2145b95d 100755 --- a/src/containers/tool/Drawer/logic.ts +++ b/src/containers/tool/Drawer/logic.ts @@ -181,7 +181,6 @@ export const useInit = (_store: TStore, windowWidth: number, metric: TMetric): v if (!sub$) { sub$ = sr71$.data().subscribe($solver(DataResolver, [])) } - console.log('## marking windowWidth: ', windowWidth) store.mark({ windowWidth, metric }) return () => { diff --git a/src/hooks/useIsSidebarLayout.ts b/src/hooks/useIsSidebarLayout.ts new file mode 100644 index 000000000..a08cbeb1d --- /dev/null +++ b/src/hooks/useIsSidebarLayout.ts @@ -0,0 +1,21 @@ +import { useContext } from 'react' +import { MobXProviderContext } from 'mobx-react' + +import { BANNER_LAYOUT } from '@/constant/layout' +import useBannerLayout from '@/hooks/useBannerLayout' + +/** + * NOTE: should use observer to wrap the component who use this hook + */ +const useIsSidebarLayout = (): boolean => { + const { store } = useContext(MobXProviderContext) + const bannerLayout = useBannerLayout() + + if (store === null) { + throw new Error('Store cannot be null, please add a context provider') + } + + return bannerLayout === BANNER_LAYOUT.SIDEBAR +} + +export default useIsSidebarLayout diff --git a/src/stores/RootStore/index.ts b/src/stores/RootStore/index.ts index d7bf50943..455d8d53b 100755 --- a/src/stores/RootStore/index.ts +++ b/src/stores/RootStore/index.ts @@ -6,7 +6,7 @@ * */ -import { mergeRight, pickBy } from 'ramda' +import { mergeRight } from 'ramda' import type { TAccount, TRoute, TThread, TArticle } from '@/spec' @@ -14,7 +14,6 @@ import EVENT from '@/constant/event' import METRIC from '@/constant/metric' import { T, markStates, Instance } from '@/mobx' -import { notEmpty } from '@/validator' import { toast, send } from '@/signal' import { @@ -31,7 +30,6 @@ import { ErrorBoxStore, MushroomStore, // content - CommunityContentStore, // ExploreContentStore, CommunityEditorStore, // UserContentStore, @@ -107,7 +105,7 @@ const rootStore = T.model({ mushroom: T.opt(MushroomStore, {}), // content - communityContent: T.opt(CommunityContentStore, {}), + // communityContent: T.opt(CommunityContentStore, {}), // exploreContent: T.opt(ExploreContentStore, {}), communityEditor: T.opt(CommunityEditorStore, {}), diff --git a/src/stores/index.ts b/src/stores/index.ts index 9bbd6d2fe..fc46c6e84 100755 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -27,9 +27,6 @@ export { default as MailBoxStore } from '@/containers/tool/MailBox/store' // -// contents store -export { default as CommunityContentStore } from '@/containers/content/CommunityContent/store' - // threads store // export { default as ReposThreadStore } from '@/containers/thread/ReposThread/store' diff --git a/src/widgets/AnimatedCount/styles/metric.ts b/src/widgets/AnimatedCount/styles/metric.ts index 44b21a28d..e4981d306 100755 --- a/src/widgets/AnimatedCount/styles/metric.ts +++ b/src/widgets/AnimatedCount/styles/metric.ts @@ -43,5 +43,5 @@ export const getCountColor = ( return themeMap.article.digest } - return active ? themeMap.rainbow[primaryColor.toLowerCase()] : themeMap.article.digest + return active ? themeMap.rainbow[primaryColor.toLowerCase()] : themeMap.article.title } diff --git a/src/widgets/Article/Post/index.tsx b/src/widgets/Article/Post/index.tsx index c4506f2a8..2068859fe 100644 --- a/src/widgets/Article/Post/index.tsx +++ b/src/widgets/Article/Post/index.tsx @@ -1,8 +1,6 @@ import { FC, useState } from 'react' -import useMetric from '@/hooks/useMetric' - -import Header from '@/widgets/CommunityDigest/HeaderLayout' +// import Header from '@/widgets/CommunityDigest/HeaderLayout' import ViewportTracker from '@/widgets/ViewportTracker' import Digest from './Digest' @@ -12,27 +10,19 @@ import SideInfo from './SideInfo' import { Wrapper, InnerWrapper, HeaderWrapper, BannerContent, Main } from '../styles/post' const Post: FC = () => { - const metric = useMetric() - const [inViewport, setInViewport] = useState(false) return ( - - {/* */} - - -
- - -
- - -
- - - + <> + +
+ + +
+ + setInViewport(true)} onLeave={() => setInViewport(false)} /> - + ) } diff --git a/src/widgets/Upvote/ArticleLayout.tsx b/src/widgets/Upvote/ArticleLayout.tsx index fa8f2a51d..22faecbce 100755 --- a/src/widgets/Upvote/ArticleLayout.tsx +++ b/src/widgets/Upvote/ArticleLayout.tsx @@ -34,14 +34,16 @@ const Upvote: FC = ({ const primaryColor = usePrimaryColor() const { handleClick, startAnimate } = useUpvote({ viewerHasUpvoted, onAction }) + console.log('## viewerHasUpvoted: ', viewerHasUpvoted) + return ( - diff --git a/src/widgets/Upvote/styles/article_layout.ts b/src/widgets/Upvote/styles/article_layout.ts index 733129149..d7afa9c83 100755 --- a/src/widgets/Upvote/styles/article_layout.ts +++ b/src/widgets/Upvote/styles/article_layout.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import type { TActive, TColorName, TTestable } from '@/spec' +import type { TActive, TColor, TTestable } from '@/spec' import css, { theme, rainbow, rainbowLink, rainbowLight } from '@/css' export const Wrapper = styled.div.attrs(({ $testid }) => ({ @@ -8,13 +8,13 @@ export const Wrapper = styled.div.attrs(({ $testid }) => ({ }))` ${css.column('align-both')}; ` -type TUpvoteIcon = { color: TColorName } & TActive +type TUpvoteIcon = TColor & TActive export const Button = styled.div` ${css.row('align-both')}; border: 1px solid; - border-color: ${({ $active, color }) => - $active ? rainbowLink(color, 'blackActive') : theme('button.upvoteBorder')}; + border-color: ${({ $active, $color }) => + $active ? rainbow($color, 'article.digest') : theme('button.upvoteBorder')}; background: ${({ $active }) => ($active ? theme('hoverBg') : 'transparent')}; border-radius: 14px; @@ -22,14 +22,14 @@ export const Button = styled.div` padding: 10px 0; &:hover { - border-color: ${({ color }) => rainbowLink(color, 'blackActive')}; - background-color: ${({ color }) => rainbowLight(color)}; + border-color: ${({ $color }) => rainbowLink($color, 'article.title')}; + background-color: ${({ $color }) => rainbowLight($color)}; cursor: pointer; } &:hover svg { - fill: ${({ color }) => rainbow(color)}; + fill: ${({ $color }) => rainbow($color)}; transform: scale(1.1); } @@ -42,7 +42,7 @@ export const CountWrapper = styled.div` export const Alias = styled.div` font-size: 15px; - color: ${({ color, $active }) => ($active ? rainbow(color) : theme('article.digest'))}; + color: ${({ $color, $active }) => ($active ? rainbow($color, 'hint') : theme('article.digest'))}; margin-left: 5px; font-weight: 400; margin-top: 1px;