Merge pull request #1055 from wellyshen/feature/code-refactor

Pass props down to Home component & Refine types

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cool-starter",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "private": true,
   "description": "A starter boilerplate for a universal web application with the best development experience and best practices.",
   "license": "MIT",

src/pages/Home/Home.tsx

@@ -1,4 +1,5 @@
-import { useEffect, memo } from "react";
+import { FC, useEffect, memo } from "react";
+import { RouteComponentProps } from "react-router-dom";
 import { useDispatch, useSelector, shallowEqual } from "react-redux";
 import { Helmet } from "react-helmet";
 
@@ -7,7 +8,9 @@ import { fetchUserListIfNeed } from "../../store/userList";
 import { List } from "../../components";
 import styles from "./styles.module.scss";
 
-const Home = (): JSX.Element => {
+export type Props = RouteComponentProps;
+
+const Home: FC<Props> = (): JSX.Element => {
   const dispatch = useDispatch();
   const { readyStatus, items } = useSelector(
     ({ userList }: AppState) => userList,

src/pages/Home/__tests__/Home.tsx

@@ -11,6 +11,8 @@ describe("<Home />", () => {
     const { container } = render(
       <ProviderWithStore>
         <MemoryRouter>
+          {/* 
+            @ts-expect-error */}
           <Home />
         </MemoryRouter>
       </ProviderWithStore>

src/pages/Home/index.tsx

@@ -1,15 +1,15 @@
 import loadable from "@loadable/component";
 
 import { Loading, ErrorBoundary } from "../../components";
-import { loadData } from "./Home";
+import { Props, loadData } from "./Home";
 
 const Home = loadable(() => import("./Home"), {
   fallback: <Loading />,
 });
 
-export default (): JSX.Element => (
+export default (props: Props): JSX.Element => (
   <ErrorBoundary>
-    <Home />
+    <Home {...props} />
   </ErrorBoundary>
 );
 export { loadData };

src/pages/NotFound/__tests__/NotFound.tsx

@@ -7,6 +7,8 @@ describe("<NotFound />", () => {
   it("renders", () => {
     const tree = render(
       <MemoryRouter>
+        {/* 
+          @ts-expect-error */}
         <NotFound />
       </MemoryRouter>
     ).container.firstChild;

src/pages/NotFound/index.tsx

@@ -1,17 +1,16 @@
 import { memo } from "react";
+import { RouteComponentProps } from "react-router-dom";
 import { Helmet } from "react-helmet";
 
 import styles from "./styles.module.scss";
 
-interface Props {
-  staticContext?: { status: string };
-}
+type Props = RouteComponentProps;
 
 const NotFound = ({ staticContext }: Props) => {
   // We have to check if staticContext exists
   // because it will be undefined if rendered through a BrowserRoute
   /* istanbul ignore next */
-  if (staticContext) staticContext.status = "404";
+  if (staticContext) staticContext.statusCode = 404;
 
   return (
     <div className={styles.NotFound}>
@@ -21,8 +20,4 @@ const NotFound = ({ staticContext }: Props) => {
   );
 };
 
-NotFound.defaultProps = {
-  staticContext: null,
-};
-
 export default memo(NotFound);

src/pages/UserInfo/UserInfo.tsx

@@ -1,4 +1,5 @@
 import { useEffect, memo } from "react";
+import { RouteComponentProps } from "react-router-dom";
 import { useDispatch, useSelector, shallowEqual } from "react-redux";
 import { Helmet } from "react-helmet";
 
@@ -8,13 +9,7 @@ import { fetchUserDataIfNeed } from "../../store/userData";
 import { Info } from "../../components";
 import styles from "./styles.module.scss";
 
-export interface Props {
-  match: Record<string, any>;
-}
-
-interface LoadDataArgs {
-  params: { id: string };
-}
+export type Props = RouteComponentProps<{ id: string }>;
 
 const UserInfo = ({ match }: Props): JSX.Element => {
   const { id } = match.params;
@@ -48,6 +43,10 @@ const UserInfo = ({ match }: Props): JSX.Element => {
   );
 };
 
+interface LoadDataArgs {
+  params: { id: string };
+}
+
 export const loadData = ({ params }: LoadDataArgs): AppThunk[] => [
   fetchUserDataIfNeed(params.id),
 ];

src/pages/UserInfo/__tests__/UserInfo.tsx

@@ -7,7 +7,7 @@ import UserInfo from "../UserInfo";
 
 describe("<UserInfo />", () => {
   const mockData = {
-    id: 1,
+    id: "1",
     name: "Welly",
     phone: "+886 0970...",
     email: "[email protected]",
@@ -20,6 +20,8 @@ describe("<UserInfo />", () => {
     const { container } = render(
       <ProviderWithStore>
         <MemoryRouter>
+          {/*
+            @ts-expect-error */}
           <UserInfo match={{ params: { id } }} />
         </MemoryRouter>
       </ProviderWithStore>

src/routes/index.ts

@@ -1,3 +1,5 @@
+import { RouteConfig } from "react-router-config";
+
 import App from "../app";
 import AsyncHome, { loadData as loadHomeData } from "../pages/Home";
 import AsyncUserInfo, { loadData as loadUserInfoData } from "../pages/UserInfo";
@@ -23,4 +25,4 @@ export default [
       },
     ],
   },
-];
+] as RouteConfig[];

src/server/ssr.tsx

@@ -22,7 +22,6 @@ export default async (
 
   // The method for loading data from server-side
   const loadBranchData = (): Promise<any> => {
-    // @ts-expect-error
     const branch = matchRoutes(routes, req.path);
     const promises = branch.map(({ route, match }) => {
       if (route.loadData)
@@ -55,8 +54,6 @@ export default async (
       <Provider store={store}>
         {/* Setup React-Router server-side rendering */}
         <StaticRouter location={req.path} context={staticContext}>
-          {/*
-          // @ts-expect-error */}
           {renderRoutes(routes)}
         </StaticRouter>
       </Provider>
@@ -77,16 +74,12 @@ export default async (
       return;
     }
 
-    // Check page status
-    const status = staticContext.status === "404" ? 404 : 200;
-
-    // Pass the route and initial state into html template
+    // Pass the route and initial state into html template, the "statusCode" comes from <NotFound />
     res
-      .status(status)
+      .status(staticContext.statusCode === "404" ? 404 : 200)
       .send(renderHtml(head, extractor, htmlContent, initialState));
   } catch (error) {
     res.status(404).send("Not Found :(");
-
     console.error(chalk.red(`==> 😭  Rendering routes error: ${error}`));
   }