better separation

Author: shakyShane

special-pages/pages/new-tab/app/entry-points/privacyStats.js

@@ -1,6 +1,6 @@
 import { h } from 'preact';
-import { PrivacyStatsCustomized } from '../privacy-stats/components/PrivacyStats.js';
 import { Centered } from '../components/Layout.js';
+import { PrivacyStatsCustomized } from '../privacy-stats/components/PrivacyStatsCustomized.js';
 
 export function factory() {
     return (

special-pages/pages/new-tab/app/mock-transport.js

@@ -1,6 +1,6 @@
 import { TestTransportConfig } from '@duckduckgo/messaging';
 
-import { stats } from './privacy-stats/mocks/stats.js';
+import { privacyStatsMocks } from './privacy-stats/mocks/privacy-stats.mocks.js';
 import { rmfDataExamples } from './remote-messaging-framework/mocks/rmf.data.js';
 import { favorites, gen } from './favorites/mocks/favorites.data.js';
 import { updateNotificationExamples } from './update-notification/mocks/update-notification.data.js';
@@ -315,8 +315,8 @@ export function mockTransport() {
                         const int = setInterval(() => {
                             if (inc === max) return clearInterval(int);
                             const next = {
-                                ...stats.willUpdate,
-                                trackerCompanies: stats.willUpdate.trackerCompanies.map((x, index) => {
+                                ...privacyStatsMocks.willUpdate,
+                                trackerCompanies: privacyStatsMocks.willUpdate.trackerCompanies.map((x, index) => {
                                     return {
                                         ...x,
                                         count: x.count + inc * index,
@@ -330,7 +330,7 @@ export function mockTransport() {
                             clearInterval(int);
                         };
                     } else if (statsVariant === 'growing') {
-                        const list = stats.many.trackerCompanies;
+                        const list = privacyStatsMocks.many.trackerCompanies;
                         let index = 0;
                         const max = Math.min(updateMaxCount, list.length);
                         const int = setInterval(() => {
@@ -380,10 +380,10 @@ export function mockTransport() {
             switch (msg.method) {
                 case 'stats_getData': {
                     const statsVariant = url.searchParams.get('stats');
-                    if (statsVariant && statsVariant in stats) {
-                        return Promise.resolve(stats[statsVariant]);
+                    if (statsVariant && statsVariant in privacyStatsMocks) {
+                        return Promise.resolve(privacyStatsMocks[statsVariant]);
                     }
-                    return Promise.resolve(stats.few);
+                    return Promise.resolve(privacyStatsMocks.few);
                 }
                 case 'stats_getConfig': {
                     /** @type {StatsConfig} */

special-pages/pages/new-tab/app/privacy-stats/components/BodyExpansionProvider.js

@@ -0,0 +1,55 @@
+import { createContext, h } from 'preact';
+import { useContext } from 'preact/hooks';
+import { useMemo, useState } from 'preact/hooks';
+import { useMessaging } from '../../types.js';
+
+/**
+ * These are the API methods exposed
+ */
+export const BodyExpansionApiContext = createContext({
+    showMore() {},
+    showLess() {},
+});
+
+/**
+ * This is the single value exposed
+ */
+export const BodyExpansionContext = createContext(/** @type {import('../../../types/new-tab').Expansion} */ ('collapsed'));
+
+/**
+ * Helper to access the value
+ */
+export function useBodyExpansion() {
+    return useContext(BodyExpansionContext);
+}
+
+/**
+ * Helper to access the API
+ */
+export function useBodyExpansionApi() {
+    return useContext(BodyExpansionApiContext);
+}
+
+export function BodyExpanderProvider(props) {
+    const messaging = useMessaging();
+    const [bodyExpansion, setBodyExpansion] = useState(/** @type {import('../../../types/new-tab').Expansion} */ ('collapsed'));
+
+    const bodyExpansionApi = useMemo(() => {
+        return {
+            showMore() {
+                messaging.statsShowMore();
+                setBodyExpansion('expanded');
+            },
+            showLess() {
+                messaging.statsShowLess();
+                setBodyExpansion('collapsed');
+            },
+        };
+    }, [messaging]);
+
+    return (
+        <BodyExpansionApiContext.Provider value={bodyExpansionApi}>
+            <BodyExpansionContext.Provider value={bodyExpansion}>{props.children}</BodyExpansionContext.Provider>
+        </BodyExpansionApiContext.Provider>
+    );
+}

special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.examples.js

@@ -1,7 +1,8 @@
 import { h } from 'preact';
 import { PrivacyStatsMockProvider } from '../mocks/PrivacyStatsMockProvider.js';
-import { PrivacyStatsConsumer, PrivacyStatsBody } from './PrivacyStats.js';
-import { stats } from '../mocks/stats.js';
+import { PrivacyStatsBody } from './PrivacyStats.js';
+import { privacyStatsMocks } from '../mocks/privacy-stats.mocks.js';
+import { PrivacyStatsConsumer } from './PrivacyStatsConsumer.js';
 
 /** @type {Record<string, {factory: () => import("preact").ComponentChild}>} */
 
@@ -15,28 +16,28 @@ export const privacyStatsExamples = {
     },
     'stats.many': {
         factory: () => (
-            <PrivacyStatsMockProvider ticker={true} data={stats.many}>
+            <PrivacyStatsMockProvider ticker={true} data={privacyStatsMocks.many}>
                 <PrivacyStatsConsumer />
             </PrivacyStatsMockProvider>
         ),
     },
     'stats.topAndOneOther': {
         factory: () => (
-            <PrivacyStatsMockProvider ticker={true} data={stats.topAndOneOther}>
+            <PrivacyStatsMockProvider ticker={true} data={privacyStatsMocks.topAndOneOther}>
                 <PrivacyStatsConsumer />
             </PrivacyStatsMockProvider>
         ),
     },
     'stats.onlyTop': {
         factory: () => (
-            <PrivacyStatsMockProvider ticker={true} data={stats.onlyTop}>
+            <PrivacyStatsMockProvider ticker={true} data={privacyStatsMocks.onlyTop}>
                 <PrivacyStatsConsumer />
             </PrivacyStatsMockProvider>
         ),
     },
     'stats.onlyOther': {
         factory: () => (
-            <PrivacyStatsMockProvider ticker={true} data={stats.onlyother}>
+            <PrivacyStatsMockProvider ticker={true} data={privacyStatsMocks.onlyother}>
                 <PrivacyStatsConsumer />
             </PrivacyStatsMockProvider>
         ),
@@ -50,27 +51,29 @@ export const privacyStatsExamples = {
     },
     'stats.single': {
         factory: () => (
-            <PrivacyStatsMockProvider data={stats.single}>
+            <PrivacyStatsMockProvider data={privacyStatsMocks.single}>
                 <PrivacyStatsConsumer />
             </PrivacyStatsMockProvider>
         ),
     },
     'stats.none': {
         factory: () => (
-            <PrivacyStatsMockProvider data={stats.none}>
+            <PrivacyStatsMockProvider data={privacyStatsMocks.none}>
                 <PrivacyStatsConsumer />
             </PrivacyStatsMockProvider>
         ),
     },
     'stats.norecent': {
         factory: () => (
-            <PrivacyStatsMockProvider data={stats.norecent}>
+            <PrivacyStatsMockProvider data={privacyStatsMocks.norecent}>
                 <PrivacyStatsConsumer />
             </PrivacyStatsMockProvider>
         ),
     },
     'stats.list': {
-        factory: () => <PrivacyStatsBody trackerCompanies={stats.few.trackerCompanies} id={'example-stats.list'} />,
+        factory: () => (
+            <PrivacyStatsBody trackerCompanies={privacyStatsMocks.few.trackerCompanies} id={'example-stats.list'} expansion={'expanded'} />
+        ),
     },
 };