fix: Prevent empty titles for Areas to be saved

Also provides a fallback presentation in case the area has previously been updated with an empty title.
zetkin · Feb 15, 2025 · 1d1b986 · 1d1b986
1 parent 4f6fb48
commit 1d1b986
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/src/features/areas/components/AreaOverlay/index.tsx b/src/features/areas/components/AreaOverlay/index.tsx
@@ -18,7 +18,7 @@ import ZUIPreviewableInput, {
 import ZUIEllipsisMenu from 'zui/ZUIEllipsisMenu';
 import { ZUIConfirmDialogContext } from 'zui/ZUIConfirmDialogProvider';
 import TagsSection from './TagsSection';
-import { Msg } from 'core/i18n';
+import { Msg, useMessages } from 'core/i18n';
 import messageIds from 'features/areas/l10n/messageIds';
 
 type Props = {
@@ -36,6 +36,7 @@ const AreaOverlay: FC<Props> = ({
   onCancelEdit,
   onClose,
 }) => {
+  const messages = useMessages(messageIds);
   const [title, setTitle] = useState(area.title);
   const [description, setDescription] = useState(area.description);
   const [fieldEditing, setFieldEditing] = useState<
@@ -84,7 +85,9 @@ const AreaOverlay: FC<Props> = ({
         onClickAway={() => {
           if (fieldEditing === 'title') {
             setFieldEditing(null);
-            updateArea({ title });
+            updateArea({
+              title: title?.trim() || messages.areas.default.title(),
+            });
           } else if (fieldEditing === 'description') {
             setFieldEditing(null);
             updateArea({ description });
@@ -111,7 +114,9 @@ const AreaOverlay: FC<Props> = ({
                   onBlur={() => {
                     if (fieldEditing === 'title') {
                       setFieldEditing(null);
-                      updateArea({ title });
+                      updateArea({
+                        title: title?.trim() || messages.areas.default.title(),
+                      });
                     }
                   }}
                   onChange={(ev) => setTitle(ev.target.value)}
@@ -120,7 +125,9 @@ const AreaOverlay: FC<Props> = ({
                 />
               )}
               renderPreview={() => (
-                <Typography variant="h5">{area.title}</Typography>
+                <Typography variant="h5">
+                  {area.title?.trim() || messages.areas.default.title()}
+                </Typography>
               )}
               value={area.title || ''}
             />