refactor(works-card): adjust style && re-org (#1055)

* refactor(works-cards): adjust style & idea

* refactor(works-cards): extract to common Cards

* test(cypress): skip shortcut test

* fix(ci): remove videoCount && run migration before test

Author: mydearxym

.github/workflows/ci.yml

@@ -42,6 +42,9 @@ jobs:
       - name: (Backend) Install Packages
         working-directory: ./backend_server
         run: mix deps.get > /dev/null
+      - name: (Backend) run migration
+        working-directory: ./backend_server
+        run: MIX_ENV=ci MIX_ENV=ci mix ecto.migrate > /dev/null
       - name: (Backend) set up test DB
         working-directory: ./backend_server
         run: MIX_ENV=ci mix ecto.setup > /dev/null

cypress/integration/home/layout.spec.js

@@ -32,25 +32,25 @@ describe('home page: ', () => {
   })
 
   // TODO: modify keys not working ..
-  it.skip('doramon Comp should close after shortcut pressed', () => {
-    // ctrl + C pressed
-    cy.id('header-search').click()
-    cy.id('doraemon-inputer').should('be.visible')
-    cy.id('doraemon-inputer').type('{ctrl}C', { release: true })
-    cy.id('doraemon-inputer').should('not.be.visible')
-
-    // ctrl + G pressed
-    cy.id('header-search').click()
-    cy.id('doraemon-inputer').should('be.visible')
-    cy.id('doraemon-inputer').type('{ctrl}G')
-    cy.id('doraemon-inputer').should('not.be.visible')
-
-    // esc pressed
-    cy.id('header-search').click()
-    cy.id('doraemon-inputer').should('be.visible')
-    cy.id('doraemon-inputer').type('{esc}')
-    cy.id('doraemon-inputer').should('not.be.visible')
-  })
+  // it.skip('doramon Comp should close after shortcut pressed', () => {
+  //   // ctrl + C pressed
+  //   cy.id('header-search').click()
+  //   cy.id('doraemon-inputer').should('be.visible')
+  //   cy.id('doraemon-inputer').type('{ctrl}C', { release: true })
+  //   cy.id('doraemon-inputer').should('not.be.visible')
+
+  //   // ctrl + G pressed
+  //   cy.id('header-search').click()
+  //   cy.id('doraemon-inputer').should('be.visible')
+  //   cy.id('doraemon-inputer').type('{ctrl}G')
+  //   cy.id('doraemon-inputer').should('not.be.visible')
+
+  //   // esc pressed
+  //   cy.id('header-search').click()
+  //   cy.id('doraemon-inputer').should('be.visible')
+  //   cy.id('doraemon-inputer').type('{esc}')
+  //   cy.id('doraemon-inputer').should('not.be.visible')
+  // })
 
   it('user-related area should be seen', () => {
     cy.id('header-unlogin-user').should('be.visible')

package.json

@@ -28,7 +28,7 @@
     "test:dev": "cross-env NODE_ENV=test jest --config .jest.config.js",
     "test:watch": "npm run test -- --watch",
     "test:cover": "npm run test -- --coverage",
-    "test:e2e": "cypress open",
+    "test:e2e": "./node_modules/.bin/cypress open",
     "cy:run": "./node_modules/.bin/cypress run --key 60eb2dd7-724d-4b39-bd12-f434f3465866 --record",
     "cy:run:free": "./node_modules/.bin/cypress run",
     "test:ci": "start-server-and-test ci http://localhost:3000 cy:run:free",
@@ -153,7 +153,7 @@
     "bundlewatch": "^0.2.7",
     "commitizen": "3.1.2",
     "coveralls": "3.0.14",
-    "cypress": "6.2.0",
+    "cypress": "^7.0.0",
     "cz-conventional-changelog": "^3.0.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.2",

src/components/WorksCard/index.js renamed to src/components/Cards/WorksCard.tsx

@@ -5,10 +5,9 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 
 import { ICON, ICON_CMD } from '@/config'
-import { buildLog, cutRest, nilOrEmpty } from '@/utils'
+import { buildLog, cutRest } from '@/utils'
 
 import DigestSentence from '@/components/DigestSentence'
 import { SpaceGrow } from '@/components/Common'
@@ -28,36 +27,47 @@ import {
   TechIcon,
   Divider,
   GithubIcon,
-} from './styles'
+} from './styles/works_card'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:WorksCard:index')
 
-const getSafeValue = (mode, value, defaultValue) => {
-  return mode === 'preview' && nilOrEmpty(value) ? defaultValue : value
+type TProps = {
+  testid?: string
+  withBg?: boolean
+  mode?: 'default' | 'preview'
+  item: {
+    cover: string
+    title: string
+    desc: string
+    tag: {
+      title: string
+    }
+    platform: {
+      title: string
+    }
+    techStack: {
+      icon: string
+      raw: string
+    }[]
+    insertedAt: string
+    upvote: number
+    commentsCount: number
+    isOSS: boolean
+    ossAddr?: boolean
+  }
 }
 
-const WorksCard = ({
-  withBg,
-  testid,
-  mode,
+const WorksCard: React.FC<TProps> = ({
+  testid = 'works-card',
   item,
-  defaultTitle,
-  defaultDesc,
-  defaultUpvote,
-  defaultCommentsCount,
+  withBg = false,
+  mode = 'default',
+  // item,
 }) => {
   const descLimit = mode === 'default' ? 30 : 20
 
-  const title = getSafeValue(mode, item.title, defaultTitle)
-  const desc = getSafeValue(mode, item.desc, defaultDesc)
-
-  const upvote = getSafeValue(mode, item.upvote, defaultUpvote)
-  const commentsCount = getSafeValue(
-    mode,
-    item.commentsCount,
-    defaultCommentsCount,
-  )
+  const { title, desc, upvote, commentsCount } = item
 
   return (
     <Wrapper testid={testid} withBg={withBg}>
@@ -71,7 +81,7 @@ const WorksCard = ({
         <Header>
           <div>
             <Title>{title}</Title>
-            <DigestSentence top={5} bottom={15}>
+            <DigestSentence top={5} bottom={15} onPreview={() => log}>
               {cutRest(desc, descLimit)}
             </DigestSentence>
           </div>
@@ -127,47 +137,4 @@ const WorksCard = ({
   )
 }
 
-WorksCard.propTypes = {
-  testid: T.string,
-  withBg: T.bool,
-  mode: T.oneOf(['default', 'preview']),
-  item: T.shape({
-    cover: T.string,
-    title: T.string,
-    desc: T.string,
-    tag: T.shape({
-      title: T.string,
-    }),
-    platform: T.shape({
-      title: T.string,
-    }),
-    techStack: T.arrayOf(
-      T.shape({
-        icon: T.string,
-      }),
-    ),
-    insertedAt: T.string,
-    upvote: T.number,
-    commentsCount: T.number,
-    isOSS: T.bool,
-    ossAddr: T.bool,
-  }).isRequired,
-
-  defaultTitle: T.string,
-  defaultDesc: T.string,
-  defaultUpvote: T.number,
-  defaultCommentsCount: T.number,
-}
-
-WorksCard.defaultProps = {
-  testid: 'works-card',
-  withBg: false,
-  mode: 'default',
-  defaultTitle: '作品名称',
-  defaultDesc: '作品简介',
-  defaultUpvote: 99,
-  defaultCommentsCount: 66,
-  // item,
-}
-
 export default React.memo(WorksCard)

src/components/WorksCard/styles/index.ts renamed to src/components/Cards/styles/works_card.ts

@@ -14,16 +14,24 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   height: 118px;
   width: 100%;
   padding: 6px 20px;
-  padding-right: 25px;
-  border-radius: 8px;
+  padding-right: 15px;
+  border-radius: 3px;
 
   border-bottom: 1px solid;
   border-bottom-color: #0b3b4a;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
 
   :last-child {
     border-bottom: none;
   }
-  transition: all 0.25s;
+
+  &:hover {
+    background: #0d3440;
+    border-left-color: #0b3b4a;
+    border-right-color: #0b3b4a;
+  }
+  transition: all 0.1s;
 `
 export const IntroImg = styled(Img)`
   ${css.size(70)};

src/components/CommunityStatesPad/index.js

@@ -36,14 +36,13 @@ const CommunityStatesPad = ({
     editorsCount,
     subscribersCount,
     postsCount,
-    videosCount,
     reposCount,
     jobsCount,
     viewerHasSubscribed,
   } = community
   const { isMobile } = useDevice()
 
-  const contentsCount = postsCount + videosCount + reposCount + jobsCount
+  const contentsCount = postsCount + reposCount + jobsCount
 
   return (
     <Wrapper>
@@ -89,7 +88,6 @@ CommunityStatesPad.propTypes = {
     subscribersCount: T.number,
     editorsCount: T.number,
     postsCount: T.number,
-    videosCount: T.number,
     reposCount: T.number,
     jobsCount: T.number,
     viewerHasSubscribed: T.bool,
@@ -104,7 +102,6 @@ CommunityStatesPad.defaultProps = {
     subscribersCount: 0,
     editorsCount: 0,
     postsCount: 0,
-    videosCount: 0,
     reposCount: 0,
     jobsCount: 0,
     viewerHasSubscribed: false,

src/components/WorksCard/tests/index.test.ts

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Wrapper, Title, Desc } from './styles/brand'
+import { Wrapper, Title, Desc, Divider } from './styles/brand'
 
 type TProps = {
   testid?: string
@@ -11,6 +11,7 @@ const Brand: React.FC<TProps> = ({ testid = 'works-content-brand' }) => {
     <Wrapper testid={testid}>
       <Title>作品集市</Title>
       <Desc>by makers, for makers.</Desc>
+      <Divider />
     </Wrapper>
   )
 }

src/containers/content/WorksContent/Brand.tsx

@@ -3,56 +3,39 @@ import React from 'react'
 import { mockNaviCatalogMenu } from '@/utils'
 
 import { Br } from '@/components/Common'
-import { OrButton } from '@/components/Buttons'
-import FiltersMenu from '@/components/FiltersMenu'
+// import FiltersMenu from '@/components/FiltersMenu'
 import NaviCatalog from '@/components/NaviCatalog'
 
-import { VIEW } from './constant'
+// import { VIEW } from './constant'
 
-import fakeFilterItems from './fakeFilterItems'
+// import fakeFilterItems from './fakeFilterItems'
 import { Wrapper, FilterWrapper } from './styles/filter_bar'
 
-import { changeView } from './logic'
+// import { changeView } from './logic'
 
 type TProps = {
-  activeView: string
+  activeView?: string
 }
 
 const FilterBar: React.FC<TProps> = ({ activeView }) => {
   return (
     <Wrapper>
-      <OrButton
-        size="small"
-        activeKey={activeView}
-        group={[
-          {
-            key: VIEW.WORKS,
-            title: '作品',
-          },
-          {
-            key: VIEW.MILESTONE,
-            title: '动态', // 里面再成 里程碑，和讨论
-          },
-        ]}
-        onClick={changeView}
-      />
-      <Br bottom={30} />
       <FilterWrapper>
         <NaviCatalog
           title="类别筛选"
           withDivider={false}
           items={mockNaviCatalogMenu()}
         />
       </FilterWrapper>
-      <Br bottom={40} />
-      <FilterWrapper>
+      {/* <Br bottom={40} /> */}
+      {/* <FilterWrapper>
         <FiltersMenu
           title="高级搜索"
           items={fakeFilterItems}
           withDivider
           revert
         />
-      </FilterWrapper>
+      </FilterWrapper> */}
     </Wrapper>
   )
 }