store rating with other logo information

Automattic · Dec 20, 2024 · 1950287 · 1950287
1 parent e5dd2f3
commit 1950287
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 11 deletions.
diff --git a/projects/js-packages/ai-client/src/components/ai-feedback/index.tsx b/projects/js-packages/ai-client/src/components/ai-feedback/index.tsx
@@ -6,7 +6,7 @@ import {
 	getJetpackExtensionAvailability,
 } from '@automattic/jetpack-shared-extension-utils';
 import { Button, Tooltip } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { thumbsUp, thumbsDown } from '@wordpress/icons';
 import clsx from 'clsx';
@@ -24,6 +24,8 @@ type AiFeedbackThumbsProps = {
 	iconSize?: number;
 	ratedItem?: string;
 	feature?: string;
+	savedRatings?: Record< string, string >;
+	onRate?: ( rating: string ) => void;
 };
 
 /**
@@ -47,14 +49,20 @@ export default function AiFeedbackThumbs( {
 	iconSize = 24,
 	ratedItem = '',
 	feature = '',
+	savedRatings = {},
+	onRate,
 }: AiFeedbackThumbsProps ): React.ReactElement {
 	if ( ! getFeatureAvailability( 'ai-response-feedback' ) ) {
 		return null;
 	}
 
-	const [ itemsRated, setItemsRated ] = useState( {} );
+	const [ itemsRated, setItemsRated ] = useState( savedRatings );
 	const { tracks } = useAnalytics();
 
+	useEffect( () => {
+		setItemsRated( savedRatings );
+	}, [ savedRatings ] );
+
 	const checkThumb = ( thumbValue: string ) => {
 		if ( ! itemsRated[ ratedItem ] ) {
 			return false;
@@ -72,6 +80,8 @@ export default function AiFeedbackThumbs( {
 				[ ratedItem ]: aiRating,
 			} );
 
+			onRate?.( aiRating );
+
 			tracks.recordEvent( 'jetpack_ai_feedback', {
 				type: feature,
 				rating: aiRating,

diff --git a/projects/js-packages/ai-client/src/logo-generator/components/logo-presenter.tsx b/projects/js-packages/ai-client/src/logo-generator/components/logo-presenter.tsx
@@ -153,14 +153,25 @@ const LogoEmpty: React.FC = () => {
 	);
 };
 
-const RateLogo: React.FC< { disabled: boolean; ratedItem: string } > = ( {
-	disabled,
-	ratedItem,
-} ) => {
+const RateLogo: React.FC< {
+	disabled: boolean;
+	ratedItem: string;
+	onRate: ( rating: string ) => void;
+} > = ( { disabled, ratedItem, onRate } ) => {
+	const { logos } = useLogoGenerator();
+	const savedRatings = logos.reduce( ( acc, logo ) => {
+		acc[ logo.url ] = logo.rating;
+		return acc;
+	}, {} );
+
 	return (
-		<>
-			<AiFeedbackThumbs disabled={ disabled } ratedItem={ ratedItem } feature="logo-generator" />
-		</>
+		<AiFeedbackThumbs
+			disabled={ disabled }
+			ratedItem={ ratedItem }
+			feature="logo-generator"
+			savedRatings={ savedRatings }
+			onRate={ onRate }
+		/>
 	);
 };
 
@@ -169,6 +180,17 @@ const LogoReady: React.FC< {
 	logo: Logo;
 	onApplyLogo: ( mediaId: number ) => void;
 } > = ( { siteId, logo, onApplyLogo } ) => {
+	const handleRateLogo = ( rating: string ) => {
+		// Update localStorage
+		updateLogo( {
+			siteId,
+			url: logo.url,
+			newUrl: logo.url,
+			mediaId: logo.mediaId,
+			rating,
+		} );
+	};
+
 	return (
 		<>
 			<img
@@ -183,7 +205,7 @@ const LogoReady: React.FC< {
 				<div className="jetpack-ai-logo-generator-modal-presenter__actions">
 					<SaveInLibraryButton siteId={ siteId } />
 					<UseOnSiteButton onApplyLogo={ onApplyLogo } />
-					<RateLogo ratedItem={ logo.url } disabled={ false } />
+					<RateLogo ratedItem={ logo.url } disabled={ false } onRate={ handleRateLogo } />
 				</div>
 			</div>
 		</>

diff --git a/projects/js-packages/ai-client/src/logo-generator/lib/logo-storage.ts b/projects/js-packages/ai-client/src/logo-generator/lib/logo-storage.ts
@@ -45,16 +45,18 @@ export function stashLogo( { siteId, url, description, mediaId }: SaveToStorageP
  * @param {UpdateInStorageProps.url}     updateInStorageProps.url     - The URL of the logo to update
  * @param {UpdateInStorageProps.newUrl}  updateInStorageProps.newUrl  - The new URL of the logo
  * @param {UpdateInStorageProps.mediaId} updateInStorageProps.mediaId - The new media ID of the logo
+ * @param {UpdateInStorageProps.rating}  updateInStorageProps.rating  - The new rating of the logo
  * @return {Logo} The logo that was updated
  */
-export function updateLogo( { siteId, url, newUrl, mediaId }: UpdateInStorageProps ) {
+export function updateLogo( { siteId, url, newUrl, mediaId, rating }: UpdateInStorageProps ) {
 	const storedContent = getSiteLogoHistory( siteId );
 
 	const index = storedContent.findIndex( logo => logo.url === url );
 
 	if ( index > -1 ) {
 		storedContent[ index ].url = newUrl;
 		storedContent[ index ].mediaId = mediaId;
+		storedContent[ index ].rating = rating;
 	}
 
 	localStorage.setItem(
@@ -96,6 +98,7 @@ export function getSiteLogoHistory( siteId: string ) {
 			url: logo.url,
 			description: logo.description,
 			mediaId: logo.mediaId,
+			rating: logo.rating,
 		} ) );
 
 	return storedContent;

diff --git a/projects/js-packages/ai-client/src/logo-generator/store/types.ts b/projects/js-packages/ai-client/src/logo-generator/store/types.ts
@@ -140,6 +140,7 @@ export type Logo = {
 	url: string;
 	description: string;
 	mediaId?: number;
+	rating?: string;
 };
 
 export type RequestError = string | Error | null;

diff --git a/projects/js-packages/ai-client/src/logo-generator/types.ts b/projects/js-packages/ai-client/src/logo-generator/types.ts
@@ -92,6 +92,7 @@ export type UpdateInStorageProps = {
 	url: Logo[ 'url' ];
 	newUrl: Logo[ 'url' ];
 	mediaId: Logo[ 'mediaId' ];
+	rating?: Logo[ 'rating' ];
 };
 
 export type RemoveFromStorageProps = {