import React, { FunctionComponent } from "react"; import { formatDate } from "../util/date"; import { Event } from "../types/event"; import { Link } from "react-router-dom"; import { WorkgroupLink } from "./WorkgroupLink"; import { DecisioSupportFileLink } from "./DecisionSupportFileLink"; export interface TimelineProps { events?: Event[] } export const Timeline: FunctionComponent = ({ events }) => { events = debounceEvents(events) || []; return (
{ events.map(evt => { return (
{renderEventMarker(evt)}

{formatDate(evt.createdAt)}

{renderEventContent(evt)}
); }) } { events.length === 0 ?

Aucun évènement.

: null }
); } function debounceEvents(events: Event[]): Event[] { const debounced = []; for(let evt: Event, i = 0; (evt = events[i]); ++i) { const prev = i > 0 ? events[i-1] : null; if (!prev) { debounced.push(evt); continue; } const isSame = evt.objectId === prev.objectId && evt.objectType === prev.objectType && evt.type === prev.type && evt.user.id === prev.user.id ; if (isSame) continue; debounced.push(evt); } return debounced; } const eventMarkerMap = { "closed": (evt:Event) => (
), "created": (evt:Event) => (
), "updated": (evt:Event) => (
), "title-changed": (evt:Event) => (
), "status-changed": (evt:Event) => (
), "joined": (evt:Event) => (
), "leaved": (evt:Event) => (
), } function renderEventMarker(evt: Event) { const render = eventMarkerMap[evt.type]; if (!render) return (
); return render(evt); } const eventContentMap = { "created": { "workgroup": (evt:Event) => { return ( {`${evt.user.name ? evt.user.name : evt.user.email} a créé le groupe de travail `} "". ); }, "dsf": (evt:Event) => { return ( {`${evt.user.name ? evt.user.name : evt.user.email} a créé le dossier d'aide à la décision `} "". ); }, }, "title-changed": { "dsf": (evt:Event) => { return ( {`${evt.user.name ? evt.user.name : evt.user.email} a modifié le titre du dossier d'aide à la décision `} "". ) } }, "status-changed": { "dsf": (evt:Event) => { return ( {`${evt.user.name ? evt.user.name : evt.user.email} a modifié le statut du dossier d'aide à la décision `} "". ) } }, "joined": { "workgroup": (evt:Event) => { return ( {`${evt.user.name ? evt.user.name : evt.user.email} a rejoint le groupe de travail `} "". ); }, }, "updated": { "workgroup": (evt:Event) => { return ( {`${evt.user.name ? evt.user.name : evt.user.email} a mis à jour le groupe de travail `} "". ); }, "dsf": (evt:Event) => { return ( {`${evt.user.name ? evt.user.name : evt.user.email} a modifié le dossier d'aide à la décision `} "". ); }, }, "leaved": { "workgroup": (evt:Event) => { return ( {`${evt.user.name ? evt.user.name : evt.user.email} a quitté le groupe de travail `} "". ); }, }, "closed": { "workgroup": (evt:Event) => { return ( {`${evt.user.name ? evt.user.name : evt.user.email} a clos le groupe de travail `} "". ); }, }, }; function renderEventContent(evt: Event) { const eventTypeMap = eventContentMap[evt.type]; const render = eventTypeMap && eventTypeMap[evt.objectType]; if (!eventTypeMap || !render) { return ( {`Type d'évènement "${evt.type}/${evt.objectType}" inconnu.`} ); } return render(evt); }