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'