Merge pull request #1 from PlayEdu/dev

Dev

.env.example

@@ -1 +1,2 @@
-VITE_APP_URL=
+VITE_APP_URL=
+VITE_G_ID=

package.json

@@ -10,18 +10,20 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.3",
+    "add": "^2.0.6",
     "antd": "^5.3.2",
     "axios": "^1.3.4",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "moment": "^2.29.4",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-ga": "^3.3.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.9.0",
     "redux": "^4.2.1",
-    "sort-by": "^1.2.0",
-    "web-vitals": "^3.3.0"
+    "sort-by": "^1.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/App.tsx

@@ -1,31 +1,43 @@
-import { useRoutes } from "react-router-dom";
+import { Suspense, useEffect } from "react";
+import ReactGA from "react-ga";
+import { useLocation, useRoutes } from "react-router-dom";
 import routes from "./routes";
 import "./App.scss";
-import { Suspense } from "react";
 import LoadingPage from "./pages/loading";
 import { user } from "./api/index";
 import { getToken } from "./utils/index";
 import { useDispatch } from "react-redux";
 import { loginAction } from "./store/user/loginUserSlice";
 
-function App() {
-  const Views = () => useRoutes(routes);
+const G_ID = import.meta.env.VITE_G_ID || "";
+if (G_ID) {
+  ReactGA.initialize(G_ID);
+}
+
+const App = () => {
   const dispatch = useDispatch();
-  const getUser = () => {
+  const Views = () => useRoutes(routes);
+
+  if (getToken()) {
     user.detail().then((res: any) => {
       const data = res.data;
       dispatch(loginAction(data));
     });
-  };
-  if (getToken()) {
-    getUser();
   }
 
+  const location = useLocation();
+  useEffect(() => {
+    if (!G_ID) {
+      return;
+    }
+    ReactGA.pageview(location.pathname + location.search);
+  }, [location]);
+
   return (
     <Suspense fallback={<LoadingPage />}>
       <Views />
     </Suspense>
   );
-}
+};
 
 export default App;

src/compenents/user-info/index.tsx

@@ -22,7 +22,9 @@ export const UserInfoModel: React.FC<PropInterface> = ({ open, onCancel }) => {
   const [idCard, setIdCard] = useState<string>("");
 
   useEffect(() => {
-    getUser();
+    if (open) {
+      getUser();
+    }
   }, [form, open]);
 
   const getUser = () => {

src/main.tsx

@@ -1,8 +1,6 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
 import store from "./store";
-import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter } from "react-router-dom";
 import { ConfigProvider } from "antd";
 import zhCN from "antd/locale/zh_CN";
@@ -20,9 +18,4 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
       </BrowserRouter>
     </ConfigProvider>
   </Provider>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+);

src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;