refactor(meetups): mock adjust (#1202)

mydearxym · web-flow · commit 67c37524f886 · 2021-11-26T17:04:32.000+08:00
* chore(footer): adjust for meetup

* refactor(meetups): adjust mock

* refactor(meetups): add a note
diff --git 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/content/MeetupsContent/About.tsx 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 (
+    <Wrapper>
+      小聚（Meetups）版块部分功能还在编写完善中，所展示的 UI/UX
+      部分为的目前设计的产品形态，后期可能会有所调整，如果你有任何建议和反馈，欢迎。
+      <Linker
+        src="/feedback"
+        external={false}
+        text="来这里讨论"
+        inline
+        left={4}
+        right={4}
+      />
+    </Wrapper>
+  )
+}
+
+export default memo(About)
diff --git 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<TProps> = ({ filtersItems }) => {
   return (
     <Wrapper>
+      <BrandTitle
+        title="Meetups"
+        fontSize={23}
+        mBottom={25}
+        desc="来和志同道合的伙伴们一起聊聊吧 !"
+      />
       <Sticky offsetTop={26}>
-        <Br top={12} />
-        <BrandTitle
-          title="Meetups"
-          fontSize={23}
-          mBottom={45}
-          desc="来和志同道合的朋友们一起聊聊?"
-        />
-        <FiltersMenu tags={mockFilterMenuTags()} revert />
+        <FilterWrapper>
+          <FiltersMenu tags={mockMeetupsFilterTags()} revert />
+        </FilterWrapper>
         <NaviFooter>
           <Button type="primary" size="small" ghost>
             + 发起小聚
           </Button>
 
           <Terms>
-            <TermItem>关于</TermItem> <DotDivider radius={3} />{' '}
-            <TermItem>建议</TermItem> <DotDivider radius={3} />{' '}
+            <TermItem>关于</TermItem> <DotDivider space={6} radius={3} />{' '}
+            <TermItem>建议</TermItem> <DotDivider space={6} radius={3} />{' '}
             <TermItem>举报</TermItem>
           </Terms>
         </NaviFooter>
diff --git 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'
 
@@ -20,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'
@@ -47,8 +44,6 @@ const MeetupsContentContainer: FC<TProps> = ({
 
   const { pagedMeetupsData } = store
 
-  console.log('## pagedMeetupsData: ', pagedMeetupsData.entries)
-
   return (
     <Wrapper testid={testid}>
       <InnerWrapper metric={metric}>
@@ -62,6 +57,7 @@ const MeetupsContentContainer: FC<TProps> = ({
               ))}
             </MasonryCards>
           </CardsWrapper>
+          <About />
 
           <Pagi margin={{ top: '60px', bottom: '80px' }} />
         </ContentWrapper>
diff --git a/src/containers/content/MeetupsContent/styles/about.ts 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)};
+`
diff --git 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
@@ -1,40 +1,41 @@
 import styled from 'styled-components'
 
-import Img from '@/Img'
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 
 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
@@ -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
@@ -51,7 +51,6 @@ const ClassicLayout: FC<TProps> = ({
       </BadgeWrapper>
       <TagsBarWrapper>
         <TagsBar onSelect={() => send(EVENT.REFRESH_ARTICLES)} />
-        {/* <FiltersMenu tags={mockFilterMenuTags()} revert /> */}
       </TagsBarWrapper>
     </Sticky>
   )
diff --git a/src/containers/unit/Footer/DesktopView/HomeLayout.tsx b/src/containers/unit/Footer/DesktopView/HomeLayout.tsx
@@ -131,7 +131,7 @@ const HomeView: FC<TProps> = ({ metric, layout }) => {
           </Column>
 
           <Column>
-            <Title>Brand</Title>
+            <Title>品牌</Title>
             <Body>
               <LinkItem href={`${ROUTE.MEMBERSHIP}`} {...linkColors}>
                 价值观
diff --git 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<TProps> = ({
       return <General title="作品集市" />
     }
 
+    case METRIC.MEETUPS: {
+      return <General title="小聚" />
+    }
+
     case METRIC.SUPPORT_US: {
       return <General title="支持我们" />
     }
diff --git 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,36 +44,33 @@ const FooterContainer: FC<TProps> = ({
 
   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 (
     <Wrapper testid={testid} layout={c11n.bannerLayout} metric={metric}>
       <JoinModal />
       {metric === METRIC.COMMUNITY && isHome && (
         <HomeLayout metric={metric} layout={c11n.bannerLayout} />
       )}
+
       {metric === METRIC.COMMUNITY && !isHome && (
-        <GeneralLayout metric={METRIC.COMMUNITY} title={curCommunity.title} />
+        <GeneralLayout metric={metric} title={curCommunity.title} />
       )}
+
       {metric === METRIC.WORKS_ARTICLE && (
         <WorksArticleLayout viewingArticle={viewingArticle} />
       )}
-      {metric === METRIC.COOL_GUIDE && (
-        <GeneralLayout metric={METRIC.COOL_GUIDE} />
-      )}
-      {metric === METRIC.MEETUPS && <GeneralLayout metric={METRIC.MEETUPS} />}
-      {metric === METRIC.WORKS && <GeneralLayout metric={METRIC.WORKS} />}
-      {metric === METRIC.SUPPORT_US && (
-        <GeneralLayout metric={METRIC.SUPPORT_US} />
-      )}
-      {metric === METRIC.SUBSCRIBE && (
-        <GeneralLayout metric={METRIC.SUBSCRIBE} />
-      )}
-      {metric === METRIC.HAVE_A_DRINK && (
-        <GeneralLayout metric={METRIC.HAVE_A_DRINK} />
-      )}
-      {/* {type === VIEW.HOME && (
-        <CommunityView metric={metric} layout={bannerLayout} />
-      )} */}
+
+      {isGeneral && <GeneralLayout metric={metric} />}
+
       {/* {type === VIEW.HOME && (
         <HostingCommunityView metric={metric} layout={bannerLayout} />
       )} */}
diff --git 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
@@ -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
@@ -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
diff --git a/src/widgets/FiltersMenu/helper.ts b/src/widgets/FiltersMenu/helper.ts
diff --git a/src/widgets/FiltersMenu/styles/index.ts b/src/widgets/FiltersMenu/styles/index.ts
diff --git a/utils/mock.ts b/utils/mock.ts

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@`
`62`	`62`	`"//--- contact configs ---//": "",`
`63`	`63`	`"EMAIL_SUPPORT": "coderplanets@outlook.com",`
`64`	`64`	`"// GRAPHQL_ENDPOINT": "https://api.coderplanets.com/graphiql",`
`65`		`- "BUILD_VERSION": "v0.8.2",`
	`65`	`+ "BUILD_VERSION": "v2.0.10",`
`66`	`66`	`"// 1000 * 60 * 10 = 10 mins": "",`
`67`	`67`	`"SSR_CACHE_TIME": 60000`
`68`	`68`	`}`
Original file line number	Diff line number	Diff line change
@@ -24,4 +24,5 @@ export const CardsWrapper = styled.div`
`24`	`24`	`${css.flex('align-center')};`
`25`	`25`	`flex-wrap: wrap;`
`26`	`26`	`width: 100%;`
	`27`	`+ margin-top: 12px;`
`27`	`28`	`
Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,6 @@ const ClassicLayout: FC<TProps> = ({`
`51`	`51`	`</BadgeWrapper>`
`52`	`52`	`<TagsBarWrapper>`
`53`	`53`	`<TagsBar onSelect={() => send(EVENT.REFRESH_ARTICLES)} />`
`54`		`- {/* <FiltersMenu tags={mockFilterMenuTags()} revert /> */}`
`55`	`54`	`</TagsBarWrapper>`
`56`	`55`	`</Sticky>`
`57`	`56`	`)`