Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | 356x 29x 29x 29x 29x 29x 356x 29x 29x 58x 29x 58x 29x 29x 26x 26x 9x 17x 29x 26x 29x 1x 29x 1x 20x | import { ReactElement, useCallback, useEffect, useRef } from "react";
import dayjs from "dayjs";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { sortBy } from "remeda";
import { useAppDispatch, useAppSelector } from "client/utils/hooks";
import { submitUpdateEventLogIsSeen } from "client/views/login/loginThunks";
import { getWeekdayAndTime } from "shared/utils/timeFormatter";
import { RaisedCard } from "client/components/RaisedCard";
import { EventLogEventMessage } from "client/views/event-log/EventLogEventMessage";
const getTime = (createdAt: string): string => {
const timeNow = dayjs();
const relativeTimePeriod = dayjs(createdAt).add(4, "hours");
const useRelativeTime = timeNow.isBefore(relativeTimePeriod);
Eif (useRelativeTime) {
return dayjs().to(createdAt);
}
return getWeekdayAndTime(createdAt);
};
export const EventLog = (): ReactElement => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const eventLogItems = useAppSelector((state) => state.login.eventLogItems);
const programItems = useAppSelector(
(state) => state.allProgramItems.programItems,
);
const localEventLogItems = useRef(eventLogItems);
const setEventsSeen = useCallback((): void => {
for (const { eventLogItemId, isSeen } of eventLogItems) {
if (isSeen) {
continue;
}
// eslint-disable-next-line @typescript-eslint/no-floating-promises
dispatch(
submitUpdateEventLogIsSeen({
eventLogItemId,
isSeen: true,
}),
);
}
}, [dispatch, eventLogItems]);
useEffect(() => {
setEventsSeen();
}, [setEventsSeen]);
return (
<div>
<Title>{t("eventLog.title")}</Title>
{/* eslint-disable-next-line react-hooks/refs */}
{localEventLogItems.current.length === 0 && (
<RaisedCard>{t("eventLog.noNotifications")}</RaisedCard>
)}
{/* eslint-disable-next-line react-hooks/refs */}
{sortBy(localEventLogItems.current, [
(item) => item.createdAt,
"desc",
]).map((eventLogItem) => {
return (
<RaisedCard
isHighlighted={!eventLogItem.isSeen}
key={eventLogItem.eventLogItemId}
data-testid="event-log-item"
>
<EventLogEventMessage
eventLogItem={eventLogItem}
programItems={programItems}
showDetails={true}
/>
<MessageCreatedAt>
<span>{getTime(eventLogItem.createdAt)}</span>
</MessageCreatedAt>
</RaisedCard>
);
})}
</div>
);
};
const MessageCreatedAt = styled.div`
display: flex;
justify-content: right;
margin: 8px 4px -4px 0;
color: ${(props) => props.theme.textSecondary};
`;
const Title = styled.h1`
font-size: ${(props) => props.theme.mainHeaderFontSize};
`;
|