Enhancement: Add context provider to sidebar

packages/cli-dashboard/src/components/siteMapReport/index.tsx

@@ -17,32 +17,22 @@
 /**
  * External dependencies.
  */
-import React, { useEffect, useMemo, useState } from 'react';
-import { Resizable } from 're-resizable';
+import React, { useState } from 'react';
 import {
-  File,
-  FileWhite,
-  Sidebar,
-  useSidebar,
+  SidebarProvider,
   type SidebarItems,
 } from '@ps-analysis-tool/design-system';
 import {
-  type TabFrames,
   type TechnologyData,
-  UNKNOWN_FRAME_KEY,
   type CookieFrameStorageType,
   type CompleteJson,
 } from '@ps-analysis-tool/common';
 
 /**
  * Internal dependencies.
  */
-import SiteReport from '../siteReport';
-import SiteMapCookiesWithIssues from './sitemapCookiesWithIssues';
-import CookiesLandingContainer from '../siteReport/tabs/cookies/cookiesLandingContainer';
-import reshapeCookies from '../utils/reshapeCookies';
 import sidebarData from './sidebarData';
-import { generateSiteMapReportandDownload } from '../utils/reportDownloader';
+import Layout from './layout';
 
 interface SiteMapReportProps {
   landingPageCookies: CookieFrameStorageType;
@@ -57,168 +47,19 @@ const SiteMapReport = ({
   landingPageCookies,
   completeJson,
 }: SiteMapReportProps) => {
-  const [sites, setSites] = useState<string[]>([]);
   const [data, setData] = useState<SidebarItems>(sidebarData);
 
-  useEffect(() => {
-    const _sites = new Set<string>();
-    Object.values(cookies).forEach((cookieData) => {
-      Object.values(cookieData).forEach((cookie) => {
-        _sites.add(cookie.pageUrl || '');
-      });
-    });
-
-    setSites(Array.from(_sites));
-  }, [cookies]);
-
-  const frames = useMemo(() => {
-    return Object.keys(cookies).reduce((acc, frame) => {
-      if (frame?.includes('http') || frame === UNKNOWN_FRAME_KEY) {
-        acc[frame] = {} as TabFrames[string];
-      }
-      return acc;
-    }, {} as TabFrames);
-  }, [cookies]);
-
-  const reshapedCookies = useMemo(
-    () => reshapeCookies(landingPageCookies),
-    [landingPageCookies]
-  );
-
-  const cookiesWithIssues = useMemo(
-    () =>
-      Object.fromEntries(
-        Object.entries(reshapedCookies).filter(([, cookie]) => cookie.isBlocked)
-      ),
-    [reshapedCookies]
-  );
-
-  const {
-    activePanel,
-    selectedItemKey,
-    sidebarItems,
-    isSidebarFocused,
-    setIsSidebarFocused,
-    updateSelectedItemKey,
-    onKeyNavigation,
-    toggleDropdown,
-    isKeyAncestor,
-    isKeySelected,
-  } = useSidebar({ data });
-
-  const siteFilteredCookies = useMemo(() => {
-    return Object.entries(cookies).reduce(
-      (acc: CookieFrameStorageType, [frame, _cookies]) => {
-        acc[frame] = Object.fromEntries(
-          Object.entries(_cookies).filter(([, cookie]) =>
-            isKeySelected(cookie.pageUrl || '')
-          )
-        );
-
-        return acc;
-      },
-      {}
-    );
-  }, [cookies, isKeySelected]);
-
-  const siteFilteredTechnologies = useMemo(() => {
-    return technologies.filter((technology) =>
-      isKeySelected(technology.pageUrl || '')
-    );
-  }, [isKeySelected, technologies]);
-
-  useEffect(() => {
-    setData((prev) => {
-      const _data = { ...prev };
-
-      _data['sitemap-landing-page'].panel = (
-        <CookiesLandingContainer
-          tabCookies={reshapedCookies}
-          tabFrames={frames}
-          cookiesWithIssues={cookiesWithIssues}
-          downloadReport={() => {
-            if (!Array.isArray(completeJson)) {
-              return;
-            }
-
-            generateSiteMapReportandDownload(completeJson);
-          }}
-        />
-      );
-
-      _data['sitemap-landing-page'].children = sites.reduce(
-        (acc: SidebarItems, site: string) => {
-          acc[site] = {
-            title: site,
-            panel: (
-              <SiteReport
-                cookies={siteFilteredCookies}
-                technologies={siteFilteredTechnologies}
-                completeJson={completeJson}
-                selectedSite={site}
-              />
-            ),
-            children: {},
-            icon: <File />,
-            selectedIcon: <FileWhite />,
-          };
-
-          return acc;
-        },
-        {}
-      );
-
-      _data['sitemap-cookies-with-issues'].panel = (
-        <SiteMapCookiesWithIssues
-          cookies={Object.values(reshapedCookies).filter(
-            (cookie) => cookie.isBlocked
-          )}
-        />
-      );
-
-      return _data;
-    });
-  }, [
-    cookiesWithIssues,
-    completeJson,
-    frames,
-    isKeySelected,
-    reshapedCookies,
-    siteFilteredCookies,
-    siteFilteredTechnologies,
-    sites,
-  ]);
-
-  useEffect(() => {
-    if (selectedItemKey === null && Object.keys(data).length > 0) {
-      updateSelectedItemKey('sitemap-landing-page');
-    }
-  }, [data, isKeySelected, selectedItemKey, updateSelectedItemKey]);
-
   return (
-    <div className="w-full h-screen flex">
-      <Resizable
-        defaultSize={{ width: '200px', height: '100%' }}
-        minWidth={'150px'}
-        maxWidth={'50%'}
-        enable={{
-          right: true,
-        }}
-      >
-        <Sidebar
-          selectedItemKey={selectedItemKey}
-          sidebarItems={sidebarItems}
-          isSidebarFocused={isSidebarFocused}
-          setIsSidebarFocused={setIsSidebarFocused}
-          onKeyNavigation={onKeyNavigation}
-          updateSelectedItemKey={updateSelectedItemKey}
-          toggleDropdown={toggleDropdown}
-          isKeyAncestor={isKeyAncestor}
-          isKeySelected={isKeySelected}
-        />
-      </Resizable>
-      <div className="flex-1 max-h-screen overflow-auto">{activePanel}</div>
-    </div>
+    <SidebarProvider data={data}>
+      <Layout
+        landingPageCookies={landingPageCookies}
+        cookies={cookies}
+        technologies={technologies}
+        completeJson={completeJson}
+        sidebarData={data}
+        setSidebarData={setData}
+      />
+    </SidebarProvider>
   );
 };