Migrated UserEnrollmentList folder to typescript

frontend/src/components/organisms/form-sections/HeadSection/ActivityFeed.js → frontend/src/components/organisms/form-sections/HeadSection/ActivityFeed.tsx

@@ -3,7 +3,6 @@ import { useContext, useMemo, useState } from 'react';
 import { FormContext } from '../../../templates/Form';
 
 import moment from 'moment';
-import PropTypes from 'prop-types';
 import { getChangelog, isUserADemandeur } from '../../../../lib';
 import {
   ArchiveIcon,
@@ -21,69 +20,89 @@ import { useAuth } from '../../AuthContext';
 import './ActivityFeed.css';
 import ExpandableSection from '../../../molecules/ExpandableSection';
 import { EnrollmentEvent } from '../../../../config/event-configuration';
+import { Event } from '../../../templates/InstructorEnrollmentList';
 
 const eventToDisplayableContent = {
-  request_changes: {
+  [EnrollmentEvent.request_changes]: {
     icon: <WarningIcon color={'var(--text-default-warning)'} />,
     label: 'a demandé des modifications',
   },
-  notify: {
+  [EnrollmentEvent.notify]: {
     icon: <MailIcon color={'var(--text-default-info)'} />,
     label: 'a écrit',
   },
-  create: {
-    icon: <InfoFillIcon color={'var(--text-default-info)'} outlined />,
+  [EnrollmentEvent.create]: {
+    icon: <InfoFillIcon color={'var(--text-default-info)'} />,
     label: 'a créé la demande d’habilitation',
   },
-  submit: {
-    icon: <InfoFillIcon color={'var(--text-default-info)'} outlined />,
+  [EnrollmentEvent.submit]: {
+    icon: <InfoFillIcon color={'var(--text-default-info)'} />,
     label: 'a soumis la demande d’habilitation',
   },
-  validate: {
+  [EnrollmentEvent.validate]: {
     icon: <CheckCircleIcon color={'var(--text-default-success)'} />,
     label: 'a validé l’habilitation',
   },
-  reminder_before_archive: {
+  [EnrollmentEvent.reminder_before_archive]: {
     icon: <NotificationIcon color={'var(--text-default-warning)'} />,
     label: 'a envoyé un email de relance avant archivage',
   },
-  reminder: {
+  [EnrollmentEvent.reminder]: {
     icon: <NotificationIcon color={'var(--text-default-info)'} />,
     label: 'a envoyé un email de relance',
   },
   // This event is not available anymore but we keep this to display remaining
   // updated_contacts events in the activity feed
-  update_contacts: {
-    icon: <InfoFillIcon color={'var(--text-default-info)'} outlined />,
+  [EnrollmentEvent.update_contacts]: {
+    icon: <InfoFillIcon color={'var(--text-default-info)'} />,
     label: 'a mis à jour les contacts',
   },
-  update: {
-    icon: <InfoFillIcon color={'var(--text-default-info)'} outlined />,
+  [EnrollmentEvent.update]: {
+    icon: <InfoFillIcon color={'var(--text-default-info)'} />,
     label: 'a mis à jour l’habilitation',
   },
-  refuse: {
+  [EnrollmentEvent.refuse]: {
     icon: <ErrorIcon color={'var(--text-default-error)'} />,
     label: 'a refusé l’habilitation',
   },
-  revoke: {
+  [EnrollmentEvent.revoke]: {
     icon: <ErrorIcon color={'var(--text-default-error)'} />,
     label: 'a révoqué l’habilitation',
   },
-  archive: {
+  [EnrollmentEvent.archive]: {
     icon: <ArchiveIcon color={'var(--text-default-info)'} />,
     label: 'a archivé l’habilitation',
   },
-  copy: {
+  [EnrollmentEvent.copy]: {
     icon: <FileCopyIcon color={'var(--text-default-info)'} />,
     label: 'a copié l’habilitation',
   },
-  import: {
-    icon: <InfoFillIcon color={'var(--text-default-info)'} outlined />,
+  [EnrollmentEvent.import]: {
+    icon: <InfoFillIcon color={'var(--text-default-info)'} />,
     label: 'a importé l’habilitation',
   },
+  [EnrollmentEvent.destroy]: {
+    icon: <InfoFillIcon color={'var(--text-default-warning)'} />,
+    label: 'a supprimé l’habilitation',
+  },
+  [EnrollmentEvent.instruct]: {
+    icon: <InfoFillIcon color={'var(--text-default-warning)'} />,
+    label: 'a instruit l’habilitation',
+  },
 };
 
-export const EventItem = ({
+type EventItemProps = {
+  comment: string;
+  name: EnrollmentEvent;
+  created_at?: string;
+  processed_at?: string;
+  family_name?: string;
+  given_name?: string;
+  email?: string;
+  diff?: any;
+};
+
+export const EventItem: React.FC<EventItemProps> = ({
   comment,
   name,
   created_at,
@@ -152,7 +171,7 @@ export const EventItem = ({
         )}
         {!isEmpty(changelog) && showDiff && (
           <div className={eventCommentClass}>
-            {changelog.map((log) => (
+            {changelog.map((log: string) => (
               <p key={log.slice(20)}>{log}</p>
             ))}
           </div>
@@ -162,22 +181,11 @@ export const EventItem = ({
   );
 };
 
-EventItem.propTypes = {
-  comment: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  created_at: PropTypes.string.isRequired,
-  email: PropTypes.string,
-  family_name: PropTypes.string,
-  given_name: PropTypes.string,
-  diff: PropTypes.object,
-};
-
-EventItem.defaultProps = {
-  comment: '',
-  diff: {},
+type ActivityFeedProps = {
+  events: Event[];
 };
 
-const ActivityFeed = ({ events }) => {
+const ActivityFeed: React.FC<ActivityFeedProps> = ({ events }) => {
   let eventsToDisplay = chain(events)
     .sortBy('created_at')
     .reject(
@@ -210,12 +218,4 @@ const ActivityFeed = ({ events }) => {
   );
 };
 
-ActivityFeed.propTypes = {
-  events: PropTypes.array,
-};
-
-ActivityFeed.defaultProps = {
-  events: [],
-};
-
 export default ActivityFeed;

frontend/src/components/templates/UserEnrollmentList/ActivityFeedWrapper.js → frontend/src/components/templates/UserEnrollmentList/ActivityFeedWrapper.tsx

@@ -1,12 +1,25 @@
 import { chain } from 'lodash';
-import PropTypes from 'prop-types';
 import { useEffect, useMemo, useState } from 'react';
-import { STATUS_LABELS } from '../../../config/status-parameters';
+import {
+  EnrollmentStatus,
+  STATUS_LABELS,
+} from '../../../config/status-parameters';
 import { getCachedMajorityPercentileProcessingTimeInDays } from '../../../services/stats';
-import Alert from '../../atoms/Alert';
+import Alert, { AlertType } from '../../atoms/Alert';
 import { EventItem } from '../../organisms/form-sections/HeadSection/ActivityFeed';
+import { Enrollment } from '../InstructorEnrollmentList';
 
-const ActivityFeedWrapper = ({ events, status, target_api }) => {
+type ActivityFeedWrapperProps = {
+  events: Enrollment['events'];
+  status: EnrollmentStatus;
+  target_api: string;
+};
+
+const ActivityFeedWrapper: React.FC<ActivityFeedWrapperProps> = ({
+  events,
+  status,
+  target_api,
+}) => {
   const [
     majorityPercentileProcessingTimeInDays,
     setMajorityPercentileTimeInDays,
@@ -29,10 +42,10 @@ const ActivityFeedWrapper = ({ events, status, target_api }) => {
 
   const {
     comment = '',
-    name: lastEventName = '',
-    updated_at = '',
+    name: lastEventName,
     user,
     diff,
+    created_at,
   } = useMemo(
     () => chain(events).sortBy('updated_at').last().value() || {},
     [events]
@@ -47,14 +60,14 @@ const ActivityFeedWrapper = ({ events, status, target_api }) => {
     ['request_changes'].includes(lastEventName)
   ) {
     return (
-      <Alert title={STATUS_LABELS[status]} type="warning">
+      <Alert title={STATUS_LABELS[status]} type={AlertType.warning}>
         Votre demande d’habilitation est incomplète et requiert les
         modifications suivantes :
         <div style={{ margin: '1rem 0' }}>
           <EventItem
             comment={comment}
             name={lastEventName}
-            updated_at={updated_at}
+            created_at={created_at}
             email={email}
             given_name={given_name}
             family_name={family_name}
@@ -95,10 +108,4 @@ const ActivityFeedWrapper = ({ events, status, target_api }) => {
   return null;
 };
 
-ActivityFeedWrapper.propTypes = {
-  events: PropTypes.array.isRequired,
-  status: PropTypes.string.isRequired,
-  target_api: PropTypes.string.isRequired,
-};
-
 export default ActivityFeedWrapper;

frontend/src/components/templates/UserEnrollmentList/Enrollment.js → frontend/src/components/templates/UserEnrollmentList/Enrollment.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
 import { chain } from 'lodash';
 import './Enrollment.css';
@@ -8,8 +7,23 @@ import ActivityFeedWrapper from './ActivityFeedWrapper';
 import Button from '../../atoms/hyperTexts/Button';
 import { StatusBadge } from '../../molecules/StatusBadge';
 import NextStepButton from '../../molecules/NextStepButton';
+import { Enrollment } from '../InstructorEnrollmentList';
 
-const Enrollment = ({
+type EnrollmentProps = {
+  id: Enrollment['id'];
+  events: Enrollment['events'];
+  target_api: Enrollment['target_api'];
+  intitule: Enrollment['intitule'];
+  description: Enrollment['description'];
+  status: Enrollment['status'];
+  onSelect: (
+    target_api: string,
+    id: number,
+    e: React.MouseEvent<HTMLElement>
+  ) => void;
+};
+
+const Enrollment: React.FC<EnrollmentProps> = ({
   id,
   events,
   target_api,
@@ -21,7 +35,7 @@ const Enrollment = ({
   const { label, icon } = useDataProvider(target_api);
 
   const handleClick = useCallback(
-    (e) => {
+    (e: React.MouseEvent<HTMLElement>) => {
       onSelect(target_api, id, e);
     },
     [id, target_api, onSelect]
@@ -85,13 +99,4 @@ const Enrollment = ({
   );
 };
 
-Enrollment.propTypes = {
-  id: PropTypes.number.isRequired,
-  target_api: PropTypes.string.isRequired,
-  status: PropTypes.string.isRequired,
-  description: PropTypes.string,
-  intitule: PropTypes.string,
-  onSelect: PropTypes.func.isRequired,
-};
-
 export default Enrollment;

frontend/src/components/templates/UserEnrollmentList/index.js → frontend/src/components/templates/UserEnrollmentList/index.tsx

@@ -3,16 +3,18 @@ import { groupBy, isEmpty } from 'lodash';
 import { getUserEnrollments } from '../../../services/enrollments';
 import Loader from '../../atoms/Loader';
 import Enrollment from './Enrollment';
-import Alert from '../../atoms/Alert';
+import Alert, { AlertType } from '../../atoms/Alert';
 import ListHeader from '../../molecules/ListHeader';
 import useListItemNavigation from '../hooks/use-list-item-navigation';
 import { NewEnrollmentButton } from '../../molecules/NewEnrollmentButton';
 import { useLocation } from 'react-router-dom';
 import NoEnrollments from './NoEnrollments';
+import { Enrollment as EnrollmentType } from '../InstructorEnrollmentList';
 
 const UserEnrollmentList = () => {
   const [isLoading, setIsLoading] = useState(true);
-  const [enrollmentsByOrganization, setEnrollmentsByOrganization] = useState();
+  const [enrollmentsByOrganization, setEnrollmentsByOrganization] =
+    useState<Record<string, EnrollmentType[]>>();
   const [showAlert, setShowAlert] = useState(false);
 
   const { state } = useLocation();
@@ -59,7 +61,7 @@ const UserEnrollmentList = () => {
       {!isLoading && !isEmpty(enrollmentsByOrganization) && (
         <div className="page-container list-container">
           {showAlert && (
-            <Alert type="success" onAlertClose={handleClose}>
+            <Alert type={AlertType.success} onAlertClose={handleClose}>
               {state?.message}
             </Alert>
           )}
@@ -71,8 +73,13 @@ const UserEnrollmentList = () => {
               {enrollmentsByOrganization[group].map((enrollment) => (
                 <Enrollment
                   key={enrollment.id}
-                  {...enrollment}
                   onSelect={goToItem}
+                  id={enrollment.id}
+                  events={enrollment.events}
+                  target_api={enrollment.target_api}
+                  intitule={enrollment.intitule}
+                  description={enrollment.description}
+                  status={enrollment.status}
                 />
               ))}
             </React.Fragment>

frontend/src/config/event-configuration.tsx

@@ -1,14 +1,20 @@
 export enum EnrollmentEvent {
   notify = 'notify',
+  create = 'create',
   destroy = 'destroy',
   update = 'update',
   submit = 'submit',
   refuse = 'refuse',
   revoke = 'revoke',
   request_changes = 'request_changes',
+  reminder_before_archive = 'reminder_before_archive',
+  reminder = 'reminder',
+  import = 'import',
   archive = 'archive',
   validate = 'validate',
   instruct = 'instruct',
+  update_contacts = 'update_contacts',
+  copy = 'copy',
 }
 
 export enum PromptType {