feat(graphql): add dynamic breadcrumbs

https://github.com/martis-git/learn-frontend/issues/279

Author: azinit

examples/graphql/package.json

@@ -19,6 +19,7 @@
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "react-router-dynamic-breadcrumbs": "^2.2.0",
     "react-scripts": "3.4.3",
     "typescript": "~3.7.2"
   },

examples/graphql/src/pages/index.tsx

@@ -1,12 +1,26 @@
 import React, { lazy, Suspense } from 'react'
 import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
+// @ts-ignore
+import Breadcrumbs from "react-router-dynamic-breadcrumbs";
+import { Breadcrumb, Spin } from "antd";
 
 const TasksListPage = lazy(() => import("./tasks-list"));
 const TaskDetailsPage = lazy(() => import("./task-details"));
 
+export const routes = {
+    "/": "Tasks",
+    "/:id": "Task# :id",
+};
+
 const Routing = () => (
     <BrowserRouter>
-        <Suspense fallback="Loading...">
+        <Breadcrumbs
+            mappedRoutes={routes}
+            WrapperComponent={({ children }: any) => <Breadcrumb>{children}</Breadcrumb>}
+            LinkComponent={({ children }: any) => <Breadcrumb.Item>{children}</Breadcrumb.Item>}
+            ActiveLinkComponent={({ children }: any) => <Breadcrumb.Item>{children}</Breadcrumb.Item>}
+        />
+        <Suspense fallback={<Spin />}>
             <Switch>
                 <Route exact path="/" component={TasksListPage} />
                 <Route exact path="/:id" component={TaskDetailsPage} />

examples/graphql/src/pages/tasks-list/index.tsx

@@ -1,23 +1,13 @@
 import React from 'react'
-import { Breadcrumb, Spin, Alert } from "antd";
+import { Spin, Alert } from "antd";
 import { useFetch } from "shared/hooks";
 import { TaskItem } from "shared/components";
 
-// TODO: autogenerate by location
-const TasksListTitle = () => (
-    <Breadcrumb className="page-title">
-        <Breadcrumb.Item href="/">
-            TasksList
-        </Breadcrumb.Item>
-    </Breadcrumb>
-);
-
 const TasksList = () => {
     const { data, error, loading } = useFetch<Task[]>("todos");
 
     return (
         <div className="page page-tasks-list">
-            <TasksListTitle />
             <div className="page-content">
                 {error && (
                     <Alert

examples/graphql/yarn.lock

@@ -10015,6 +10015,13 @@ react-router-dom@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-router-dynamic-breadcrumbs@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dynamic-breadcrumbs/-/react-router-dynamic-breadcrumbs-2.2.0.tgz#096c7a1d94190ecf5f3619d8fcec3091870f079f"
+  integrity sha512-w5vjWnQDbXZ07WNardqhje1Gf3VvGkB6Bv1IKCu3d/opQC9X2mU0P6n031lL35sxknONlEz6aZ2YQb6AU9yYSQ==
+  dependencies:
+    prop-types "^15.5.10"
+
 react-router@5.2.0, react-router@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"