review

Author: Tristan-WorkGH

src/pages/announcements/add-announcement-form.tsx

@@ -103,11 +103,9 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
         <FormContainer<FormSchema>
             formContext={formContext}
             onSuccess={onSubmit}
-            //criteriaMode="all"
-            //mode="all"
-            mode="onChange"
+            //criteriaMode="all" ?
+            mode="onChange" // or maybe mode "all"?
             reValidateMode="onChange"
-            //reValidateMode="onChange"
             FormProps={{ style: { height: '100%' } }}
         >
             <Grid container direction="column" spacing={1.5} height="100%">
@@ -156,9 +154,7 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
                         name={MESSAGE}
                         label={intl.formatMessage({ id: 'announcements.form.message' })}
                         rows={5} // why does it do nothing even if the field is set as multiline?!
-                        //style={{ height: '100%' }}
                         fullWidth
-                        //inputProps={{ maxLength: 200 }}
                     />
                 </Grid>
                 <Grid item xs="auto">

src/pages/announcements/announcements-page.tsx

@@ -118,6 +118,8 @@ export default function AnnouncementsPage() {
         [renderDate, intl, handleDeleteAnnouncement, renderSeverity]
     );
 
+    const gridContext = useMemo(() => ({ refresh: loadDataAndSave }), [loadDataAndSave]);
+
     // Note: using <Stack/> for the columns didn't work
     return (
         <Grid container spacing={2} marginLeft={'2px' /*Grid.spacing is in px?*/}>
@@ -150,7 +152,7 @@ export default function AnnouncementsPage() {
                         defaultColDef={defaultColDef}
                         gridId="table-announcements"
                         getRowId={getRowId}
-                        context={useMemo(() => ({ refresh: loadDataAndSave }), [loadDataAndSave])}
+                        context={gridContext}
                     />
                 </Grid>
             </Grid>

src/pages/announcements/cancel-cell-renderer.tsx

@@ -6,22 +6,19 @@
  */
 import type { UUID } from 'crypto';
 import { useCallback } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { IconButton, type IconButtonProps, Tooltip } from '@mui/material';
 import { Delete } from '@mui/icons-material';
 import { FormattedMessage } from 'react-intl';
 
-export type CancelButtonCellRendererProps = { value: UUID; onClickHandler: Function };
+export type CancelButtonCellRendererProps = { value: UUID; onClickHandler: (value: UUID) => void };
 
 export default function CancelCellRenderer({ value, onClickHandler }: Readonly<CancelButtonCellRendererProps>) {
+    const handleClick = useCallback<NonNullable<IconButtonProps['onClick']>>(() => {
+        onClickHandler(value);
+    }, [onClickHandler, value]);
     return (
         <Tooltip title={<FormattedMessage id="announcements.table.cancel" />}>
-            <IconButton
-                disableRipple
-                color="secondary"
-                onClick={useCallback(() => {
-                    onClickHandler(value);
-                }, [onClickHandler, value])}
-            >
+            <IconButton disableRipple color="secondary" onClick={handleClick}>
                 <Delete fontSize="medium" />
             </IconButton>
         </Tooltip>