Merge pull request #54 from LuisValgoi/feat-45

[ISSUE-45] Added ReactDeviceDetect

Author: marceloschreiber

packages/ui5-webcomponents-react-seed/README.md

@@ -29,19 +29,10 @@
 - `npx create-react-app PROJECT_NAME --template ui5-webcomponents-react-seed`;
 - cd into `PROJECT_NAME`;
 - (no need to run `yarn install` since it already installs it for you);
-- run `yarn test:ci` or any other;
-- have fun with the other scripts;
+- run the available scripts;
 
 PS.: It is important to add the `--template ui5-webcomponents-react-seed` at the end to get our template.
 
-# Getting Started
-
-Once you have created your project using the `ui5-webcomponents-react-seed` template, you can start by:
-
-- `yarn mock`: To run this project with json-server.
-
-- `yarn start`: To run this project with backend (⚠️ currently not supported).
-
 # Configuration Included
 
 - JEST Up & Runnning.
@@ -72,10 +63,6 @@ Once you have created your project using the `ui5-webcomponents-react-seed` temp
 
 # Hooks Included
 
-- `useBrowser`: Which identifies the user browser.
-
-- `useIsMobile`: Which identifies the user device perspective.
-
 - `useRequest`: Which includes `get`, `post`, `patch`, `delete`, `put` HTTP helpers.
 
 - `useAuthority`: Which includes `hasAccess` helpers.
@@ -182,6 +169,10 @@ Used to translate strings and text in the application following the Internationa
 
 Used to identify the browsers culture and change the applications text accordingly.
 
+### `react-device-detect``
+
+Used to identify the device, browser, ratios and etc.
+
 ### `commitlint`
 
 Used to check the commits before actually commits.

packages/ui5-webcomponents-react-seed/package.json

@@ -47,6 +47,8 @@
     "@ui5/webcomponents-react": "^0.10.0",
     "axios": "^0.20.0",
     "env-cmd": "^10.1.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "husky": "^4.2.5",
     "i18next": "^19.7.0",
     "i18next-browser-languagedetector": "^6.0.1",
@@ -55,17 +57,16 @@
     "msw": "^0.20.5",
     "nodemon": "^2.0.4",
     "npm-run-all": "^4.1.5",
+    "prettier": "^2.1.1",
     "react": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
+    "react-device-detect": "^1.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.7.2",
     "react-query": "^2.17.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "prettier": "^2.1.1"
+    "react-scripts": "3.4.3"
   },
   "scripts": {
     "build": "react-scripts build",

packages/ui5-webcomponents-react-seed/src/hooks/useBrowser.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
+import { useHistory } from 'react-router-dom';
+import { MobileView, BrowserView, IEView, isMobile, isTablet, isDesktop, isIE, isChrome, isOpera } from 'react-device-detect';
 
 import HyperLink from '../../../components/HyperLink/HyperLink';
 import BrowserURL from '../../../util/BrowserURL';
@@ -12,13 +13,35 @@ export default function TodoList() {
   return (
     <>
       <Helmet title="List - TodoList App" />
+      <h1>Routing</h1>
       <HyperLink onClick={() => history.push('/dontexist')} text="Test NotFound Page" />
       <br />
       <HyperLink onClick={() => history.push(BrowserURL.BUGGY)} text="Test Error Page" />
       <br />
+
       <ComponentValidator allowedAuthorities={['canAccessDropApplication']} authorityKey="permissions">
-        <HyperLink text="Drop Application (this is a restricted text and you should not see unless you have access)" />
+        <h1>Component Validator</h1>
+        <p>Drop Application (this is a restricted text and you should not see unless you have access)</p>
       </ComponentValidator>
+
+      <h1>Device Detect</h1>
+      <MobileView>
+        <p>This is a text visible only for MOBILE</p>
+      </MobileView>
+      <BrowserView>
+        <p>This is a text visible only for DESKTOP</p>
+      </BrowserView>
+      <p>{isMobile ? 'This text appears when is MOBILE' : 'This text appears when is not MOBILE'}</p>
+      <p>{isTablet ? 'This text appears when is TABLET' : 'This text appears when is not TABLET'}</p>
+      <p>{isDesktop ? 'This text appears when is DESKTOP' : 'This text appears when is not DESKTOP'}</p>
+
+      <h1>Browser Detect</h1>
+      <IEView>
+        <p>This is a text visible only for INTERNET EXPLORER</p>
+      </IEView>
+      <p>{isChrome ? 'This Text is rendered only for CHROME' : 'This Text is rendered only when is NOT CHROME'}</p>
+      <p>{isIE ? 'This Text is rendered only for IE' : 'This Text is rendered only when is NOT IE'}</p>
+      <p>{isOpera ? 'This Text is rendered only for OPERA' : 'This Text is rendered only when is NOT OPERA'}</p>
     </>
   );
 }

packages/ui5-webcomponents-react-seed/src/hooks/useIsMobile.js

@@ -10164,6 +10164,13 @@ react-dev-utils@^10.2.1:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
+react-device-detect@^1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-1.13.1.tgz#27ac0e86a03969e440e973d179aaa19e80a5ba66"
+  integrity sha512-XTPgAMsUVHC5lMNUGiAeO2UfAfhMfjq0CBUM67eHnc9XfO7iESh6h/cffKV8VGgrZBX+dyuqJl23bLLHoav5Ig==
+  dependencies:
+    ua-parser-js "^0.7.21"
+
 react-display-name@^0.2.4:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.5.tgz#304c7cbfb59ee40389d436e1a822c17fe27936c6"
@@ -12051,6 +12058,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+ua-parser-js@^0.7.21:
+  version "0.7.22"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.22.tgz#960df60a5f911ea8f1c818f3747b99c6e177eae3"
+  integrity sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q==
+
 undefsafe@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.3.tgz#6b166e7094ad46313b2202da7ecc2cd7cc6e7aae"