code with react hooks

package.json

@@ -3,7 +3,7 @@
   "description": "A PHP probe",
   "scripts": {
     "lang": "node ./build-lang.js",
-    "dev": "cross-env webpack --progress --watch",
+    "dev": "cross-env webpack --config webpack.config.js --progress --watch",
     "dev:php": "php ./Make.php dev; php -S localhost:8000 -t .tmp",
     "build": "cross-env webpack --config webpack.config.prod.js --progress",
     "build:php": "php-cs-fixer fix ./src --config=.php_cs53; php ./Make.php build; php -S localhost:8000/prober.php -t dist",
@@ -23,40 +23,42 @@
     "@babel/preset-react": "^7.12.1",
     "@babel/preset-typescript": "^7.12.1",
     "@types/core-js": "^2.5.4",
-    "@types/node": "^14.11.10",
+    "@types/node": "^14.14.5",
     "@types/query-string": "^6.3.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^16.9.54",
+    "@types/react-dom": "^16.9.9",
     "babel-plugin-styled-components": "^1.11.1",
     "cross-env": "^7.0.2",
-    "eslint": "^7.11.0",
-    "eslint-plugin-react": "^7.21.4",
-    "mobx": "5.15.7",
-    "mobx-react": "6.3.1",
+    "eslint": "^7.12.1",
+    "eslint-plugin-react": "^7.21.5",
     "node-libs-browser": "^2.2.1",
     "pofile": "^1.1.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-hot-loader": "^4.13.0",
-    "terser-webpack-plugin": "^5.0.0",
-    "ts-loader": "^8.0.5",
-    "typescript": "^4.0.3",
-    "webpack": "^5.1.3",
-    "webpack-cli": "^4.0.0",
+    "terser-webpack-plugin": "^5.0.3",
+    "ts-loader": "^8.0.7",
+    "typescript": "^4.0.5",
+    "webpack": "^5.3.0",
+    "webpack-cli": "^4.1.0",
     "webpack-common-shake": "^2.1.0",
     "webpack-dev-server": "^3.11.0",
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
+    "@types/immutability-helper": "^2.6.3",
     "@types/styled-components": "^5.1.4",
-    "@typescript-eslint/eslint-plugin": "^4.4.1",
-    "@typescript-eslint/eslint-plugin-tslint": "^4.4.1",
-    "@typescript-eslint/parser": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^4.6.0",
+    "@typescript-eslint/eslint-plugin-tslint": "^4.6.0",
+    "@typescript-eslint/parser": "^4.6.0",
     "babel-loader": "^8.1.0",
-    "caniuse-lite": "^1.0.30001148",
+    "caniuse-lite": "^1.0.30001151",
     "es6-promise": "^4.2.8",
-    "eslint-config-prettier": "^6.13.0",
+    "eslint-config-prettier": "^6.15.0",
     "glob": "^7.1.6",
+    "immutability-helper": "^3.1.1",
+    "mobx": "^6.0.1",
+    "mobx-react-lite": "^3.0.1",
     "polished": "^4.0.3",
     "query-string": "^6.13.6",
     "styled-components": "^5.2.0",

src/Components/Bootstrap/src/components/index.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { render } from 'react-dom'
 import ready from '@/Helper/src/components/ready'
 import styled, { ThemeProvider } from 'styled-components'
@@ -26,7 +26,7 @@ import ColorScheme from '@/ColorScheme/src/components'
 import { GUTTER } from '@/Config/src'
 import { rgba } from 'polished'
 import ColorSchemeStore from '@/ColorScheme/src/stores'
-import { observer } from 'mobx-react'
+import { observer } from 'mobx-react-lite'
 
 const StyledApp = styled.div`
   padding: calc(${GUTTER} * 3.5) 0 calc(${GUTTER} * 2);
@@ -51,27 +51,24 @@ const StyledApp = styled.div`
   }
 `
 
-@observer
-class Bootstrap extends Component {
-  public render() {
-    return (
-      <ThemeProvider theme={ColorSchemeStore.scheme}>
-        <Normalize />
-        <Title />
-        <StyledApp ref={c => store.setAppContainer(c)}>
-          <Container>
-            <ColorScheme />
-            <Cards />
-            <Footer />
-          </Container>
-        </StyledApp>
-        <Nav />
-        <Forkme />
-        <Toast />
-      </ThemeProvider>
-    )
-  }
-}
+const Bootstrap = observer(() => {
+  return (
+    <ThemeProvider theme={ColorSchemeStore.scheme}>
+      <Normalize />
+      <Title />
+      <StyledApp ref={c => store.setAppContainer(c)}>
+        <Container>
+          <ColorScheme />
+          <Cards />
+          <Footer />
+        </Container>
+      </StyledApp>
+      <Nav />
+      <Forkme />
+      <Toast />
+    </ThemeProvider>
+  )
+})
 
 ready(() => {
   const c = document.createElement('div')

src/Components/Bootstrap/src/stores/index.ts

@@ -1,4 +1,4 @@
-import { observable, action, configure } from 'mobx'
+import { observable, action, configure, makeObservable } from 'mobx'
 import conf from '@/Helper/src/components/conf'
 
 configure({
@@ -19,6 +19,10 @@ class Store {
 
   @observable public appContainer: HTMLElement | null = null
 
+  public constructor() {
+    makeObservable(this)
+  }
+
   @action
   public setAppContainer = (appContainer: HTMLElement | null) => {
     this.appContainer = appContainer

src/Components/Card/src/components/index.tsx

@@ -1,11 +1,11 @@
-import React, { Component } from 'react'
+import React from 'react'
 import styled from 'styled-components'
-import { observer } from 'mobx-react'
 import store from '../stores'
 import { GUTTER } from '@/Config/src'
 import { gettext } from '@/Language/src'
 import { rgba } from 'polished'
 import { device } from '@/Style/src/components/devices'
+import { observer } from 'mobx-react-lite'
 
 interface StyleArrowProps {
   isHidden: boolean
@@ -57,58 +57,57 @@ const StyleArrow = styled.a<StyleArrowProps>`
   }
 `
 
-@observer
-export default class Cards extends Component {
-  public render() {
-    const {
-      cardsLength,
-      enabledCards,
-      enabledCardsLength,
-      moveCardDown,
-      moveCardUp,
-    } = store
+const Cards = observer(() => {
+  const {
+    cardsLength,
+    enabledCards,
+    enabledCardsLength,
+    moveCardDown,
+    moveCardUp,
+  } = store
 
-    if (!cardsLength) {
-      return null
-    }
+  if (!cardsLength) {
+    return null
+  }
 
-    return (
-      <>
-        {enabledCards.map(({ id, title, component: Tag }, i) => {
-          const upArrow = (
-            <StyleArrow
-              title={gettext('Move up')}
-              isHidden={i === 0}
-              onClick={() => moveCardUp(id)}
-            >
-              ▲
-            </StyleArrow>
-          )
+  return (
+    <>
+      {enabledCards.map(({ id, title, component: Tag }, i) => {
+        const upArrow = (
+          <StyleArrow
+            title={gettext('Move up')}
+            isHidden={i === 0}
+            onClick={() => moveCardUp(id)}
+          >
+            ▲
+          </StyleArrow>
+        )
 
-          const downArrow = (
-            <StyleArrow
-              title={gettext('Move down')}
-              isHidden={i === enabledCardsLength - 1}
-              onClick={() => moveCardDown(id)}
-            >
-              ▼
-            </StyleArrow>
-          )
+        const downArrow = (
+          <StyleArrow
+            title={gettext('Move down')}
+            isHidden={i === enabledCardsLength - 1}
+            onClick={() => moveCardDown(id)}
+          >
+            ▼
+          </StyleArrow>
+        )
 
-          return (
-            <StyledFieldset key={id} id={id}>
-              <StyledLegend>
-                {upArrow}
-                {title}
-                {downArrow}
-              </StyledLegend>
-              <StyledBody>
-                <Tag />
-              </StyledBody>
-            </StyledFieldset>
-          )
-        })}
-      </>
-    )
-  }
-}
+        return (
+          <StyledFieldset key={id} id={id}>
+            <StyledLegend>
+              {upArrow}
+              {title}
+              {downArrow}
+            </StyledLegend>
+            <StyledBody>
+              <Tag />
+            </StyledBody>
+          </StyledFieldset>
+        )
+      })}
+    </>
+  )
+})
+
+export default Cards

src/Components/Card/src/stores/index.ts

@@ -1,5 +1,5 @@
-import { observable, action, configure, computed } from 'mobx'
-import { ComponentClass } from 'react'
+import { observable, action, configure, computed, makeObservable } from 'mobx'
+import { FunctionComponent } from 'react'
 
 configure({
   enforceActions: 'observed',
@@ -16,12 +16,16 @@ export interface CardProps {
   tinyTitle: string
   enabled?: boolean
   priority: number
-  component: ComponentClass
+  component: FunctionComponent
 }
 
-class CardStore {
+class Store {
   @observable public cards: CardProps[] = []
 
+  public constructor() {
+    makeObservable(this)
+  }
+
   @action
   public addCard = (card: CardProps) => {
     const priority = this.getStoragePriority(card.id)
@@ -141,4 +145,6 @@ class CardStore {
   }
 }
 
-export default new CardStore()
+const CardStore = new Store()
+
+export default CardStore

src/Components/ColorScheme/src/components/index.tsx

@@ -1,10 +1,10 @@
-import React, { Component } from 'react'
-import { observer } from 'mobx-react'
+import React from 'react'
 import styled, { keyframes } from 'styled-components'
 import { GUTTER, BORDER_RADIUS, ANIMATION_DURATION_SC } from '@/Config/src'
 import schemes from '../stores/colors'
 import { rgba } from 'polished'
 import store from '../stores'
+import { observer } from 'mobx-react-lite'
 
 const fadeIn = keyframes`
   from{
@@ -46,21 +46,20 @@ const StyledColorScheme = styled.div`
   animation-fill-mode: forwards;
 `
 
-@observer
-export default class ColorScheme extends Component {
-  public render() {
-    return (
-      <StyledColorScheme>
-        {Object.entries(schemes).map(([schemeId, { name, colorDark }]) => (
-          <StyledColorSchemeLink
-            isActive={schemeId === store.schemeId}
-            title={name}
-            key={schemeId}
-            style={{ backgroundColor: colorDark }}
-            onClick={() => store.setSchemeId(schemeId)}
-          />
-        ))}
-      </StyledColorScheme>
-    )
-  }
-}
+const ColorScheme = observer(() => {
+  return (
+    <StyledColorScheme>
+      {Object.entries(schemes).map(([schemeId, { name, colorDark }]) => (
+        <StyledColorSchemeLink
+          isActive={schemeId === store.schemeId}
+          title={name}
+          key={schemeId}
+          style={{ backgroundColor: colorDark }}
+          onClick={() => store.setSchemeId(schemeId)}
+        />
+      ))}
+    </StyledColorScheme>
+  )
+})
+
+export default ColorScheme

src/Components/ColorScheme/src/stores/index.ts

@@ -1,4 +1,4 @@
-import { configure, observable, action, computed } from 'mobx'
+import { configure, observable, action, computed, makeObservable } from 'mobx'
 import schemes from './colors'
 
 configure({
@@ -22,6 +22,10 @@ class Store {
 
   @observable public schemeId: string = this.getStorageSchemeId()
 
+  public constructor() {
+    makeObservable(this)
+  }
+
   @action
   public setSchemeId = (schemeId: string) => {
     this.schemeId = schemeId