chore: up to react 17 (#1096)

* chore(deps): upgrade latest react & next

* chore: new import syntax

* chore: point ci to real gq endpoint

* chore(ci): skip backend

* chore(ci): missing eslint dep

* chore(config): resolve webpack 5 warning of import json file

* chore(config): resolve webpack 5 warning of import json file

* chore(ci): warnings & ts convert

* chore(deps): upgrade main stack

Author: mydearxym

.eslintignore

@@ -1,5 +1,6 @@
 !.eslintrc.js
 .gitignore
+next-env.d.ts
 *.json
 *.lock
 *.hbs

.eslintrc.js

@@ -41,6 +41,8 @@ module.exports = {
   },
   rules: {
     '@typescript-eslint/ban-ts-comment': 0,
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
     'react/jsx-filename-extension': [
       2,
       { extensions: ['.js', '.jsx', '.ts', '.tsx'] },

.github/workflows/ci.yml

@@ -22,38 +22,38 @@ jobs:
         options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
 
     steps:
-      - name: (Backend) checkout codebase
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-          repository: 'coderplanets/coderplanets_server'
-          path: 'backend_server'
-      - name: (Backend) Setup Elixir and OTP
-        uses: erlef/setup-elixir@v1
-        with:
-          elixir-version: '1.10.3' # Define the elixir version [required]
-          otp-version: '22.3' # Define the OTP version [required]
-      - name: (Backend) Restore dependencies cache
-        uses: actions/cache@v2
-        with:
-          path: deps
-          key: ${{ runner.os }}-mix-${{ hashFiles('**/mix.lock') }}
-          restore-keys: ${{ runner.os }}-mix-
-      - 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
-      - name: (Backend) seed data into DB
-        working-directory: ./backend_server
-        run: MIX_ENV=ci mix run priv/mock/cps_seeds.exs > /dev/null
-      - name: (Backend) Run Server
-        working-directory: ./backend_server
-        run: MIX_ENV=ci mix phx.server &
+      # - name: (Backend) checkout codebase
+      #   uses: actions/checkout@v2
+      #   with:
+      #     fetch-depth: 0
+      #     repository: 'coderplanets/coderplanets_server'
+      #     path: 'backend_server'
+      # - name: (Backend) Setup Elixir and OTP
+      #   uses: erlef/setup-elixir@v1
+      #   with:
+      #     elixir-version: '1.10.3' # Define the elixir version [required]
+      #     otp-version: '22.3' # Define the OTP version [required]
+      # - name: (Backend) Restore dependencies cache
+      #   uses: actions/cache@v2
+      #   with:
+      #     path: deps
+      #     key: ${{ runner.os }}-mix-${{ hashFiles('**/mix.lock') }}
+      #     restore-keys: ${{ runner.os }}-mix-
+      # - 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
+      # - name: (Backend) seed data into DB
+      #   working-directory: ./backend_server
+      #   run: MIX_ENV=ci mix run priv/mock/cps_seeds.exs > /dev/null
+      # - name: (Backend) Run Server
+      #   working-directory: ./backend_server
+      #   run: MIX_ENV=ci mix phx.server &
 
       - name: (Frontend) checkout codebase
         uses: actions/checkout@v2

config/config.ci.json

@@ -1,4 +1,5 @@
 {
   "//--- endpoint configs ---//": "",
-  "GRAPHQL_ENDPOINT": "http://localhost:4001/graphiql"
+  "// GRAPHQL_ENDPOINT": "http://localhost:4001/graphiql",
+  "GRAPHQL_ENDPOINT": "https://api.coderplanets.com/graphiql"
 }

config/index.ts

@@ -1,16 +1,13 @@
-// export * from './config.json'
-// import * as CONFIG from './config.json'
-
 import type { TThemeName } from '@/spec'
-import { DEFAULT_THEME as DEFAULT_THEME_CONFIG } from './config.json'
+
+import CONFIG from './config.json'
 
 export { default as LABEL_POOL } from './label_pool'
 export { default as SEO } from './next_seo'
 
-export const DEFAULT_THEME = DEFAULT_THEME_CONFIG as TThemeName
+export const DEFAULT_THEME = CONFIG.DEFAULT_THEME as TThemeName
 
-// explicit export to avoid eslint warning
-export {
+export const {
   GRAPHQL_ENDPOINT,
   SENIOR_AMOUNT_THRESHOLD,
   SPONSOR_AMOUNT_THRESHOLD,
@@ -41,4 +38,4 @@ export {
   EMAIL_HELLO,
   EMAIL_BUSINESS,
   BUILD_VERSION,
-} from './config.json'
+} = CONFIG

config/label_pool.ts

@@ -1,4 +1,4 @@
-import * as CONFIG from './config.json'
+import CONFIG from './config.json'
 
 const { ICON_CMD } = CONFIG
 

next-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

package.json

@@ -85,30 +85,30 @@
     "js-cookie": "^2.2.0",
     "mastani-codehighlight": "0.0.7",
     "mobile-device-detect": "^0.4.3",
-    "mobx": "6.3.0",
-    "mobx-react": "7.1.0",
+    "mobx": "6.3.2",
+    "mobx-react": "7.2.0",
     "mobx-react-lite": "3.2.0",
-    "mobx-state-tree": "5.0.1",
+    "mobx-state-tree": "5.0.2",
     "module-alias": "^2.0.1",
     "nanoid": "^3.1.12",
-    "next": "^10.1.4-canary.16",
+    "next": "11.0.1",
     "next-compose-plugins": "^2.2.0",
     "next-i18next": "4.4.1",
     "next-offline": "4.0.6",
     "next-seo": "4.4.0",
     "nextjs-progressbar": "^0.0.6",
     "overlayscrollbars": "1.13.1",
     "path-match": "^1.2.4",
-    "polished": "4.1.1",
+    "polished": "4.1.3",
     "promise-timeout": "^1.3.0",
     "prop-types": "^15.5.10",
     "pubsub-js": "^1.9.3",
     "ramda": "0.26.1",
-    "react": "16.9.0",
+    "react": "17.0.2",
     "react-animation": "^1.2.2",
     "react-calendar-heatmap": "1.8.1",
     "react-content-loader": "3.4.2",
-    "react-dom": "16.9.0",
+    "react-dom": "17.0.2",
     "react-highlight-words": "^0.16.0",
     "react-lazy-load-image-component": "1.5.0",
     "react-masonry-component": "^6.0.1",
@@ -135,7 +135,7 @@
     "sentry-testkit": "^2.1.0",
     "store": "^2.0.12",
     "stringz": "^2.0.0",
-    "styled-components": "5.2.3",
+    "styled-components": "5.3.0",
     "timeago-react": "3.0.2",
     "tinykeys": "^1.0.6"
   },
@@ -161,6 +161,7 @@
     "enzyme-adapter-react-16": "1.15.2",
     "enzyme-to-json": "^3.3.4",
     "eslint": "6.4.0",
+    "eslint-config-next": "^11.0.1",
     "husky": "^3.0.0",
     "jest": "26.2.2",
     "npm-run-all": "^4.1.1",

src/components/AlertBar/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC, ReactNode } from 'react'
+import { FC, ReactNode, memo } from 'react'
 
 import { buildLog } from '@/utils'
 
@@ -21,4 +21,4 @@ const AlertBar: FC<TProps> = ({ children }) => {
   return <Wrapper testid="alertBar">{children}</Wrapper>
 }
 
-export default React.memo(AlertBar)
+export default memo(AlertBar)

src/components/ArticleItemPrefixLabel/ReadLabel.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC, memo } from 'react'
 
 import { ReadedLabel } from './styles'
 
@@ -19,4 +19,4 @@ const ReadLabel: FC<TProps> = ({ entry, accountInfo, topOffset = '20px' }) => {
   return null
 }
 
-export default React.memo(ReadLabel)
+export default memo(ReadLabel)