fix: add all change file

Author: hengwangsay

.env

@@ -1,12 +1,17 @@
+# dev env
 DEV_HOST=localhost
 DEV_PORT=9000
 WDS_PORT=9001
+PUBLIC_DEV_API_HOST=localhost:9000
+# prod env
 PROD_PORT=5000
 PROD_HOST=localhost
-PUBLIC_API_HOST=localhost:9000
+PUBLIC_PROD_API_HOST=localhost:5000
+# feature
 CRYPTO_KEY=ad$cr3efW89ypg
 SSR=true
 MIDDLEWARE=false
 ANIMATE_ROUTER=false
+# entry
 SERVER_ENTRY=./src/server/entry.ts
 CLIENT_ENTRY=./src/client/entry.tsx

global.d.ts

@@ -36,7 +36,8 @@ declare global {
       PROD_PORT: string;
       SSR: string;
       UI: "antd" | "material" | "chakra";
-      PUBLIC_API_HOST: string;
+      PUBLIC_DEV_API_HOST: string;
+      PUBLIC_PROD_API_HOST: string;
       CRYPTO_KEY: string;
       SERVER_ENTRY: string;
       CLIENT_ENTRY: string;

script/start-prod

@@ -23,7 +23,6 @@ const withPromise = async () => {
   } catch (e) {
     console.error(e.message);
   }
-  console.log("compiler done. before start this app, pls set PUBLIC_API_HOST in the env file!");
 };
 
 withPromise();

src/client/chakraEntry.tsx

@@ -1,36 +1,30 @@
 import { ChakraProvider, createCookieStorageManager } from "@chakra-ui/react";
-import { CacheProvider } from "@emotion/react";
 import { StrictMode } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { Provider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
 
 import { App } from "components/App";
-import { createEmotionCache } from "config/createEmotionCache";
 import { theme } from "theme";
 
 import type { createUniversalStore } from "store";
 
-const cache = createEmotionCache();
-
 const Root = ({ store }: { store: ReturnType<typeof createUniversalStore> }) => {
   console.warn("you are using chakra UI component library!");
 
   const cookieStore = createCookieStorageManager("chakra-ui-color-mode", store.getState().server.cookie.data);
 
   return (
     <StrictMode>
-      <CacheProvider value={cache}>
-        <ChakraProvider resetCSS theme={theme} colorModeManager={cookieStore}>
-          <Provider store={store}>
-            <Router>
-              <HelmetProvider>
-                <App />
-              </HelmetProvider>
-            </Router>
-          </Provider>
-        </ChakraProvider>
-      </CacheProvider>
+      <ChakraProvider resetCSS theme={theme} colorModeManager={cookieStore}>
+        <Provider store={store}>
+          <Router>
+            <HelmetProvider>
+              <App />
+            </HelmetProvider>
+          </Router>
+        </Provider>
+      </ChakraProvider>
     </StrictMode>
   );
 };

src/client/entry.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { loadableReady } from "@loadable/component";
 import { createRoot, hydrateRoot } from "react-dom/client";
 
 import { createUniversalStore } from "store";
@@ -34,13 +33,13 @@ if (__CSR__) {
   log("pure render by client", "warn");
   const { preLoadLang } = require("utils/preLoad");
   const root = createRoot(place);
-  preLoadLang({ store, lang: window.__ENV__.LANG }).then(() => loadableReady(() => root.render(<Root store={store} />)));
+  preLoadLang({ store, lang: window.__ENV__.LANG }).then(() => root.render(<Root store={store} />));
 } else {
   if (!window.__ENV__.isSSR || (window.__ENV__.isDEVELOPMENT && window.__ENV__.isMIDDLEWARE)) {
     log("not hydrate render on client", "warn");
     const root = createRoot(place);
-    loadableReady(() => root.render(<Root store={store} />));
+    root.render(<Root store={store} />);
   } else {
-    loadableReady(() => hydrateRoot(place, <Root store={store} />));
+    hydrateRoot(place, <Root store={store} />);
   }
 }

src/components/Layout.tsx

@@ -1,20 +1,26 @@
+import { lazy, Suspense } from "react";
 import { Outlet } from "react-router";
 
-import { Footer } from "./Footer";
 import { Header } from "./Header";
 import style from "./index.module.scss";
 
 import type { PreLoadComponentType } from "types/components";
 
+const Footer = lazy(() => import("./Footer").then(({ Footer }) => ({ default: Footer })));
+
 export const Layout: PreLoadComponentType = () => {
   return (
     <div className={style.container}>
       <Header />
       <main className={style.content}>
-        <Outlet />
+        <Suspense>
+          <Outlet />
+        </Suspense>
         <hr />
       </main>
-      <Footer />
+      <Suspense>
+        <Footer />
+      </Suspense>
     </div>
   );
 };

src/components/RenderMatch.tsx

@@ -1,5 +1,5 @@
 import { AnimatePresence, motion } from "framer-motion";
-import React from "react";
+import React, { Suspense } from "react";
 import { useRoutes } from "react-router";
 
 import { allRoutes } from "router/routes";
@@ -35,11 +35,11 @@ export const RenderMatch = () => {
             stiffness: 50,
           }}
         >
-          {all}
+          <Suspense>{all}</Suspense>
         </motion.div>
       </React.Fragment>
     </AnimatePresence>
   ) : (
-    all
+    <Suspense>{all}</Suspense>
   );
 };

src/components/WrapperLang/index.tsx

@@ -1,16 +1,16 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { IntlProvider } from "react-intl";
 import { useSelector } from "react-redux";
 
 import { defaultLang } from "utils/i18n";
 
-import type { ReactChild } from "react";
+import type { ReactNode } from "react";
 import type { StoreState } from "types/store";
 
-export const WrapperLang = ({ children }: { children: ReactChild }) => {
+export const WrapperLang = ({ children }: { children: ReactNode }) => {
   const htmlRef = useRef<HTMLHtmlElement | null>(null);
-  const data = useSelector<StoreState, StoreState["server"]["lang"]["data"]>((state) => state.server.lang.data);
-  const lang = useSelector<StoreState, StoreState["client"]["currentLang"]["data"]>((state) => state.client.currentLang.data);
+  const data = useSelector<StoreState, StoreState["server"]["lang"]["data"]>(useCallback((state) => state.server.lang.data, []));
+  const lang = useSelector<StoreState, StoreState["client"]["currentLang"]["data"]>(useCallback((state) => state.client.currentLang.data, []));
 
   useEffect(() => {
     if (!htmlRef.current) {