feat(articles): search ux (#1288)

* feat(search-ux): extract FAQ list

* chore: mini adjust

* refactor(utils): extract lineClamp helper

* refactor(utils): naming

* refactor(faq): add search hint mode

* refactor(search): basic ux

Author: mydearxym

src/containers/content/CoolGuideContent/styles/footer/index.ts

@@ -37,17 +37,11 @@ export const ContributorsWrapper = styled.div`
 `
 
 export const Desc = styled.div`
+  ${css.lineClamp(2)}
   color: ${theme('thread.articleDigest')};
   margin-top: -10px;
   opacity: 0.8;
 
-  position: relative;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-
   ${Block}:hover & {
     opacity: 1;
   }

src/containers/content/ExploreContent/styles/community_card.ts

@@ -63,12 +63,7 @@ export const Slash = styled.div`
   font-weight: bold;
 `
 export const Raw = styled.div`
-  position: relative;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
+  ${css.lineClamp(1)};
 `
 export const JoinWrapper = styled.div`
   ${css.flex('align-center')};
@@ -97,16 +92,11 @@ export const Title = styled.a`
   }
 `
 export const Desc = styled.div`
+  ${css.lineClamp(2)}
   margin-top: 8px;
   color: ${theme('thread.articleDigest')};
   word-break: break-all;
   font-size: 13px;
-  position: relative;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
 `
 export const ActivitySpark = styled.div`
   width: 80px;

src/containers/content/HaveADrinkContent/styles/body/catalog.ts

@@ -98,15 +98,9 @@ export const Title = styled.div`
   font-weight: bold;
 `
 export const Desc = styled.div`
+  ${css.lineClamp(2)}
   color: ${theme('thread.articleDigest')};
   opacity: 0.8;
   font-size: 13px;
   margin-top: 5px;
-
-  position: relative;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
 `

src/containers/content/UserContent/styles/mobile_banner.ts

@@ -24,12 +24,7 @@ export const NickName = styled.div`
   color: ${theme('thread.articleTitle')};
 `
 export const Bio = styled.div`
+  ${css.lineClamp(2)}
   font-size: 13px;
   color: ${theme('thread.articleDigest')};
-  position: relative;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
 `

src/containers/editor/CommunityEditor/styles/content/more_info.ts

@@ -31,12 +31,7 @@ export const Title = styled.div`
   font-size: 17px;
 `
 export const Desc = styled.div`
+  ${css.lineClamp(2)}
   color: ${theme('thread.articleDigest')};
   font-size: 14px;
-  position: relative;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
 `

src/containers/thread/ArticlesThread/index.tsx

@@ -5,7 +5,6 @@
  */
 
 import { FC } from 'react'
-import dynamic from 'next/dynamic'
 import { includes } from 'ramda'
 import { isMobile } from 'react-device-detect'
 
@@ -15,6 +14,7 @@ import { buildLog } from '@/utils/logger'
 import { bond } from '@/utils/mobx'
 
 import PagedArticles from '@/widgets/PagedArticles'
+import FaqList from '@/widgets/FaqList'
 import ViewportTracker from '@/widgets/ViewportTracker'
 import ThreadSidebar from '@/containers/thread/ThreadSidebar'
 import ArticlesFilter from '@/widgets/ArticlesFilter'
@@ -27,7 +27,14 @@ import {
   MobileCardsMainWrapper,
   FilterWrapper,
 } from './styles'
-import { useInit, inAnchor, outAnchor, onFilterSelect } from './logic'
+import {
+  useInit,
+  inAnchor,
+  outAnchor,
+  onFilterSelect,
+  onSearch,
+  closeSearch,
+} from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:ArticlesThread')
@@ -47,6 +54,7 @@ const ArticlesThreadContainer: FC<TProps> = ({ articlesThread: store }) => {
     showFilters,
     c11n,
     resState,
+    mode,
   } = store
   const { bannerLayout } = c11n
   const { pageNumber, totalCount } = pagedArticlesData
@@ -72,16 +80,22 @@ const ArticlesThreadContainer: FC<TProps> = ({ articlesThread: store }) => {
               activeFilter={filtersData}
               pageNumber={pageNumber}
               totalCount={totalCount}
+              mode={mode}
+              onSearch={onSearch}
+              closeSearch={closeSearch}
             />
           </FilterWrapper>
         )}
-        <PagedArticles
-          data={pagedArticlesData}
-          curCommunity={curCommunity}
-          thread={curThread}
-          resState={resState as TResState}
-          c11n={c11n}
-        />
+        {mode === 'default' && (
+          <PagedArticles
+            data={pagedArticlesData}
+            curCommunity={curCommunity}
+            thread={curThread}
+            resState={resState as TResState}
+            c11n={c11n}
+          />
+        )}
+        {mode === 'search' && <FaqList mode="search-hint" />}
       </TheMainWrapper>
 
       {!isMobile && bannerLayout === C11N.CLASSIC && <ThreadSidebar />}

src/containers/thread/ArticlesThread/logic.ts

@@ -35,6 +35,14 @@ let sub$ = null
 export const inAnchor = (): void => store?.showTopModeline(false)
 export const outAnchor = (): void => store?.showTopModeline(true)
 
+export const onSearch = (v: string): void => {
+  store.mark({ mode: 'search', searchValue: v })
+}
+
+export const closeSearch = (): void => {
+  store.mark({ mode: 'default' })
+}
+
 export const onFilterSelect = (option: TArticleFilter): void => {
   store.selectFilter(option)
   // console.log('cur filter: ', store.filtersData)

src/containers/thread/ArticlesThread/store.ts

@@ -34,6 +34,8 @@ import {
 } from '@/model'
 
 const ArticlesThread = T.model('ArticlesThread', {
+  mode: T.optional(T.enumeration(['default', 'search']), 'default'),
+  searchValue: T.optional(T.string, ''),
   pagedPosts: T.optional(PagedPosts, emptyPagi),
   pagedJobs: T.optional(PagedJobs, emptyPagi),
   pagedBlogs: T.optional(PagedBlogs, emptyPagi),

src/containers/thread/HelpThread/Sidebar.tsx

@@ -10,7 +10,7 @@ import { bond } from '@/utils/mobx'
 
 import type { TStore } from './store'
 
-import Sidebar from './Sidebar'
+import FaqList from '@/widgets/FaqList'
 import Category from './Category'
 
 import { Wrapper, MainWrapper, CatsWapper } from './styles'
@@ -80,7 +80,7 @@ const HelpThreadContainer: FC<TProps> = ({
           />
         </CatsWapper>
       </MainWrapper>
-      <Sidebar />
+      <FaqList />
     </Wrapper>
   )
 }