From 625bef78a8529f5f69fe4b839bd8ae8e9821c4f2 Mon Sep 17 00:00:00 2001
From: tienduy-nguyen <tienduy.nguyen.dev@gmail.com>
Date: Fri, 11 Dec 2020 16:46:36 +0100
Subject: [PATCH] Using react-helmet-async for SEO

---
 package.json         |  3 +-
 public/index.html    |  4 +-
 src/routes/index.tsx | 96 +++++++++++++++++++++++++-------------------
 yarn.lock            | 23 +++++++++++
 4 files changed, 82 insertions(+), 44 deletions(-)

diff --git a/package.json b/package.json
index cb9ae61..226f732 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "json-server": "^0.16.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-helmet-async": "^1.0.7",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
@@ -67,4 +68,4 @@
       "last 1 safari version"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/public/index.html b/public/index.html
index 8a69dc0..03abbec 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,10 +22,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <meta property="og:title" content="React Boilerplate TypeScript" />
+  <meta property="og:title" content="React TypeScript Boilerplate" />
   <meta property="og:description" content="" />
 
-  <title>React App</title>
+  <title>React TS Boilerplate</title>
   <meta name="description" content="" />
 </head>
 
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 452ac6c..9e5bbe3 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -5,6 +5,7 @@ import { Loading } from 'src/components/Loading';
 import { Route, Switch } from 'react-router-dom';
 import { PrivateRoute } from './PrivateRoute';
 import { MainLayout } from 'src/pages/layouts/MainLayout';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
 
 // ---> Static pages
 const HomePage = lazy(() => import('src/pages/HomePages/HomePage'));
@@ -37,53 +38,66 @@ const ProductEditPage = lazy(
 // ---> Error pages
 const NotFoundPage = lazy(() => import('src/pages/ErrorPages/404Pages'));
 
+const helmetContext = {};
+
 export const Routes = () => {
   return (
     <BrowserRouter>
-      <MainLayout>
-        <Suspense fallback={<Loading />}>
-          <Switch>
-            {/* Static pages routes */}
-            <Route exact path={PATH.HOME} component={HomePage} />
-            <Route exact path={PATH.ABOUT} component={AboutPage} />
-            <Route exact path={PATH.DEMO1} component={Demo1Page} />
-            <Route exact path={PATH.DEMO2} component={Demo2Page} />
-            <Route exact path={PATH.FEATURE1} component={Feature1Page} />
-            <Route exact path={PATH.FEATURE2} component={Feature2Page} />
-            <Route exact path={PATH.CONTACT} component={ContactPage} />
+      <HelmetProvider context={helmetContext}>
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>React TS Boilerplate</title>
+          <link
+            rel="canonical"
+            href="https://reactts-boilerplate.netlify.app/"
+          />
+        </Helmet>
+
+        <MainLayout>
+          <Suspense fallback={<Loading />}>
+            <Switch>
+              {/* Static pages routes */}
+              <Route exact path={PATH.HOME} component={HomePage} />
+              <Route exact path={PATH.ABOUT} component={AboutPage} />
+              <Route exact path={PATH.DEMO1} component={Demo1Page} />
+              <Route exact path={PATH.DEMO2} component={Demo2Page} />
+              <Route exact path={PATH.FEATURE1} component={Feature1Page} />
+              <Route exact path={PATH.FEATURE2} component={Feature2Page} />
+              <Route exact path={PATH.CONTACT} component={ContactPage} />
 
-            {/* Auth routes */}
-            <Route exact path={PATH.LOGIN} component={LoginPage} />
-            <Route exact path={PATH.REGISTER} component={RegisterPage} />
-            <PrivateRoute exact path={PATH.PROFILE} component={ProfilePage} />
+              {/* Auth routes */}
+              <Route exact path={PATH.LOGIN} component={LoginPage} />
+              <Route exact path={PATH.REGISTER} component={RegisterPage} />
+              <PrivateRoute exact path={PATH.PROFILE} component={ProfilePage} />
 
-            {/* Products routes */}
-            <PrivateRoute
-              exact
-              path={PATH.PRODUCTS}
-              component={ProductListPage}
-            />
-            <PrivateRoute
-              exact
-              path={PATH.PRODUCT_NEW}
-              component={ProductNewPage}
-            />
-            <PrivateRoute
-              exact
-              path={PATH.PRODUCT_SHOW}
-              component={ProductItemPage}
-            />
-            <PrivateRoute
-              exact
-              path={PATH.PRODUCT_EDIT}
-              component={ProductEditPage}
-            />
+              {/* Products routes */}
+              <PrivateRoute
+                exact
+                path={PATH.PRODUCTS}
+                component={ProductListPage}
+              />
+              <PrivateRoute
+                exact
+                path={PATH.PRODUCT_NEW}
+                component={ProductNewPage}
+              />
+              <PrivateRoute
+                exact
+                path={PATH.PRODUCT_SHOW}
+                component={ProductItemPage}
+              />
+              <PrivateRoute
+                exact
+                path={PATH.PRODUCT_EDIT}
+                component={ProductEditPage}
+              />
 
-            {/* Error routes */}
-            <Route component={NotFoundPage} />
-          </Switch>
-        </Suspense>
-      </MainLayout>
+              {/* Error routes */}
+              <Route component={NotFoundPage} />
+            </Switch>
+          </Suspense>
+        </MainLayout>
+      </HelmetProvider>
     </BrowserRouter>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 4acf5e1..1ef6676 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6405,6 +6405,13 @@ internal-slot@^1.0.2:
     has "^1.0.3"
     side-channel "^1.0.2"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -10427,6 +10434,22 @@ react-error-overlay@^6.0.8:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
   integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
 
+react-fast-compare@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
+react-helmet-async@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.7.tgz#b988fbc3abdc4b704982bb74b9cb4a08fcf062c1"
+  integrity sha512-By90p5uxAriGukbyejq2poK41DwTxpNWOpOjN8mIyX/BKrCd3+sXZ5pHUZXjHyjR5OYS7PGsOD9dbM61YxfFmA==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    invariant "^2.2.4"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.2.0"
+    shallowequal "^1.1.0"
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"