Dynamically change title

Author: manhtai

package.json

@@ -174,6 +174,7 @@
     "@types/qrcode": "^1.4.1",
     "@types/react": "^16.9.44",
     "@types/react-dom": "^16.9.9",
+    "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-test-renderer": "^16.9.3",
     "@types/webpack-env": "^1.15.2",
@@ -260,6 +261,7 @@
     "qrcode": "^1.4.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "^5.2.0",
     "regenerator-runtime": "^0.13.5",
     "source-map-support": "^0.5.19",

src/App.tsx

@@ -15,7 +15,7 @@ export default function App() {
       <Switch>
         <Route path="/" component={Main} />
       </Switch>
-      <Redirect from="*" to="/unix" />
+      <Redirect from="*" to="/unix-converter" />
     </Router>
   );
 }

src/components/Main.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { NavLink, Route } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Helmet } from 'react-helmet';
+
 import MarkdownToHtml from './markdown/MarkdownToHtml';
 import UnixTimestamp from './timestamp/UnixTimestamp';
 import HtmlPreview from './html/HtmlPreview';
@@ -83,9 +85,12 @@ const Main = () => {
         {/* Main content */}
         <section className="relative flex flex-col w-full bg-gray-200">
           <div className="h-full overflow-x-hidden overflow-y-auto px-6 my-6">
-            {routes.map(({ path, Component }) => (
+            {routes.map(({ path, name, Component }) => (
               <Route key={path} exact path={path}>
                 <Component />
+                <Helmet>
+                  <title>{name}</title>
+                </Helmet>
               </Route>
             ))}
           </div>

src/menu.ts

@@ -155,29 +155,15 @@ export default class MenuBuilder {
       label: 'Help',
       submenu: [
         {
-          label: 'Learn More',
+          label: 'Home Page',
           click() {
-            shell.openExternal('https://electronjs.org');
+            shell.openExternal('https://plainbelt.github.io');
           },
         },
         {
-          label: 'Documentation',
+          label: 'GitHub',
           click() {
-            shell.openExternal(
-              'https://github.com/electron/electron/tree/master/docs#readme'
-            );
-          },
-        },
-        {
-          label: 'Community Discussions',
-          click() {
-            shell.openExternal('https://www.electronjs.org/community');
-          },
-        },
-        {
-          label: 'Search Issues',
-          click() {
-            shell.openExternal('https://github.com/electron/electron/issues');
+            shell.openExternal('https://github.com/plainbelt/plainbelt');
           },
         },
       ],
@@ -256,29 +242,15 @@ export default class MenuBuilder {
         label: 'Help',
         submenu: [
           {
-            label: 'Learn More',
-            click() {
-              shell.openExternal('https://electronjs.org');
-            },
-          },
-          {
-            label: 'Documentation',
-            click() {
-              shell.openExternal(
-                'https://github.com/electron/electron/tree/master/docs#readme'
-              );
-            },
-          },
-          {
-            label: 'Community Discussions',
+            label: 'Home Page',
             click() {
-              shell.openExternal('https://www.electronjs.org/community');
+              shell.openExternal('https://plainbelt.github.io');
             },
           },
           {
-            label: 'Search Issues',
+            label: 'GitHub',
             click() {
-              shell.openExternal('https://github.com/electron/electron/issues');
+              shell.openExternal('https://github.com/plainbelt/plainbelt');
             },
           },
         ],

src/package.json

@@ -1,7 +1,7 @@
 {
   "name": "plainbelt",
   "productName": "plainbelt",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "A toolbelt for all your plain text",
   "main": "./main.prod.js",
   "author": {

yarn.lock

@@ -1785,6 +1785,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-helmet@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.2.tgz#e9d7d16b29e4ec5716711c52c35c3cec45819eac"
+  integrity sha512-dcfAZNlWb5JYFbO9CGfrPWLJAyFcT6UeR3u35eBbv8liY2Rg4K7fM1G5+HnwVgot+C+kVwXAZ8pLEn2jsMfTDg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@^5.1.6":
   version "5.1.6"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.6.tgz#07b14e7ab1893a837c8565634960dc398564b1fb"
@@ -10014,6 +10021,21 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
+react-fast-compare@^3.1.1:
+  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@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.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, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -10066,6 +10088,11 @@ react-shallow-renderer@^16.13.1:
     object-assign "^4.1.1"
     react-is "^16.12.0 || ^17.0.0"
 
+react-side-effect@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
+  integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
+
 react-test-renderer@^16.0.0-0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"