Merge pull request #642 from bluehost/update/performance-module-compo…

…nents

Performance Module Components

composer.json

@@ -56,18 +56,18 @@
   },
   "require": {
     "newfold-labs/wp-module-business-reviews": "^1.1.1",
-    "newfold-labs/wp-module-coming-soon": "^1.1.8",
+    "newfold-labs/wp-module-coming-soon": "^1.1.9",
     "newfold-labs/wp-module-ctb": "^1.0.2",
     "newfold-labs/wp-module-customer-bluehost": "^1.6.0",
     "newfold-labs/wp-module-data": "^2.4.3",
-    "newfold-labs/wp-module-ecommerce": "^1.2.0",
+    "newfold-labs/wp-module-ecommerce": "^1.2.2",
     "newfold-labs/wp-module-help-center": "^1.0.16",
     "newfold-labs/wp-module-loader": "^1.0.10",
     "newfold-labs/wp-module-marketplace": "^2.0.1",
     "newfold-labs/wp-module-notifications": "^1.1.4",
     "newfold-labs/wp-module-onboarding": "^1.10.3",
     "newfold-labs/wp-module-patterns": "^0.1.4",
-    "newfold-labs/wp-module-performance": "^1.1.1",
+    "newfold-labs/wp-module-performance": "^1.2.0",
     "newfold-labs/wp-module-runtime": "^1.0.2",
     "newfold-labs/wp-module-secure-passwords": "^1.1",
     "newfold-labs/wp-module-sso": "^1.0.4",

package.json

@@ -24,7 +24,7 @@
     },
     "dependencies": {
         "@heroicons/react": "^2.0.18",
-        "@newfold-labs/wp-module-ecommerce": "^1.2.0",
+        "@newfold-labs/wp-module-ecommerce": "^1.2.2",
         "@newfold-labs/wp-module-runtime": "^1.0.2",
         "@newfold/ui-component-library": "^1.0.0",
         "@reduxjs/toolkit": "^1.9.5",

src/app/pages/performance/index.js

@@ -1,8 +1,48 @@
-import Performance from './performance';
+import AppStore from '../../data/store';
 import { Page } from '../../components/page';
-import { SectionContainer, SectionHeader, SectionContent } from '../../components/section';
+import { useState, useEffect, useContext, Fragment } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+import classnames from 'classnames';
+import { useUpdateEffect } from 'react-use';
+import { NewfoldRuntime } from "@newfold-labs/wp-module-runtime";
+import { SectionContainer, SectionHeader, SectionContent, SectionSettings } from '../../components/section';
+import { useNotification } from '../../components/notifications/feed';
+import { 
+    bluehostSettingsApiFetch as newfoldSettingsApiFetch, 
+    bluehostPurgeCacheApiFetch as newfoldPurgeCacheApiFetch
+} from '../../util/helpers';
+
+import { default as NewfoldPerformance } from '../../../../vendor/newfold-labs/wp-module-performance/components/performance/';
 
 const PerformancePage = () => {
+
+    // constants to pass to module
+    const moduleConstants = {};
+
+    // methods to pass to module
+    const moduleMethods = {
+        apiFetch,
+        classnames,
+        useState,
+        useEffect,
+        useContext,
+        NewfoldRuntime,
+        useNotification,
+        newfoldSettingsApiFetch,
+        newfoldPurgeCacheApiFetch,
+        useUpdateEffect,
+        AppStore,
+    };
+
+	const moduleComponents = {
+		Page,
+        SectionHeader,
+		SectionContent,
+        SectionSettings,
+        SectionContainer,
+        Fragment,
+	}
+
 	return (
 		<Page title="Performance" className={"wppbh-app-settings-page"}>
 			<SectionContainer className={'wppbh-app-settings-container'}>
@@ -11,11 +51,11 @@ const PerformancePage = () => {
                     subTitle={__('This is where you can manage cache settings for your website.', 'wp-plugin-bluehost')}
                     className={'wppbh-app-settings-header'}
                 />
-
-				<SectionContent className={'wppbh-app-settings-performance'}>
-                    <Performance />
-                </SectionContent>
-
+                <NewfoldPerformance
+                    constants={moduleConstants}
+                    methods={moduleMethods}
+                    Components={moduleComponents}
+                />
             </SectionContainer>
 		</Page>
 	);