Feature:
diff --git a/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx b/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.tsx
similarity index 85%
rename from frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx
rename to frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.tsx
index 185d247efb..99fb2f5aac 100644
--- a/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx
+++ b/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.tsx
@@ -1,7 +1,6 @@
-import PropTypes from 'prop-types';
import { diff } from 'deep-diff';
-
import { useStyles } from './EventDiff.styles';
+import { IEvent } from 'interfaces/event';
const DIFF_PREFIXES = {
A: ' ',
@@ -10,7 +9,11 @@ const DIFF_PREFIXES = {
N: '+',
};
-const EventDiff = ({ entry }) => {
+interface IEventDiffProps {
+ entry: IEvent;
+}
+
+const EventDiff = ({ entry }: IEventDiffProps) => {
const { classes: styles } = useStyles();
const KLASSES = {
@@ -25,7 +28,7 @@ const EventDiff = ({ entry }) => {
? diff(entry.preData, entry.data)
: undefined;
- const buildItemDiff = (diff, key) => {
+ const buildItemDiff = (diff: any, key: string) => {
let change;
if (diff.lhs !== undefined) {
change = (
@@ -48,7 +51,7 @@ const EventDiff = ({ entry }) => {
return change;
};
- const buildDiff = (diff, idx) => {
+ const buildDiff = (diff: any, idx: number) => {
let change;
const key = diff.path.join('.');
@@ -66,7 +69,9 @@ const EventDiff = ({ entry }) => {
);
} else {
+ // @ts-expect-error
const spadenClass = KLASSES[diff.kind];
+ // @ts-expect-error
const prefix = DIFF_PREFIXES[diff.kind];
change = (
@@ -95,15 +100,10 @@ const EventDiff = ({ entry }) => {
return (
-
- {changes.length === 0 ? '(no changes)' : changes}
-
+ {/* @ts-expect-error */}
+ {changes.length === 0 ? '(no changes)' : changes}
);
};
-EventDiff.propTypes = {
- entry: PropTypes.object,
-};
-
export default EventDiff;
diff --git a/frontend/src/component/history/EventLog/EventJson/EventJson.jsx b/frontend/src/component/history/EventLog/EventJson/EventJson.tsx
similarity index 75%
rename from frontend/src/component/history/EventLog/EventJson/EventJson.jsx
rename to frontend/src/component/history/EventLog/EventJson/EventJson.tsx
index c545f89c51..7f15feeace 100644
--- a/frontend/src/component/history/EventLog/EventJson/EventJson.jsx
+++ b/frontend/src/component/history/EventLog/EventJson/EventJson.tsx
@@ -1,8 +1,12 @@
import PropTypes from 'prop-types';
-
import { useStyles } from './EventJson.styles';
+import { IEvent } from 'interfaces/event';
-const EventJson = ({ entry }) => {
+interface IEventJsonProps {
+ entry: IEvent;
+}
+
+const EventJson = ({ entry }: IEventJsonProps) => {
const { classes: styles } = useStyles();
const localEventData = JSON.parse(JSON.stringify(entry));
@@ -15,7 +19,7 @@ const EventJson = ({ entry }) => {
return (
- {prettyPrinted}
+ {prettyPrinted}
);
diff --git a/frontend/src/component/history/EventLog/EventLog.jsx b/frontend/src/component/history/EventLog/EventLog.tsx
similarity index 69%
rename from frontend/src/component/history/EventLog/EventLog.jsx
rename to frontend/src/component/history/EventLog/EventLog.tsx
index cd3e75ff7b..b4f9967e85 100644
--- a/frontend/src/component/history/EventLog/EventLog.jsx
+++ b/frontend/src/component/history/EventLog/EventLog.tsx
@@ -1,35 +1,47 @@
import { List, Switch, FormControlLabel } from '@mui/material';
-import PropTypes from 'prop-types';
-import EventJson from './EventJson/EventJson';
+import EventJson from 'component/history/EventLog/EventJson/EventJson';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import EventCard from './EventCard/EventCard';
+import EventCard from 'component/history/EventLog/EventCard/EventCard';
import { useStyles } from './EventLog.styles';
import { formatDateYMDHMS } from 'utils/formatDate';
+import { IEventSettings } from 'hooks/useEventSettings';
+import { IEvent } from 'interfaces/event';
+import React from 'react';
+import { ILocationSettings } from 'hooks/useLocationSettings';
+
+interface IEventLogProps {
+ title: string;
+ events: IEvent[];
+ eventSettings: IEventSettings;
+ setEventSettings: React.Dispatch>;
+ locationSettings: ILocationSettings;
+ displayInline?: boolean;
+}
const EventLog = ({
title,
- history,
+ events,
eventSettings,
setEventSettings,
locationSettings,
displayInline,
-}) => {
+}: IEventLogProps) => {
const { classes: styles } = useStyles();
const toggleShowDiff = () => {
setEventSettings({ showData: !eventSettings.showData });
};
- const formatFulldateTime = v => {
+ const formatFulldateTime = (v: string) => {
return formatDateYMDHMS(v, locationSettings.locale);
};
- if (!history || history.length < 0) {
+ if (!events || events.length < 0) {
return null;
}
let entries;
- const renderListItemCards = entry => (
+ const renderListItemCards = (entry: IEvent) => (
(
+ entries = events.map(entry => (
));
} else {
- entries = history.map(renderListItemCards);
+ entries = events.map(renderListItemCards);
}
return (
@@ -75,13 +87,4 @@ const EventLog = ({
);
};
-EventLog.propTypes = {
- history: PropTypes.array,
- eventSettings: PropTypes.object.isRequired,
- setEventSettings: PropTypes.func.isRequired,
- locationSettings: PropTypes.object.isRequired,
- title: PropTypes.string,
- displayInline: PropTypes.bool,
-};
-
export default EventLog;
diff --git a/frontend/src/component/history/EventLog/index.tsx b/frontend/src/component/history/EventLog/index.tsx
index 2709266b51..0f9e64c86e 100644
--- a/frontend/src/component/history/EventLog/index.tsx
+++ b/frontend/src/component/history/EventLog/index.tsx
@@ -1,10 +1,11 @@
-import EventLog from './EventLog';
+import EventLog from 'component/history/EventLog/EventLog';
import { useEventSettings } from 'hooks/useEventSettings';
import { useLocationSettings } from 'hooks/useLocationSettings';
+import { IEvent } from 'interfaces/event';
interface IEventLogContainerProps {
title: string;
- history: unknown[];
+ events: IEvent[];
displayInline?: boolean;
}
@@ -15,7 +16,7 @@ const EventLogContainer = (props: IEventLogContainerProps) => {
return (
{
- const { events } = useFeatureEvents(toggleName);
-
- if (events.length === 0) {
- return null;
- }
-
- return (
-
- );
-};
-
-FeatureEventHistory.propTypes = {
- toggleName: PropTypes.string.isRequired,
-};
diff --git a/frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.tsx b/frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.tsx
new file mode 100644
index 0000000000..44764a4a58
--- /dev/null
+++ b/frontend/src/component/history/FeatureEventHistory/FeatureEventHistory.tsx
@@ -0,0 +1,18 @@
+import EventLog from '../EventLog';
+import { useFeatureEvents } from 'hooks/api/getters/useFeatureEvents/useFeatureEvents';
+
+interface IFeatureEventHistoryProps {
+ featureId: string;
+}
+
+export const FeatureEventHistory = ({
+ featureId,
+}: IFeatureEventHistoryProps) => {
+ const { events } = useFeatureEvents(featureId);
+
+ if (events.length === 0) {
+ return null;
+ }
+
+ return ;
+};
diff --git a/frontend/src/component/history/FeatureEventHistoryPage/FeatureEventHistoryPage.tsx b/frontend/src/component/history/FeatureEventHistoryPage/FeatureEventHistoryPage.tsx
index 3abc1277a7..01b61be817 100644
--- a/frontend/src/component/history/FeatureEventHistoryPage/FeatureEventHistoryPage.tsx
+++ b/frontend/src/component/history/FeatureEventHistoryPage/FeatureEventHistoryPage.tsx
@@ -1,9 +1,9 @@
import React from 'react';
-import { FeatureEventHistory } from '../FeatureEventHistory/FeatureEventHistory';
+import { FeatureEventHistory } from 'component/history/FeatureEventHistory/FeatureEventHistory';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
export const FeatureEventHistoryPage = () => {
const toggleName = useRequiredPathParam('toggleName');
- return ;
+ return ;
};