chore: up to react 17

.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)

src/components/ArticleItemPrefixLabel/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import { FC, memo } from 'react'
 
 import type { TAccount } from '@/spec'
 import { buildLog } from '@/utils'
@@ -19,19 +19,19 @@ export type TProps = {
   topOffset?: string
   entry: {
     viewerHasViewed?: boolean
-    isPinned?: boolean
+    pin?: boolean
   }
 }
 const ArticleItemPrefixLabel: FC<TProps> = ({
   entry,
   accountInfo,
   topOffset = '22px',
 }) => {
-  if (entry.isPinned) return <PinIcon top={topOffset} />
+  if (entry.pin) return <PinIcon top={topOffset} />
 
   return (
     <ReadLabel entry={entry} accountInfo={accountInfo} topOffset={topOffset} />
   )
 }
 
-export default React.memo(ArticleItemPrefixLabel)
+export default memo(ArticleItemPrefixLabel)

src/components/AvatarsRow/MoreItem.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 import { prettyNum } from '@/utils'
 import { Br } from '@/components/Common'

src/components/AvatarsRow/RealAvatar.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 import type { TUser } from '@/spec'
 import Tooltip from '@/components/Tooltip'

src/components/AvatarsRow/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import { FC } from 'react'
 import { compose, not, isNil, filter, reverse as reverseFn, slice } from 'ramda'
 import { trackWindowScroll } from 'react-lazy-load-image-component'
 

src/components/Buttons/ArrowButton.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC, ReactNode, useRef, useState, useEffect } from 'react'
+import { FC, ReactNode, useRef, useState, useEffect, memo } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { ICON } from '@/config'
@@ -97,4 +97,4 @@ const ArrowButton: FC<TProps> = ({
   )
 }
 
-export default React.memo(ArrowButton)
+export default memo(ArrowButton)

src/components/Buttons/ArrowLink.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC, ReactNode } from 'react'
+import { FC, ReactNode, memo } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { ICON_CMD } from '@/config'
@@ -55,4 +55,4 @@ const ArrowLink: FC<TProps> = ({
   )
 }
 
-export default React.memo(ArrowLink)
+export default memo(ArrowLink)

src/components/Buttons/Button.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useEffect, useState } from 'react'
+import { FC, ReactNode, useEffect, useState, memo } from 'react'
 
 import type { TSIZE_TSM } from '@/spec'
 import { SIZE } from '@/constant'
@@ -105,13 +105,13 @@ const Button: FC<TProps> = ({
         >
           <LoadingMask width={`${loadingWidth}%`} />
           <ChildrenWrapper size={size}>
-            <RealChildren loading={loading}>{children}</RealChildren>
-            <LoadingText loading={loading}>{loadingText}</LoadingText>
+            <RealChildren $loading={loading}>{children}</RealChildren>
+            <LoadingText $loading={loading}>{loadingText}</LoadingText>
           </ChildrenWrapper>
         </Wrapper>
       )
     }
   }
 }
 
-export default React.memo(Button)
+export default memo(Button)

src/components/Buttons/OrButton/HorizontalButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 import type { TProps as TButtonProps } from './index'
 import { SIZE } from '@/constant'

src/components/Buttons/OrButton/VerticalButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 import type { TProps as TButtonProps } from './index'
 import { SIZE } from '@/constant'

src/components/Buttons/OrButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 import type { TSIZE_SM } from '@/spec'