feat: migrated from old ssi to new ssi and added share button feature

1-Platform · Oct 19, 2021 · 7daf50a · 7daf50a
1 parent 277c0ca
commit 7daf50a
Show file tree

Hide file tree

Showing 13 changed files with 718 additions and 107 deletions.
diff --git a/.env.example b/.env.example
@@ -1,4 +1,12 @@
 REACT_APP_POUCH_DB_URL=
+# REACT_APP_POUCH_DB_NAME=
+
+# opc-base
+REACT_APP_OPCBASE_API_BASE_PATH=
+REACT_APP_OPCBASE_SUBSCRIPTION_BASE_PATH=
+REACT_APP_OPCBASE_KEYCLOAK_URL=
+REACT_APP_OPCBASE_KEYCLOAK_CLIENT_ID=
+REACT_APP_OPCBASE_KEYCLOAK_REALM=
+
 POUCH_DB_ADMIN_TOKEN=
-NODE_TLS_REJECT_UNAUTHORIZED=
-# REACT_APP_POUCH_DB_NAME=
+NODE_TLS_REJECT_UNAUTHORIZED=
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "idea-hub",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "homepage": "/ideas",
   "author": {
@@ -10,6 +10,11 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^2.6.0",
+    "@one-platform/opc-base": "^1.0.2-beta",
+    "@one-platform/opc-feedback": "0.0.9-prerelease",
+    "@one-platform/opc-menu-drawer": "^0.1.1-prerelease",
+    "@one-platform/opc-nav": "0.0.2-prerelease",
+    "@one-platform/opc-notification-drawer": "^0.1.1-prerelease",
     "@patternfly/react-core": "^4.128.2",
     "@patternfly/react-icons": "^4.10.11",
     "@patternfly/react-styles": "^4.10.11",

diff --git a/public/chrome.html b/public/chrome.html
diff --git a/public/index.html b/public/index.html
@@ -29,8 +29,6 @@
 
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
-  <!-- SSI -->
-  <!--#include virtual="/ideas/chrome.html" -->
   <div id="root"></div>
 </body>
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,9 +3,26 @@ import { BrowserRouter } from 'react-router-dom';
 import { Router } from './routes';
 import './App.scss';
 
+import opcBase from '@one-platform/opc-base';
+import '@one-platform/opc-base/dist/opc-provider';
+
+opcBase.configure({
+  apiBasePath: process.env.REACT_APP_OPCBASE_API_BASE_PATH as string,
+  subscriptionsPath: process.env.REACT_APP_OPCBASE_SUBSCRIPTION_BASE_PATH as string,
+  keycloakUrl: process.env.REACT_APP_OPCBASE_KEYCLOAK_URL as string,
+  keycloakClientId: process.env.REACT_APP_OPCBASE_KEYCLOAK_CLIENT_ID as string,
+  keycloakRealm: process.env.REACT_APP_OPCBASE_KEYCLOAK_REALM as string,
+});
+
 const App = (): JSX.Element => {
   return (
     <BrowserRouter>
+      <opc-provider>
+        <opc-nav></opc-nav>
+        <opc-menu-drawer></opc-menu-drawer>
+        <opc-notification-drawer></opc-notification-drawer>
+        <opc-feedback theme="blue"></opc-feedback>
+      </opc-provider>
       <Router />
     </BrowserRouter>
   );

diff --git a/src/containers/CommentsContainer/CommentsContainer.tsx b/src/containers/CommentsContainer/CommentsContainer.tsx
@@ -102,7 +102,7 @@ export const CommentsContainer = ({ ideaDetails }: Props): JSX.Element => {
         .on('change', handleCommentFeedChange)
         .on('error', function (err) {
           console.error(err);
-          window.OpNotification.warning({
+          window.OpNotification.warn({
             subject: 'Idea live change registration failed',
             body: err.message,
           });

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import '@patternfly/react-core/dist/styles/base.css';
+import '@one-platform/opc-nav/dist/opc-nav';
+import '@one-platform/opc-menu-drawer/dist/opc-menu-drawer';
+import '@one-platform/opc-notification-drawer/dist/opc-notification-drawer';
+import '@one-platform/opc-feedback/dist/opc-feedback';
 
 import App from './App';
 

diff --git a/src/layouts/AppLayout/AppLayout.tsx b/src/layouts/AppLayout/AppLayout.tsx
@@ -10,7 +10,7 @@ import styles from './appLayout.module.scss';
 
 export const AppLayout: FC = ({ children }) => {
   return (
-    <Page mainContainerId="app-layout-page">
+    <Page mainContainerId="app-layout-page" className={styles['app-layout']}>
       <Container>
         <Flex
           direction={{ default: 'column' }}

diff --git a/src/layouts/AppLayout/appLayout.module.scss b/src/layouts/AppLayout/appLayout.module.scss
@@ -1,11 +1,15 @@
+.app-layout {
+  --pf-c-page__main--ZIndex: 0;
+}
+
 .banner {
-    background: rgba(120, 200, 250, 0.1) 0% 0% no-repeat padding-box !important;
-    border-radius: 8px;
+  background: rgba(120, 200, 250, 0.1) 0% 0% no-repeat padding-box !important;
+  border-radius: 8px;
 }
 
 .footer {
-    background: rgba(120, 200, 250, 0.1) 0% 0% no-repeat padding-box !important;
-    border-radius: 8px;
-    position: relative;
-    top: 1rem;
+  background: rgba(120, 200, 250, 0.1) 0% 0% no-repeat padding-box !important;
+  border-radius: 8px;
+  position: relative;
+  top: 1rem;
 }
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -96,7 +96,7 @@ export const HomePage = (): JSX.Element => {
         .on('change', onIdeaChangeCB)
         .on('error', function (err) {
           console.error(err);
-          window.OpNotification.warning({
+          window.OpNotification.warn({
             subject: 'Idea live change registration failed',
             body: err.message,
           });

diff --git a/src/pages/IdeaDetailPage/IdeaDetailPage.tsx b/src/pages/IdeaDetailPage/IdeaDetailPage.tsx
@@ -59,7 +59,7 @@ export const IdeaDetailPage = (): JSX.Element => {
         })
         .on('error', function (err) {
           console.error(err);
-          window.OpNotification.warning({
+          window.OpNotification.warn({
             subject: 'Comment live change registration failed',
             body: err.message,
           });
@@ -99,6 +99,13 @@ export const IdeaDetailPage = (): JSX.Element => {
     [idea]
   );
 
+  const onShareButtonClick = () => {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(window.location.href);
+      window.OpNotification.success({ subject: 'Idea link copied to clipboard' });
+    }
+  };
+
   if (isIdeaLoading) {
     return (
       <Bullseye className="pf-u-p-xl">
@@ -183,7 +190,12 @@ export const IdeaDetailPage = (): JSX.Element => {
               hasVoted={idea.hasVoted}
               onVoteClick={() => handleVoteClick(idea.hasVoted, idea._id)}
             >
-              <VoteCard.Button variant="link" icon={<ShareIcon />} style={{ color: 'unset' }}>
+              <VoteCard.Button
+                variant="link"
+                icon={<ShareIcon />}
+                style={{ color: 'unset' }}
+                onClick={onShareButtonClick}
+              >
                 Share
               </VoteCard.Button>
             </VoteCard>

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -1,13 +1,26 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 declare module 'pouchdb-debug';
 
+declare namespace JSX {
+  interface IntrinsicElements {
+    'opc-header': any;
+    'opc-footer': any;
+    'opc-menu-drawer': any;
+    'opc-notification-drawer': any;
+    'opc-feedback': any;
+    'opc-provider': any;
+    'opc-nav': any;
+  }
+}
+
 interface Window {
   OpAuthHelper: OpAuthHelper;
   OpNotification: OpNotification;
 }
 
 interface OpNotification {
   success: (arg0: NotificationArg) => void;
-  warning: (arg0: NotificationArg) => void;
+  warn: (arg0: NotificationArg) => void;
   danger: (arg0: NotificationArg) => void;
 }