.gitignore

@@ -21,5 +21,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-.vscode/chrome

.vscode/launch.json

@@ -8,9 +8,10 @@
       "name": "chrome",
       "type": "chrome",
       "request": "launch",
+      "reAttach": true,
       "url": "http://fennec.localhost/",
       "webRoot": "${workspaceFolder}",
-      "userDataDir": ".vscode/chrome"
+      "userDataDir": "/Users/ivan/Projects/.chrome"
     }
   ]
 }

package-lock.json

@@ -34,7 +34,7 @@
         "formik-material-ui": "^3.0.1",
         "formik-material-ui-pickers": "^0.0.12",
         "graphql": "^15.5.0",
-        "graphql-scalars": "^1.10.0",
+        "graphql-scalars": "^1.9.3",
         "material-ui-confirm": "^2.1.2",
         "notistack": "^1.0.6",
         "ramda": "^0.27.1",
@@ -11326,9 +11326,9 @@
       }
     },
     "node_modules/graphql-scalars": {
-      "version": "1.10.0",
+      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.9.3.tgz",
-      "integrity": "sha512-LONlj8FfhA2iGpkZJWf5e4PVAHXxnZEHSOEvowLYvNXl/TNnhIck8VmE+lren/aa6GKrG+lZufo5lgnyjxcF6g==",
+      "integrity": "sha512-vP71Og4ALfe3PCk6T+B7LcJHH55gL0tYidmAE/kWT3ScE2FUCFS7iiMXFQXjCaYLi8nZcRLn9HuejGcjZ8kRug==",
       "dependencies": {
         "tslib": "~2.2.0"
       },
@@ -28129,7 +28129,6 @@
       "integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==",
       "requires": {
         "@babel/runtime": "^7.6.0",
-        "@date-io/core": "1.x",
         "@types/styled-jsx": "^2.2.8",
         "clsx": "^1.0.2",
         "react-transition-group": "^4.0.0",
@@ -34356,9 +34355,9 @@
       }
     },
     "graphql-scalars": {
-      "version": "1.10.0",
+      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.9.3.tgz",
-      "integrity": "sha512-LONlj8FfhA2iGpkZJWf5e4PVAHXxnZEHSOEvowLYvNXl/TNnhIck8VmE+lren/aa6GKrG+lZufo5lgnyjxcF6g==",
+      "integrity": "sha512-vP71Og4ALfe3PCk6T+B7LcJHH55gL0tYidmAE/kWT3ScE2FUCFS7iiMXFQXjCaYLi8nZcRLn9HuejGcjZ8kRug==",
       "requires": {
         "tslib": "~2.2.0"
       },

package.json

@@ -29,7 +29,7 @@
     "formik-material-ui": "^3.0.1",
     "formik-material-ui-pickers": "^0.0.12",
     "graphql": "^15.5.0",
-    "graphql-scalars": "^1.10.0",
+    "graphql-scalars": "^1.9.3",
     "material-ui-confirm": "^2.1.2",
     "notistack": "^1.0.6",
     "ramda": "^0.27.1",

src/commons/auth/auth.provider.tsx

@@ -1,45 +0,0 @@
-import { createContext, useContext, useState } from "react";
-import { FC } from "react";
-import { Login } from "./login";
-
-export interface AuthContext {
-  accessToken: string | undefined;
-  setAccessToken: (token: string) => void;
-  setRefreshToken: (token: string) => void;
-  refreshToken: string | undefined;
-  login: (dto: any) => void;
-  account?: any;
-  setAccount: (dto: any) => void;
-}
-const Context = createContext({} as AuthContext);
-
-export const useAuth = () => useContext(Context);
-
-export const AuthProvider: FC = ({ children }) => {
-  const [accessToken, setAccessToken] = useState<string>();
-  const [refreshToken, setRefreshToken] = useState<string>();
-  const [account, setAccount] = useState<any>();
-
-  const login = (dto: any) => {
-    setAccessToken(dto.accessToken);
-    setRefreshToken(dto.refreshToken);
-    setAccount(dto.account);
-  };
-
-  return (
-    <Context.Provider
-      value={{
-        accessToken,
-        setAccessToken,
-        refreshToken,
-        setRefreshToken,
-        login,
-        account,
-        setAccount,
-      }}
-    >
-      {children}
-      {/* {accessToken ? null : <Login />} */}
-    </Context.Provider>
-  );
-};

src/commons/auth/login.tsx

@@ -1,51 +0,0 @@
-import { makeStyles } from "@material-ui/core";
-import { FC, useEffect, useRef } from "react";
-import { useAuth } from "./auth.provider";
-const useStyles = makeStyles({
-  iframe: {
-    height: "300px",
-    width: "500px",
-    position: "absolute",
-    top: "100px",
-    left: "50%",
-    transform: "translateX(-50%)",
-  },
-});
-
-export const Login: FC = () => {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const { login } = useAuth();
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) {
-      return;
-    }
-    let messagePort: MessagePort;
-    const onLoad = (ev: MessageEvent) => {
-      if (ev.data !== "init-channel") {
-        return;
-      }
-      messagePort = ev.ports?.[0] as MessagePort;
-      messagePort.onmessage = (ev: MessageEvent) => {
-        if (ev.data?.type === "logged") {
-          login(ev.data.payload);
-        }
-      };
-    };
-    window.addEventListener("message", onLoad);
-
-    return () => {
-      window.removeEventListener("message", onLoad);
-    };
-  }, [login]);
-
-  const classes = useStyles();
-  return (
-    <iframe
-      ref={iframeRef}
-      className={classes.iframe}
-      title="Auth"
-      src="http://user.localhost/auth/login"
-    ></iframe>
-  );
-};

src/index.tsx

@@ -10,27 +10,24 @@ import DateFnsUtils from "@date-io/date-fns";
 import zhLocale from "date-fns/locale/zh-CN";
 import { ConfirmProvider } from "material-ui-confirm";
 import { SnackbarProvider } from "notistack";
-import Router from "./commons/route/router";
+import Router from './commons/route/router';
-import { AuthProvider } from "./commons/auth/auth.provider";
 
-ReactDOM.render(
+  ReactDOM.render(
     <React.StrictMode>
       <ConfirmProvider>
         <SnackbarProvider maxSnack={5}>
           <FennecApolloClientProvider>
             <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
-            <AuthProvider>
               <Router>
                 <App />
               </Router>
-            </AuthProvider>
             </MuiPickersUtilsProvider>
           </FennecApolloClientProvider>
         </SnackbarProvider>
       </ConfirmProvider>
     </React.StrictMode>,
     document.getElementById("root")
-);
+  );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))