Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AI Logo Generator: prevent multiple feature data requests #38630

Merged
merged 4 commits into from
Jul 30, 2024
Merged

AI Logo Generator: prevent multiple feature data requests #38630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c294213
Prevent feature data requests when another one is already happening
lhkowalski Jul 30, 2024
c7743b9
Support modal reloads and handle error retry with a modal reload
lhkowalski Jul 30, 2024
5ec33a4
changelog
lhkowalski Jul 30, 2024
96910d8
Changelog
lhkowalski Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ...kages/ai-client/changelog/update-ai-logo-generator-prevent-multiple-feature-data-requests
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fixed

AI Logo Generator: fix multiple feature requests error + retry handling.
23 changes: 18 additions & 5 deletions projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
import { Modal, Button } from '@wordpress/components';
import { useDispatch } from '@wordpress/data';
import { useDispatch, select } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { external, Icon } from '@wordpress/icons';
import clsx from 'clsx';
Expand Down Expand Up @@ -43,13 +43,15 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
isOpen,
onClose,
onApplyLogo,
onReload,
siteDetails,
context,
placement,
} ) => {
const { tracks } = useAnalytics();
const { recordEvent: recordTracksEvent } = tracks;
const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory } = useDispatch( STORE_NAME );
const { getIsRequestingAiAssistantFeature } = select( STORE_NAME );
const [ loadingState, setLoadingState ] = useState<
'loadingFeature' | 'analyzing' | 'generating' | null
>( null );
Expand Down Expand Up @@ -182,10 +184,13 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {

// When the site details are set, we need to fetch the feature data.
if ( ! requestedFeatureData.current ) {
requestedFeatureData.current = true;
fetchAiAssistantFeature();
const isRequestingFeature = getIsRequestingAiAssistantFeature();
if ( ! isRequestingFeature ) {
requestedFeatureData.current = true;
fetchAiAssistantFeature();
}
}
}, [ siteId, siteDetails, setSiteDetails ] );
}, [ siteId, siteDetails, setSiteDetails, getIsRequestingAiAssistantFeature ] );

// Handles modal opening logic
useEffect( () => {
Expand All @@ -206,7 +211,15 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
if ( loadingState ) {
body = <FirstLoadScreen state={ loadingState } />;
} else if ( featureFetchError || firstLogoPromptFetchError ) {
body = <FeatureFetchFailureScreen onCancel={ closeModal } onRetry={ initializeModal } />;
body = (
<FeatureFetchFailureScreen
onCancel={ closeModal }
onRetry={ () => {
closeModal();
onReload?.();
} }
/>
);
} else if ( needsFeature || needsMoreRequests ) {
body = (
<UpgradeScreen
Expand Down
1 change: 1 addition & 0 deletions projects/js-packages/ai-client/src/logo-generator/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export interface GeneratorModalProps {
isOpen: boolean;
onClose: () => void;
onApplyLogo: ( mediaId: number ) => void;
onReload: () => void;
context: string;
placement: string;
}
Expand Down
4 changes: 4 additions & 0 deletions ...plugins/jetpack/changelog/update-ai-logo-generator-prevent-multiple-feature-data-requests
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: other

AI Logo Generator: Fix the retry button when a feature request fails.
6 changes: 6 additions & 0 deletions projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,11 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
setIsLogoGeneratorModalVisible( false );
}, [] );

const reloadModal = useCallback( () => {
closeModal();
showModal();
}, [ closeModal, showModal ] );

const applyLogoHandler = useCallback(
( mediaId: number ) => {
if ( mediaId ) {
Expand Down Expand Up @@ -127,6 +132,7 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
isOpen={ isLogoGeneratorModalVisible }
onClose={ closeModal }
onApplyLogo={ applyLogoHandler }
onReload={ reloadModal }
context={ PLACEMENT_CONTEXT }
placement={ TOOL_PLACEMENT }
siteDetails={ siteDetails }
Expand Down
Loading