Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-04 13:48:56 +02:00
Code Issues Projects Releases Wiki Activity

fix: banner form state (#10397)

Browse Source 
https://linear.app/unleash/issue/2-3710/fix-banner-form-state-inconsistencies

Noticed a few inconsistencies with the way the banner form handles
state. This should fix that by ensuring the form's state correctly
reflects prop changes.
This commit is contained in:
Nuno Góis 2025-07-23 08:36:48 +01:00 committed by GitHub
parent 65ea41d601
commit e87c51948f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/component/admin/banners/BannerModal/BannerForm.tsx
View File

@ -10,6 +10,7 @@ import {
type ChangeEvent, type ChangeEvent,
type Dispatch, type Dispatch,
type SetStateAction, type SetStateAction,
useEffect,
useState, useState,
} from 'react'; } from 'react';
import Visibility from '@mui/icons-material/Visibility'; import Visibility from '@mui/icons-material/Visibility';
@ -93,6 +94,18 @@ const VARIANT_OPTIONS = [
type IconOption = 'Default' | 'Custom' | 'None'; type IconOption = 'Default' | 'Custom' | 'None';
type LinkOption = 'Link' | 'Dialog' | 'None'; type LinkOption = 'Link' | 'Dialog' | 'None';
const deriveIconOption = (icon: string): IconOption => {
if (icon === '') return 'Default';
if (icon === 'none') return 'None';
return 'Custom';
};
const deriveLinkOption = (link: string): LinkOption => {
if (link === '') return 'None';
if (link === 'dialog') return 'Dialog';
return 'Link';
};
interface IBannerFormProps { interface IBannerFormProps {
enabled: boolean; enabled: boolean;
message: string; message: string;
@ -136,13 +149,18 @@ export const BannerForm = ({
}: IBannerFormProps) => { }: IBannerFormProps) => {
const [previewDialogOpen, setPreviewDialogOpen] = useState(false); const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
const [iconOption, setIconOption] = useState<IconOption>( const [iconOption, setIconOption] = useState<IconOption>(() =>
icon === '' ? 'Default' : icon === 'none' ? 'None' : 'Custom', deriveIconOption(icon),
); );
const [linkOption, setLinkOption] = useState<LinkOption>( const [linkOption, setLinkOption] = useState<LinkOption>(() =>
link === '' ? 'None' : link === 'dialog' ? 'Dialog' : 'Link', deriveLinkOption(link),
); );
useEffect(() => {
setIconOption(deriveIconOption(icon));
setLinkOption(deriveLinkOption(link));
}, [icon, link]);
return ( return (
<StyledForm> <StyledForm>
<StyledBannerPreview> <StyledBannerPreview>