From e47e31ada206b0af74bff2e068e616379bd0425f Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Mon, 26 Apr 2021 00:00:09 +0800 Subject: [PATCH 1/2] Refactor: pass props down to & refine types --- src/pages/Home/Home.tsx | 7 +++++-- src/pages/Home/__tests__/Home.tsx | 2 ++ src/pages/Home/index.tsx | 6 +++--- src/pages/NotFound/__tests__/NotFound.tsx | 2 ++ src/pages/NotFound/index.tsx | 11 +++-------- src/pages/UserInfo/UserInfo.tsx | 13 ++++++------- src/pages/UserInfo/__tests__/UserInfo.tsx | 4 +++- src/routes/index.ts | 4 +++- src/server/ssr.tsx | 11 ++--------- 9 files changed, 29 insertions(+), 31 deletions(-) diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 62f42158..b3dda5bb 100755 --- a/src/pages/Home/Home.tsx +++ b/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 = (): JSX.Element => { const dispatch = useDispatch(); const { readyStatus, items } = useSelector( ({ userList }: AppState) => userList, diff --git a/src/pages/Home/__tests__/Home.tsx b/src/pages/Home/__tests__/Home.tsx index 01f36fb0..457cb56a 100755 --- a/src/pages/Home/__tests__/Home.tsx +++ b/src/pages/Home/__tests__/Home.tsx @@ -11,6 +11,8 @@ describe("", () => { const { container } = render( + {/* + @ts-expect-error */} diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 72d7576b..a15bbfeb 100755 --- a/src/pages/Home/index.tsx +++ b/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: , }); -export default (): JSX.Element => ( +export default (props: Props): JSX.Element => ( - + ); export { loadData }; diff --git a/src/pages/NotFound/__tests__/NotFound.tsx b/src/pages/NotFound/__tests__/NotFound.tsx index e87f4357..83a8937a 100755 --- a/src/pages/NotFound/__tests__/NotFound.tsx +++ b/src/pages/NotFound/__tests__/NotFound.tsx @@ -7,6 +7,8 @@ describe("", () => { it("renders", () => { const tree = render( + {/* + @ts-expect-error */} ).container.firstChild; diff --git a/src/pages/NotFound/index.tsx b/src/pages/NotFound/index.tsx index 818253c5..8b461666 100755 --- a/src/pages/NotFound/index.tsx +++ b/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 (
@@ -21,8 +20,4 @@ const NotFound = ({ staticContext }: Props) => { ); }; -NotFound.defaultProps = { - staticContext: null, -}; - export default memo(NotFound); diff --git a/src/pages/UserInfo/UserInfo.tsx b/src/pages/UserInfo/UserInfo.tsx index cc60fa5a..ccd40e44 100755 --- a/src/pages/UserInfo/UserInfo.tsx +++ b/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; -} - -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), ]; diff --git a/src/pages/UserInfo/__tests__/UserInfo.tsx b/src/pages/UserInfo/__tests__/UserInfo.tsx index e262224a..a205a6b2 100755 --- a/src/pages/UserInfo/__tests__/UserInfo.tsx +++ b/src/pages/UserInfo/__tests__/UserInfo.tsx @@ -7,7 +7,7 @@ import UserInfo from "../UserInfo"; describe("", () => { const mockData = { - id: 1, + id: "1", name: "Welly", phone: "+886 0970...", email: "hivoid19@gmail.com", @@ -20,6 +20,8 @@ describe("", () => { const { container } = render( + {/* + @ts-expect-error */} diff --git a/src/routes/index.ts b/src/routes/index.ts index 5fdf31ea..0e4c9646 100755 --- a/src/routes/index.ts +++ b/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[]; diff --git a/src/server/ssr.tsx b/src/server/ssr.tsx index 6b82b293..2c58dd40 100644 --- a/src/server/ssr.tsx +++ b/src/server/ssr.tsx @@ -22,7 +22,6 @@ export default async ( // The method for loading data from server-side const loadBranchData = (): Promise => { - // @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 ( {/* Setup React-Router server-side rendering */} - {/* - // @ts-expect-error */} {renderRoutes(routes)} @@ -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 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}`)); } From abf85e9a721ff4dea338b284e6a205b889b985fa Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Mon, 26 Apr 2021 00:00:28 +0800 Subject: [PATCH 2/2] Chore: bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8ef8f9a3..d4251138 100644 --- a/package.json +++ b/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",