From d8f91da09538a2ad129024e1003b359b868a238b Mon Sep 17 00:00:00 2001 From: Arnei Date: Wed, 19 Jun 2024 16:37:15 +0200 Subject: [PATCH 1/4] Typing event details Adds typescript types to the parameters of the `EventDetails` component and various related components. --- .../events/partials/EventActionCell.tsx | 15 ++-- .../DetailsExtendedMetadataTab.tsx | 22 +++--- .../ModalTabsAndPages/DetailsMetadataTab.tsx | 22 +++--- .../EventDetailsAccessPolicyTab.tsx | 14 ++-- .../EventDetailsAssetAttachmentDetails.tsx | 13 ++-- .../EventDetailsAssetAttachments.tsx | 13 ++-- .../EventDetailsAssetCatalogDetails.tsx | 14 ++-- .../EventDetailsAssetCatalogs.tsx | 13 ++-- .../EventDetailsAssetMedia.tsx | 13 ++-- .../EventDetailsAssetMediaDetails.tsx | 14 ++-- .../EventDetailsAssetPublicationDetails.tsx | 11 +-- .../EventDetailsAssetPublications.tsx | 16 ++-- .../EventDetailsAssetsAddAsset.tsx | 13 ++-- .../EventDetailsAssetsTab.tsx | 24 ++---- .../EventDetailsCommentsTab.tsx | 9 ++- .../EventDetailsPublicationTab.tsx | 3 +- .../EventDetailsSchedulingTab.tsx | 9 ++- .../EventDetailsStatisticsTab.tsx | 9 ++- .../EventDetailsWorkflowDetails.tsx | 13 ++-- .../EventDetailsWorkflowErrorDetails.tsx | 14 ++-- .../EventDetailsWorkflowErrors.tsx | 16 ++-- .../EventDetailsWorkflowOperationDetails.tsx | 10 +-- .../EventDetailsWorkflowOperations.tsx | 6 +- .../EventDetailsWorkflowTab.tsx | 26 +++---- .../SeriesDetailsAccessTab.tsx | 3 +- .../events/partials/modals/EventDetails.tsx | 59 +++++--------- .../partials/modals/EventDetailsModal.tsx | 66 ++++++++-------- .../modals/ResourceDetailsAccessPolicyTab.tsx | 76 ++++++++----------- src/slices/eventDetailsSlice.ts | 42 ++++------ src/slices/seriesDetailsSlice.ts | 16 +--- src/utils/resourceUtils.ts | 13 ++-- 31 files changed, 271 insertions(+), 336 deletions(-) diff --git a/src/components/events/partials/EventActionCell.tsx b/src/components/events/partials/EventActionCell.tsx index e828f1676e..85fc36fa05 100644 --- a/src/components/events/partials/EventActionCell.tsx +++ b/src/components/events/partials/EventActionCell.tsx @@ -102,13 +102,14 @@ const EventActionCell = ({ return ( <> {/* Display modal for editing table view if table edit button is clicked */} - + {displayEventDetailsModal && + + } {displaySeriesDetailsModal && ( = ({ +const DetailsExtendedMetadataTab = ({ resourceId, editAccessRole, metadata, updateResource, +}: { + resourceId: string, + editAccessRole: string, + metadata: MetadataCatalog[], + updateResource: (id: string, values: { [key: string]: any }, catalog: MetadataCatalog) => void, }) => { const { t } = useTranslation(); const user = useAppSelector(state => getUserInformation(state)); -// @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type. - const handleSubmit = (values, catalog) => { + const handleSubmit = (values: { [key: string]: any }, catalog: MetadataCatalog) => { updateResource(resourceId, values, catalog); }; // set current values of metadata fields as initial values -// @ts-expect-error TS(7006): Parameter 'metadataCatalog' implicitly has an 'any... Remove this comment to see the full error message - const getInitialValues = (metadataCatalog) => { + const getInitialValues = (metadataCatalog: MetadataCatalog) => { let initialValues = {}; // Transform metadata fields and their values provided by backend (saved in redux) if (!!metadataCatalog.fields && metadataCatalog.fields.length > 0) { -// @ts-expect-error TS(7006): Parameter 'field' implicitly has an 'any' type. metadataCatalog.fields.forEach((field) => { let value = parseValueForBooleanStrings(field.value); // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message @@ -77,7 +75,6 @@ const DetailsExtendedMetadataTab: React.FC<{ //iterate through metadata catalogs !!metadata && metadata.length > 0 && -// @ts-expect-error TS(7006): Parameter 'catalog' implicitly has an 'any' type. metadata.map((catalog, key) => ( // initialize form {/* Render table row for each metadata field depending on type */} {!!catalog.fields && -// @ts-expect-error TS(7006): Parameter 'field' implicitly has an 'any' type. catalog.fields.map((field, index) => ( diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx index c86d7606fb..0ac8b838ca 100644 --- a/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx @@ -11,29 +11,29 @@ import { getUserInformation } from "../../../../selectors/userInfoSelectors"; import { hasAccess, isJson } from "../../../../utils/utils"; import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils"; import { useAppSelector } from "../../../../store"; +import { MetadataCatalog } from "../../../../slices/eventDetailsSlice"; /** * This component renders metadata details of a certain event or series */ -const DetailsMetadataTab: React.FC<{ - metadataFields: any, //TODO: Type this - updateResource: any, //TODO: Type this - resourceId: any, //TODO: Type this - header: any, //TODO: Type this - editAccessRole: any, //TODO: Type this -}> = ({ +const DetailsMetadataTab = ({ metadataFields, updateResource, resourceId, header, editAccessRole, +}: { + metadataFields: MetadataCatalog, + updateResource: (id: string, values: { [key: string]: any }) => void, + resourceId: string, + header: string, + editAccessRole: string, }) => { const { t } = useTranslation(); const user = useAppSelector(state => getUserInformation(state)); -// @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type. - const handleSubmit = (values) => { + const handleSubmit = (values: { [key: string]: any }) => { updateResource(resourceId, values); }; @@ -47,7 +47,6 @@ const DetailsMetadataTab: React.FC<{ !!metadataFields.fields && metadataFields.fields.length > 0 ) { -// @ts-expect-error TS(7006): Parameter 'field' implicitly has an 'any' type. metadataFields.fields.forEach((field) => { // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message initialValues[field.id] = field.value; @@ -88,7 +87,6 @@ const DetailsMetadataTab: React.FC<{ {/* Render table row for each metadata field depending on type */} {!!metadataFields && !!metadataFields.fields && -// @ts-expect-error TS(7006): Parameter 'field' implicitly has an 'any' type. metadataFields.fields.map((field, key) => ( @@ -126,7 +124,7 @@ const DetailsMetadataTab: React.FC<{ ) : ( { field.type === "time" || field.type === "date" - ? + ? : field.value } ) diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAccessPolicyTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAccessPolicyTab.tsx index a9061e7f3f..a9f7f65f44 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAccessPolicyTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAccessPolicyTab.tsx @@ -8,22 +8,23 @@ import { saveAccessPolicies, } from "../../../../slices/eventDetailsSlice"; import { unwrapResult } from "@reduxjs/toolkit"; +import { useTranslation } from "react-i18next"; /** * This component manages the access policy tab of the event details modal */ const EventDetailsAccessPolicyTab = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 'header' implicitly has an 'any' t... Remove this comment to see the full error message header, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'policyChanged' implicitly has an ... Remove this comment to see the full error message policyChanged, -// @ts-expect-error TS(7031): Binding element 'setPolicyChanged' implicitly has ... Remove this comment to see the full error message setPolicyChanged, +}: { + eventId: string, + header: string, + policyChanged: boolean, + setPolicyChanged: (value: boolean) => void, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); // TODO: Get rid of the wrappers when modernizing redux is done @@ -45,7 +46,6 @@ const EventDetailsAccessPolicyTab = ({ header={header} buttonText={"EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.LABEL"} saveButtonText={"SAVE"} - t={t} policies={policies} fetchAccessPolicies={fetchAccessPoliciesWrapper} fetchHasActiveTransactions={fetchHasActiveTransactionsWrapper} diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachmentDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachmentDetails.tsx index 545ae500a1..e8de1a0ef3 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachmentDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachmentDetails.tsx @@ -7,23 +7,22 @@ import { } from "../../../../selectors/eventDetailsSelectors"; import { humanReadableBytesFilter } from "../../../../utils/eventDetailsUtils"; import { useAppSelector } from "../../../../store"; +import { AssetTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the attachment details sub-tab for assets tab of event details modal */ const EventDetailsAssetAttachmentDetails = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message - eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + setHierarchy: (subTabName: AssetTabHierarchy) => void, }) => { + const { t } = useTranslation(); const attachment = useAppSelector(state => getAssetAttachmentDetails(state)); const isFetching = useAppSelector(state => isFetchingAssetAttachmentDetails(state)); -// @ts-expect-error TS(7006): Parameter 'subTabName' implicitly has an 'any' typ... Remove this comment to see the full error message - const openSubTab = (subTabName) => { + const openSubTab = (subTabName: AssetTabHierarchy) => { setHierarchy(subTabName); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachments.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachments.tsx index aca5e4e9ba..503e3530ba 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachments.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachments.tsx @@ -7,25 +7,26 @@ import { } from "../../../../selectors/eventDetailsSelectors"; import { useAppDispatch, useAppSelector } from "../../../../store"; import { fetchAssetAttachmentDetails } from "../../../../slices/eventDetailsSlice"; +import { AssetTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the attachments sub-tab for assets tab of event details modal */ const EventDetailsAssetAttachments = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + eventId: string, + setHierarchy: (subTabName: AssetTabHierarchy) => void, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const attachments = useAppSelector(state => getAssetAttachments(state)); const isFetching = useAppSelector(state => isFetchingAssetAttachments(state)); -// @ts-expect-error TS(7006): Parameter 'subTabName' implicitly has an 'any' typ... Remove this comment to see the full error message - const openSubTab = (subTabName, attachmentId = "") => { + const openSubTab = (subTabName: AssetTabHierarchy, attachmentId = "") => { if (subTabName === "attachment-details") { dispatch(fetchAssetAttachmentDetails({eventId, attachmentId})).then(); } diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogDetails.tsx index fac8ad8b5e..a37635875f 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogDetails.tsx @@ -7,23 +7,23 @@ import { } from "../../../../selectors/eventDetailsSelectors"; import { humanReadableBytesFilter } from "../../../../utils/eventDetailsUtils"; import { useAppSelector } from "../../../../store"; +import { AssetTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the catalog details sub-tab for assets tab of event details modal */ const EventDetailsAssetCatalogDetails = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message - eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + setHierarchy: (subTabName: AssetTabHierarchy) => void, }) => { + const { t } = useTranslation(); + const catalog = useAppSelector(state => getAssetCatalogDetails(state)); const isFetching = useAppSelector(state => isFetchingAssetCatalogDetails(state)); -// @ts-expect-error TS(7006): Parameter 'subTabName' implicitly has an 'any' typ... Remove this comment to see the full error message - const openSubTab = (subTabName) => { + const openSubTab = (subTabName: AssetTabHierarchy) => { setHierarchy(subTabName); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogs.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogs.tsx index 4a43a751b0..f8fe6d637d 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogs.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogs.tsx @@ -7,25 +7,26 @@ import { } from "../../../../selectors/eventDetailsSelectors"; import { useAppDispatch, useAppSelector } from "../../../../store"; import { fetchAssetCatalogDetails } from "../../../../slices/eventDetailsSlice"; +import { AssetTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the catalogs sub-tab for assets tab of event details modal */ const EventDetailsAssetCatalogs = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + eventId: string, + setHierarchy: (subTabName: AssetTabHierarchy) => void, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const catalogs = useAppSelector(state => getAssetCatalogs(state)); const isFetching = useAppSelector(state => isFetchingAssetCatalogs(state)); -// @ts-expect-error TS(7006): Parameter 'subTabName' implicitly has an 'any' typ... Remove this comment to see the full error message - const openSubTab = (subTabName, catalogId = "") => { + const openSubTab = (subTabName: AssetTabHierarchy, catalogId = "") => { if (subTabName === "catalog-details") { dispatch(fetchAssetCatalogDetails({eventId, catalogId})).then(); } diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMedia.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMedia.tsx index 74486ca21e..503a59912e 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMedia.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMedia.tsx @@ -7,25 +7,26 @@ import { } from "../../../../selectors/eventDetailsSelectors"; import { useAppDispatch, useAppSelector } from "../../../../store"; import { fetchAssetMediaDetails } from "../../../../slices/eventDetailsSlice"; +import { AssetTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the media sub-tab for assets tab of event details modal */ const EventDetailsAssetMedia = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + eventId: string, + setHierarchy: (subTabName: AssetTabHierarchy) => void, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const media = useAppSelector(state => getAssetMedia(state)); const isFetching = useAppSelector(state => isFetchingAssetMedia(state)); -// @ts-expect-error TS(7006): Parameter 'subTabName' implicitly has an 'any' typ... Remove this comment to see the full error message - const openSubTab = (subTabName, mediaId = "") => { + const openSubTab = (subTabName: AssetTabHierarchy, mediaId = "") => { if (subTabName === "media-details") { dispatch(fetchAssetMediaDetails({eventId, mediaId})).then(); } diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx index a64cde7fae..4d3a71a9ba 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMediaDetails.tsx @@ -10,23 +10,23 @@ import { humanReadableBytesFilter, } from "../../../../utils/eventDetailsUtils"; import { useAppSelector } from "../../../../store"; +import { AssetTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the media details sub-tab for assets tab of event details modal */ const EventDetailsAssetMediaDetails = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message - eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + setHierarchy: (subTabName: AssetTabHierarchy) => void, }) => { + const { t } = useTranslation(); + const media = useAppSelector(state => getAssetMediaDetails(state)); const isFetching = useAppSelector(state => isFetchingAssetMediaDetails(state)); -// @ts-expect-error TS(7006): Parameter 'subTabName' implicitly has an 'any' typ... Remove this comment to see the full error message - const openSubTab = (subTabName) => { + const openSubTab = (subTabName: AssetTabHierarchy) => { setHierarchy(subTabName); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx index 660a674782..599332fa9a 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx @@ -7,18 +7,19 @@ import { } from "../../../../selectors/eventDetailsSelectors"; import { humanReadableBytesFilter } from "../../../../utils/eventDetailsUtils"; import { useAppSelector } from "../../../../store"; +import { AssetTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the publication details sub-tab for assets tab of event details modal */ const EventDetailsAssetPublicationDetails = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message - eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + setHierarchy: (subTabName: AssetTabHierarchy) => void, }) => { + const { t } = useTranslation(); + const publication = useAppSelector(state => getAssetPublicationDetails(state)); const isFetching = useAppSelector(state => isFetchingAssetPublicationDetails(state)); diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublications.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublications.tsx index 1ea55480f5..72b9de1d0b 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublications.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublications.tsx @@ -7,22 +7,26 @@ import { } from "../../../../selectors/eventDetailsSelectors"; import { useAppDispatch, useAppSelector } from "../../../../store"; import { fetchAssetPublicationDetails } from "../../../../slices/eventDetailsSlice"; +import { AssetTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the publications sub-tab for assets tab of event details modal */ const EventDetailsAssetPublications = ({ - eventId, - t, - setHierarchy, -}: any) => { + eventId, + setHierarchy, +}: { + eventId: string, + setHierarchy: (subTabName: AssetTabHierarchy) => void, +}) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const publications = useAppSelector(state => getAssetPublications(state)); const isFetching = useAppSelector(state => isFetchingAssetPublications(state)); -// @ts-expect-error TS(7006): Parameter 'subTabName' implicitly has an 'any' typ... Remove this comment to see the full error message - const openSubTab = (subTabName, publicationId = "") => { + const openSubTab = (subTabName: AssetTabHierarchy, publicationId = "") => { if (subTabName === "publication-details") { dispatch(fetchAssetPublicationDetails({eventId, publicationId})).then(); } diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx index 8d63b5fa76..e7d7977e04 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx @@ -7,18 +7,20 @@ import { getAssetUploadOptions } from "../../../../selectors/eventSelectors"; import { translateOverrideFallback } from "../../../../utils/utils"; import { useAppDispatch, useAppSelector } from "../../../../store"; import { updateAssets } from "../../../../slices/eventDetailsSlice"; +import { AssetTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the add asset sub-tab for assets tab of event details modal */ const EventDetailsAssetsAddAsset = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + eventId: string, + setHierarchy: (subTabName: AssetTabHierarchy) => void, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const uploadAssetOptions = useAppSelector(state => getAssetUploadOptions(state)); @@ -28,8 +30,7 @@ const EventDetailsAssetsAddAsset = ({ (asset) => asset.type !== "track" ); -// @ts-expect-error TS(7006): Parameter 'subTabName' implicitly has an 'any' typ... Remove this comment to see the full error message - const openSubTab = (subTabName) => { + const openSubTab = (subTabName: AssetTabHierarchy) => { setHierarchy(subTabName); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsTab.tsx index fd538c7ba5..5c28d74635 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsTab.tsx @@ -18,18 +18,20 @@ import { fetchAssetPublications, fetchAssets, } from "../../../../slices/eventDetailsSlice"; +import { useTranslation } from "react-i18next"; +import { AssetTabHierarchy } from "../modals/EventDetails"; /** * This component manages the main assets tab of event details modal */ const EventDetailsAssetsTab = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + eventId: string, + setHierarchy: (subTabName: AssetTabHierarchy) => void, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const user = useAppSelector(state => getUserInformation(state)); @@ -42,24 +44,16 @@ const EventDetailsAssetsTab = ({ useEffect(() => { dispatch(removeNotificationWizardForm()); dispatch(fetchAssets(eventId)).then(); - - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const openSubTab = ( -// @ts-expect-error TS(7006): Parameter 'subTabName' implicitly has an 'any' typ... Remove this comment to see the full error message - subTabName, -// @ts-expect-error TS(7006): Parameter 'newassetupload' implicitly has an 'any'... Remove this comment to see the full error message - newassetupload, - bool1 = false, - bool2 = true + subTabName: AssetTabHierarchy, + newassetupload: string, ) => { dispatch(removeNotificationWizardForm()); if (subTabName === "asset-attachments") { dispatch(fetchAssetAttachments(eventId)).then(); - } else if (subTabName === "asset-attachments") { - dispatch(fetchAssetAttachments(eventId)).then(); } else if (subTabName === "asset-catalogs") { dispatch(fetchAssetCatalogs(eventId)).then(); } else if (subTabName === "asset-media") { @@ -112,8 +106,6 @@ const EventDetailsAssetsTab = ({ openSubTab( "add-asset", "newassetupload", - false, - true ) } > diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx index 482d0f3689..e5b0df8543 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx @@ -18,18 +18,19 @@ import { deleteCommentReply, } from "../../../../slices/eventDetailsSlice"; import { renderValidDate } from "../../../../utils/dateUtils"; +import { useTranslation } from "react-i18next"; /** * This component manages the comment tab of the event details modal */ const EventDetailsCommentsTab = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 'header' implicitly has an 'any' t... Remove this comment to see the full error message header, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, +}: { + eventId: string, + header: string, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const comments = useAppSelector(state => getComments(state)); diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx index 2132cc2a44..ca9a0b97f6 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx @@ -6,8 +6,9 @@ import { useAppDispatch, useAppSelector } from "../../../../store"; import { fetchEventPublications } from "../../../../slices/eventDetailsSlice"; const EventDetailsPublicationTab = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, +}: { + eventId: string, }) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx index c3a665a0fd..c6c2418dff 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx @@ -47,16 +47,17 @@ import { addNotification, } from "../../../../slices/notificationSlice"; import { Recording } from "../../../../slices/recordingSlice"; +import { useTranslation } from "react-i18next"; /** * This component manages the main assets tab of event details modal */ const EventDetailsSchedulingTab = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, +}: { + eventId: string, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const user = useAppSelector(state => getUserInformation(state)); @@ -647,7 +648,7 @@ const EventDetailsSchedulingTab = ({ formik.values.captureAgent ).find( (agent) => agent.id === input - )?.value + )?.value ?? "" )}
diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsStatisticsTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsStatisticsTab.tsx index 6c3f67af5d..eb400fa50d 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsStatisticsTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsStatisticsTab.tsx @@ -6,18 +6,19 @@ import { import TimeSeriesStatistics from "../../../shared/TimeSeriesStatistics"; import { useAppDispatch, useAppSelector } from "../../../../store"; import { fetchEventStatisticsValueUpdate } from "../../../../slices/eventDetailsSlice"; +import { useTranslation } from "react-i18next"; /** * This component manages the statistics tab of the event details modal */ const EventDetailsStatisticsTab = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 'header' implicitly has an 'any' t... Remove this comment to see the full error message header, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, +}: { + eventId: string, + header: string, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const statistics = useAppSelector(state => getStatistics(state)); diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx index e4dd981f2d..2f11485ebb 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowDetails.tsx @@ -15,26 +15,27 @@ import { } from "../../../../slices/eventDetailsSlice"; import { removeNotificationWizardForm } from "../../../../slices/notificationSlice"; import { renderValidDate } from "../../../../utils/dateUtils"; +import { WorkflowTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the workflow details for the workflows tab of the event details modal */ const EventDetailsWorkflowDetails = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + eventId: string, + setHierarchy: (subTabName: WorkflowTabHierarchy) => void, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const user = useAppSelector(state => getUserInformation(state)); const workflowData = useAppSelector(state => getWorkflow(state)); const isFetching = useAppSelector(state => isFetchingWorkflowDetails(state)); -// @ts-expect-error TS(7006): Parameter 'tabType' implicitly has an 'any' type. - const openSubTab = (tabType) => { + const openSubTab = (tabType: WorkflowTabHierarchy) => { dispatch(removeNotificationWizardForm()); setHierarchy(tabType); if (tabType === "workflow-operations") { diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx index e6a4a4d4fe..89e7df2408 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrorDetails.tsx @@ -9,22 +9,24 @@ import EventDetailsTabHierarchyNavigation from "./EventDetailsTabHierarchyNaviga import { useAppDispatch, useAppSelector } from "../../../../store"; import { removeNotificationWizardForm } from "../../../../slices/notificationSlice"; import { renderValidDate } from "../../../../utils/dateUtils"; +import { WorkflowTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the workflow error details for the workflows tab of the event details modal */ const EventDetailsWorkflowErrorDetails = ({ - eventId, - t, - setHierarchy, -}: any) => { + setHierarchy, +}: { + setHierarchy: (subTabName: WorkflowTabHierarchy) => void, +}) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const errorDetails = useAppSelector(state => getWorkflowErrorDetails(state)); const isFetching = useAppSelector(state => isFetchingWorkflowErrorDetails(state)); -// @ts-expect-error TS(7006): Parameter 'tabType' implicitly has an 'any' type. - const openSubTab = (tabType) => { + const openSubTab = (tabType: WorkflowTabHierarchy) => { dispatch(removeNotificationWizardForm()); setHierarchy(tabType); }; diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx index a245201577..56249d64ef 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowErrors.tsx @@ -10,26 +10,27 @@ import { useAppDispatch, useAppSelector } from "../../../../store"; import { removeNotificationWizardForm } from "../../../../slices/notificationSlice"; import { fetchWorkflowErrorDetails } from "../../../../slices/eventDetailsSlice"; import { renderValidDate } from "../../../../utils/dateUtils"; +import { WorkflowTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the workflow errors for the workflows tab of the event details modal */ const EventDetailsWorkflowErrors = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + eventId: string, + setHierarchy: (subTabName: WorkflowTabHierarchy) => void, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const workflow = useAppSelector(state => getWorkflow(state)); const errors = useAppSelector(state => getWorkflowErrors(state)); const isFetching = useAppSelector(state => isFetchingWorkflowErrors(state)); -// @ts-expect-error TS(7006): Parameter 'severity' implicitly has an 'any' type. - const severityColor = (severity) => { + const severityColor = (severity: "FAILURE" | "INFO" | "WARNING" | string) => { switch (severity.toUpperCase()) { case "FAILURE": return "red"; @@ -42,8 +43,7 @@ const EventDetailsWorkflowErrors = ({ } }; -// @ts-expect-error TS(7006): Parameter 'tabType' implicitly has an 'any' type. - const openSubTab = (tabType, errorId: number | undefined = undefined) => { + const openSubTab = (tabType: WorkflowTabHierarchy, errorId: number | undefined = undefined) => { dispatch(removeNotificationWizardForm()); setHierarchy(tabType); if (tabType === "workflow-error-details") { diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx index a5d645a96c..d7929a4acb 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperationDetails.tsx @@ -8,18 +8,18 @@ import EventDetailsTabHierarchyNavigation from "./EventDetailsTabHierarchyNaviga import { useAppDispatch, useAppSelector } from "../../../../store"; import { removeNotificationWizardForm } from "../../../../slices/notificationSlice"; import { renderValidDate } from "../../../../utils/dateUtils"; +import { WorkflowTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the workflow operation details for the workflows tab of the event details modal */ const EventDetailsWorkflowOperationDetails = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message - eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + setHierarchy: (subTabName: WorkflowTabHierarchy) => void, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const operationDetails = useAppSelector(state => getWorkflowOperationDetails(state)); diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperations.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperations.tsx index b97c18bfd3..2c307e0887 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperations.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowOperations.tsx @@ -9,15 +9,17 @@ import { useAppDispatch, useAppSelector } from "../../../../store"; import { removeNotificationWizardForm } from "../../../../slices/notificationSlice"; import { fetchWorkflowOperationDetails, fetchWorkflowOperations } from "../../../../slices/eventDetailsSlice"; import { useTranslation } from "react-i18next"; +import { WorkflowTabHierarchy } from "../modals/EventDetails"; /** * This component manages the workflow operations for the workflows tab of the event details modal */ const EventDetailsWorkflowOperations = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + eventId: string, + setHierarchy: (subTabName: WorkflowTabHierarchy) => void, }) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx index 8b1cccb55f..ce38fece3a 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx @@ -28,20 +28,20 @@ import { import { removeNotificationWizardForm } from "../../../../slices/notificationSlice"; import { renderValidDate } from "../../../../utils/dateUtils"; import { Tooltip } from "../../../shared/Tooltip"; +import { WorkflowTabHierarchy } from "../modals/EventDetails"; +import { useTranslation } from "react-i18next"; /** * This component manages the workflows tab of the event details modal */ const EventDetailsWorkflowTab = ({ -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, -// @ts-expect-error TS(7031): Binding element 't' implicitly has an 'any' type. - t, -// @ts-expect-error TS(7031): Binding element 'close' implicitly has an 'any' ty... Remove this comment to see the full error message - close, -// @ts-expect-error TS(7031): Binding element 'setHierarchy' implicitly has an '... Remove this comment to see the full error message setHierarchy, +}: { + eventId: string, + setHierarchy: (subTabName: WorkflowTabHierarchy) => void, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const user = useAppSelector(state => getUserInformation(state)); @@ -69,28 +69,24 @@ const EventDetailsWorkflowTab = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); -// @ts-expect-error TS(7006): Parameter 'workflowId' implicitly has an 'any' typ... Remove this comment to see the full error message - const isCurrentWorkflow = (workflowId) => { + const isCurrentWorkflow = (workflowId: string) => { let currentWorkflow = workflows.entries[workflows.entries.length - 1]; return currentWorkflow.id === workflowId; }; -// @ts-expect-error TS(7006): Parameter 'workflowId' implicitly has an 'any' typ... Remove this comment to see the full error message - const workflowAction = (workflowId, action) => { + const workflowAction = (workflowId: string, action: string) => { if (!performingWorkflowAction) { - dispatch(performWorkflowAction({eventId, workflowId, action, close})); + dispatch(performWorkflowAction({eventId, workflowId, action})); } }; -// @ts-expect-error TS(7006): Parameter 'workflowId' implicitly has an 'any' typ... Remove this comment to see the full error message - const deleteWorkflow = (workflowId) => { + const deleteWorkflow = (workflowId: string) => { if (!deletingWorkflow) { dispatch(deleteWf({eventId, workflowId})); } }; -// @ts-expect-error TS(7006): Parameter 'tabType' implicitly has an 'any' type. - const openSubTab = (tabType, workflowId) => { + const openSubTab = (tabType: WorkflowTabHierarchy, workflowId: string) => { dispatch(fetchWorkflowDetails({eventId, workflowId})).then(); setHierarchy(tabType); dispatch(removeNotificationWizardForm()); diff --git a/src/components/events/partials/ModalTabsAndPages/SeriesDetailsAccessTab.tsx b/src/components/events/partials/ModalTabsAndPages/SeriesDetailsAccessTab.tsx index 0159765e42..f9d73c0e6c 100644 --- a/src/components/events/partials/ModalTabsAndPages/SeriesDetailsAccessTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/SeriesDetailsAccessTab.tsx @@ -31,7 +31,7 @@ const SeriesDetailsAccessTab = ({ const fetchSeriesDetailsAclsWrapper = (id: any) => { dispatch(fetchSeriesDetailsAcls(id)); } - const updateSeriesAccessWrapper = (id: any, policies: any) => { + const updateSeriesAccessWrapper = async (id: any, policies: any) => { dispatch(updateSeriesAccess({id, policies})); } @@ -44,7 +44,6 @@ const SeriesDetailsAccessTab = ({ = ({ +const EventDetails = ({ tabIndex, eventId, close, policyChanged, setPolicyChanged, +}: { + tabIndex: number, + eventId: string, + close?: () => void, + policyChanged: boolean, + setPolicyChanged: (value: boolean) => void, }) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -77,8 +80,8 @@ const EventDetails : React.FC<{ }, []); const [page, setPage] = useState(tabIndex); - const [workflowTabHierarchy, setWorkflowTabHierarchy] = useState("entry"); - const [assetsTabHierarchy, setAssetsTabHierarchy] = useState("entry"); + const [workflowTabHierarchy, setWorkflowTabHierarchy] = useState("entry"); + const [assetsTabHierarchy, setAssetsTabHierarchy] = useState("entry"); // TODO: Get rid of the wrappers when modernizing redux is done const updateMetadataWrapper = (id: any, values: any) => { @@ -157,8 +160,7 @@ const EventDetails : React.FC<{ }, ]; -// @ts-expect-error TS(7006): Parameter 'tabNr' implicitly has an 'any' type. - const openTab = (tabNr) => { + const openTab = (tabNr: number) => { dispatch(removeNotificationWizardForm()); setWorkflowTabHierarchy("entry"); setAssetsTabHierarchy("entry"); @@ -221,7 +223,7 @@ const EventDetails : React.FC<{ @@ -239,89 +241,72 @@ const EventDetails : React.FC<{ ((assetsTabHierarchy === "entry" && ( )) || (assetsTabHierarchy === "add-asset" && ( )) || (assetsTabHierarchy === "asset-attachments" && ( )) || (assetsTabHierarchy === "attachment-details" && ( )) || (assetsTabHierarchy === "asset-catalogs" && ( )) || (assetsTabHierarchy === "catalog-details" && ( )) || (assetsTabHierarchy === "asset-media" && ( )) || (assetsTabHierarchy === "media-details" && ( )) || (assetsTabHierarchy === "asset-publications" && ( )) || (assetsTabHierarchy === "publication-details" && ( )))} {page === 4 && !isLoadingScheduling && ( - + )} {page === 5 && ((workflowTabHierarchy === "entry" && ( )) || (workflowTabHierarchy === "workflow-details" && ( )) || @@ -333,30 +318,24 @@ const EventDetails : React.FC<{ )) || (workflowTabHierarchy === "workflow-operation-details" && ( )) || (workflowTabHierarchy === "errors-and-warnings" && ( )) || (workflowTabHierarchy === "workflow-error-details" && ( )))} {page === 6 && ( @@ -364,15 +343,13 @@ const EventDetails : React.FC<{ {page === 7 && ( )} {page === 8 && !isLoadingStatistics && ( )} diff --git a/src/components/events/partials/modals/EventDetailsModal.tsx b/src/components/events/partials/modals/EventDetailsModal.tsx index 8b72efacb0..30adc4496b 100644 --- a/src/components/events/partials/modals/EventDetailsModal.tsx +++ b/src/components/events/partials/modals/EventDetailsModal.tsx @@ -10,16 +10,15 @@ import { availableHotkeys } from "../../../../configs/hotkeysConfig"; * This component renders the modal for displaying event details */ const EventDetailsModal = ({ -// @ts-expect-error TS(7031): Binding element 'handleClose' implicitly has an 'a... Remove this comment to see the full error message handleClose, -// @ts-expect-error TS(7031): Binding element 'showModal' implicitly has an 'any... Remove this comment to see the full error message - showModal, -// @ts-expect-error TS(7031): Binding element 'tabIndex' implicitly has an 'any'... Remove this comment to see the full error message tabIndex, -// @ts-expect-error TS(7031): Binding element 'eventTitle' implicitly has an 'an... Remove this comment to see the full error message eventTitle, -// @ts-expect-error TS(7031): Binding element 'eventId' implicitly has an 'any' ... Remove this comment to see the full error message eventId, +}: { + handleClose: () => void, + tabIndex: number, + eventTitle: string, + eventId: string, }) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -48,36 +47,33 @@ const EventDetailsModal = ({ return ( // todo: add hotkeys - showModal && ( - <> -
-
-
-
+ <> +
+
+
+
- setPolicyChanged(value)} - /> -
- - ) - ); + setPolicyChanged(value)} + /> +
+ + ) }; export default EventDetailsModal; diff --git a/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx b/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx index 327256a0ec..d265235cb0 100644 --- a/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx +++ b/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from "react"; import RenderMultiField from "../wizard/RenderMultiField"; import { + Acl, Role, fetchAclActions, fetchAclTemplateById, @@ -8,7 +9,7 @@ import { fetchRolesWithTarget, } from "../../../slices/aclSlice"; import Notifications from "../Notifications"; -import { Formik, Field, FieldArray } from "formik"; +import { Formik, Field, FieldArray, FormikErrors } from "formik"; import { NOTIFICATION_CONTEXT } from "../../../configs/modalConfig"; import { createPolicy, @@ -20,28 +21,15 @@ import DropDown from "../DropDown"; import { filterRoles, getAclTemplateText } from "../../../utils/aclUtils"; import { useAppDispatch, useAppSelector } from "../../../store"; import { removeNotificationWizardForm, addNotification } from "../../../slices/notificationSlice"; +import { useTranslation } from "react-i18next"; +import { Ace, TransformedAcl } from "../../../slices/aclDetailsSlice"; /** * This component manages the access policy tab of resource details modals */ -const ResourceDetailsAccessPolicyTab : React.FC <{ - resourceId: any, - header: any, - t: any, - policies: any, - fetchHasActiveTransactions?: any, - fetchAccessPolicies: any, - saveNewAccessPolicies: any, - descriptionText: string, - buttonText: string, - saveButtonText: string, - editAccessRole: string, - policyChanged: any, - setPolicyChanged: any, -}> = ({ +const ResourceDetailsAccessPolicyTab = ({ resourceId, header, - t, policies, fetchHasActiveTransactions, fetchAccessPolicies, @@ -52,7 +40,21 @@ const ResourceDetailsAccessPolicyTab : React.FC <{ editAccessRole, policyChanged, setPolicyChanged, +}: { + resourceId: string, + header: string, + policies: TransformedAcl[], + fetchHasActiveTransactions?: (id: string) => Promise, + fetchAccessPolicies: (id: string) => void, + saveNewAccessPolicies: (id: string, policies: { acl: { ace: Ace[] } }) => Promise, + descriptionText: string, + buttonText: string, + saveButtonText: string, + editAccessRole: string, + policyChanged: boolean, + setPolicyChanged: (value: boolean) => void, }) => { + const { t } = useTranslation(); const dispatch = useAppDispatch(); const baseAclId = ""; @@ -116,16 +118,14 @@ const ResourceDetailsAccessPolicyTab : React.FC <{ }, []); /* resets the formik form and hides the save and cancel buttons */ -// @ts-expect-error TS(7006): Parameter 'resetFormik' implicitly has an 'any' ty... Remove this comment to see the full error message - const resetPolicies = (resetFormik) => { + const resetPolicies = (resetFormik: () => void) => { setPolicyChanged(false); resetFormik(); }; /* transforms rules into proper format for saving and checks validity * if the policies are valid, the new policies are saved in the backend */ -// @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type. - const saveAccess = (values) => { + const saveAccess = (values: { policies: TransformedAcl[] }) => { dispatch(removeNotificationWizardForm()); const { roleWithFullRightsExists, allRulesValid } = validatePolicies( values @@ -153,7 +153,6 @@ const ResourceDetailsAccessPolicyTab : React.FC <{ } if (allRulesValid && roleWithFullRightsExists) { -// @ts-expect-error TS(2693): 'any' only refers to a type, but is being used as ... Remove this comment to see the full error message saveNewAccessPolicies(resourceId, access).then((success) => { // fetch new policies from the backend, if save successful if (success) { @@ -165,15 +164,12 @@ const ResourceDetailsAccessPolicyTab : React.FC <{ }; /* validates the policies in the formik form */ -// @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type. - const validateFormik = (values) => { - const errors = {}; + const validateFormik = (values: { policies: TransformedAcl[] }) => { + const errors: FormikErrors<{ emptyRole: string }> = {}; setPolicyChanged(isPolicyChanged(values.policies)); // each policy needs a role -// @ts-expect-error TS(7006): Parameter 'policy' implicitly has an 'any' type. if (values.policies.find((policy) => !policy.role || policy.role === "")) { -// @ts-expect-error TS(2339): Property 'emptyRole' does not exist on type '{}'. errors.emptyRole = "Empty role!"; } @@ -183,12 +179,10 @@ const ResourceDetailsAccessPolicyTab : React.FC <{ /* checks validity of the policies * each policy needs a role and at least one of: read-rights, write-rights, additional action * there needs to be at least one role, which has both read and write rights */ -// @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type. - const validatePolicies = (values) => { + const validatePolicies = (values: { policies: TransformedAcl[] }) => { let roleWithFullRightsExists = false; let allRulesValid = true; -// @ts-expect-error TS(7006): Parameter 'policy' implicitly has an 'any' type. values.policies.forEach((policy) => { if (policy.read && policy.write) { roleWithFullRightsExists = true; @@ -208,13 +202,11 @@ const ResourceDetailsAccessPolicyTab : React.FC <{ /* checks whether the current state of the policies from the formik is different form the * initial policies or equal to them */ -// @ts-expect-error TS(7006): Parameter 'newPolicies' implicitly has an 'any' ty... Remove this comment to see the full error message - const isPolicyChanged = (newPolicies) => { + const isPolicyChanged = (newPolicies: TransformedAcl[]) => { if (newPolicies.length !== policies.length) { return true; } -// @ts-expect-error TS(7006): Parameter 'pol1' implicitly has an 'any' type. - const sortSchema = (pol1, pol2) => { + const sortSchema = (pol1: TransformedAcl, pol2: TransformedAcl) => { return pol1.role > pol2.role ? 1 : -1; }; const sortedNewPolicies = [...newPolicies].sort(sortSchema); @@ -248,8 +240,7 @@ const ResourceDetailsAccessPolicyTab : React.FC <{ }; /* fetches the policies for the chosen template and sets the policies in the formik form to those policies */ -// @ts-expect-error TS(7006): Parameter 'templateId' implicitly has an 'any' typ... Remove this comment to see the full error message - const handleTemplateChange = async (templateId, setFormikFieldValue) => { + const handleTemplateChange = async (templateId: string, setFormikFieldValue: (field: string, value: any) => Promise) => { // fetch information about chosen template from backend let template = await fetchAclTemplateById(templateId); @@ -282,9 +273,8 @@ const ResourceDetailsAccessPolicyTab : React.FC <{ }} enableReinitialize validate={(values) => validateFormik(values)} - onSubmit={(values, actions) => -// @ts-expect-error TS(2339): Property 'then' does not exist on type 'void'. - saveAccess(values).then((r) => {}) + onSubmit={(values) => + saveAccess(values) } > {(formik) => ( @@ -489,8 +479,7 @@ const ResourceDetailsAccessPolicyTab : React.FC <{ ? "disabled" : "false" }`} -// @ts-expect-error TS(7006): Parameter 'read' implicitly has an 'any' type. - onChange={(read) => + onChange={(read: React.ChangeEvent) => replace(index, { ...policy, read: read.target.checked, @@ -514,8 +503,7 @@ const ResourceDetailsAccessPolicyTab : React.FC <{ ? "disabled" : "false" }`} -// @ts-expect-error TS(7006): Parameter 'write' implicitly has an 'any' type. - onChange={(write) => + onChange={(write: React.ChangeEvent) => replace(index, { ...policy, write: @@ -555,9 +543,7 @@ const ResourceDetailsAccessPolicyTab : React.FC <{ )) && policy.actions.map( ( -// @ts-expect-error TS(7006): Parameter 'customAction' implicitly has an 'any' t... Remove this comment to see the full error message customAction, -// @ts-expect-error TS(7006): Parameter 'actionKey' implicitly has an 'any' type... Remove this comment to see the full error message actionKey ) => (
diff --git a/src/slices/eventDetailsSlice.ts b/src/slices/eventDetailsSlice.ts index 31e5d20b9e..5be2f84977 100644 --- a/src/slices/eventDetailsSlice.ts +++ b/src/slices/eventDetailsSlice.ts @@ -31,6 +31,7 @@ import { Statistics, fetchStatistics, fetchStatisticsValueUpdate } from './stati import { Ace, TransformedAcl, TransformedAcls } from './aclDetailsSlice'; type MetadataField = { + collection?: { [key: string]: unknown }[], // different for e.g. languages and presenters id: string, label: string, // translation key readOnly: boolean, @@ -39,6 +40,12 @@ type MetadataField = { value: string, } +export type MetadataCatalog = { + title: string, // translation key + flavor: string, + fields: MetadataField[] | undefined, +} + interface Assets { id: string, mimetype: string, @@ -67,7 +74,7 @@ type CommentAuthor = { type Workflow = { scheduling: boolean, entries: { - id: number, + id: string, status: string, //translation key submitted: string, //date submitter: string, @@ -162,16 +169,8 @@ type EventDetailsState = { statusStatisticsValue: 'uninitialized' | 'loading' | 'succeeded' | 'failed', errorStatisticsValue: SerializedError | null, eventId: string, - metadata: { - title: string, // translation key - flavor: string, - fields: MetadataField[] | undefined - }, - extendedMetadata: { - title: string, // not (necessarily) translation key - flavor: string, - fields: MetadataField[] | undefined - }[], + metadata: MetadataCatalog, + extendedMetadata: MetadataCatalog[], assets: { attachments: number, catalogs: number, @@ -234,12 +233,7 @@ type EventDetailsState = { assetPublicationDetails: AssetDetails & { channel: string, }, - policies: { - actions: string[], - read: boolean, - role: string, - write: boolean, - }[], + policies: TransformedAcl[], comments: { author: CommentAuthor, creationDate: string, @@ -1296,7 +1290,7 @@ export const performWorkflowAction = createAsyncThunk('eventDetails/performWorkf eventId: string, workflowId: string, action: string, - close: () => void, + close?: () => void, }, { dispatch }) => { const { eventId, workflowId, action, close} = params; let headers = { @@ -1327,7 +1321,7 @@ export const performWorkflowAction = createAsyncThunk('eventDetails/performWorkf context: NOTIFICATION_CONTEXT }) ); - close(); + close && close(); }) .catch((response) => { dispatch( @@ -1345,7 +1339,7 @@ export const performWorkflowAction = createAsyncThunk('eventDetails/performWorkf export const deleteWorkflow = createAsyncThunk('eventDetails/deleteWorkflow', async (params: { eventId: string, - workflowId: number + workflowId: string }, { dispatch, getState }) => { const { eventId, workflowId } = params; @@ -1505,11 +1499,7 @@ export const updateMetadata = createAsyncThunk('eventDetails/updateMetadata', as export const updateExtendedMetadata = createAsyncThunk('eventDetails/updateExtendedMetadata', async (params: { eventId: string, values: { [key: string]: any }, - catalog: { - flavor: string, - title: string, - fields: { [key: string]: any }[] - } + catalog: MetadataCatalog }, { dispatch, getState }) => { const { eventId, values, catalog } = params; @@ -1617,7 +1607,7 @@ export const updateAssets = createAsyncThunk('eventDetails/updateAssets', async export const saveAccessPolicies = createAsyncThunk('eventDetails/saveAccessPolicies', async (params: { eventId: string, - policies: { [key: string]: TransformedAcl } + policies: { acl: { ace: Ace[] } } }, { dispatch }) => { const { eventId, policies } = params; const headers = getHttpHeaders(); diff --git a/src/slices/seriesDetailsSlice.ts b/src/slices/seriesDetailsSlice.ts index a12c28a78c..a028d883f9 100644 --- a/src/slices/seriesDetailsSlice.ts +++ b/src/slices/seriesDetailsSlice.ts @@ -18,25 +18,11 @@ import { NOTIFICATION_CONTEXT } from "../configs/modalConfig"; import { RootState } from '../store'; import { Statistics, fetchStatistics, fetchStatisticsValueUpdate } from './statisticsSlice'; import { Ace, TransformedAcl, TransformedAcls } from './aclDetailsSlice'; +import { MetadataCatalog } from './eventDetailsSlice'; /** * This file contains redux reducer for actions affecting the state of a series */ -type MetadataCatalog = { - title: string, - flavor: string, - fields: { - collection?: {}[], // different for e.g. languages and presenters - id: string, - label: string, - readOnly: boolean, - required: boolean, - translatable?: boolean, - type: string, - value: string | string[], - }[] -} - type Feed = { link: string, type: string, diff --git a/src/utils/resourceUtils.ts b/src/utils/resourceUtils.ts index d16c350986..3c29f4f437 100644 --- a/src/utils/resourceUtils.ts +++ b/src/utils/resourceUtils.ts @@ -1,3 +1,4 @@ +import { Ace } from './../slices/aclDetailsSlice'; import { getFilters, getTextFilter } from "../selectors/tableFilterSelectors"; import { getPageLimit, @@ -397,10 +398,13 @@ export const getMetadataCollectionFieldName = (metadataField, field) => { }; // Prepare rules of access policies for post of new events or series -// @ts-expect-error TS(7006): Parameter 'policies' implicitly has an 'any' type. -export const prepareAccessPolicyRulesForPost = (policies) => { +export const prepareAccessPolicyRulesForPost = (policies: TransformedAcl[]) => { // access policies for post request - let access = { + let access : { + acl : { + ace: Ace[] + } + } = { acl: { ace: [], }, @@ -410,7 +414,6 @@ export const prepareAccessPolicyRulesForPost = (policies) => { for (let i = 0; policies.length > i; i++) { if (policies[i].read) { access.acl.ace = access.acl.ace.concat({ -// @ts-expect-error TS(2769): No overload matches this call. action: "read", allow: policies[i].read, role: policies[i].role, @@ -418,7 +421,6 @@ export const prepareAccessPolicyRulesForPost = (policies) => { } if (policies[i].write) { access.acl.ace = access.acl.ace.concat({ -// @ts-expect-error TS(2769): No overload matches this call. action: "write", allow: policies[i].write, role: policies[i].role, @@ -427,7 +429,6 @@ export const prepareAccessPolicyRulesForPost = (policies) => { if (policies[i].actions.length > 0) { for (let j = 0; policies[i].actions.length > j; j++) { access.acl.ace = access.acl.ace.concat({ -// @ts-expect-error TS(2769): No overload matches this call. action: policies[i].actions[j], allow: true, role: policies[i].role, From a0609c1edd84e8df1d311df7f95d9a739ddd8842 Mon Sep 17 00:00:00 2001 From: Arnei Date: Fri, 21 Jun 2024 12:14:34 +0200 Subject: [PATCH 2/4] Default typing for createAsyncThunk Wraps `createAsyncThunk` in `createAsyncThunk.withTypes`, allowing us to provide default typing and remove certain type assertions. --- src/createAsyncThunkWithTypes.ts | 14 ++++ src/slices/aclDetailsSlice.ts | 7 +- src/slices/aclSlice.ts | 8 +-- src/slices/eventDetailsSlice.ts | 102 ++++++++++++++-------------- src/slices/eventSlice.ts | 29 ++++---- src/slices/groupDetailsSlice.ts | 7 +- src/slices/groupSlice.ts | 12 ++-- src/slices/healthSlice.ts | 5 +- src/slices/jobSlice.ts | 8 +-- src/slices/notificationSlice.ts | 8 +-- src/slices/recordingDetailsSlice.ts | 5 +- src/slices/recordingSlice.ts | 10 +-- src/slices/seriesDetailsSlice.ts | 36 +++++----- src/slices/seriesSlice.ts | 20 +++--- src/slices/serverSlice.ts | 10 +-- src/slices/serviceSlice.ts | 10 +-- src/slices/statisticsSlice.ts | 12 ++-- src/slices/tableFilterSlice.ts | 16 ++--- src/slices/themeDetailsSlice.ts | 9 +-- src/slices/themeSlice.ts | 12 ++-- src/slices/userDetailsSlice.ts | 7 +- src/slices/userInfoSlice.ts | 7 +- src/slices/userSlice.ts | 12 ++-- src/slices/workflowSlice.ts | 5 +- src/thunks/assetsThunks.ts | 7 +- 25 files changed, 200 insertions(+), 178 deletions(-) create mode 100644 src/createAsyncThunkWithTypes.ts diff --git a/src/createAsyncThunkWithTypes.ts b/src/createAsyncThunkWithTypes.ts new file mode 100644 index 0000000000..4727560664 --- /dev/null +++ b/src/createAsyncThunkWithTypes.ts @@ -0,0 +1,14 @@ +import { createAsyncThunk } from "@reduxjs/toolkit" +import { AppDispatch, RootState } from "./store" + +/** + * Use instead of createAsyncThunk to provide basic typing to all async thunks + * + * Thematically this belongs in `store.ts`. However, this causes + * "Cannot access 'createAsyncThunk' before initialization", + * so this has to be moved into it's own file. + */ +export const createAppAsyncThunk = createAsyncThunk.withTypes<{ + state: RootState + dispatch: AppDispatch +}>() diff --git a/src/slices/aclDetailsSlice.ts b/src/slices/aclDetailsSlice.ts index e1638b4511..121e814f29 100644 --- a/src/slices/aclDetailsSlice.ts +++ b/src/slices/aclDetailsSlice.ts @@ -1,7 +1,8 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import axios from 'axios'; import { prepareAccessPolicyRulesForPost } from '../utils/resourceUtils'; import { addNotification } from './notificationSlice'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of details of an ACL @@ -43,7 +44,7 @@ const initialState: AclDetailsState = { }; // fetch details about a certain acl from server -export const fetchAclDetails = createAsyncThunk('aclDetails/fetchAclDetails', async (aclId: number) => { +export const fetchAclDetails = createAppAsyncThunk('aclDetails/fetchAclDetails', async (aclId: number) => { const res = await axios.get(`/admin-ng/acl/${aclId}`); let aclDetails = res.data; @@ -128,7 +129,7 @@ export const fetchAclDetails = createAsyncThunk('aclDetails/fetchAclDetails', as }); // update details of a certain acl -export const updateAclDetails = createAsyncThunk('aclDetails/updateAclDetails', async (params: { +export const updateAclDetails = createAppAsyncThunk('aclDetails/updateAclDetails', async (params: { values: { name: string, acls: TransformedAcls, diff --git a/src/slices/aclSlice.ts b/src/slices/aclSlice.ts index 7d09d8fdfa..8b631b12fe 100644 --- a/src/slices/aclSlice.ts +++ b/src/slices/aclSlice.ts @@ -1,4 +1,4 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import { TableConfig, aclsTableConfig } from "../configs/tableConfigs/aclsTableConfig"; import axios from 'axios'; import { getURLParams, prepareAccessPolicyRulesForPost, transformAclTemplatesResponse } from '../utils/resourceUtils'; @@ -6,7 +6,7 @@ import { transformToIdValueArray } from '../utils/utils'; import { NOTIFICATION_CONTEXT_ACCESS } from '../configs/modalConfig'; import { addNotification, removeNotificationWizardAccess } from './notificationSlice'; import { AppDispatch } from '../store'; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of acls @@ -64,9 +64,9 @@ const initialState: AclsState = { limit: 0, }; -export const fetchAcls = createAsyncThunk('acls/fetchAcls', async (_, { getState }) => { +export const fetchAcls = createAppAsyncThunk('acls/fetchAcls', async (_, { getState }) => { const state = getState(); - let params = getURLParams(state as RootState); + let params = getURLParams(state); // Just make the async request here, and return the response. // This will automatically dispatch a `pending` action first, // and then `fulfilled` or `rejected` actions based on the promise. diff --git a/src/slices/eventDetailsSlice.ts b/src/slices/eventDetailsSlice.ts index bdde6074a4..3d7b98e860 100644 --- a/src/slices/eventDetailsSlice.ts +++ b/src/slices/eventDetailsSlice.ts @@ -1,4 +1,4 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice, unwrapResult } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice, unwrapResult } from '@reduxjs/toolkit' import axios from 'axios'; import { addNotification, removeNotificationWizardForm } from "./notificationSlice"; import { @@ -26,7 +26,7 @@ import { calculateDuration } from "../utils/dateUtils"; import { fetchRecordings } from "./recordingSlice"; import { getRecordings } from "../selectors/recordingSelectors"; import { Workflow as WorkflowDefinitions} from "./workflowSlice"; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; import { Statistics, fetchStatistics, fetchStatisticsValueUpdate } from './statisticsSlice'; import { Ace, TransformedAcl, TransformedAcls } from './aclDetailsSlice'; @@ -567,7 +567,7 @@ const initialState: EventDetailsState = { }; -export const fetchMetadata = createAsyncThunk('eventDetails/fetchMetadata', async (eventId: string) => { +export const fetchMetadata = createAppAsyncThunk('eventDetails/fetchMetadata', async (eventId: string) => { const metadataRequest = await axios.get(`/admin-ng/event/${eventId}/metadata.json`); const metadataResponse = await metadataRequest.data; @@ -613,7 +613,7 @@ export const fetchMetadata = createAsyncThunk('eventDetails/fetchMetadata', asyn return { metadata, extendedMetadata } }); -export const fetchAssets = createAsyncThunk('eventDetails/fetchAssets', async (eventId: string, { dispatch }) => { +export const fetchAssets = createAppAsyncThunk('eventDetails/fetchAssets', async (eventId: string, { dispatch }) => { const assetsRequest = await axios.get( `/admin-ng/event/${eventId}/asset/assets.json` ); @@ -694,7 +694,7 @@ const formatUploadAssetOptions = (optionsData: object) => { return optionsResult; }; -export const fetchAssetAttachments = createAsyncThunk('eventDetails/fetchAssetAttachments', async (eventId: string) => { +export const fetchAssetAttachments = createAppAsyncThunk('eventDetails/fetchAssetAttachments', async (eventId: string) => { let params = new URLSearchParams(); params.append("id1", "attachment"); @@ -705,7 +705,7 @@ export const fetchAssetAttachments = createAsyncThunk('eventDetails/fetchAssetAt return await attachmentsRequest.data; }); -export const fetchAssetAttachmentDetails = createAsyncThunk('eventDetails/fetchAssetAttachmentDetails', async (params: { +export const fetchAssetAttachmentDetails = createAppAsyncThunk('eventDetails/fetchAssetAttachmentDetails', async (params: { eventId: string, attachmentId: string }) => { @@ -720,7 +720,7 @@ export const fetchAssetAttachmentDetails = createAsyncThunk('eventDetails/fetchA return await attachmentDetailsRequest.data; }); -export const fetchAssetCatalogs = createAsyncThunk('eventDetails/fetchAssetCatalogs', async (eventId: string) => { +export const fetchAssetCatalogs = createAppAsyncThunk('eventDetails/fetchAssetCatalogs', async (eventId: string) => { let params = new URLSearchParams(); params.append("id1", "catalog"); @@ -731,7 +731,7 @@ export const fetchAssetCatalogs = createAsyncThunk('eventDetails/fetchAssetCatal return await catalogsRequest.data; }); -export const fetchAssetCatalogDetails = createAsyncThunk('eventDetails/fetchAssetCatalogDetails', async (params: { +export const fetchAssetCatalogDetails = createAppAsyncThunk('eventDetails/fetchAssetCatalogDetails', async (params: { eventId: string, catalogId: string }) => { @@ -746,7 +746,7 @@ export const fetchAssetCatalogDetails = createAsyncThunk('eventDetails/fetchAsse return await catalogDetailsRequest.data; }); -export const fetchAssetMedia = createAsyncThunk('eventDetails/fetchAssetMedia', async (eventId: string) => { +export const fetchAssetMedia = createAppAsyncThunk('eventDetails/fetchAssetMedia', async (eventId: string) => { let params = new URLSearchParams(); params.append("id1", "media"); @@ -771,7 +771,7 @@ export const fetchAssetMedia = createAsyncThunk('eventDetails/fetchAssetMedia', return media; }); -export const fetchAssetMediaDetails = createAsyncThunk('eventDetails/fetchAssetMediaDetails', async (params: { +export const fetchAssetMediaDetails = createAppAsyncThunk('eventDetails/fetchAssetMediaDetails', async (params: { eventId: string, mediaId: string }) => { @@ -803,7 +803,7 @@ export const fetchAssetMediaDetails = createAsyncThunk('eventDetails/fetchAssetM return mediaDetails; }); -export const fetchAssetPublications = createAsyncThunk('eventDetails/fetchAssetPublications', async (eventId: string) => { +export const fetchAssetPublications = createAppAsyncThunk('eventDetails/fetchAssetPublications', async (eventId: string) => { let params = new URLSearchParams(); params.append("id1", "publication"); @@ -814,7 +814,7 @@ export const fetchAssetPublications = createAsyncThunk('eventDetails/fetchAssetP return await publicationsRequest.data; }); -export const fetchAssetPublicationDetails = createAsyncThunk('eventDetails/fetchAssetPublicationDetails', async (params: { +export const fetchAssetPublicationDetails = createAppAsyncThunk('eventDetails/fetchAssetPublicationDetails', async (params: { eventId: string, publicationId: string }) => { @@ -829,7 +829,7 @@ export const fetchAssetPublicationDetails = createAsyncThunk('eventDetails/fetch return await publicationDetailsRequest.data; }); -export const fetchAccessPolicies = createAsyncThunk('eventDetails/fetchAccessPolicies', async (eventId: string) => { +export const fetchAccessPolicies = createAppAsyncThunk('eventDetails/fetchAccessPolicies', async (eventId: string) => { const policyData = await axios.get( `/admin-ng/event/${eventId}/access.json` ); @@ -858,7 +858,7 @@ export const fetchAccessPolicies = createAsyncThunk('eventDetails/fetchAccessPol return policies; }); -export const fetchComments = createAsyncThunk('eventDetails/fetchComments', async (eventId: string) => { +export const fetchComments = createAppAsyncThunk('eventDetails/fetchComments', async (eventId: string) => { const commentsData = await axios.get(`/admin-ng/event/${eventId}/comments`); const comments = await commentsData.data; @@ -870,7 +870,7 @@ export const fetchComments = createAsyncThunk('eventDetails/fetchComments', asyn return { comments, commentReasons } }); -export const fetchEventPublications = createAsyncThunk('eventDetails/fetchEventPublications', async (eventId: string) => { +export const fetchEventPublications = createAppAsyncThunk('eventDetails/fetchEventPublications', async (eventId: string) => { let data = await axios.get(`/admin-ng/event/${eventId}/publications.json`); let publications = await data.data; @@ -915,7 +915,7 @@ export const fetchEventPublications = createAsyncThunk('eventDetails/fetchEventP return publications.publications; }); -export const saveComment = createAsyncThunk('eventDetails/saveComment', async (params: { +export const saveComment = createAppAsyncThunk('eventDetails/saveComment', async (params: { eventId: string, commentText: string, commentReason: string @@ -937,7 +937,7 @@ export const saveComment = createAsyncThunk('eventDetails/saveComment', async (p return true; }); -export const saveCommentReply = createAsyncThunk('eventDetails/saveCommentReply', async (params: { +export const saveCommentReply = createAppAsyncThunk('eventDetails/saveCommentReply', async (params: { eventId: string, commentId: string, replyText: string, @@ -961,7 +961,7 @@ export const saveCommentReply = createAsyncThunk('eventDetails/saveCommentReply' return true; }); -export const fetchSchedulingInfo = createAsyncThunk('eventDetails/fetchSchedulingInfo', async (eventId: string, { dispatch, getState }) => { +export const fetchSchedulingInfo = createAppAsyncThunk('eventDetails/fetchSchedulingInfo', async (eventId: string, { dispatch, getState }) => { // get data from API about event scheduling const schedulingRequest = await axios.get( `/admin-ng/event/${eventId}/scheduling.json` @@ -971,7 +971,7 @@ export const fetchSchedulingInfo = createAsyncThunk('eventDetails/fetchSchedulin // get data from API about capture agents await dispatch(fetchRecordings("inputs")); - const state = getState() as RootState; + const state = getState(); const captureAgents = getRecordings(state); const startDate = new Date(schedulingResponse.start); @@ -1034,7 +1034,7 @@ export const fetchSchedulingInfo = createAsyncThunk('eventDetails/fetchSchedulin return source; }); -export const saveSchedulingInfo = createAsyncThunk('eventDetails/saveSchedulingInfo', async (params: { +export const saveSchedulingInfo = createAppAsyncThunk('eventDetails/saveSchedulingInfo', async (params: { eventId: string, values: { captureAgent: string, @@ -1053,8 +1053,8 @@ export const saveSchedulingInfo = createAsyncThunk('eventDetails/saveSchedulingI }, { dispatch, getState }) => { const { eventId, values, startDate, endDate } = params; - const state = getState() as RootState; - const oldSource = getSchedulingSource(state as RootState); + const state = getState(); + const oldSource = getSchedulingSource(state); const captureAgents = getRecordings(state); let device: Device = { id: "", @@ -1135,7 +1135,7 @@ export const saveSchedulingInfo = createAsyncThunk('eventDetails/saveSchedulingI // TODO: This does not return a boolean anymore. Fix this in usage, make users // get their info from the state -export const checkConflicts = createAsyncThunk('eventDetails/checkConflicts', async (params: { +export const checkConflicts = createAppAsyncThunk('eventDetails/checkConflicts', async (params: { eventId: string, startDate: Date, endDate: Date, @@ -1239,7 +1239,7 @@ if (endDate < now) { return { conflicts, hasSchedulingConflicts }; }); -export const fetchWorkflows = createAsyncThunk('eventDetails/fetchWorkflows', async (eventId: string, { dispatch, getState }) => { +export const fetchWorkflows = createAppAsyncThunk('eventDetails/fetchWorkflows', async (eventId: string, { dispatch, getState }) => { // todo: show notification if there are active transactions // dispatch(addNotification('warning', 'ACTIVE_TRANSACTION', -1, null, NOTIFICATION_CONTEXT)); @@ -1271,7 +1271,7 @@ export const fetchWorkflows = createAsyncThunk('eventDetails/fetchWorkflows', as await dispatch(fetchWorkflowDef("event-details")); - const state = getState() as RootState; + const state = getState(); const workflowDefinitions = getWorkflowDef(state); @@ -1281,7 +1281,7 @@ export const fetchWorkflows = createAsyncThunk('eventDetails/fetchWorkflows', as return workflows; }); -export const fetchWorkflowDetails = createAsyncThunk('eventDetails/fetchWorkflowDetails', async (params: { +export const fetchWorkflowDetails = createAppAsyncThunk('eventDetails/fetchWorkflowDetails', async (params: { eventId: string, workflowId: string }) => { @@ -1292,7 +1292,7 @@ export const fetchWorkflowDetails = createAsyncThunk('eventDetails/fetchWorkflow return await data.data; }); -export const performWorkflowAction = createAsyncThunk('eventDetails/performWorkflowAction', async (params: { +export const performWorkflowAction = createAppAsyncThunk('eventDetails/performWorkflowAction', async (params: { eventId: string, workflowId: string, action: string, @@ -1343,7 +1343,7 @@ export const performWorkflowAction = createAsyncThunk('eventDetails/performWorkf }); }); -export const deleteWorkflow = createAsyncThunk('eventDetails/deleteWorkflow', async (params: { +export const deleteWorkflow = createAppAsyncThunk('eventDetails/deleteWorkflow', async (params: { eventId: string, workflowId: number }, { dispatch, getState }) => { @@ -1363,7 +1363,7 @@ export const deleteWorkflow = createAsyncThunk('eventDetails/deleteWorkflow', as ); const state = getState(); - const workflows = getWorkflows(state as RootState); + const workflows = getWorkflows(state); if (!!workflows.entries) { return workflows.entries.filter((wf) => wf.id !== workflowId) @@ -1387,7 +1387,7 @@ export const deleteWorkflow = createAsyncThunk('eventDetails/deleteWorkflow', as return workflowEntries; }); -export const fetchWorkflowOperations = createAsyncThunk('eventDetails/fetchWorkflowOperations', async (params: { +export const fetchWorkflowOperations = createAppAsyncThunk('eventDetails/fetchWorkflowOperations', async (params: { eventId: string, workflowId: string }) => { @@ -1399,7 +1399,7 @@ export const fetchWorkflowOperations = createAsyncThunk('eventDetails/fetchWorkf return { entries: workflowOperationsData }; }); -export const fetchWorkflowOperationDetails = createAsyncThunk('eventDetails/fetchWorkflowOperationDetails', async (params: { +export const fetchWorkflowOperationDetails = createAppAsyncThunk('eventDetails/fetchWorkflowOperationDetails', async (params: { eventId: string, workflowId: string, operationId?: number @@ -1411,7 +1411,7 @@ export const fetchWorkflowOperationDetails = createAsyncThunk('eventDetails/fetc return await data.data; }); -export const fetchWorkflowErrors = createAsyncThunk('eventDetails/fetchWorkflowErrors', async (params: { +export const fetchWorkflowErrors = createAppAsyncThunk('eventDetails/fetchWorkflowErrors', async (params: { eventId: string, workflowId: string }) => { @@ -1423,7 +1423,7 @@ export const fetchWorkflowErrors = createAsyncThunk('eventDetails/fetchWorkflowE return { entries: workflowErrorsData }; }); -export const fetchWorkflowErrorDetails = createAsyncThunk('eventDetails/fetchWorkflowErrorDetails', async (params: { +export const fetchWorkflowErrorDetails = createAppAsyncThunk('eventDetails/fetchWorkflowErrorDetails', async (params: { eventId: string, workflowId: string, errorId?: number @@ -1436,10 +1436,10 @@ export const fetchWorkflowErrorDetails = createAsyncThunk('eventDetails/fetchWor }); // TODO: Fix this after the modernization of statisticsThunks happened -export const fetchEventStatistics = createAsyncThunk('eventDetails/fetchEventStatistics', async (eventId: string, { getState }) => { +export const fetchEventStatistics = createAppAsyncThunk('eventDetails/fetchEventStatistics', async (eventId: string, { getState }) => { // get prior statistics const state = getState(); - const statistics = getStatistics(state as RootState); + const statistics = getStatistics(state); return await ( fetchStatistics( @@ -1451,7 +1451,7 @@ export const fetchEventStatistics = createAsyncThunk('eventDetails/fetchEventSta }); // TODO: Fix this after the modernization of statisticsThunks happened -export const fetchEventStatisticsValueUpdate = createAsyncThunk('eventDetails/fetchEventStatisticsValueUpdate', async (params: { +export const fetchEventStatisticsValueUpdate = createAppAsyncThunk('eventDetails/fetchEventStatisticsValueUpdate', async (params: { eventId: string, providerId: string, from: string, @@ -1462,7 +1462,7 @@ export const fetchEventStatisticsValueUpdate = createAsyncThunk('eventDetails/fe const { eventId, providerId, from, to, dataResolution, timeMode } = params; // get prior statistics const state = getState(); - const statistics = getStatistics(state as RootState); + const statistics = getStatistics(state); return await ( fetchStatisticsValueUpdate( @@ -1478,13 +1478,13 @@ export const fetchEventStatisticsValueUpdate = createAsyncThunk('eventDetails/fe ); }); -export const updateMetadata = createAsyncThunk('eventDetails/updateMetadata', async (params: { +export const updateMetadata = createAppAsyncThunk('eventDetails/updateMetadata', async (params: { eventId: string, values: { [key: string]: any } }, { dispatch, getState }) => { const { eventId, values } = params; - let metadataInfos = getMetadata(getState() as RootState); + let metadataInfos = getMetadata(getState()); const { fields, data, headers } = transformMetadataForUpdate( metadataInfos, @@ -1502,7 +1502,7 @@ export const updateMetadata = createAsyncThunk('eventDetails/updateMetadata', as dispatch(setEventMetadata(eventMetadata)); }); -export const updateExtendedMetadata = createAsyncThunk('eventDetails/updateExtendedMetadata', async (params: { +export const updateExtendedMetadata = createAppAsyncThunk('eventDetails/updateExtendedMetadata', async (params: { eventId: string, values: { [key: string]: any }, catalog: { @@ -1526,7 +1526,7 @@ export const updateExtendedMetadata = createAsyncThunk('eventDetails/updateExten fields: fields, }; - const oldExtendedMetadata = getExtendedMetadata(getState() as RootState); + const oldExtendedMetadata = getExtendedMetadata(getState()); let newExtendedMetadata = []; for (const catalog of oldExtendedMetadata) { @@ -1543,7 +1543,7 @@ export const updateExtendedMetadata = createAsyncThunk('eventDetails/updateExten dispatch(setExtendedEventMetadata(newExtendedMetadata)); }); -export const fetchHasActiveTransactions = createAsyncThunk('eventDetails/fetchHasActiveTransactions', async (eventId: string) => { +export const fetchHasActiveTransactions = createAppAsyncThunk('eventDetails/fetchHasActiveTransactions', async (eventId: string) => { const transactionsData = await axios.get( `/admin-ng/event/${eventId}/hasActiveTransaction` ); @@ -1551,13 +1551,13 @@ export const fetchHasActiveTransactions = createAsyncThunk('eventDetails/fetchHa return hasActiveTransactions; }); -export const updateAssets = createAsyncThunk('eventDetails/updateAssets', async (params: { +export const updateAssets = createAppAsyncThunk('eventDetails/updateAssets', async (params: { values: { [key: string]: string }, eventId: string }, { dispatch, getState }) => { const { values, eventId } = params; // get asset upload options from redux store - const state = getState() as RootState; + const state = getState(); const uploadAssetOptions = getAssetUploadOptions(state); const uploadAssetWorkflow = getAssetUploadWorkflow(state); @@ -1615,7 +1615,7 @@ export const updateAssets = createAsyncThunk('eventDetails/updateAssets', async }); }); -export const saveAccessPolicies = createAsyncThunk('eventDetails/saveAccessPolicies', async (params: { +export const saveAccessPolicies = createAppAsyncThunk('eventDetails/saveAccessPolicies', async (params: { eventId: string, policies: { [key: string]: TransformedAcl } }, { dispatch }) => { @@ -1658,7 +1658,7 @@ export const saveAccessPolicies = createAsyncThunk('eventDetails/saveAccessPolic }); }); -export const updateComment = createAsyncThunk('eventDetails/updateComment', async (params: {eventId: any, commentId: any, commentText: any, commentReason: any}, { dispatch }) => { +export const updateComment = createAppAsyncThunk('eventDetails/updateComment', async (params: {eventId: any, commentId: any, commentText: any, commentReason: any}, { dispatch }) => { const { eventId, commentId, commentText, commentReason } = params; let headers = getHttpHeaders(); @@ -1675,7 +1675,7 @@ export const updateComment = createAsyncThunk('eventDetails/updateComment', asyn return true; }); -export const deleteComment = createAsyncThunk('eventDetails/deleteComment', async (params: { +export const deleteComment = createAppAsyncThunk('eventDetails/deleteComment', async (params: { eventId: string, commentId: number }) => { @@ -1687,7 +1687,7 @@ export const deleteComment = createAsyncThunk('eventDetails/deleteComment', asyn return true; }); -export const deleteCommentReply = createAsyncThunk('eventDetails/deleteCommentReply', async (params: { +export const deleteCommentReply = createAppAsyncThunk('eventDetails/deleteCommentReply', async (params: { eventId: string, commentId: number, replyId: number @@ -1701,9 +1701,9 @@ export const deleteCommentReply = createAsyncThunk('eventDetails/deleteCommentRe return true; }); -export const updateWorkflow = createAsyncThunk('eventDetails/updateWorkflow', async (workflowId: string, { dispatch, getState }) => { +export const updateWorkflow = createAppAsyncThunk('eventDetails/updateWorkflow', async (workflowId: string, { dispatch, getState }) => { const state = getState(); - const workflowDefinitions = getWorkflowDefinitions(state as RootState); + const workflowDefinitions = getWorkflowDefinitions(state); const workflowDef = workflowDefinitions.find((def) => def.id === workflowId); await dispatch( setEventWorkflow({ @@ -1714,7 +1714,7 @@ export const updateWorkflow = createAsyncThunk('eventDetails/updateWorkflow', as ); }); -export const saveWorkflowConfig = createAsyncThunk('eventDetails/saveWorkflowConfig', async (params: { +export const saveWorkflowConfig = createAppAsyncThunk('eventDetails/saveWorkflowConfig', async (params: { values: { workflowDefinition: string, configuration: { [key: string]: any } diff --git a/src/slices/eventSlice.ts b/src/slices/eventSlice.ts index 75785a0a72..47050b3ff2 100644 --- a/src/slices/eventSlice.ts +++ b/src/slices/eventSlice.ts @@ -1,4 +1,4 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import { eventsTableConfig } from "../configs/tableConfigs/eventsTableConfig"; import axios, { AxiosProgressEvent } from 'axios'; import moment from "moment-timezone"; @@ -22,10 +22,11 @@ import { } from "./notificationSlice"; import { getAssetUploadOptions, getSchedulingEditedEvents } from '../selectors/eventSelectors'; import { fetchSeriesOptions } from "./seriesSlice"; -import { AppDispatch, RootState } from '../store'; +import { AppDispatch } from '../store'; import { fetchAssetUploadOptions } from '../thunks/assetsThunks'; import { TransformedAcls } from './aclDetailsSlice'; import { TableConfig } from '../configs/tableConfigs/aclsTableConfig'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of events @@ -219,8 +220,8 @@ const initialState: EventState = { }; // fetch events from server -export const fetchEvents = createAsyncThunk('events/fetchEvents', async (_, { getState }) => { - const state = getState() as RootState; +export const fetchEvents = createAppAsyncThunk('events/fetchEvents', async (_, { getState }) => { + const state = getState(); let params: { limit: any, offset: number, getComments?: boolean }= getURLParams(state); // Only if the notes column is enabled, fetch comment information for events @@ -267,7 +268,7 @@ export const fetchEvents = createAsyncThunk('events/fetchEvents', async (_, { ge }); // fetch event metadata from server -export const fetchEventMetadata = createAsyncThunk('events/fetchEventMetadata', async () => { +export const fetchEventMetadata = createAppAsyncThunk('events/fetchEventMetadata', async () => { let data = await axios.get("/admin-ng/event/new/metadata"); const response = await data.data; @@ -291,7 +292,7 @@ export const fetchEventMetadata = createAsyncThunk('events/fetchEventMetadata', }); // get merged metadata for provided event ids -export const postEditMetadata = createAsyncThunk('events/postEditMetadata', async (ids: string[]) => { +export const postEditMetadata = createAppAsyncThunk('events/postEditMetadata', async (ids: string[]) => { let formData = new URLSearchParams(); formData.append("eventIds", JSON.stringify(ids)); @@ -328,7 +329,7 @@ export const postEditMetadata = createAsyncThunk('events/postEditMetadata', asyn } }); -export const updateBulkMetadata = createAsyncThunk('events/updateBulkMetadata', async (params: { +export const updateBulkMetadata = createAppAsyncThunk('events/updateBulkMetadata', async (params: { metadataFields: { merged: string[], mergedMetadata: MetadataFieldSelected[], @@ -414,7 +415,7 @@ export const updateBulkMetadata = createAsyncThunk('events/updateBulkMetadata', }); }); -export const postNewEvent = createAsyncThunk('events/postNewEvent', async (params: { +export const postNewEvent = createAppAsyncThunk('events/postNewEvent', async (params: { values: { acls: TransformedAcls, configuration: { [key: string]: any }, @@ -440,7 +441,7 @@ export const postNewEvent = createAsyncThunk('events/postNewEvent', async (param // get asset upload options from redux store const state = getState(); - const uploadAssetOptions = getAssetUploadOptions(state as RootState); + const uploadAssetOptions = getAssetUploadOptions(state); let formData = new FormData(); let metadataFields, extendedMetadataFields, metadata, source, access; @@ -651,7 +652,7 @@ export const postNewEvent = createAsyncThunk('events/postNewEvent', async (param }); // delete event with provided id -export const deleteEvent = createAsyncThunk('events/deleteEvent', async (id: string, { dispatch }) => { +export const deleteEvent = createAppAsyncThunk('events/deleteEvent', async (id: string, { dispatch }) => { // API call for deleting an event axios .delete(`/admin-ng/event/${id}`) @@ -673,7 +674,7 @@ export const deleteEvent = createAsyncThunk('events/deleteEvent', async (id: str }); }); -export const deleteMultipleEvent = createAsyncThunk('events/deleteMultipleEvent', async (events: Event[], { dispatch }) => { +export const deleteMultipleEvent = createAppAsyncThunk('events/deleteMultipleEvent', async (events: Event[], { dispatch }) => { let data = []; for (let i = 0; i < events.length; i++) { @@ -696,7 +697,7 @@ export const deleteMultipleEvent = createAsyncThunk('events/deleteMultipleEvent' }); }); -export const fetchScheduling = createAsyncThunk('events/fetchScheduling', async (params: { +export const fetchScheduling = createAppAsyncThunk('events/fetchScheduling', async (params: { events: Event[], fetchNewScheduling: boolean, setFormikValue: any @@ -761,7 +762,7 @@ export const fetchScheduling = createAsyncThunk('events/fetchScheduling', async } } else { const state = getState(); - editedEvents = getSchedulingEditedEvents(state as RootState); + editedEvents = getSchedulingEditedEvents(state); } const responseSeriesOptions = await fetchSeriesOptions(); @@ -772,7 +773,7 @@ export const fetchScheduling = createAsyncThunk('events/fetchScheduling', async }); // update multiple scheduled events at once -export const updateScheduledEventsBulk = createAsyncThunk('events/updateScheduledEventsBulk', async ( +export const updateScheduledEventsBulk = createAppAsyncThunk('events/updateScheduledEventsBulk', async ( values: { changedEvent: number, changedEvents: string[], diff --git a/src/slices/groupDetailsSlice.ts b/src/slices/groupDetailsSlice.ts index 10c424a686..7d38e6433d 100644 --- a/src/slices/groupDetailsSlice.ts +++ b/src/slices/groupDetailsSlice.ts @@ -1,7 +1,8 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import axios from 'axios'; import { buildGroupBody } from '../utils/resourceUtils'; import { addNotification } from './notificationSlice'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of details of a group @@ -30,7 +31,7 @@ const initialState: GroupDetailsState = { }; // fetch details about certain group from server -export const fetchGroupDetails = createAsyncThunk('groupDetails/fetchGroupDetails', async (groupName: string) => { +export const fetchGroupDetails = createAppAsyncThunk('groupDetails/fetchGroupDetails', async (groupName: string) => { const res = await axios.get(`/admin-ng/groups/${groupName}`); const response = await res.data; @@ -58,7 +59,7 @@ export const fetchGroupDetails = createAsyncThunk('groupDetails/fetchGroupDetail }); // update details of a certain group -export const updateGroupDetails = createAsyncThunk('groupDetails/updateGroupDetails', async (params: { +export const updateGroupDetails = createAppAsyncThunk('groupDetails/updateGroupDetails', async (params: { values: GroupDetailsState, groupId: string }, {dispatch}) => { diff --git a/src/slices/groupSlice.ts b/src/slices/groupSlice.ts index 3fe5ebc3ea..8ae43eb54f 100644 --- a/src/slices/groupSlice.ts +++ b/src/slices/groupSlice.ts @@ -1,10 +1,10 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import { groupsTableConfig } from '../configs/tableConfigs/groupsTableConfig'; import axios from 'axios'; import { buildGroupBody, getURLParams } from '../utils/resourceUtils'; import { addNotification } from './notificationSlice'; import { TableConfig } from '../configs/tableConfigs/aclsTableConfig'; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of groups @@ -47,9 +47,9 @@ const initialState: GroupState = { }; // fetch groups from server -export const fetchGroups = createAsyncThunk('groups/fetchGroups', async (_, { getState }) => { +export const fetchGroups = createAppAsyncThunk('groups/fetchGroups', async (_, { getState }) => { const state = getState(); - let params = getURLParams(state as RootState); + let params = getURLParams(state); // Just make the async request here, and return the response. // This will automatically dispatch a `pending` action first, // and then `fulfilled` or `rejected` actions based on the promise. @@ -58,7 +58,7 @@ export const fetchGroups = createAsyncThunk('groups/fetchGroups', async (_, { ge }); // post new group to backend -export const postNewGroup = createAsyncThunk('groups/postNewGroup', async (values: Group, {dispatch}) => { +export const postNewGroup = createAppAsyncThunk('groups/postNewGroup', async (values: Group, {dispatch}) => { // get URL params used for post request let data = buildGroupBody(values); @@ -83,7 +83,7 @@ export const postNewGroup = createAsyncThunk('groups/postNewGroup', async (value }); }); -export const deleteGroup = createAsyncThunk('groups/deleteGroup', async (id: string, {dispatch}) => { +export const deleteGroup = createAppAsyncThunk('groups/deleteGroup', async (id: string, {dispatch}) => { // API call for deleting a group axios .delete(`/admin-ng/groups/${id}`) diff --git a/src/slices/healthSlice.ts b/src/slices/healthSlice.ts index 2f99ff4f46..71f52f56b1 100644 --- a/src/slices/healthSlice.ts +++ b/src/slices/healthSlice.ts @@ -1,6 +1,7 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import axios from 'axios'; import { WritableDraft } from 'immer'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of information about health status @@ -55,7 +56,7 @@ type FetchHealthStatusResponse = { } // Fetch health status and transform it to further use -export const fetchHealthStatus = createAsyncThunk('health/fetchHealthStatus', async () => { +export const fetchHealthStatus = createAppAsyncThunk('health/fetchHealthStatus', async () => { const res = await axios.get("/services/health.json"); return res.data; }); diff --git a/src/slices/jobSlice.ts b/src/slices/jobSlice.ts index d12e6796e9..24982a2880 100644 --- a/src/slices/jobSlice.ts +++ b/src/slices/jobSlice.ts @@ -1,9 +1,9 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import { jobsTableConfig } from '../configs/tableConfigs/jobsTableConfig'; import axios from 'axios'; import { getURLParams } from '../utils/resourceUtils'; import { TableConfig } from '../configs/tableConfigs/aclsTableConfig'; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of jobs @@ -49,9 +49,9 @@ const initialState: JobState = { limit: 0, }; -export const fetchJobs = createAsyncThunk('jobs/fetchJobs', async (_, { getState }) => { +export const fetchJobs = createAppAsyncThunk('jobs/fetchJobs', async (_, { getState }) => { const state = getState(); - let params = getURLParams(state as RootState); + let params = getURLParams(state); // Just make the async request here, and return the response. // This will automatically dispatch a `pending` action first, // and then `fulfilled` or `rejected` actions based on the promise. diff --git a/src/slices/notificationSlice.ts b/src/slices/notificationSlice.ts index c25ebf8467..10dc453a53 100644 --- a/src/slices/notificationSlice.ts +++ b/src/slices/notificationSlice.ts @@ -1,4 +1,4 @@ -import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, createSlice } from '@reduxjs/toolkit' import { NOTIFICATION_CONTEXT, NOTIFICATION_CONTEXT_ACCESS, @@ -10,7 +10,7 @@ import { ADMIN_NOTIFICATION_DURATION_WARNING, } from "../configs/generalConfig"; import { getLastAddedNotification } from '../selectors/notificationSelector'; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of table @@ -42,7 +42,7 @@ const initialState: NotificationState = { // Counter for id of notifications let nextNotificationId = 0; -export const addNotification = createAsyncThunk('notifications/addNotification', async (params: { +export const addNotification = createAppAsyncThunk('notifications/addNotification', async (params: { type: OurNotification["type"], key: OurNotification["key"], duration?: OurNotification["duration"], @@ -98,7 +98,7 @@ export const addNotification = createAsyncThunk('notifications/addNotification', } // Get newly created notification and its id - let latestNotification = getLastAddedNotification(getState() as RootState); + let latestNotification = getLastAddedNotification(getState()); // Fade out notification if it is not -1 -> -1 means 'stay forever' // Start timeout for fading out after time in duration is over diff --git a/src/slices/recordingDetailsSlice.ts b/src/slices/recordingDetailsSlice.ts index c83c8711b9..7456188a64 100644 --- a/src/slices/recordingDetailsSlice.ts +++ b/src/slices/recordingDetailsSlice.ts @@ -1,5 +1,6 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import axios from 'axios'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of a recording/capture agent @@ -33,7 +34,7 @@ const initialState: RecordingDetailsState = { }; // fetch details of certain recording from server -export const fetchRecordingDetails = createAsyncThunk('recordingDetails/fetchRecordingDetails', async (name: string) => { +export const fetchRecordingDetails = createAppAsyncThunk('recordingDetails/fetchRecordingDetails', async (name: string) => { // Just make the async request here, and return the response. // This will automatically dispatch a `pending` action first, // and then `fulfilled` or `rejected` actions based on the promise. diff --git a/src/slices/recordingSlice.ts b/src/slices/recordingSlice.ts index e241961082..20f6e9ecae 100644 --- a/src/slices/recordingSlice.ts +++ b/src/slices/recordingSlice.ts @@ -1,10 +1,10 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import { recordingsTableConfig } from '../configs/tableConfigs/recordingsTableConfig'; import axios from 'axios'; import { getURLParams } from '../utils/resourceUtils'; import { addNotification } from './notificationSlice'; import { TableConfig } from '../configs/tableConfigs/aclsTableConfig'; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of recordings @@ -51,7 +51,7 @@ const initialState: RecordingState = { }; // fetch recordings from server -export const fetchRecordings = createAsyncThunk('recordings/fetchRecordings', async (flag: string | undefined, { getState }) => { +export const fetchRecordings = createAppAsyncThunk('recordings/fetchRecordings', async (flag: string | undefined, { getState }) => { let res; if (flag === "inputs") { @@ -60,7 +60,7 @@ export const fetchRecordings = createAsyncThunk('recordings/fetchRecordings', as ); } else { const state = getState(); - let params = getURLParams(state as RootState); + let params = getURLParams(state); // /agents.json?filter={filter}&limit=100&offset=0&inputs=false&sort={sort} res = await axios.get("/admin-ng/capture-agents/agents.json", { @@ -94,7 +94,7 @@ export const fetchRecordings = createAsyncThunk('recordings/fetchRecordings', as }); // delete location with provided id -export const deleteRecording = createAsyncThunk('recordings/deleteRecording', async (id: string, { dispatch }) => { +export const deleteRecording = createAppAsyncThunk('recordings/deleteRecording', async (id: string, { dispatch }) => { // API call for deleting a location axios .delete(`/admin-ng/capture-agents/${id}`) diff --git a/src/slices/seriesDetailsSlice.ts b/src/slices/seriesDetailsSlice.ts index a12c28a78c..35da765600 100644 --- a/src/slices/seriesDetailsSlice.ts +++ b/src/slices/seriesDetailsSlice.ts @@ -1,4 +1,4 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import axios from 'axios'; import _ from "lodash"; import { @@ -15,7 +15,7 @@ import { } from "../utils/resourceUtils"; import { transformToIdValueArray } from "../utils/utils"; import { NOTIFICATION_CONTEXT } from "../configs/modalConfig"; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; import { Statistics, fetchStatistics, fetchStatisticsValueUpdate } from './statisticsSlice'; import { Ace, TransformedAcl, TransformedAcls } from './aclDetailsSlice'; @@ -108,7 +108,7 @@ const initialState: SeriesDetailsState = { }; // fetch metadata of certain series from server -export const fetchSeriesDetailsMetadata = createAsyncThunk('seriesDetails/fetchSeriesDetailsMetadata', async (id: string) => { +export const fetchSeriesDetailsMetadata = createAppAsyncThunk('seriesDetails/fetchSeriesDetailsMetadata', async (id: string) => { const res = await axios.get(`/admin-ng/series/${id}/metadata.json`); const metadataResponse = res.data; @@ -130,7 +130,7 @@ export const fetchSeriesDetailsMetadata = createAsyncThunk('seriesDetails/fetchS }); // fetch acls of certain series from server -export const fetchSeriesDetailsAcls = createAsyncThunk('seriesDetails/fetchSeriesDetailsAcls', async (id: string, {dispatch}) => { +export const fetchSeriesDetailsAcls = createAppAsyncThunk('seriesDetails/fetchSeriesDetailsAcls', async (id: string, {dispatch}) => { const res = await axios.get(`/admin-ng/series/${id}/access.json`); const response = res.data; @@ -169,7 +169,7 @@ export const fetchSeriesDetailsAcls = createAsyncThunk('seriesDetails/fetchSerie }); // fetch feeds of certain series from server -export const fetchSeriesDetailsFeeds = createAsyncThunk('seriesDetails/fetchSeriesDetailsFeeds', async (id: string) => { +export const fetchSeriesDetailsFeeds = createAppAsyncThunk('seriesDetails/fetchSeriesDetailsFeeds', async (id: string) => { const res = await axios.get("/admin-ng/feeds/feeds"); const feedsResponse = res.data; @@ -208,7 +208,7 @@ export const fetchSeriesDetailsFeeds = createAsyncThunk('seriesDetails/fetchSeri }); // fetch theme of certain series from server -export const fetchSeriesDetailsTheme = createAsyncThunk('seriesDetails/fetchSeriesDetailsTheme', async (id: string) => { +export const fetchSeriesDetailsTheme = createAppAsyncThunk('seriesDetails/fetchSeriesDetailsTheme', async (id: string) => { const res = await axios.get(`/admin-ng/series/${id}/theme.json`); const themeResponse = res.data; @@ -224,7 +224,7 @@ export const fetchSeriesDetailsTheme = createAsyncThunk('seriesDetails/fetchSeri }); // fetch names of possible themes from server -export const fetchSeriesDetailsThemeNames = createAsyncThunk('seriesDetails/fetchSeriesDetailsThemeNames', async () => { +export const fetchSeriesDetailsThemeNames = createAppAsyncThunk('seriesDetails/fetchSeriesDetailsThemeNames', async () => { const res = await axios.get("/admin-ng/resources/THEMES.NAME.json"); const response = res.data; @@ -235,7 +235,7 @@ export const fetchSeriesDetailsThemeNames = createAsyncThunk('seriesDetails/fetc }); // update series with new metadata -export const updateSeriesMetadata = createAsyncThunk('seriesDetails/updateSeriesMetadata', async (params: { +export const updateSeriesMetadata = createAppAsyncThunk('seriesDetails/updateSeriesMetadata', async (params: { id: string, values: { contributor: string[], @@ -252,7 +252,7 @@ export const updateSeriesMetadata = createAsyncThunk('seriesDetails/updateSeries } }, {dispatch, getState}) => { const { id, values } = params; - let metadataInfos = getSeriesDetailsMetadata(getState() as RootState); + let metadataInfos = getSeriesDetailsMetadata(getState()); const { fields, data, headers } = transformMetadataForUpdate( metadataInfos, @@ -271,7 +271,7 @@ export const updateSeriesMetadata = createAsyncThunk('seriesDetails/updateSeries }); // update series with new metadata -export const updateExtendedSeriesMetadata = createAsyncThunk('seriesDetails/updateExtendedSeriesMetadata', async (params: { +export const updateExtendedSeriesMetadata = createAppAsyncThunk('seriesDetails/updateExtendedSeriesMetadata', async (params: { id: string, values: { [key: string]: any }, catalog: { @@ -296,7 +296,7 @@ export const updateExtendedSeriesMetadata = createAsyncThunk('seriesDetails/upda fields: fields, }; - const oldExtendedMetadata = getSeriesDetailsExtendedMetadata(getState() as RootState); + const oldExtendedMetadata = getSeriesDetailsExtendedMetadata(getState()); let newExtendedMetadata = []; for (const catalog of oldExtendedMetadata) { @@ -313,7 +313,7 @@ export const updateExtendedSeriesMetadata = createAsyncThunk('seriesDetails/upda dispatch(setSeriesDetailsExtendedMetadata(newExtendedMetadata)); }); -export const updateSeriesAccess = createAsyncThunk('seriesDetails/updateSeriesAccess', async (params: { +export const updateSeriesAccess = createAppAsyncThunk('seriesDetails/updateSeriesAccess', async (params: { id: string, policies: { [key: string]: TransformedAcl } }, {dispatch}) => { @@ -358,13 +358,13 @@ export const updateSeriesAccess = createAsyncThunk('seriesDetails/updateSeriesAc }); }); -export const updateSeriesTheme = createAsyncThunk('seriesDetails/updateSeriesTheme', async (params: { +export const updateSeriesTheme = createAppAsyncThunk('seriesDetails/updateSeriesTheme', async (params: { id: string, values: { theme: string}, }, {dispatch, getState}) => { const { id, values } = params; - let themeNames = getSeriesDetailsThemeNames(getState() as RootState); + let themeNames = getSeriesDetailsThemeNames(getState()); let themeId = themeNames.find((theme) => theme.value === values.theme)?.id; @@ -425,10 +425,10 @@ export const updateSeriesTheme = createAsyncThunk('seriesDetails/updateSeriesThe }); // thunks for statistics -export const fetchSeriesStatistics = createAsyncThunk('seriesDetails/fetchSeriesStatistics', async (seriesId: string, {getState}) => { +export const fetchSeriesStatistics = createAppAsyncThunk('seriesDetails/fetchSeriesStatistics', async (seriesId: string, {getState}) => { // get prior statistics const state = getState(); - const statistics = getStatistics(state as RootState); + const statistics = getStatistics(state); return await ( fetchStatistics( @@ -439,7 +439,7 @@ export const fetchSeriesStatistics = createAsyncThunk('seriesDetails/fetchSeries ); }); -export const fetchSeriesStatisticsValueUpdate = createAsyncThunk('seriesDetails/fetchSeriesStatisticsValueUpdate', async (params: { +export const fetchSeriesStatisticsValueUpdate = createAppAsyncThunk('seriesDetails/fetchSeriesStatisticsValueUpdate', async (params: { seriesId: string, providerId: string, from: string, @@ -451,7 +451,7 @@ export const fetchSeriesStatisticsValueUpdate = createAsyncThunk('seriesDetails/ // get prior statistics const state = getState(); - const statistics = getStatistics(state as RootState); + const statistics = getStatistics(state); return await ( fetchStatisticsValueUpdate( diff --git a/src/slices/seriesSlice.ts b/src/slices/seriesSlice.ts index e4406f2dac..fbe9595bec 100644 --- a/src/slices/seriesSlice.ts +++ b/src/slices/seriesSlice.ts @@ -1,4 +1,4 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import { seriesTableConfig } from '../configs/tableConfigs/seriesTableConfig'; import axios from 'axios'; import { @@ -15,7 +15,7 @@ import { import { addNotification } from './notificationSlice'; import { TableConfig } from '../configs/tableConfigs/aclsTableConfig'; import { TransformedAcls } from './aclDetailsSlice'; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of series @@ -108,9 +108,9 @@ const initialState: SeriesState = { }; // fetch series from server -export const fetchSeries = createAsyncThunk('series/fetchSeries', async (_, { getState }) => { +export const fetchSeries = createAppAsyncThunk('series/fetchSeries', async (_, { getState }) => { const state = getState(); - let params = getURLParams(state as RootState); + let params = getURLParams(state); // Just make the async request here, and return the response. // This will automatically dispatch a `pending` action first, // and then `fulfilled` or `rejected` actions based on the promise. @@ -120,7 +120,7 @@ export const fetchSeries = createAsyncThunk('series/fetchSeries', async (_, { ge }); // fetch series metadata from server -export const fetchSeriesMetadata = createAsyncThunk('series/fetchSeriesMetadata', async () => { +export const fetchSeriesMetadata = createAppAsyncThunk('series/fetchSeriesMetadata', async () => { const res = await axios.get("/admin-ng/series/new/metadata"); const data = await res.data; @@ -144,7 +144,7 @@ export const fetchSeriesMetadata = createAsyncThunk('series/fetchSeriesMetadata' }); // fetch series themes from server -export const fetchSeriesThemes = createAsyncThunk('series/fetchSeriesThemes', async () => { +export const fetchSeriesThemes = createAppAsyncThunk('series/fetchSeriesThemes', async () => { let res = await axios.get("/admin-ng/series/new/themes"); const data = await res.data; const themes = transformToObjectArray(data); @@ -152,7 +152,7 @@ export const fetchSeriesThemes = createAsyncThunk('series/fetchSeriesThemes', as }); // post new series to backend -export const postNewSeries = createAsyncThunk('series/postNewSeries', async (params: { +export const postNewSeries = createAppAsyncThunk('series/postNewSeries', async (params: { values: { [key: string]: any; acls: TransformedAcls, @@ -234,7 +234,7 @@ export const postNewSeries = createAsyncThunk('series/postNewSeries', async (par }); // check for events of the series and if deleting the series if it has events is allowed -export const checkForEventsDeleteSeriesModal = createAsyncThunk('series/checkForEventsDeleteSeriesModal', async (id: string, {dispatch}) => { +export const checkForEventsDeleteSeriesModal = createAppAsyncThunk('series/checkForEventsDeleteSeriesModal', async (id: string, {dispatch}) => { const hasEventsRequest = await axios.get( `/admin-ng/series/${id}/hasEvents.json` ); @@ -254,7 +254,7 @@ export const checkForEventsDeleteSeriesModal = createAsyncThunk('series/checkFor }); // delete series with provided id -export const deleteSeries = createAsyncThunk('series/deleteSeries', async (id: string, {dispatch}) => { +export const deleteSeries = createAppAsyncThunk('series/deleteSeries', async (id: string, {dispatch}) => { // API call for deleting a series axios .delete(`/admin-ng/series/${id}`) @@ -271,7 +271,7 @@ export const deleteSeries = createAsyncThunk('series/deleteSeries', async (id: s }); // delete series with provided ids -export const deleteMultipleSeries = createAsyncThunk('series/deleteMultipleSeries', async ( +export const deleteMultipleSeries = createAppAsyncThunk('series/deleteMultipleSeries', async ( series: { contributors: string[], createdBy: string, diff --git a/src/slices/serverSlice.ts b/src/slices/serverSlice.ts index f8f41ac352..d5c5a24c54 100644 --- a/src/slices/serverSlice.ts +++ b/src/slices/serverSlice.ts @@ -1,9 +1,9 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import { serversTableConfig } from "../configs/tableConfigs/serversTableConfig"; import axios from 'axios'; import { getURLParams } from '../utils/resourceUtils'; import { TableConfig } from '../configs/tableConfigs/aclsTableConfig'; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of servers @@ -48,9 +48,9 @@ const initialState: ServerState = { }; // fetch servers from server -export const fetchServers = createAsyncThunk('servers/fetchServers', async (_, { getState }) => { +export const fetchServers = createAppAsyncThunk('servers/fetchServers', async (_, { getState }) => { const state = getState(); - let params = getURLParams(state as RootState); + let params = getURLParams(state); // Just make the async request here, and return the response. // This will automatically dispatch a `pending` action first, // and then `fulfilled` or `rejected` actions based on the promise. @@ -60,7 +60,7 @@ export const fetchServers = createAsyncThunk('servers/fetchServers', async (_, { }); // change maintenance status of a server/host -export const setServerMaintenance = createAsyncThunk('servers/setServerMaintenance', async (params: { +export const setServerMaintenance = createAppAsyncThunk('servers/setServerMaintenance', async (params: { host: string, maintenance: boolean }) => { diff --git a/src/slices/serviceSlice.ts b/src/slices/serviceSlice.ts index 501b272361..3aa6dcb2d5 100644 --- a/src/slices/serviceSlice.ts +++ b/src/slices/serviceSlice.ts @@ -1,9 +1,9 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import { servicesTableConfig } from "../configs/tableConfigs/servicesTableConfig"; import axios from 'axios'; import { getURLParams } from '../utils/resourceUtils'; import { TableConfig } from '../configs/tableConfigs/aclsTableConfig'; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of services @@ -50,9 +50,9 @@ const initialState: ServiceState = { }; // fetch services from server -export const fetchServices = createAsyncThunk('services/fetchServices', async (_, { getState }) => { +export const fetchServices = createAppAsyncThunk('services/fetchServices', async (_, { getState }) => { const state = getState(); - let params = getURLParams(state as RootState); + let params = getURLParams(state); // Just make the async request here, and return the response. // This will automatically dispatch a `pending` action first, // and then `fulfilled` or `rejected` actions based on the promise. @@ -61,7 +61,7 @@ export const fetchServices = createAsyncThunk('services/fetchServices', async (_ }); // restarts a service after initiated by user -export const restartService = createAsyncThunk('services/fetchServices', async (params: { +export const restartService = createAppAsyncThunk('services/fetchServices', async (params: { host: string, serviceType: string }) => { diff --git a/src/slices/statisticsSlice.ts b/src/slices/statisticsSlice.ts index 643b65bbcf..1cd18378d6 100644 --- a/src/slices/statisticsSlice.ts +++ b/src/slices/statisticsSlice.ts @@ -1,4 +1,4 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import axios from 'axios'; import moment from "moment"; import { @@ -7,7 +7,7 @@ import { } from "../utils/statisticsUtils"; import { getHttpHeaders } from "../utils/resourceUtils"; import { getStatistics } from "../selectors/statisticsSelectors"; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of statistics @@ -50,20 +50,20 @@ const initialState: StatisticsState = { /* thunks for fetching statistics data */ -export const fetchStatisticsPageStatistics = createAsyncThunk('statistics/fetchStatisticsPageStatistics', async (organizationId: any, { getState }) => { +export const fetchStatisticsPageStatistics = createAppAsyncThunk('statistics/fetchStatisticsPageStatistics', async (organizationId: any, { getState }) => { // get prior statistics const state = getState(); - const statistics = getStatistics(state as RootState); + const statistics = getStatistics(state); return await fetchStatistics(organizationId, "organization", statistics) }); -export const fetchStatisticsPageStatisticsValueUpdate = createAsyncThunk('statistics/fetchStatisticsPageStatisticsValueUpdate', async (params: {organizationId: any, providerId: any, from: any, to: any, dataResolution: any, timeMode: any}, { getState }) => { +export const fetchStatisticsPageStatisticsValueUpdate = createAppAsyncThunk('statistics/fetchStatisticsPageStatisticsValueUpdate', async (params: {organizationId: any, providerId: any, from: any, to: any, dataResolution: any, timeMode: any}, { getState }) => { const { organizationId, providerId, from, to, dataResolution, timeMode } = params; // get prior statistics const state = getState(); - const statistics = getStatistics(state as RootState); + const statistics = getStatistics(state); return await fetchStatisticsValueUpdate(organizationId, "organization", providerId, from, to, dataResolution, timeMode, statistics) }); diff --git a/src/slices/tableFilterSlice.ts b/src/slices/tableFilterSlice.ts index bc798c85f1..85acab9022 100644 --- a/src/slices/tableFilterSlice.ts +++ b/src/slices/tableFilterSlice.ts @@ -1,7 +1,7 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import axios from 'axios'; import { relativeDateSpanToFilterValue } from '../utils/dateUtils'; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; import { setOffset } from '../actions/tableActions'; import { fetchEvents } from './eventSlice'; import { fetchServices } from './serviceSlice'; @@ -64,7 +64,7 @@ const initialState: TableFilterState = { }; // Fetch table filters from opencast instance and transform them for further use -export const fetchFilters = createAsyncThunk('tableFilters/fetchFilters', async (resource: any, { getState }) => { +export const fetchFilters = createAppAsyncThunk('tableFilters/fetchFilters', async (resource: any, { getState }) => { const data = await axios.get( `/admin-ng/resources/${resource}/filters.json` ); @@ -85,7 +85,7 @@ export const fetchFilters = createAsyncThunk('tableFilters/fetchFilters', async return { filtersList, resource }; }); -export const fetchStats = createAsyncThunk('tableFilters/fetchStats', async () => { +export const fetchStats = createAppAsyncThunk('tableFilters/fetchStats', async () => { // fetch information about possible status an event can have let data = await axios.get("/admin-ng/resources/STATS.json"); let response = await data.data; @@ -141,11 +141,11 @@ export const fetchStats = createAsyncThunk('tableFilters/fetchStats', async () = return stats; }); -export const setSpecificEventFilter = createAsyncThunk('tableFilters/setSpecificEventFilter', async (params: { filter: any, filterValue: any }, { dispatch, getState }) => { +export const setSpecificEventFilter = createAppAsyncThunk('tableFilters/setSpecificEventFilter', async (params: { filter: any, filterValue: any }, { dispatch, getState }) => { const { filter, filterValue } = params; await dispatch(fetchFilters("events")); - const { tableFilters } = getState() as RootState; + const { tableFilters } = getState(); let filterToChange = tableFilters.data.find(({ name }) => name === filter); @@ -163,11 +163,11 @@ export const setSpecificEventFilter = createAsyncThunk('tableFilters/setSpecific dispatch(fetchEvents()); }); -export const setSpecificServiceFilter = createAsyncThunk('tableFilters/setSpecificServiceFilter', async (params: { filter: any, filterValue: any }, { dispatch, getState }) => { +export const setSpecificServiceFilter = createAppAsyncThunk('tableFilters/setSpecificServiceFilter', async (params: { filter: any, filterValue: any }, { dispatch, getState }) => { const { filter, filterValue } = params; await dispatch(fetchFilters("services")); - const { tableFilters } = getState() as RootState; + const { tableFilters } = getState(); let filterToChange = tableFilters.data.find(({ name }) => name === filter); diff --git a/src/slices/themeDetailsSlice.ts b/src/slices/themeDetailsSlice.ts index bf297d91c6..f2da4045b2 100644 --- a/src/slices/themeDetailsSlice.ts +++ b/src/slices/themeDetailsSlice.ts @@ -1,7 +1,8 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import axios from 'axios'; import { buildThemeBody } from '../utils/resourceUtils'; import { addNotification } from './notificationSlice'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of a theme @@ -72,7 +73,7 @@ const initialState: ThemeDetailsState = { }; // fetch details of certain theme from server -export const fetchThemeDetails = createAsyncThunk('themeDetails/fetchThemeDetails', async (id: number) => { +export const fetchThemeDetails = createAppAsyncThunk('themeDetails/fetchThemeDetails', async (id: number) => { // Just make the async request here, and return the response. // This will automatically dispatch a `pending` action first, // and then `fulfilled` or `rejected` actions based on the promise. @@ -81,13 +82,13 @@ export const fetchThemeDetails = createAsyncThunk('themeDetails/fetchThemeDetail }); // fetch usage of a certain theme -export const fetchUsage = createAsyncThunk('themeDetails/fetchUsage', async (id: number) => { +export const fetchUsage = createAppAsyncThunk('themeDetails/fetchUsage', async (id: number) => { const res = await axios.get(`/admin-ng/themes/${id}/usage.json`); return res.data; }); // update a certain theme -export const updateThemeDetails = createAsyncThunk('themeDetails/updateThemeDetails', async (params: { +export const updateThemeDetails = createAppAsyncThunk('themeDetails/updateThemeDetails', async (params: { id: number, values: Details }, {dispatch}) => { diff --git a/src/slices/themeSlice.ts b/src/slices/themeSlice.ts index 97d739f9b5..b221eb8183 100644 --- a/src/slices/themeSlice.ts +++ b/src/slices/themeSlice.ts @@ -1,10 +1,10 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import { themesTableConfig } from "../configs/tableConfigs/themesTableConfig"; import axios from 'axios'; import { buildThemeBody, getURLParams } from '../utils/resourceUtils'; import { addNotification } from './notificationSlice'; import { TableConfig } from '../configs/tableConfigs/aclsTableConfig'; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of themes @@ -61,9 +61,9 @@ const initialState: ThemeState = { }; // fetch themes from server -export const fetchThemes = createAsyncThunk('theme/fetchThemes', async (_, { getState }) => { +export const fetchThemes = createAppAsyncThunk('theme/fetchThemes', async (_, { getState }) => { const state = getState(); - let params = getURLParams(state as RootState); + let params = getURLParams(state); // Just make the async request here, and return the response. // This will automatically dispatch a `pending` action first, // and then `fulfilled` or `rejected` actions based on the promise. @@ -73,7 +73,7 @@ export const fetchThemes = createAsyncThunk('theme/fetchThemes', async (_, { get }); // post new theme to backend -export const postNewTheme = createAsyncThunk('theme/postNewTheme', async (values: Details, {dispatch}) => { +export const postNewTheme = createAppAsyncThunk('theme/postNewTheme', async (values: Details, {dispatch}) => { // get URL params used for post request let data = buildThemeBody(values); @@ -97,7 +97,7 @@ export const postNewTheme = createAsyncThunk('theme/postNewTheme', async (values }); // delete theme with provided id -export const deleteTheme = createAsyncThunk('theme/deleteTheme', async (id: number, {dispatch}) => { +export const deleteTheme = createAppAsyncThunk('theme/deleteTheme', async (id: number, {dispatch}) => { axios .delete(`/admin-ng/themes/${id}`) .then((res) => { diff --git a/src/slices/userDetailsSlice.ts b/src/slices/userDetailsSlice.ts index d30dc9bc85..478d152621 100644 --- a/src/slices/userDetailsSlice.ts +++ b/src/slices/userDetailsSlice.ts @@ -1,8 +1,9 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import axios from 'axios'; import { addNotification } from './notificationSlice'; import { buildUserBody } from "../utils/resourceUtils"; import { NewUser } from './userSlice'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of details of a user @@ -31,7 +32,7 @@ const initialState: UserDetailsState = { }; // fetch details about certain user from server -export const fetchUserDetails = createAsyncThunk('userDetails/fetchUserDetails', async (username: string) => { +export const fetchUserDetails = createAppAsyncThunk('userDetails/fetchUserDetails', async (username: string) => { // Just make the async request here, and return the response. // This will automatically dispatch a `pending` action first, // and then `fulfilled` or `rejected` actions based on the promise. @@ -40,7 +41,7 @@ export const fetchUserDetails = createAsyncThunk('userDetails/fetchUserDetails', }); // update existing user with changed values -export const updateUserDetails = createAsyncThunk('userDetails/updateUserDetails', async (params: { +export const updateUserDetails = createAppAsyncThunk('userDetails/updateUserDetails', async (params: { values: NewUser, username: string }, {dispatch}) => { diff --git a/src/slices/userInfoSlice.ts b/src/slices/userInfoSlice.ts index 8a4db48194..ff6b0cf827 100644 --- a/src/slices/userInfoSlice.ts +++ b/src/slices/userInfoSlice.ts @@ -1,6 +1,7 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import axios from 'axios'; import { addNotification } from './notificationSlice'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of information about current user @@ -72,7 +73,7 @@ const initialState: UserInfoState = { }, }; -export const fetchUserInfo = createAsyncThunk('UserInfo/fetchUserInfo', async (_, { dispatch }) => { +export const fetchUserInfo = createAppAsyncThunk('UserInfo/fetchUserInfo', async (_, { dispatch }) => { // Just make the async request here, and return the response. // This will automatically dispatch a `pending` action first, // and then `fulfilled` or `rejected` actions based on the promise. @@ -93,7 +94,7 @@ export const fetchUserInfo = createAsyncThunk('UserInfo/fetchUserInfo', async (_ return res; }); -export const fetchOcVersion = createAsyncThunk('UserInfo/fetchOcVersion', async () => { +export const fetchOcVersion = createAppAsyncThunk('UserInfo/fetchOcVersion', async () => { const res = await axios.get("/sysinfo/bundles/version?prefix=opencast"); return res.data; }); diff --git a/src/slices/userSlice.ts b/src/slices/userSlice.ts index e877c61d48..4aae42282f 100644 --- a/src/slices/userSlice.ts +++ b/src/slices/userSlice.ts @@ -1,11 +1,11 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import { usersTableConfig } from "../configs/tableConfigs/usersTableConfig"; import axios from 'axios'; import { transformToIdValueArray } from "../utils/utils"; import { buildUserBody, getURLParams } from "../utils/resourceUtils"; import { addNotification } from './notificationSlice'; import { TableConfig } from '../configs/tableConfigs/aclsTableConfig'; -import { RootState } from '../store'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of users @@ -57,9 +57,9 @@ const initialState: UsersState = { }; // fetch users from server -export const fetchUsers = createAsyncThunk('users/fetchUsers', async (_, { getState }) => { +export const fetchUsers = createAppAsyncThunk('users/fetchUsers', async (_, { getState }) => { const state = getState(); - let params = getURLParams(state as RootState); + let params = getURLParams(state); // Just make the async request here, and return the response. // This will automatically dispatch a `pending` action first, // and then `fulfilled` or `rejected` actions based on the promise. @@ -68,7 +68,7 @@ export const fetchUsers = createAsyncThunk('users/fetchUsers', async (_, { getSt }); // new user to backend -export const postNewUser = createAsyncThunk('users/postNewUser', async (values: NewUser, {dispatch}) => { +export const postNewUser = createAppAsyncThunk('users/postNewUser', async (values: NewUser, {dispatch}) => { // get URL params used for post request let data = buildUserBody(values); @@ -92,7 +92,7 @@ export const postNewUser = createAsyncThunk('users/postNewUser', async (values: }); // delete user with provided id -export const deleteUser = createAsyncThunk('users/deleteUser', async (id: string, {dispatch}) => { +export const deleteUser = createAppAsyncThunk('users/deleteUser', async (id: string, {dispatch}) => { // API call for deleting an user axios .delete(`/admin-ng/users/${id}.json`) diff --git a/src/slices/workflowSlice.ts b/src/slices/workflowSlice.ts index d574a15530..5593e9ac86 100644 --- a/src/slices/workflowSlice.ts +++ b/src/slices/workflowSlice.ts @@ -1,5 +1,6 @@ -import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit' import axios from 'axios'; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; /** * This file contains redux reducer for actions affecting the state of workflows @@ -38,7 +39,7 @@ const initialState: WorkflowState = { }; // fetch workflow definitions from server -export const fetchWorkflowDef = createAsyncThunk('workflow/fetchWorkflowDef', async (type: string) => { +export const fetchWorkflowDef = createAppAsyncThunk('workflow/fetchWorkflowDef', async (type: string) => { let urlParams; switch (type) { diff --git a/src/thunks/assetsThunks.ts b/src/thunks/assetsThunks.ts index fcbe20793c..ebe3e84e04 100644 --- a/src/thunks/assetsThunks.ts +++ b/src/thunks/assetsThunks.ts @@ -1,15 +1,14 @@ import axios from "axios"; import { getAssetUploadOptions } from "../selectors/eventSelectors"; -import { createAsyncThunk } from "@reduxjs/toolkit"; -import { RootState } from "../store"; +import { createAppAsyncThunk } from '../createAsyncThunkWithTypes'; import { UploadAssetOption } from "../slices/eventSlice"; // thunks for assets, especially for getting asset options -export const fetchAssetUploadOptions = createAsyncThunk('assets/fetchAssetUploadOptionsAsyncThunk', async (_, { getState }) => { +export const fetchAssetUploadOptions = createAppAsyncThunk('assets/fetchAssetUploadOptionsAsyncThunk', async (_, { getState }) => { // get old asset upload options const state = getState(); - const assetUploadOptions = getAssetUploadOptions(state as RootState); + const assetUploadOptions = getAssetUploadOptions(state); const sourcePrefix = "EVENTS.EVENTS.NEW.SOURCE.UPLOAD"; const assetPrefix = "EVENTS.EVENTS.NEW.UPLOAD_ASSET.OPTION"; From 2bbd7334e95a12a214e1215f93a9814f6b528fd5 Mon Sep 17 00:00:00 2001 From: Arnei Date: Wed, 26 Jun 2024 16:25:22 +0200 Subject: [PATCH 3/4] Remove unused import --- src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx b/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx index 39e961a280..8b72d0be4d 100644 --- a/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx +++ b/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx @@ -1,7 +1,6 @@ import React, { useState, useEffect } from "react"; import RenderMultiField from "../wizard/RenderMultiField"; import { - Acl, Role, fetchAclActions, fetchAclTemplateById, From 3c45b16f91be414b357946f01426e51e847e7eb4 Mon Sep 17 00:00:00 2001 From: Crowdin Bot Date: Mon, 1 Jul 2024 05:19:04 +0000 Subject: [PATCH 4/4] Automatically update translation keys --- src/i18n/org/opencastproject/adminui/languages/lang-de_DE.json | 1 - src/i18n/org/opencastproject/adminui/languages/lang-en_GB.json | 1 - 2 files changed, 2 deletions(-) diff --git a/src/i18n/org/opencastproject/adminui/languages/lang-de_DE.json b/src/i18n/org/opencastproject/adminui/languages/lang-de_DE.json index 40068601c9..e33d68831d 100644 --- a/src/i18n/org/opencastproject/adminui/languages/lang-de_DE.json +++ b/src/i18n/org/opencastproject/adminui/languages/lang-de_DE.json @@ -136,7 +136,6 @@ } }, "MEDIAMODULE": "Medienübersicht", - "STUDIO": "Studio", "SYSTEM_NOTIFICATIONS": "Systemwarnungen und Benachrichtigungen", "LANGUAGE": "Sprache wählen", "HELP": { diff --git a/src/i18n/org/opencastproject/adminui/languages/lang-en_GB.json b/src/i18n/org/opencastproject/adminui/languages/lang-en_GB.json index c19c6b155f..3fd868d5a2 100644 --- a/src/i18n/org/opencastproject/adminui/languages/lang-en_GB.json +++ b/src/i18n/org/opencastproject/adminui/languages/lang-en_GB.json @@ -136,7 +136,6 @@ } }, "MEDIAMODULE": "Media Module", - "STUDIO": "Studio", "SYSTEM_NOTIFICATIONS": "System warnings and notifications", "LANGUAGE": "Select language", "HELP": {