Merge pull request #30 from LuisValgoi/issue-26

marceloschreiber · MarcusNotheis · commit 808e08f89a8b · 2020-10-21T14:12:22.000+02:00
[ISSUE-26] Adds React Helment
diff --git a/packages/ui5-webcomponents-react-seed/README.md b/packages/ui5-webcomponents-react-seed/README.md
@@ -78,6 +78,10 @@ Builds the app for production to the `build` folder.
 
 Used to manipulate async request, data fetching, cache and more (no redux / saga anymore).
 
+### `react-helmet`
+
+Used to manpilate DOM attributes through JSX such as `<head>`.
+
 [Tutorial Link](https://www.youtube.com/watch?v=yccbCol546c), [Random Post](https://blog.bitsrc.io/how-to-start-using-react-query-4869e3d5680d) and [Creator Official Video](https://www.youtube.com/watch?v=seU46c6Jz7E).
 
 ### `commitlint`
diff --git a/packages/ui5-webcomponents-react-seed/package.json b/packages/ui5-webcomponents-react-seed/package.json
@@ -14,6 +14,7 @@
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3"
   },
diff --git a/packages/ui5-webcomponents-react-seed/src/App.js b/packages/ui5-webcomponents-react-seed/src/App.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from "react-router-dom";
+import { Helmet } from 'react-helmet';
 
 import ErrorBoundary from './pages/Fallback/ErrorBoundary';
 import Shell from './components/Shell/Shell';
@@ -10,6 +11,7 @@ import './App.css';
 function App() {
   return (
     <BrowserRouter>
+      <Helmet title="Home - TodoList App" />
       <Shell title='TodoList App' />
       <div style={{ paddingTop: '44px' }} />
       <ErrorBoundary>
diff --git a/packages/ui5-webcomponents-react-seed/src/pages/Fallback/Buggy.js b/packages/ui5-webcomponents-react-seed/src/pages/Fallback/Buggy.js
@@ -7,7 +7,11 @@ class Buggy extends React.Component {
     throw new Error("An error has occured in Buggy component!");
   }
   render() {
-    return <h2>{this.state.greeting}</h2>;
+    return (
+      <>
+        <h2>{this.state.greeting}</h2>
+      </>
+    );
   }
 }
 
diff --git a/packages/ui5-webcomponents-react-seed/src/pages/Fallback/Error.js b/packages/ui5-webcomponents-react-seed/src/pages/Fallback/Error.js
@@ -1,11 +1,13 @@
 import React from 'react';
+import { Helmet } from 'react-helmet'
 
 import error from '../../assets/error.png';
 import Fallback from './Fallback';
 
 const Error = () => {
   return (
     <>
+      <Helmet title="Buggy Component - TodoList App" />
       <Fallback image={error} altImage='Error' text='Ops! There was an error in loading this page' reload />
     </>
   );
diff --git a/packages/ui5-webcomponents-react-seed/src/pages/Fallback/NotFound.js b/packages/ui5-webcomponents-react-seed/src/pages/Fallback/NotFound.js
@@ -1,11 +1,15 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import notfound from '../../assets/notfound.png';
 import Fallback from './Fallback';
 
 const NotFound = () => {
   return (
-    <Fallback image={notfound} altImage='Not Found' text='Hmmm, we could find this URL' />
+    <>
+      <Helmet title="NotFound - TodoList App" />
+      <Fallback image={notfound} altImage='Not Found' text='Hmmm, we could find this URL' />
+    </>
   );
 };
 
diff --git a/packages/ui5-webcomponents-react-seed/src/pages/Todo/List/TodoList.js b/packages/ui5-webcomponents-react-seed/src/pages/Todo/List/TodoList.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useHistory } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
 import CenteredLink from '../../../components/CenteredLink/CenteredLink';
 import BrowserURL from '../../../util/BrowserURL';
@@ -9,14 +10,15 @@ export default function TodoList() {
   const history = useHistory();
 
   return (
-    <div>
+    <>
+      <Helmet title="List - TodoList App" />
       <CenteredLink onClick={() => history.push('/dontexist')} text='Test NotFound Page' />
       <br />
       <CenteredLink onClick={() => history.push(BrowserURL.BUGGY)} text='Test Error Page' />
       <br />
       <ComponentValidator allowedPermissions={['canAccessDropApplication']} allowenceKey='permissions'>
         <CenteredLink text='Drop Application (this is a restricted text and you should not see unless you have access)' />
       </ComponentValidator>
-    </div>
+    </>
   )
 }
diff --git a/packages/ui5-webcomponents-react-seed/yarn.lock b/packages/ui5-webcomponents-react-seed/yarn.lock
@@ -9903,6 +9903,21 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
+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.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -10019,6 +10034,11 @@ react-scripts@3.4.3:
   optionalDependencies:
     fsevents "2.1.2"
 
+react-side-effect@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3"
+  integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==
+
 react-table@7.5.0:
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.5.0.tgz#87326d92cdffbbf970f49b395bcafc3f84989ddf"

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,11 @@ class Buggy extends React.Component {`
`7`	`7`	`throw new Error("An error has occured in Buggy component!");`
`8`	`8`	`}`
`9`	`9`	`render() {`
`10`		`- return <h2>{this.state.greeting}</h2>;`
	`10`	`+ return (`
	`11`	`+ <>`
	`12`	`+ <h2>{this.state.greeting}</h2>`
	`13`	`+ </>`
	`14`	`+ );`
`11`	`15`	`}`
`12`	`16`	`}`
`13`	`17`