improved routing

Author: lindapaiste

Diff for: src/components/search-results/SearchPage.tsx

@@ -97,7 +97,7 @@ export const SearchPage = ({
 /**
  * breaking up into two components so that the url only gets evaluated once
  */
-export const SearchRoute = () => {
+export default function SearchRoute() {
   const urlValues = usePetZipQueryParams();
 
   const initialValues = {
@@ -106,4 +106,4 @@ export const SearchRoute = () => {
   };
 
   return <SearchPage initialValues={initialValues} />;
-};
+}

Diff for: src/components/single-pet/PetProfile.tsx

@@ -2,7 +2,7 @@ import "./pet-profile.less";
 import React, { useEffect } from "react";
 import { Col, Row } from "antd";
 import { ArrowLeftOutlined } from "@ant-design/icons";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import {
   useDispatch,
   useEntitiesSelector,
@@ -127,3 +127,11 @@ export const PetProfile = ({ id }: Props) => {
     </div>
   );
 };
+
+/**
+ * Page gets the id from the URL
+ */
+export default function ProfilePage() {
+  const { id } = useParams<{ id: string }>();
+  return <PetProfile id={id} />;
+}

Diff for: src/services/routing/AppRouter.tsx

@@ -1,21 +1,36 @@
 import { Redirect, Route, Switch } from "react-router-dom";
-import React from "react";
-import { PetProfile } from "../../components/single-pet/PetProfile";
-import { SearchRoute } from "../../components/search-results/SearchPage";
-import Dalmatian from "../../components/breed-page/BreedPage";
+import React, { Suspense } from "react";
+import { Spin } from "antd";
 import { Home } from "../../components/home/Home";
 import { PATHS } from "./paths";
 
+const PageLoading = () => (
+  <div className="full-size center-contents">
+    <Spin size="large" />
+  </div>
+);
+
+const Dalmatian = React.lazy(
+  () => import("../../components/breed-page/BreedPage")
+);
+
+const Search = React.lazy(
+  () => import("../../components/search-results/SearchPage")
+);
+
+const PetProfile = React.lazy(
+  () => import("../../components/single-pet/PetProfile")
+);
+
 export const AppRouter = () => (
-  <Switch>
-    <Route
-      path={PATHS.petProfile(":id")}
-      render={({ match }) => <PetProfile id={match.params.id} />}
-    />
-    <Route path="/breed/dalmatian/:tab" component={Dalmatian} />
-    <Route path="/breed/dalmatian" component={Dalmatian} />
-    <Route path="/breed" render={() => <Redirect to="/breed/dalmatian" />} />
-    <Route path={PATHS.search()} component={SearchRoute} />
-    <Route component={Home} />
-  </Switch>
+  <Suspense fallback={PageLoading}>
+    <Switch>
+      <Route path={PATHS.petProfile(":id")} component={PetProfile} />
+      <Route path="/breed/dalmatian/:tab" component={Dalmatian} />
+      <Route path="/breed/dalmatian" component={Dalmatian} />
+      <Route path="/breed" render={() => <Redirect to="/breed/dalmatian" />} />
+      <Route path={PATHS.search()} component={Search} />
+      <Route component={Home} />
+    </Switch>
+  </Suspense>
 );

Diff for: vercel.json

@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+}