fix storybook for dashboard

mozilla · Jul 25, 2023 · 4d9e3c2 · 4d9e3c2
1 parent 78a953a
commit 4d9e3c2
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 27 deletions.
diff --git a/locales/en/data-classes.ftl b/locales/en/data-classes.ftl
@@ -152,4 +152,5 @@ website-activity = Website activity
 work-habits = Work habits
 years-of-birth = Years of birth
 years-of-professional-experience = Years of professional experience
-other-data-class = Other
+other-data-class = Other
+full-names = Full name
diff --git a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/Dashboard.stories.tsx b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/Dashboard.stories.tsx
@@ -138,6 +138,14 @@ const breachItemArraySample: HibpLikeDbBreach[] = [
   BreachMockItem4,
 ];
 
+const dashboardSummary: Record<string, number>[] = [
+  { "physical-addresses": 90 },
+  { "family-members-names": 29 },
+  { "full-names": 98 },
+  { "phone-numbers": 8 },
+  { "other-data-class": 80 },
+];
+
 export const Dashboard: Story = {
   render: () => (
     <Shell l10n={getEnL10nSync()} session={null}>
@@ -163,6 +171,7 @@ export const Dashboard: Story = {
         userScannedResults={scannedResultsArraySample}
         locale={"en"}
         isUserScannedResults={true}
+        chartData={dashboardSummary}
       />
     </Shell>
   ),

diff --git a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/DashboardTopBanner.tsx
@@ -17,32 +17,16 @@ export type DashboardTopBannerProps = {
     | "ResumeBreachResolutionContent"
     | "YourDataIsProtected";
   chart: ReactElement;
-  chartData: DashboardSummary;
+  chartData: Record<string, number>[];
 };
 
 export const DashboardTopBanner = (props: DashboardTopBannerProps) => {
   const l10n = useL10n();
 
-  // console.log(props.chartData.sanitizedExposures);
-
-  const chartData: [string, number][] = props.chartData.sanitizedExposures.map(
-    (obj) => {
-      const [key, value] = Object.entries(obj)[0];
-      return [l10n.getString(key), value];
-    }
-  );
-
-  // console.log(arrayOfTuples);
-
-  // console.log(transformedData);
-  // all values are mocked for now
-  // const chartData: Array<[string, number]> = [
-  //   ["Home address", 11],
-  //   ["Family members", 12],
-  //   ["Contact Info", 1],
-  //   ["Full name", 5],
-  //   ["Other", 2],
-  // ];
+  const chartData: [string, number][] = props.chartData.map((obj) => {
+    const [key, value] = Object.entries(obj)[0];
+    return [l10n.getString(key), value];
+  });
 
   const contentData = {
     LetsFixDataContent: {

diff --git a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/View.tsx b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/View.tsx
@@ -23,20 +23,18 @@ import { useState } from "react";
 import { ScanResult } from "../../../../../functions/server/onerep";
 import { HibpLikeDbBreach } from "../../../../../../utils/hibp";
 import { BundledVerifiedEmails } from "../../../../../../utils/breaches";
-import { DashboardSummary } from "../../../../../functions/server/dashboard";
 
 export type Props = {
   user: Session["user"];
   userBreaches: UserBreaches;
   isUserScannedResults: boolean;
   userScannedResults: ScanResult[];
-  chartData: DashboardSummary;
+  chartData: Record<string, number>[];
   locale: string;
 };
 
 export const View = (props: Props) => {
   const l10n = useL10n();
-
   const totalBreaches = props.userBreaches.breachesData.verifiedEmails.reduce(
     (count, emailData) => count + emailData.breaches.length,
     0

diff --git a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/page.tsx b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/page.tsx
@@ -36,7 +36,6 @@ export default async function DashboardPage() {
   const scanResultItems = scanResult?.onerep_scan_results?.data ?? [];
   const breaches = await getUserBreaches({ user: session.user });
   const summary = dashboardSummary(scanResultItems, breaches);
-  console.debug({ summary });
   const locale = getLocale();
 
   return (
@@ -45,7 +44,7 @@ export default async function DashboardPage() {
       userScannedResults={scanResultItems}
       userBreaches={breaches}
       locale={locale}
-      chartData={summary}
+      chartData={summary.sanitizedExposures}
       isUserScannedResults={!!scanResultItems}
     />
   );