chore: more utils import re-org

.github/workflows/ci.yml

@@ -87,9 +87,24 @@ jobs:
       - name: (Frontend) Build Project
         working-directory: ./frontend_server
         run: npm run build.ci
-      - name: (Frontend) Check Bundle Size
+      - name: check /etc/hosts
         working-directory: ./frontend_server
-        run: BUNDLEWATCH_GITHUB_TOKEN=${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }} npm run size.check
-      - name: (Frontend) Run e2e Tests
+        run: echo "#>>>>#"; cat /etc/hosts; pwd; echo "#>>>>#"
+      # - name: (Frontend) Check Bundle Size
+      #   working-directory: ./frontend_server
+      #   run: BUNDLEWATCH_GITHUB_TOKEN=${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }} npm run size.check
+      # - name: (Frontend) Run e2e Tests
+      #   working-directory: ./frontend_server
+      #   run: npm run test:ci
+  cypress-run:
+    name: run cypress
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cypress run
         working-directory: ./frontend_server
-        run: npm run test:ci
+        uses: cypress-io/github-action@v2
+        with:
+          browser: chrome
+          # build: npm run build
+          start: npm run ci
+          wait-on: http://localhost:3000

package.json

@@ -6,7 +6,7 @@
     "dev": "cross-env NODE_ENV=dev node server.js",
     "prod": "cross-env NODE_ENV=production run-p server",
     "local": "cross-env NODE_ENV=local node server",
-    "ci": "cross-env NODE_ENV=ci node server --inspect",
+    "ci": "cross-env NODE_ENV=ci node server",
     "server": "npm run clean && node server.js",
     "build": "next build",
     "build:clean": "run-s dist clean",
@@ -149,7 +149,7 @@
     "bundlewatch": "^0.2.7",
     "commitizen": "3.1.2",
     "coveralls": "3.0.14",
-    "cypress": "4.2.0",
+    "cypress": "^8.1.0",
     "cz-conventional-changelog": "^3.0.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.2",

src/components/FormItem/index.js

@@ -8,7 +8,8 @@ import React from 'react'
 import T from 'prop-types'
 import { isEmpty } from 'ramda'
 
-import { buildLog, hasValue } from '@/utils'
+import { buildLog } from '@/utils/logger'
+import { hasValue } from '@/utils/validator'
 import { SIZE } from '@/constant'
 import Maybe from '@/components/Maybe'
 

src/components/Modal/Belt.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useScript } from '@/hooks'
+import useScript from '@/hooks/useScript'
 
 import { Wrapper, Holder } from './styles/belt'
 

src/components/Modal/index.tsx

@@ -10,7 +10,7 @@ import usePortal from 'react-useportal'
 import { ICON_CMD } from '@/config'
 import { toggleGlobalBlur } from '@/utils/dom'
 import { buildLog } from '@/utils/logger'
-import { useShortcut } from '@/hooks'
+import useShortcut from '@/hooks/useShortcut'
 
 import ViewportTracker from '@/components/ViewportTracker'
 import Belt from './Belt'

src/components/NaviCatalog/index.tsx

@@ -8,13 +8,11 @@ import { FC, useState, useCallback, useEffect, memo } from 'react'
 import { find, findIndex, propEq, last } from 'ramda'
 
 import { URL_QUERY } from '@/constant'
-import {
-  buildLog,
-  nilOrEmpty,
-  getQueryFromUrl,
-  markRoute,
-  findDeepMatch,
-} from '@/utils'
+
+import { findDeepMatch } from '@/utils/helper'
+import { buildLog } from '@/utils/logger'
+import { nilOrEmpty } from '@/utils/validator'
+import { getQueryFromUrl, markRoute } from '@/utils/route'
 
 import type { TMenuItem, TMenuMode } from './spec'
 import { ROOT_MENU, CHILD_MENU } from './constant'

src/components/PostItem/ListView.tsx

@@ -3,7 +3,8 @@ import TimeAgo from 'timeago-react'
 
 import type { TPost } from '@/spec'
 import { ICON_CMD } from '@/config'
-import { cutRest, parseDomain } from '@/utils'
+import { cutRest } from '@/utils/helper'
+import { parseDomain } from '@/utils/route'
 
 import InlineTags from '@/components/InlineTags'
 

src/components/Switcher/Tabs/TabIcon.tsx

@@ -1,7 +1,7 @@
-import React, { FC, useCallback } from 'react'
+import { FC, useCallback } from 'react'
+import dynamic from 'next/dynamic'
 
 import type { TTabItem } from '@/spec'
-import LocalIcon from './LocalIcon'
 import { Wrapper, Icon } from '../styles/tabs/tab_icon'
 
 type TProps = {
@@ -12,6 +12,10 @@ type TProps = {
   active: boolean
 }
 
+export const LocalIcon = dynamic(() => import('./LocalIcon'), {
+  ssr: false,
+})
+
 const TabIcon: FC<TProps> = ({ item, clickableRef, active }) => {
   const { localIcon, icon } = item
 

src/components/Switcher/Tabs/TabItem.tsx

@@ -7,7 +7,9 @@
 import { FC, useEffect, useCallback, useRef, memo } from 'react'
 
 import type { TSIZE_SM, TTabItem } from '@/spec'
-import { buildLog, isString, Trans } from '@/utils'
+import { Trans } from '@/utils/i18n'
+import { isString } from '@/utils/validator'
+import { buildLog } from '@/utils/logger'
 
 import TabIcon from './TabIcon'
 import {

src/components/ThemeSelector/styles/index.ts

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
 
 import type { TActive, TThemeName } from '@/spec'
-import { theme, themeCoverMap, themeCoverIndexMap, css } from '@/utils'
+import { theme, themeCoverMap, themeCoverIndexMap } from '@/utils/themes'
+import css from '@/utils/css'
 
 type TDot = TActive & { name: TThemeName }
 export const Dot = styled.div<TDot>`

src/components/Tooltip/RealTooltip.tsx

@@ -8,8 +8,13 @@ import { FC, ReactNode, useState, useRef, memo } from 'react'
 import { hideAll } from 'tippy.js'
 
 import type { TTooltipPlacement } from '@/spec'
-import { css, buildLog, isDescendant, isString } from '@/utils'
-import { useOutsideClick } from '@/hooks'
+
+import css from '@/utils/css'
+import { buildLog } from '@/utils/logger'
+import { isString } from '@/utils/validator'
+import { isDescendant } from '@/utils/dom'
+
+import useOutsideClick from '@/hooks/useOutsideClick'
 
 import ConfirmFooter from './ConfirmFooter'
 import { FOOTER_BEHAVIOR } from './constant'

src/components/UserBrief/NumbersPad.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { prettyNum } from '@/utils'
+import { prettyNum } from '@/utils/helper'
 import { Wrapper, Section, Title, Number } from './styles/numbers_pad'
 
 const NumbersPad = ({ user, listFollowers, listFollowings }) => (

src/components/UserBrief/SocialIcons.js

@@ -2,7 +2,8 @@ import React from 'react'
 import { contains } from 'ramda'
 
 import { ICON_CMD } from '@/config'
-import { nilOrEmpty, SOCIAL_LISTS } from '@/utils'
+import SOCIAL_LISTS from '@/utils/social'
+import { nilOrEmpty } from '@/utils/validator'
 
 import Tooltip from '@/components/Tooltip'
 import { Wrapper, Linker, SocialIcon } from './styles/social_icons'

src/containers/Route/index.js

@@ -7,7 +7,7 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 
-import { pluggedIn } from '@/utils'
+import { pluggedIn } from '@/utils/mobx'
 import { useInit } from './logic'
 
 const RouteContainer = ({ route }) => {

src/containers/Route/logic.js

@@ -1,5 +1,8 @@
 import { useEffect } from 'react'
-import { Global, buildLog, parseURL } from '@/utils'
+
+import { parseURL } from '@/utils/route'
+import { Global } from '@/utils/helper'
+import { buildLog } from '@/utils/logger'
 
 /* eslint-disable-next-line */
 const log = buildLog('L:Route')

src/containers/content/ArticleContent/logic.ts

@@ -1,7 +1,10 @@
 import { useEffect } from 'react'
 
 import { EVENT, ERR } from '@/constant'
-import { asyncSuit, buildLog, errRescue, isElementInViewport } from '@/utils'
+import { isElementInViewport } from '@/utils/dom'
+import { errRescue } from '@/utils/helper'
+import { buildLog } from '@/utils/logger'
+import asyncSuit from '@/utils/async'
 
 import type { TStore } from './store'
 import S from './schema'

src/containers/content/ArticleContent/styles/desktop_view/index.tsx

@@ -1,7 +1,9 @@
 import styled from 'styled-components'
 
 import type { TTestable, TMetric } from '@/spec'
-import { theme, css, WIDTH } from '@/utils'
+import css from '@/utils/css'
+import { theme } from '@/utils/themes'
+import { WIDTH } from '@/utils/css/metric'
 
 export const Wrapper = styled.article.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,

src/containers/content/CommunityContent/logic.ts

@@ -3,7 +3,11 @@ import { values, includes } from 'ramda'
 
 import type { TThread } from '@/spec'
 import { ERR, EVENT, ARTICLE_THREAD } from '@/constant'
-import { send, asyncSuit, buildLog, errRescue, thread2Subpath } from '@/utils'
+
+import { send, errRescue } from '@/utils/helper'
+import { thread2Subpath } from '@/utils/route'
+import asyncSuit from '@/utils/async'
+import { buildLog } from '@/utils/logger'
 
 import type { TStore } from './store'
 

src/containers/content/CoolGuideContent/FilterBar.tsx

@@ -1,7 +1,7 @@
 import { FC, Fragment, memo } from 'react'
 
 import { ICON_CMD } from '@/config'
-import { mockNaviCatalogMenu } from '@/utils'
+import { mockNaviCatalogMenu } from '@/utils/mock'
 
 import Sticky from '@/components/Sticky'
 import NaviIntro from '@/components/NaviIntro'

src/containers/content/CoolGuideContent/logic.ts

@@ -1,7 +1,9 @@
 import { useEffect } from 'react'
 
 import { ERR } from '@/constant'
-import { asyncSuit, buildLog, errRescue } from '@/utils'
+import { errRescue } from '@/utils/helper'
+import asyncSuit from '@/utils/async'
+import { buildLog } from '@/utils/logger'
 
 import type { TStore } from './store'
 

src/containers/content/DiscoveryContent/CommunityCard.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { contains } from 'ramda'
 
 import { NON_FILL_COMMUNITY } from '@/constant'
-import { prettyNum, cutRest } from '@/utils'
+import { prettyNum, cutRest } from '@/utils/helper'
 
 import TrendLine from '@/components/TrendLine'
 import { CommunityHolder } from '@/components/Loading'

src/containers/content/DiscoveryContent/logic.js

@@ -2,13 +2,12 @@ import { useEffect } from 'react'
 import { isEmpty } from 'ramda'
 
 import { EVENT, ERR } from '@/constant'
-import {
-  asyncSuit,
-  buildLog,
-  pagedFilter,
-  errRescue,
-  updateEditing,
-} from '@/utils'
+
+import { errRescue } from '@/utils/helper'
+import { pagedFilter } from '@/utils/graphql'
+import asyncSuit from '@/utils/async'
+import { buildLog } from '@/utils/logger'
+import { updateEditing } from '@/utils/mobx'
 
 import S from './schema'
 

src/containers/content/HaveADrinkContent/index.tsx

@@ -8,8 +8,11 @@ import { FC } from 'react'
 import dynamic from 'next/dynamic'
 
 import type { TMetric } from '@/spec'
-import { pluggedIn, buildLog, scrollToTop, lockPage, unlockPage } from '@/utils'
-import { useShortcut } from '@/hooks'
+import { scrollToTop, lockPage, unlockPage } from '@/utils/dom'
+import { buildLog } from '@/utils/logger'
+import { pluggedIn } from '@/utils/mobx'
+
+import useShortcut from '@/hooks/useShortcut'
 
 import type { TStore } from './store'
 import Header from './Header'

src/containers/content/HaveADrinkContent/logic.ts

@@ -1,7 +1,10 @@
 import { useEffect } from 'react'
 
 import { ERR } from '@/constant'
-import { asyncSuit, buildLog, errRescue } from '@/utils'
+
+import { errRescue } from '@/utils/helper'
+import asyncSuit from '@/utils/async'
+import { buildLog } from '@/utils/logger'
 
 import { ANIMATE_TIMER_CLASS } from './constant'
 import type { TStore } from './store'

src/containers/content/MeetupsContent/logic.ts

@@ -1,7 +1,10 @@
 import { useEffect } from 'react'
 
 import { ERR } from '@/constant'
-import { asyncSuit, buildLog, errRescue } from '@/utils'
+
+import { errRescue } from '@/utils/helper'
+import asyncSuit from '@/utils/async'
+import { buildLog } from '@/utils/logger'
 
 import type { TStore } from './store'
 

src/containers/content/MembershipContent/logic.ts

@@ -2,7 +2,8 @@ import { useEffect } from 'react'
 
 import { SENIOR_AMOUNT_THRESHOLD } from '@/config'
 import { PAYMENT_USAGE } from '@/constant'
-import { asyncSuit, buildLog } from '@/utils'
+import asyncSuit from '@/utils/async'
+import { buildLog } from '@/utils/logger'
 
 import type { TStore } from './store'
 import type { TPackage } from './spec'

src/containers/content/MembershipContent/styles/illustrations/index.ts

@@ -1,7 +1,8 @@
 import styled, { css as styledCss } from 'styled-components'
 
 import type { TActive } from '@/spec'
-import { animate, css } from '@/utils'
+import css from '@/utils/css'
+import animate from '@/utils/animations'
 import Img from '@/Img'
 
 export const Wrapper = styled.div<TActive>`

src/containers/content/MembershipContent/styles/illustrations/ufo.ts

@@ -1,7 +1,8 @@
 import styled, { css as styledCss } from 'styled-components'
 
 import type { TTestable, TActive } from '@/spec'
-import { animate, css } from '@/utils'
+import css from '@/utils/css'
+import animate from '@/utils/animations'
 
 import {
   Star1 as Star1Base,

src/containers/content/RecipesContent/tempData.js

@@ -1,5 +1,5 @@
 import { ICON_BASE } from '@/config'
-import { uid } from '@/utils'
+import uid from '@/utils/uid'
 
 const menu = [
   {

src/containers/content/SubscribeContent/Actions/Detail.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { ICON_CMD } from '@/config'
 
-import { useCopyToClipboard } from '@/hooks'
+import useCopyToClipboard from 'react-use/lib/useCopyToClipboard'
 import EmailSubscriber from '@/components/EmailSubscriber'
 import { Br, SpaceGrow } from '@/components/Common'
 // TODO: extract to Email Subscriber

src/containers/content/SubscribeContent/styles/index.ts

@@ -1,9 +1,12 @@
 import styled from 'styled-components'
 
 import type { TTestable } from '@/spec'
-import { css, theme, WIDTH } from '@/utils'
 import Sticky from '@/components/Sticky'
 
+import { theme } from '@/utils/themes'
+import css from '@/utils/css'
+import { WIDTH } from '@/utils/css/metric'
+
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
 }))<TTestable>`

src/containers/content/UserContent/logic.ts

@@ -2,7 +2,10 @@ import { useEffect } from 'react'
 
 import type { TID, TThread, TUser } from '@/spec'
 import { TYPE, EVENT, ERR } from '@/constant'
-import { asyncSuit, buildLog, send, errRescue } from '@/utils'
+
+import asyncSuit from '@/utils/async'
+import { send, errRescue } from '@/utils/helper'
+import { buildLog } from '@/utils/logger'
 
 import type { TStore } from './store'