From ac9003076e33e9c60f4a3fc840be95aa9789642d Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 26 Nov 2021 15:26:37 +0800 Subject: [PATCH 1/3] chore(footer): adjust for meetup --- config/config.json | 2 +- .../unit/Footer/DesktopView/TopInfo/index.tsx | 4 +++ .../unit/Footer/DesktopView/index.tsx | 34 +++++++++---------- 3 files changed, 21 insertions(+), 19 deletions(-) diff --git a/config/config.json b/config/config.json index f26528abd..78087cf38 100755 --- a/config/config.json +++ b/config/config.json @@ -62,7 +62,7 @@ "//--- contact configs ---//": "", "EMAIL_SUPPORT": "coderplanets@outlook.com", "// GRAPHQL_ENDPOINT": "https://api.coderplanets.com/graphiql", - "BUILD_VERSION": "v0.8.2", + "BUILD_VERSION": "v2.0.10", "// 1000 * 60 * 10 = 10 mins": "", "SSR_CACHE_TIME": 60000 } diff --git a/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx b/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx index df35189e3..fba5bbc51 100644 --- a/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx +++ b/src/containers/unit/Footer/DesktopView/TopInfo/index.tsx @@ -41,6 +41,10 @@ const TopInfo: FC = ({ return } + case METRIC.MEETUPS: { + return + } + case METRIC.SUPPORT_US: { return } diff --git a/src/containers/unit/Footer/DesktopView/index.tsx b/src/containers/unit/Footer/DesktopView/index.tsx index c11959938..049e33285 100644 --- a/src/containers/unit/Footer/DesktopView/index.tsx +++ b/src/containers/unit/Footer/DesktopView/index.tsx @@ -5,6 +5,7 @@ */ import { FC } from 'react' +import { includes } from 'ramda' // import dynamic from 'next/dynamic' import { buildLog } from '@/utils/logger' @@ -43,6 +44,15 @@ const FooterContainer: FC = ({ const { viewingArticle, curCommunity, c11n } = store const isHome = curCommunity.raw === HCN + const isGeneral = includes(metric, [ + METRIC.WORKS_ARTICLE, + METRIC.COOL_GUIDE, + METRIC.MEETUPS, + METRIC.WORKS, + METRIC.SUBSCRIBE, + METRIC.SUPPORT_US, + METRIC.HAVE_A_DRINK, + ]) return ( @@ -50,29 +60,17 @@ const FooterContainer: FC = ({ {metric === METRIC.COMMUNITY && isHome && ( )} + {metric === METRIC.COMMUNITY && !isHome && ( - + )} + {metric === METRIC.WORKS_ARTICLE && ( )} - {metric === METRIC.COOL_GUIDE && ( - - )} - {metric === METRIC.MEETUPS && } - {metric === METRIC.WORKS && } - {metric === METRIC.SUPPORT_US && ( - - )} - {metric === METRIC.SUBSCRIBE && ( - - )} - {metric === METRIC.HAVE_A_DRINK && ( - - )} - {/* {type === VIEW.HOME && ( - - )} */} + + {isGeneral && } + {/* {type === VIEW.HOME && ( )} */} From ab3177addf1ccd4ccef342cbef295648be92933a Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 26 Nov 2021 16:41:05 +0800 Subject: [PATCH 2/3] refactor(meetups): adjust mock --- .../MeetupsContent/FilterBar/index.tsx | 32 +++--- .../content/MeetupsContent/index.tsx | 4 - .../MeetupsContent/styles/card/index.ts | 9 +- .../MeetupsContent/styles/filter_bar/index.ts | 23 ++-- .../content/MeetupsContent/styles/index.ts | 1 + .../ClassicLayout/DynamicPart.tsx | 1 - .../unit/Footer/DesktopView/HomeLayout.tsx | 2 +- src/pages/meetups.tsx | 25 ++--- src/pages/membership.tsx | 2 +- src/widgets/BrandTitle/styles/index.ts | 1 + .../FiltersMenu/Filter/SelectedTag.tsx | 12 +-- src/widgets/FiltersMenu/helper.ts | 8 +- src/widgets/FiltersMenu/styles/index.ts | 6 +- utils/mock.ts | 102 ++++++++++++++++++ 14 files changed, 166 insertions(+), 62 deletions(-) diff --git a/src/containers/content/MeetupsContent/FilterBar/index.tsx b/src/containers/content/MeetupsContent/FilterBar/index.tsx index b1de2d821..cc6919aa4 100644 --- a/src/containers/content/MeetupsContent/FilterBar/index.tsx +++ b/src/containers/content/MeetupsContent/FilterBar/index.tsx @@ -2,16 +2,21 @@ import { FC } from 'react' import type { TFiltersMenuItems } from '@/spec' -import { mockFilterMenuTags } from '@/utils/mock' +import { mockMeetupsFilterTags } from '@/utils/mock' import BrandTitle from '@/widgets/BrandTitle' import Sticky from '@/widgets/Sticky' import Button from '@/widgets/Buttons/Button' import FiltersMenu from '@/widgets/FiltersMenu' import DotDivider from '@/widgets/DotDivider' -import { Br } from '@/widgets/Common' -import { Wrapper, NaviFooter, Terms, TermItem } from '../styles/filter_bar' +import { + Wrapper, + FilterWrapper, + NaviFooter, + Terms, + TermItem, +} from '../styles/filter_bar' type TProps = { filtersItems: TFiltersMenuItems @@ -20,23 +25,24 @@ type TProps = { const FilterBar: FC = ({ filtersItems }) => { return ( + -
- - + + + - 关于 {' '} - 建议 {' '} + 关于 {' '} + 建议 {' '} 举报 diff --git a/src/containers/content/MeetupsContent/index.tsx b/src/containers/content/MeetupsContent/index.tsx index 141779149..29e3050ef 100755 --- a/src/containers/content/MeetupsContent/index.tsx +++ b/src/containers/content/MeetupsContent/index.tsx @@ -7,8 +7,6 @@ import { FC } from 'react' import type { TMetric } from '@/spec' -import { ASSETS_ENDPOINT } from '@/config' -import { GALLERY } from '@/constant' import { buildLog } from '@/utils/logger' import { pluggedIn } from '@/utils/mobx' @@ -47,8 +45,6 @@ const MeetupsContentContainer: FC = ({ const { pagedMeetupsData } = store - console.log('## pagedMeetupsData: ', pagedMeetupsData.entries) - return ( diff --git a/src/containers/content/MeetupsContent/styles/card/index.ts b/src/containers/content/MeetupsContent/styles/card/index.ts index b0c82fa2a..49b1a3267 100644 --- a/src/containers/content/MeetupsContent/styles/card/index.ts +++ b/src/containers/content/MeetupsContent/styles/card/index.ts @@ -17,15 +17,16 @@ export const Wrapper = styled.div` margin-bottom: 20px; color: ${theme('thread.articleDigest')}; - border-top: 2px solid; - border-top-color: transparent; + border: 1px solid; + border-top: 3px solid; + border-color: transparent; background: #0d3644; &:hover { - border-top-color: #2380aa; + border-color: ${theme('button.primary')}; } - transition: border-top 0.1s; + transition: all 0.1s; ` export const ContentsWrapper = styled.div` ${css.flexColumn()}; diff --git a/src/containers/content/MeetupsContent/styles/filter_bar/index.ts b/src/containers/content/MeetupsContent/styles/filter_bar/index.ts index 196c4ecfd..238e8c0ca 100644 --- a/src/containers/content/MeetupsContent/styles/filter_bar/index.ts +++ b/src/containers/content/MeetupsContent/styles/filter_bar/index.ts @@ -1,6 +1,5 @@ import styled from 'styled-components' -import Img from '@/Img' import { theme } from '@/utils/themes' import css from '@/utils/css' @@ -8,33 +7,35 @@ export const Wrapper = styled.div` ${css.flexColumn()}; margin-right: 25px; /* width of filter bar */ - min-width: 145px; + min-width: 150px; + width: 150px; ` -export const MeetupIcon = styled(Img)` - fill: ${theme('thread.articleTitle')}; - height: 70px; - width: 100px; - display: block; - margin-top: -17px; + +export const FilterWrapper = styled.div` + margin-left: -5px; ` + export const NaviFooter = styled.div` ${css.flexColumn('align-start')}; border-top: 1px solid; border-top-color: #0d4353; - padding-top: 20px; + margin-left: -5px; + padding-top: 25px; color: ${theme('thread.articleDigest')}; - margin-left: 10px; + padding-left: 5px; margin-top: 20px; ` export const Terms = styled.div` ${css.flex('align-center')}; - margin-top: 12px; + margin-top: 16px; ` export const TermItem = styled.div` font-weight: bold; opacity: 0.8; + color: ${theme('thread.articleDigest')}; &:hover { + color: ${theme('thread.articleTitle')}; opacity: 1; cursor: pointer; } diff --git a/src/containers/content/MeetupsContent/styles/index.ts b/src/containers/content/MeetupsContent/styles/index.ts index d2c6796b0..780d5075b 100755 --- a/src/containers/content/MeetupsContent/styles/index.ts +++ b/src/containers/content/MeetupsContent/styles/index.ts @@ -24,4 +24,5 @@ export const CardsWrapper = styled.div` ${css.flex('align-center')}; flex-wrap: wrap; width: 100%; + margin-top: 12px; ` diff --git a/src/containers/thread/ThreadSidebar/ClassicLayout/DynamicPart.tsx b/src/containers/thread/ThreadSidebar/ClassicLayout/DynamicPart.tsx index 5569cd33f..cbeac2ef7 100644 --- a/src/containers/thread/ThreadSidebar/ClassicLayout/DynamicPart.tsx +++ b/src/containers/thread/ThreadSidebar/ClassicLayout/DynamicPart.tsx @@ -51,7 +51,6 @@ const ClassicLayout: FC = ({ send(EVENT.REFRESH_ARTICLES)} /> - {/* */} ) diff --git a/src/containers/unit/Footer/DesktopView/HomeLayout.tsx b/src/containers/unit/Footer/DesktopView/HomeLayout.tsx index e9a3abdc7..f12500f8a 100644 --- a/src/containers/unit/Footer/DesktopView/HomeLayout.tsx +++ b/src/containers/unit/Footer/DesktopView/HomeLayout.tsx @@ -131,7 +131,7 @@ const HomeView: FC = ({ metric, layout }) => { - Brand + 品牌 价值观 diff --git a/src/pages/meetups.tsx b/src/pages/meetups.tsx index 61bf917f0..0f10f6d64 100755 --- a/src/pages/meetups.tsx +++ b/src/pages/meetups.tsx @@ -3,12 +3,12 @@ import { Provider } from 'mobx-react' import { METRIC, THREAD } from '@/constant' import { - ssrBaseStates, - ssrFetchPrepare, ssrHomePagedArticlesFilter, ssrPagedArticleSchema, ssrParseArticleThread, - ssrRescue, + ssrBaseStates, + ssrFetchPrepare, + refreshIfneed, meetupsSEO, ssrError, } from '@/utils' @@ -29,17 +29,10 @@ const fetchData = async (context, opt = {}) => { filter, ) const sessionState = gqClient.request(P.sessionState) - const subscribedCommunities = gqClient.request(P.subscribedCommunities, { - filter: { - page: 1, - size: 30, - }, - }) return { filter, ...(await sessionState), - ...(await subscribedCommunities), ...(await pagedArticles), } } @@ -48,12 +41,12 @@ export const getServerSideProps = async (context) => { let resp try { resp = await fetchData(context) - } catch ({ response: { errors } }) { - if (ssrRescue.hasLoginError(errors)) { - resp = await fetchData(context, { tokenExpired: true }) - } else { - return ssrError(context, 'fetch', 500) - } + const { sessionState } = resp + + refreshIfneed(sessionState, '/meetups', context) + } catch (e) { + console.log('#### error from server: ', e) + return ssrError(context, 'fetch', 500) } const { filter } = resp diff --git a/src/pages/membership.tsx b/src/pages/membership.tsx index e75226494..704175391 100755 --- a/src/pages/membership.tsx +++ b/src/pages/membership.tsx @@ -31,7 +31,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { resp = await fetchData(context) const { sessionState } = resp - refreshIfneed(sessionState, '/trending', context) + refreshIfneed(sessionState, '/membership', context) } catch (e) { console.log('#### error from server: ', e) return ssrError(context, 'fetch', 500) diff --git a/src/widgets/BrandTitle/styles/index.ts b/src/widgets/BrandTitle/styles/index.ts index 144117e88..79dc25562 100755 --- a/src/widgets/BrandTitle/styles/index.ts +++ b/src/widgets/BrandTitle/styles/index.ts @@ -18,6 +18,7 @@ export const Title = styled.div` ` export const Desc = styled.div` color: ${theme('thread.articleDigest')}; + opacity: 0.8; font-size: 13px; margin-top: 15px; ` diff --git a/src/widgets/FiltersMenu/Filter/SelectedTag.tsx b/src/widgets/FiltersMenu/Filter/SelectedTag.tsx index 22390faf0..a64749e3d 100644 --- a/src/widgets/FiltersMenu/Filter/SelectedTag.tsx +++ b/src/widgets/FiltersMenu/Filter/SelectedTag.tsx @@ -14,17 +14,17 @@ const SelectedTag: FC = ({ tag, expandMenuId, onSelect, revert }) => { onSelect(expandMenuId, tag)}> {!revert ? ( <> - - - {tag ? tag.title || '全部' : '全部'} + <FoldDot active={tag.title !== '不限'} /> + <Title active={tag.title !== '不限'}> + {tag ? tag.title || '不限' : '不限'} ) : ( <> - - {tag ? tag.title || '全部' : '全部'} + <Title active={tag.title !== '不限'} revert> + {tag ? tag.title || '不限' : '不限'} - + )} diff --git a/src/widgets/FiltersMenu/helper.ts b/src/widgets/FiltersMenu/helper.ts index 91341f1e3..6fdb9c85b 100644 --- a/src/widgets/FiltersMenu/helper.ts +++ b/src/widgets/FiltersMenu/helper.ts @@ -11,11 +11,15 @@ export const tags2Options = (tags: TTag[]): TMenu => { const formated = [] keys(groupedTags).forEach((group, index) => { + const icon = + group === '城市' + ? `${ICON_CMD}/navi/location.svg` + : `${ICON_CMD}/navi/topic.svg` formated.push({ id: index, title: group, - icon: `${ICON_CMD}/navi/location.svg`, - options: [{ id: '', title: '全部' }, ...groupedTags[group]], + icon, + options: [{ id: '', title: '不限' }, ...groupedTags[group]], }) }) diff --git a/src/widgets/FiltersMenu/styles/index.ts b/src/widgets/FiltersMenu/styles/index.ts index d4d8604b8..c63fdc631 100755 --- a/src/widgets/FiltersMenu/styles/index.ts +++ b/src/widgets/FiltersMenu/styles/index.ts @@ -14,6 +14,7 @@ export const ItemWrapper = styled.div<{ withDivider: boolean }>` border-bottom: ${({ withDivider }) => (withDivider ? '1px solid' : 'none')}; border-bottom-color: ${({ withDivider }) => withDivider ? '#094354' : 'none'}; + margin-bottom: 10px; :last-child { border-bottom: none; @@ -28,9 +29,7 @@ type TItem = TActive & { export const Item = styled.div` ${css.flex('align-center')}; justify-content: ${({ revert }) => (revert ? 'flex-start' : 'flex-end')}; - fill: ${theme('thread.articleDigest')}; - color: ${({ active }) => - active ? theme('thread.articleTitle') : theme('thread.articleDigest')}; + color: ${theme('thread.articleTitle')}; font-size: ${({ active }) => (active ? '15px' : '14px')}; padding: 8px 6px; padding-bottom: ${({ noFilter }) => (noFilter ? '10px' : '5px')}; @@ -47,6 +46,7 @@ export const Item = styled.div` transition: margin-top 0.25s; ` export const Icon = styled(Img)` + fill: ${theme('thread.articleDigest')}; opacity: ${({ active }) => (active ? 1 : 0)}; ${css.size(15)}; diff --git a/utils/mock.ts b/utils/mock.ts index 5345ea262..6c7ce93c6 100644 --- a/utils/mock.ts +++ b/utils/mock.ts @@ -370,6 +370,108 @@ export const mockFilterMenuTags = (): TFilterTag[] => { ] } +export const mockMeetupsFilterTags = (): TFilterTag[] => { + return [ + { + id: '1', + raw: 'beijing', + title: '北京', + group: '城市', + }, + { + id: '2', + raw: 'shanghai', + title: '上海', + group: '城市', + }, + { + id: '2-1', + raw: 'hangzhou', + title: '杭州', + group: '城市', + }, + { + id: '3', + raw: 'shenzhen', + title: '深圳', + group: '城市', + }, + { + id: '4', + raw: 'wuhan', + title: '武汉', + group: '城市', + }, + { + id: '5', + raw: 'chengdu', + title: '成都', + group: '城市', + }, + { + id: '6', + raw: 'xiamen', + title: '厦门', + group: '城市', + }, + { + id: '7', + raw: 'oversea', + title: '海外', + group: '城市', + }, + { + id: '8', + raw: 'remote', + title: '远程', + group: '城市', + }, + // + { + id: '10', + raw: 'web', + title: 'web', + group: '话题', + }, + { + id: '11', + raw: 'backend', + title: '后端开发', + group: '话题', + }, + { + id: '12', + raw: 'mobile', + title: '移动端', + group: '话题', + }, + { + id: '13', + raw: 'ai', + title: '人工智能', + group: '话题', + }, + { + id: '14', + raw: 'devops', + title: 'DevOps', + group: '话题', + }, + { + id: '15', + raw: 'securty', + title: '安全', + group: '话题', + }, + { + id: '16', + raw: 'ama', + title: '我的产品', + group: '话题', + }, + ] +} + export const mockWorksNaviCatalogTags = (): TNaviTag[] => { return [ // 生产力 start From db229c44feb318e67a5b8ab204f01d2ebeb4f57e Mon Sep 17 00:00:00 2001 From: mydearxym Date: Fri, 26 Nov 2021 17:02:26 +0800 Subject: [PATCH 3/3] refactor(meetups): add a note --- .../content/MeetupsContent/About.tsx | 24 +++++++++++++++++++ .../content/MeetupsContent/index.tsx | 4 ++-- .../content/MeetupsContent/styles/about.ts | 20 ++++++++++++++++ 3 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 src/containers/content/MeetupsContent/About.tsx create mode 100644 src/containers/content/MeetupsContent/styles/about.ts diff --git a/src/containers/content/MeetupsContent/About.tsx b/src/containers/content/MeetupsContent/About.tsx new file mode 100644 index 000000000..07e15f450 --- /dev/null +++ b/src/containers/content/MeetupsContent/About.tsx @@ -0,0 +1,24 @@ +import { FC, memo } from 'react' + +import Linker from '@/widgets/Linker' + +import { Wrapper } from './styles/about' + +const About: FC = () => { + return ( + + 小聚（Meetups）版块部分功能还在编写完善中，所展示的 UI/UX + 部分为的目前设计的产品形态，后期可能会有所调整，如果你有任何建议和反馈，欢迎。 + + + ) +} + +export default memo(About) diff --git a/src/containers/content/MeetupsContent/index.tsx b/src/containers/content/MeetupsContent/index.tsx index 29e3050ef..7216f97b6 100755 --- a/src/containers/content/MeetupsContent/index.tsx +++ b/src/containers/content/MeetupsContent/index.tsx @@ -18,11 +18,10 @@ import type { TStore } from './store' import FilterBar from './FilterBar' import DateSelector from './DateSelector' -// import ActivityCard from './ActivityCard' import Card from './Card' +import About from './About' import filtersItems from './fakeFiltersItems' -// import meetups from './fakeMeetups' import { Wrapper, InnerWrapper, ContentWrapper, CardsWrapper } from './styles' import { useInit } from './logic' @@ -58,6 +57,7 @@ const MeetupsContentContainer: FC = ({ ))} + diff --git a/src/containers/content/MeetupsContent/styles/about.ts b/src/containers/content/MeetupsContent/styles/about.ts new file mode 100644 index 000000000..ddb92c24a --- /dev/null +++ b/src/containers/content/MeetupsContent/styles/about.ts @@ -0,0 +1,20 @@ +import styled from 'styled-components' + +import type { TMetric } from '@/spec' +import { theme } from '@/utils/themes' +import css from '@/utils/css' + +export const Wrapper = styled.div` + width: 100%; + color: ${theme('thread.articleDigest')}; + font-size: 15px; + margin-top: 50px; + border-top: 1px solid #104352; + padding-top: 20px; + padding-right: 20%; +` +export const InnerWrapper = styled.div<{ metric: TMetric }>` + ${css.flex()}; + margin-top: 40px; + ${({ metric }) => css.fitContentWidth(metric)}; +`