Upgrade packages antd and recoil and refactor with atom effects

package.json

@@ -5,18 +5,18 @@
   "homepage": "/HotsTools",
   "dependencies": {
     "@ant-design/icons": "^4.2.2",
-    "@types/node": "^12.0.0",
+    "@types/node": "^12.12.2",
     "@types/recharts": "^1.8.16",
-    "antd": "^4.6.4",
+    "antd": "^4.8.0",
     "gh-pages": "^3.1.0",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "recharts": "^1.8.5",
-    "recoil": "^0.0.13",
-    "typescript": "^4.0.3"
+    "recoil": "^0.1.2",
+    "typescript": "^4.0.5"
   },
   "scripts": {
     "predeploy": "yarn run build",

src/Link2.tsx

@@ -1,18 +1,27 @@
 import History from 'history';
 import React from 'react';
-import { Link, LinkProps } from 'react-router-dom';
+import { LinkProps } from 'react-router-dom';
+
+import { browserHistory } from './api/state/routing';
 
 export default function Link2<S = History.LocationState>(
   props: React.PropsWithoutRef<LinkProps<S>> &
     React.RefAttributes<HTMLAnchorElement>
 ) {
-  if ((props.to as string).includes('://')) {
-    return (
-      <a {...props} referrerPolicy="origin" href={props.to as string}>
-        {props.children}
-      </a>
-    );
-  }
-
-  return <Link {...props}>{props.children}</Link>;
+  return (
+    <a
+      {...props}
+      referrerPolicy=""
+      href={props.to as string}
+      onClick={(evt) => {
+        if (!(props.to as string).includes('https://')) {
+          evt.preventDefault();
+          evt.stopPropagation();
+          browserHistory.push(props.to as string);
+        }
+      }}
+    >
+      {props.children}
+    </a>
+  );
 }

src/api/state/device.tsx

@@ -1,25 +1,20 @@
-import { atom, useSetRecoilState, selector } from 'recoil';
-import { useEffect } from 'react';
-import { GetInterpolationRatioLinear } from '../../utils/MathUtils';
-
-export default function RecoilDeviceSync() {
-  const setDeviceSize = useSetRecoilState(s_deviceSize);
-
-  useEffect(() => {
-    const onResize = () => {
-      setDeviceSize([window.screen.width, window.screen.height]);
-    };
+import { atom, selector } from 'recoil';
 
-    window.addEventListener('resize', onResize);
-    return () => window.removeEventListener('resize', onResize);
-  }, [setDeviceSize]);
-
-  return null;
-}
+import { GetInterpolationRatioLinear } from '../../utils/MathUtils';
 
 export const s_deviceSize = atom({
   key: 's_deviceSize',
   default: [window.screen.width, window.screen.height],
+  effects_UNSTABLE: [
+    ({ setSelf }) => {
+      const onResize = () => {
+        setSelf([window.screen.width, window.screen.height]);
+      };
+
+      window.addEventListener('resize', onResize);
+      return () => window.removeEventListener('resize', onResize);
+    },
+  ],
 });
 
 export const s_screenInterpolationRatio = selector({

src/api/state/routing.tsx

@@ -1,31 +1,27 @@
-import React from 'react';
 import { createBrowserHistory } from 'history';
-import { useSetRecoilState, atom, selector } from 'recoil';
-import { useEffect } from 'react';
+import { atom, DefaultValue, selector } from 'recoil';
 
 export const browserHistory = createBrowserHistory();
 
-export function HistoryRecoilSync() {
-  const set = useSetRecoilState(s_location);
-
-  useEffect(() => {
-    return browserHistory.listen((location, action) => {
-      // action = 'PUSH' | 'POP' | 'REPLACE';
-      set(location);
-    });
-  }, [set]);
-
-  return <></>;
-}
-
-export const s_history = atom({
-  key: 'historyState',
-  default: browserHistory,
-});
-
 export const s_location = atom({
   key: 'location',
-  default: browserHistory.location,
+  default: { ...browserHistory.location },
+  effects_UNSTABLE: [
+    ({ setSelf, onSet }) => {
+      // set browserHistory when location is set
+      onSet((newLocation) => {
+        if (!(newLocation instanceof DefaultValue)) {
+          browserHistory.push(newLocation);
+        }
+      });
+
+      // set location when browserHistory is updated
+      // also return the unsubscribe function so we are clean
+      return browserHistory.listen((location) => {
+        setSelf(location);
+      });
+    },
+  ],
 });
 
 export const s_urlPath = selector({

src/apps/overview/pages/hero-overview-page.tsx

@@ -1,29 +1,25 @@
+import { Row } from 'antd';
+import Avatar from 'antd/lib/avatar/avatar';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
-import { s_Heroes } from '../../../api/state/heroes';
-import { Row } from 'antd';
-import { Link } from 'react-router-dom';
+
 import { GetHeroIcon } from '../../../api/HotsTalents';
-import Avatar from 'antd/lib/avatar/avatar';
+import { s_Heroes } from '../../../api/state/heroes';
+import Link2 from '../../../Link2';
 
 export default function HeroOverviewPage() {
   const heroData = useRecoilValue(s_Heroes);
 
   return (
     <Row justify="space-between">
       {heroData.map((x) => (
-        <Link
-          key={x.shortName}
-          to={(path) =>
-            `${path.pathname}/heroes/${x.shortName}`.replace('//', '/')
-          }
-        >
+        <Link2 key={x.shortName} to={`HotsTools/heroes/${x.shortName}`}>
           <Avatar
             className="outline hoverable"
             style={{ height: 80, width: 80 }}
             src={GetHeroIcon(x.icon)}
           />
-        </Link>
+        </Link2>
       ))}
     </Row>
   );

src/index.tsx

@@ -2,22 +2,15 @@ import './index.scss';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
-import { browserHistory, HistoryRecoilSync } from './api/state/routing';
 import AppHost from './AppHost';
 import * as serviceWorker from './serviceWorker';
-import RecoilDeviceSync from './api/state/device';
 
 ReactDOM.render(
   <React.StrictMode>
     <RecoilRoot>
-      <RecoilDeviceSync />
-      <HistoryRecoilSync />
-      <Router history={browserHistory}>
-        <AppHost />
-      </Router>
+      <AppHost />
     </RecoilRoot>
   </React.StrictMode>,
   document.getElementById('root')