conver arrow functions into plain old functions, move props type declarations into separate types

Author: andrii-i

src/components/notification-detail.tsx

@@ -14,25 +14,26 @@ type INotificationsSettingsDetailsProps = {
   notificationsSettings: Scheduler.INotificationsSettings;
 };
 
-const NotificationsSettingsItem: React.FC<INotificationsSettingsItemProps> = ({
-  label,
-  value
-}) => {
+function NotificationsSettingsItem(props: INotificationsSettingsItemProps) {
   const displayValue =
-    typeof value === 'boolean' ? (value ? 'Yes' : 'No') : value;
+    typeof props.value === 'boolean'
+      ? props.value
+        ? 'Yes'
+        : 'No'
+      : props.value;
 
   return (
     <LabeledValue
-      label={label}
+      label={props.label}
       value={displayValue}
       style={{ flex: '1 1 100%' }}
     />
   );
-};
+}
 
-export const NotificationsSettingsDetails: React.FC<
-  INotificationsSettingsDetailsProps
-> = ({ notificationsSettings }) => {
+export function NotificationsSettingsDetails(
+  props: INotificationsSettingsDetailsProps
+): JSX.Element {
   const trans = useTranslator('jupyterlab');
 
   return (
@@ -43,7 +44,7 @@ export const NotificationsSettingsDetails: React.FC<
         </FormLabel>
         <Stack spacing={2}>
           <FormLabel component="legend">{trans.__('Send to')}</FormLabel>
-          {notificationsSettings.send_to.map((email, idx) => (
+          {props.notificationsSettings.send_to.map((email, idx) => (
             <NotificationsSettingsItem
               key={idx}
               label={trans.__(`Send to ${idx + 1}`)}
@@ -53,7 +54,7 @@ export const NotificationsSettingsDetails: React.FC<
           <FormLabel component="legend">
             {trans.__('Notification Events')}
           </FormLabel>
-          {notificationsSettings.events.map((event, idx) => (
+          {props.notificationsSettings.events.map((event, idx) => (
             <NotificationsSettingsItem
               key={idx}
               label={trans.__(`Event ${idx + 1}`)}
@@ -62,10 +63,10 @@ export const NotificationsSettingsDetails: React.FC<
           ))}
           <NotificationsSettingsItem
             label={trans.__('Include output')}
-            value={notificationsSettings.include_output}
+            value={props.notificationsSettings.include_output}
           />
         </Stack>
       </CardContent>
     </Card>
   );
-};
+}

src/components/notification-picker.tsx

@@ -23,6 +23,13 @@ type INotificationsSettingsProps = {
   handleModelChange: (model: ICreateJobModel) => void;
 };
 
+type NotificationEventsSelect = {
+  id: string;
+  availableEvents: string[];
+  selectChange: (e: SelectChangeEvent<string>) => void;
+  disabled: boolean;
+};
+
 export function NotificationsSettings({
   notificationEvents,
   id,
@@ -181,37 +188,32 @@ export function NotificationsSettings({
   );
 }
 
-const NotificationEventsSelect: React.FC<{
-  id: string;
-  availableEvents: string[];
-  selectChange: (e: SelectChangeEvent<string>) => void;
-  disabled: boolean;
-}> = ({ id, availableEvents, selectChange, disabled }) => {
+function NotificationEventsSelect(props: NotificationEventsSelect) {
   const trans = useTranslator('jupyterlab');
   const label = trans.__('Notification Events');
-  const labelId = `${id}-label`;
+  const labelId = `${props.id}-label`;
 
   return (
     <FormControl>
-      <InputLabel id={labelId} disabled={disabled}>
+      <InputLabel id={labelId} disabled={props.disabled}>
         {label}
       </InputLabel>
       <Select
         labelId={labelId}
-        id={id}
+        id={props.id}
         label={label}
-        onChange={selectChange}
-        disabled={disabled}
+        onChange={props.selectChange}
+        disabled={props.disabled}
       >
-        {availableEvents.map(e => (
+        {props.availableEvents.map(e => (
           <MenuItem key={e} value={e}>
             {e}
           </MenuItem>
         ))}
       </Select>
     </FormControl>
   );
-};
+}
 
 const SelectedEventsChips: React.FC<{
   selectedEvents: string[];