refactor: try next 13 & refactor (#1386)

* chore: upgrade & rm no react-18 compatiable pkgs

* chore: provoider wip

* chore: rm providers from pages

* chore: type for buildlog

* chore: type for buildlog

Author: mydearxym

.env

@@ -1,7 +1,7 @@
-// .env
+# .env
 SERVE_PORT=3000
-// google analysis
+# google analysis
 NEXT_PUBLIC_GA_TRACING_ID=UA-39874160-3
-// github
+# github
 NEXT_PUBLIC_GITHUB_CLIENT_ID=3b4281c5e54ffd801f85
 

.jest.setup.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
 import { configure } from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
+import Adapter from '@cfaester/enzyme-adapter-react-18'
 
 configure({ adapter: new Adapter() })

config/version.ts

@@ -1 +1 @@
-export const APP_VERSION = '1.0.13'
+export const APP_VERSION = "1.0.13"

next.config.js

@@ -19,6 +19,8 @@ const nextConfig = {
       exclude: ['error'],
     },
   },
+  // experimental: { appDir: true },
+
   // pwa: {
   //   dest: 'public',
   //   disable: process.env.NODE_ENV !== 'production',

package-lock.json

@@ -3,8 +3,8 @@
   "version": "1.0.13",
   "license": "Apache License 2.0",
   "scripts": {
-    "dev": "cross-env NODE_ENV=dev next dev",
-    "dev.boost": "next-boost",
+    "dev": "next dev",
+    "dev2": "next dev --turbo",
     "ci": "cross-env NODE_ENV=ci node server",
     "update.version": "node -p \"'export const APP_VERSION = ' + JSON.stringify(require('./package.json').version)\" > config/version.ts",
     "build": "next build",
@@ -16,7 +16,6 @@
     "serve": "cross-env NODE_ENV=production next start -p ${SERVE_PORT}",
     "serve.dev": "cross-env NODE_ENV=dev next start -p ${SERVE_PORT}",
     "serve.prod.server": "cross-env NODE_ENV=production SERVE_PORT=${SERVE_PORT} node server",
-    "serve.prod.boost": "cross-env NODE_ENV=production next-boost -p ${SERVE_PORT}",
     "serve.prod": "cross-env NODE_ENV=production next start -p ${SERVE_PORT}",
     "dist": "next build && next export -o \"build\"",
     "start": "NODE_ENV=production node server.js",
@@ -42,8 +41,6 @@
   },
   "dependencies": {
     "@groupher/react-editor": "^1.1.30",
-    "@next-boost/hybrid-disk-cache": "^0.3.0",
-    "@next-boost/next-boost": "^0.15.1",
     "@next/bundle-analyzer": "^12.2.5",
     "@sentry/browser": "5.17.0",
     "@sentry/node": "5.17.0",
@@ -65,15 +62,14 @@
     "glob": "^7.1.2",
     "graphql": "^15.5.1",
     "graphql-request": "3.5.0",
-    "graphql-voyager": "^1.0.0-rc.31",
     "izitoast": "^1.4.0",
     "mastani-codehighlight": "0.0.7",
     "mobx": "^6.6.2",
     "mobx-react": "^7.5.3",
     "mobx-state-tree": "^5.1.6",
     "module-alias": "^2.0.1",
     "nanoid": "^3.1.12",
-    "next": "^12.2.5",
+    "next": "^13.0.0",
     "next-compose-plugins": "^2.2.0",
     "next-i18next": "4.4.1",
     "next-pwa": "^5.4.4",
@@ -85,31 +81,29 @@
     "promise-timeout": "^1.3.0",
     "prop-types": "^15.5.10",
     "pubsub-js": "^1.9.3",
-    "qrcode.react": "^1.0.1",
+    "qrcode.react": "^3.1.0",
     "ramda": "0.26.1",
     "react": "^18.2.0",
-    "react-animation": "^1.2.2",
-    "react-calendar-heatmap": "1.8.1",
-    "react-content-loader": "3.4.2",
+    "@groupher/react-animation": "^1.2.3",
+    "react-calendar-heatmap": "1.9.0",
+    "react-content-loader": "6.2.0",
     "react-copy-to-clipboard": "^5.0.3",
     "react-device-detect": "^2.1.2",
     "react-dom": "^18.2.0",
-    "react-highlight-words": "^0.16.0",
-    "react-lazy-load-image-component": "1.5.0",
-    "react-masonry-component": "^6.0.1",
+    "react-highlight-words": "^0.18.0",
+    "react-lazy-load-image-component": "1.5.5",
     "react-masonry-css": "^1.0.14",
-    "react-pin-field": "1.0.6",
-    "react-resize-detector": "4.2.3",
-    "react-select": "^3.1.0",
-    "react-sortable-hoc": "1.7.1",
-    "react-svg": "11.1.2",
-    "react-swipeable": "^5.5.1",
+    "react-pin-field": "3.0.16",
+    "react-resize-detector": "7.1.2",
+    "react-select": "^5.5.7",
+    "react-svg": "15.1.10",
+    "react-swipeable": "^7.0.0",
     "react-textarea-autosize": "^8.3.0",
     "react-tooltip": "^4.2.21",
     "react-trend": "^1.2.4",
-    "react-use": "15.1.1",
-    "react-useportal": "^1.0.13",
-    "react-waypoint": "9.0.2",
+    "react-use": "17.4.0",
+    "react-portal": "^4.2.2",
+    "react-waypoint": "^10.3.0",
     "remarkable": "2.0.0",
     "remarkable-emoji": "^0.1.3",
     "remarkable-mentions": "^0.1.0",
@@ -145,17 +139,17 @@
     "cypress": "^8.1.0",
     "cz-conventional-changelog": "^3.0.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.2",
+    "@cfaester/enzyme-adapter-react-18": "0.5.1",
     "enzyme-to-json": "^3.3.4",
     "eslint": "^8.23.0",
-    "eslint-config-next": "^12.2.5",
+    "eslint-config-next": "^13.0.0",
     "husky": "^3.0.0",
     "jest": "26.2.2",
     "npm-run-all": "^4.1.1",
     "plop": "2.7.4",
     "prettier": "2.3.2",
     "pretty-quick": "^1.10.0",
-    "react-test-renderer": "16.10.0",
+    "react-test-renderer": "18.2.0",
     "shelljs": "0.8.4",
     "standard-version": "^8.0.1",
     "start-server-and-test": "1.12.1",

package.json

@@ -11,8 +11,6 @@ const express = require('express')
 const cookieParser = require('cookie-parser')
 const responseTime = require('response-time')
 const mobxReact = require('mobx-react')
-// inspect graphql model
-const { express: voyagerMiddleware } = require('graphql-voyager/middleware')
 // i18n setup
 // const nextI18NextMiddleware = require('next-i18next/middleware').default
 // const nextI18next = require('../i18n')
@@ -42,10 +40,6 @@ mobxReact.enableStaticRendering(true)
   // redirect all the www request to non-www addr
   server.use(redirectToNakedUrl)
   server.use(express.static('public'))
-  server.use(
-    '/model-graphs',
-    voyagerMiddleware({ endpointUrl: CONFIG.GRAPHQL_ENDPOINT }),
-  )
 
   // await nextI18next.initPromise
   // server.use(nextI18NextMiddleware(nextI18next))

server/index.js

@@ -1,5 +1,5 @@
 import { Fragment, memo, useEffect, useState } from 'react'
-import { AnimateOnChange } from 'react-animation'
+import { AnimateOnChange } from '@groupher/react-animation'
 
 import { SloganTextWrapper } from './styles/banner'
 

src/containers/content/ExploreContent/SloganText.tsx

@@ -6,12 +6,8 @@ import { types as T, getParent, Instance } from 'mobx-state-tree'
 // import {} from 'ramda'
 
 import type { TCommunity, TRootStore } from '@/spec'
-import { buildLog } from '@/utils/logger'
 import { markStates, toJS } from '@/utils/mobx'
 
-/* eslint-disable-next-line */
-const log = buildLog('S:FriendsContent')
-
 const FriendsContent = T.model('FriendsContent', {})
   .views((self) => ({
     get curCommunity(): TCommunity {

src/containers/content/FriendsContent/store.ts

@@ -5,7 +5,7 @@
  */
 
 import { FC, memo } from 'react'
-import { AnimateOnChange } from 'react-animation'
+import { AnimateOnChange } from '@groupher/react-animation'
 
 import type { TView, TDrinkItem, TSettingOption } from '../spec'
 import { VIEW } from '../constant'

src/containers/content/HaveADrinkContent/Body/index.tsx

@@ -1,5 +1,6 @@
 import { FC, memo } from 'react'
 
+import Link from 'next/link'
 import { EVENT, THREAD } from '@/constant'
 import { send } from '@/utils/helper'
 
@@ -21,11 +22,14 @@ const AccountUnit: FC = () => {
         订阅
       </SubscribeButton>
 
-      <DashboardIcon
-        onClick={() =>
-          send(EVENT.COMMUNITY_THREAD_CHANGE, { data: THREAD.DASHBOARD })
-        }
-      />
+      <Link href="/home/dashboard">
+        <DashboardIcon
+          onClick={() => {
+            // send(EVENT.COMMUNITY_THREAD_CHANGE, { data: THREAD.DASHBOARD })
+          }}
+        />
+      </Link>
+
       <NotifyIcon />
       <Avatar src={`${mockUsers(1)[0].avatar}`} />
     </Wrapper>

src/containers/digest/CommunityDigest/SimpleLayout/AccountUnit.tsx

@@ -1,4 +1,5 @@
 import { FC, memo } from 'react'
+import { useRouter } from 'next/router'
 
 import type { TCommunityThread, TThread } from '@/spec'
 import { Wrapper, Title } from '../styles/simple_layout/thread_tab'
@@ -10,13 +11,18 @@ type TProps = {
 }
 
 const ThreadTab: FC<TProps> = ({ active, threads, onChange }) => {
+  const router = useRouter()
+
   return (
     <Wrapper>
       {threads.map((item) => (
         <Title
           key={item.raw}
           $active={active === item.raw}
-          onClick={() => onChange(item.raw)}
+          onClick={() => {
+            // onChange(item.raw)
+            router.push(`/home/${item.raw}`)
+          }}
         >
           {item.title}
         </Title>

src/containers/digest/CommunityDigest/SimpleLayout/ThreadTab.tsx

@@ -44,7 +44,7 @@ const ThemeContainer: FC<TProps> = ({ children, theme: { themeData } }) => {
 
       <ScrollBarStyle />
       {/* @ts-ignore */}
-      <NextNprogress
+      {/* <NextNprogress
         color={themeData.logoText}
         startPosition={0.3}
         stopDelayMs={200}
@@ -54,7 +54,7 @@ const ThemeContainer: FC<TProps> = ({ children, theme: { themeData } }) => {
           parent: `#${ANCHOR.GLOBAL_HEADER_ID}`,
         }}
         showOnShallow
-      />
+      /> */}
       <Fragment>{children}</Fragment>
       {/* @ts-ignore */}
       <CodeSyxHighlight />

src/containers/layout/ThemePalette/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import { Fragment, useEffect } from 'react'
-import usePortal from 'react-useportal'
+import { Portal } from 'react-portal'
 
 import { toggleGlobalBlur } from '@/utils/dom'
 import { bond } from '@/utils/mobx'
@@ -22,7 +22,6 @@ import { useInit, hidePanel } from './logic'
 
 const DoraemonContainer = ({ doraemon: store }) => {
   useInit(store)
-  const { Portal } = usePortal()
 
   const {
     inputValue,

src/containers/tool/Doraemon/index.js

@@ -1,18 +1,18 @@
 import { FC, memo } from 'react'
-import dynamic from 'next/dynamic'
+// import dynamic from 'next/dynamic'
 import { reject, propEq } from 'ramda'
 
 import type { TCommunity } from '@/spec'
 import { HCN } from '@/constant'
 import NormalMenuList from './NormalMenuList'
 
 import { Wrapper } from '../styles/menu_list/index'
-import { onSortMenuEnd } from '../logic'
+// import { onSortMenuEnd } from '../logic'
 
-export const SortableMenuList = dynamic(() => import('./SortableMenuList'), {
-  /* eslint-disable react/display-name */
-  loading: () => <div>..</div>,
-})
+// export const SortableMenuList = dynamic(() => import('./SortableMenuList'), {
+//   /* eslint-disable react/display-name */
+//   loading: () => <div>..</div>,
+// })
 
 type TProps = {
   items: TCommunity[]
@@ -34,14 +34,15 @@ const MenuList: FC<TProps> = ({ items, pin, sortOptActive, activeRaw }) => {
         />
       ) : (
         // @ts-ignore
-        <SortableMenuList
-          communities={sortableCommunities}
-          sortOptActive={sortOptActive}
-          distance={5}
-          pin={pin}
-          activeRaw={activeRaw}
-          onSortEnd={onSortMenuEnd}
-        />
+        <div>SortableMenuList</div>
+        // <SortableMenuList
+        //   communities={sortableCommunities}
+        //   sortOptActive={sortOptActive}
+        //   distance={5}
+        //   pin={pin}
+        //   activeRaw={activeRaw}
+        //   onSortEnd={onSortMenuEnd}
+        // />
       )}
     </Wrapper>
   )

src/containers/unit/Sidebar/MenuList/SortableMenuList.tsx renamed to src/containers/unit/Sidebar/MenuList/SortableMenuList.tsx.bak

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { arrayMove } from 'react-sortable-hoc'
+// import { arrayMove } from 'react-sortable-hoc'
 import { addIndex, map, reject, propEq, contains } from 'ramda'
 
 import type { TCommunity } from '@/spec'
@@ -60,11 +60,11 @@ export const sortBtnOnClick = (): void => {
 const mapIndexed = addIndex(map)
 
 export type TSortDone = { oldIndex: number; newIndex: number }
-export const onSortMenuEnd = ({ oldIndex, newIndex }: TSortDone): void => {
-  const sortedCommunities = arrayMove(store.communitiesData, oldIndex, newIndex)
-  setC11N(sortedCommunities)
-  store.onSortCommunities(sortedCommunities)
-}
+// export const onSortMenuEnd = ({ oldIndex, newIndex }: TSortDone): void => {
+//   const sortedCommunities = arrayMove(store.communitiesData, oldIndex, newIndex)
+//   setC11N(sortedCommunities)
+//   store.onSortCommunities(sortedCommunities)
+// }
 
 const setC11N = (sortedCommunities): void => {
   if (!store.isLogin) return store.authWarning()