feat: refactor to use context

refactor comment clear property
Yoast · Sep 19, 2024 · 3ed3932 · 3ed3932
1 parent 1d3f78d
commit 3ed3932
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 62 deletions.
diff --git a/.../js/src/dashboard/components/box-title.js → ...s/src/dashboard/components/alert-title.js b/.../js/src/dashboard/components/box-title.js → ...s/src/dashboard/components/alert-title.js
@@ -1,37 +1,32 @@
-import { Title } from "@yoast/ui-library";
+import { useContext } from "@wordpress/element";
 import PropTypes from "prop-types";
 import classNames from "classnames";
+import { Title } from "@yoast/ui-library";
+import { AlertsContext } from "../routes/alert-center";
 
 /**
  *
  * @param {string} title The title of the card.
  * @param {number} counts The count of the card.
- * @param {string} Icon The icon of the card.
- * @param {string} iconColor The color of the icon.
  *
  * @returns {JSX.Element} The card title component.
  */
-export const BoxTitle = ( {
-	title = "",
+export const AlertTitle = ( {
+	title,
 	counts = 0,
-	Icon = "",
-	iconColor = "red",
 } ) => {
-	const colors = {
-		red: "yst-text-red-500",
-		blue: "yst-text-blue-500",
-	};
+	const context = useContext( AlertsContext );
+	const Icon = context.Icon;
+
 	return (
 		<div className="yst-flex yst-justify-between yst-gap-2 yst-items-center">
-			<Icon className={ classNames( "yst-w-6 yst-h-6", colors[ iconColor ] ) } />
-			<Title className="yst-grow" as="h3" size="2">{ title } { counts > 0 && `(${counts})` } </Title>
+			<Icon className={ classNames( "yst-w-6 yst-h-6", context.iconClass ) } />
+			<Title className="yst-grow" as="h3" size="2">{ title } { counts > 0 && `(${counts})` }</Title>
 		</div>
 	);
 };
 
-BoxTitle.propTypes = {
+AlertTitle.propTypes = {
 	title: PropTypes.string,
 	counts: PropTypes.number,
-	Icon: PropTypes.elementType,
-	iconColor: PropTypes.string,
 };
diff --git a/packages/js/src/dashboard/components/list.js → ...s/src/dashboard/components/alerts-list.js b/packages/js/src/dashboard/components/list.js → ...s/src/dashboard/components/alerts-list.js
@@ -1,36 +1,35 @@
+import { useContext } from "@wordpress/element";
 import PropTypes from "prop-types";
 import { Button } from "@yoast/ui-library";
 import { EyeOffIcon, EyeIcon } from "@heroicons/react/outline";
 import classNames from "classnames";
+import { AlertsContext } from "../routes/alert-center";
 
 /**
  *
- * @param {string} bulletColor The color of the bullet.
  * @param {Array} items The list of items.
  * @param {boolean} hidden Whether the items are hidden or not.
  *
  * @returns {JSX.Element} The list component.
  */
-export const List = ( { bulletColor = "red", items = [], hidden = false } ) => {
-	const colors = {
-		red: "yst-fill-red-500",
-		blue: "yst-fill-blue-500",
-	};
+export const AlertsList = ( { items = [], hidden = false } ) => {
+	const context = useContext( AlertsContext );
+
 	const Eye = hidden ? EyeIcon : EyeOffIcon;
 	return (
 		<ul className="yst-mt-2">
 			{ items.map( ( item, index ) => (
 				<li key={ index } className="yst-border-b yst-border-slate-200 last:yst-border-b-0">
 					<div className="yst-flex yst-justify-between yst-gap-5 yst-items-start yst-py-6">
 						<div className={ classNames( "yst-mt-1",  hidden && "yst-opacity-50" ) }>
-							<svg width="11" height="11" className={ colors[ bulletColor ] }>
+							<svg width="11" height="11" className={ context.bulletClass }>
 								<circle cx="5.5" cy="5.5" r="5.5" />
 							</svg>
 						</div>
 						<p
 							className={ classNames(
-								"yst-text-sm yst-text-slate-600 yst-grow"
-								, hidden && "yst-opacity-50" ) }
+								"yst-text-sm yst-text-slate-600 yst-grow",
+								hidden && "yst-opacity-50" ) }
 						>{ item.message }</p>
 						<Button variant="secondary" size="small" className="yst-self-center yst-h-8">
 							<Eye className="yst-w-4 yst-h-4 yst-text-neutral-700" />
@@ -42,8 +41,7 @@ export const List = ( { bulletColor = "red", items = [], hidden = false } ) => {
 	);
 };
 
-List.propTypes = {
-	bulletColor: PropTypes.string,
+AlertsList.propTypes = {
 	items: PropTypes.arrayOf( PropTypes.shape( {
 		message: PropTypes.string,
 	} ) ),

diff --git a/...d/components/hidden-alerts-collapsible.js → ...s/src/dashboard/components/collapsible.js b/...d/components/hidden-alerts-collapsible.js → ...s/src/dashboard/components/collapsible.js
@@ -1,24 +1,24 @@
-
 import PropTypes from "prop-types";
 import { Disclosure } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/outline";
+import classNames from "classnames";
 
 /**
  * @param {string} label The label of the collapsible.
  * @param {ReactNode} children The children of the collapsible.
  * @returns {JSX.Element} The hidden alerts collapsible component.
  */
-export const HiddenAlertsCollapsible = ( { label, children } ) => {
+export const Collapsible = ( { label, children } ) => {
 	return (
 		<Disclosure>
 			{ ( { open } ) => (
-				<div className="yst-p-4 yst-shadow-sm yst-border-slate-200 yst-rounded-md yst-border">
-					<Disclosure.Button className="yst-w-full yst-flex yst-justify-between">
-						<div>{ label }</div>
+				<div className="yst-px-4 yst-shadow-sm yst-border-slate-200 yst-rounded-md yst-border">
+					<Disclosure.Button className="yst-w-full yst-flex yst-justify-between yst-py-4 yst-items-center">
+						<div className="yst-font-medium">{ label }</div>
 						<ChevronDownIcon
-							className={ `${
+							className={ classNames( "yst-h-5 yst-w-5",
 								open ? "yst-rotate-180 yst-transform" : ""
-							} yst-h-5 yst-w-5` }
+							) }
 						/>
 					</Disclosure.Button>
 					<Disclosure.Panel>
@@ -30,7 +30,7 @@ export const HiddenAlertsCollapsible = ( { label, children } ) => {
 	);
 };
 
-HiddenAlertsCollapsible.propTypes = {
+Collapsible.propTypes = {
 	label: PropTypes.string,
 	children: PropTypes.node,
 };

diff --git a/packages/js/src/dashboard/components/index.js b/packages/js/src/dashboard/components/index.js
@@ -1,6 +1,6 @@
 export { default as RouteLayout } from "./route-layout";
 export { Notifications } from "./notifications";
 export { Problems } from "./problems";
-export { List } from "./list";
-export { BoxTitle } from "./box-title";
-export { HiddenAlertsCollapsible } from "./hidden-alerts-collapsible";
+export { AlertsList } from "./alerts-list";
+export { AlertTitle } from "./alert-title";
+export { Collapsible } from "./collapsible";
diff --git a/packages/js/src/dashboard/components/notifications.js b/packages/js/src/dashboard/components/notifications.js
@@ -1,15 +1,16 @@
 import { __, _n } from "@wordpress/i18n";
 import { BellIcon } from "@heroicons/react/outline";
 import { Paper } from "@yoast/ui-library";
-import { List } from "./list";
-import { BoxTitle } from "./box-title";
-import { HiddenAlertsCollapsible } from "./hidden-alerts-collapsible";
+import { AlertsList } from "./alerts-list";
+import { AlertTitle } from "./alert-title";
+import { Collapsible } from "./collapsible";
+import { AlertsContext } from "../routes/alert-center";
 
 /**
  * @returns {JSX.Element} The notifications component.
  */
 export const Notifications = () => {
-	const notificationsList = [
+	const notificationsAlertsList = [
 		{
 			message: __( "Your site is not connected to your MyYoast account. Connect your site to get access to all the features.", "wordpress-seo" ),
 		},
@@ -18,23 +19,31 @@ export const Notifications = () => {
 		},
 	];
 
-	const hiddenNotificatins = 1;
+	const hiddenNotifications = 1;
 
 	const hiddenNotificationLabel = _n(
-		"hidden notification.",
-		"hidden notifications.",
-		hiddenNotificatins,
+		"hidden notification",
+		"hidden notifications",
+		hiddenNotifications,
 		"wordpress-seo"
 	);
 
+	const notificationsTheme = {
+		Icon: BellIcon,
+		bulletClass: "yst-fill-blue-500",
+		iconClass: "yst-text-blue-500",
+	};
+
 	return (
 		<Paper className="yst-p-8 yst-flex-1 yst-flex-col">
-			<BoxTitle title={ __( "Notifications", "wordpress-seo" ) } counts={ 2 } Icon={ BellIcon } iconColor="blue" />
-			<List items={ notificationsList } bulletColor="blue" hidden={ false } />
+			<AlertsContext.Provider value={ notificationsTheme }>
+				<AlertTitle counts={ 2 } title={ __( "Notifications", "wordpress-seo" ) } />
+				<AlertsList items={ notificationsAlertsList } hidden={ false } />
 
-			<HiddenAlertsCollapsible label={ `${ hiddenNotificatins } ${ hiddenNotificationLabel }` }>
-				<List items={ notificationsList } bulletColor="blue" hidden={ true } />
-			</HiddenAlertsCollapsible>
+				<Collapsible label={ `${ hiddenNotifications } ${ hiddenNotificationLabel }` }>
+					<AlertsList items={ notificationsAlertsList } hidden={ true } />
+				</Collapsible>
+			</AlertsContext.Provider>
 		</Paper>
 	);
 };
diff --git a/packages/js/src/dashboard/components/problems.js b/packages/js/src/dashboard/components/problems.js
@@ -1,9 +1,10 @@
 import { __, _n } from "@wordpress/i18n";
 import { ExclamationCircleIcon } from "@heroicons/react/outline";
 import { Paper } from "@yoast/ui-library";
-import { List } from "./list";
-import { BoxTitle } from "./box-title";
-import { HiddenAlertsCollapsible } from "./hidden-alerts-collapsible";
+import { AlertsList } from "./alerts-list";
+import { AlertTitle } from "./alert-title";
+import { Collapsible } from "./collapsible";
+import { AlertsContext } from "../routes/alert-center";
 
 /**
  * @returns {JSX.Element} The problems component.
@@ -21,21 +22,29 @@ export const Problems = () => {
 	const hiddenProblems = 1;
 
 	const hiddenProblemsLabel = _n(
-		"hidden problem.",
-		"hidden problems.",
+		"hidden problem",
+		"hidden problems",
 		hiddenProblems,
 		"wordpress-seo"
 	);
 
+	const problemsTheme = {
+		Icon: ExclamationCircleIcon,
+		bulletClass: "yst-fill-red-500",
+		iconClass: "yst-text-red-500",
+	};
+
 	return (
 		<Paper className="yst-p-8 yst-flex-1 yst-flex-col">
-			<BoxTitle title={ __( "Problems", "wordpress-seo" ) } counts={ 2 } Icon={ ExclamationCircleIcon } />
-			<p className="yst-mt-2 yst-text-sm">{ __( "We have detected the following issues that affect the SEO of your site.", "wordpress-seo" ) }</p>
-			<List items={ problemsList } />
+			<AlertsContext.Provider value={ problemsTheme }>
+				<AlertTitle title={ __( "Problems", "wordpress-seo" ) } counts={ 2 } />
+				<p className="yst-mt-2 yst-text-sm">{ __( "We have detected the following issues that affect the SEO of your site.", "wordpress-seo" ) }</p>
+				<AlertsList items={ problemsList } />
 
-			<HiddenAlertsCollapsible label={ `${ hiddenProblems } ${ hiddenProblemsLabel }` }>
-				<List items={ problemsList } hidden={ true } />
-			</HiddenAlertsCollapsible>
+				<Collapsible label={ `${ hiddenProblems } ${ hiddenProblemsLabel }` }>
+					<AlertsList items={ problemsList } hidden={ true } />
+				</Collapsible>
+			</AlertsContext.Provider>
 		</Paper>
 	);
 };
diff --git a/packages/js/src/dashboard/routes/alert-center.js b/packages/js/src/dashboard/routes/alert-center.js
@@ -1,6 +1,12 @@
 import { __ } from "@wordpress/i18n";
 import { Paper, Title } from "@yoast/ui-library";
 import { Notifications, Problems } from "../components";
+import { createContext } from "@wordpress/element";
+
+/**
+ * The context for the alerts.
+ */
+export const AlertsContext = createContext();
 
 /**
  * @returns {JSX.Element} The dashboard content placeholder.