diff --git a/src/actions/tableActions.ts b/src/actions/tableActions.ts deleted file mode 100644 index 3bd071d5fc..0000000000 --- a/src/actions/tableActions.ts +++ /dev/null @@ -1,106 +0,0 @@ -/** - * This file contains all redux actions that can be executed on the table - */ - -// Constants of of actions types concerning table and its management -export const LOAD_RESOURCE_INTO_TABLE = "LOAD_RESOURCE_INTO_TABLE"; -export const SORT_TABLE = "SORT_TABLE"; -export const SELECT_ROW = "SELECT_ROW"; -export const SELECT_ALL = "SELECT_ALL"; -export const DESELECT_ALL = "DESELECT_ALL"; -export const RESET_SORT_TABLE = "RESET_SORT_TABLE"; -export const REVERSE_TABLE = "REVERSE_TABLE"; -export const SET_SORT_BY = "SET_SORT_BY"; -export const LOAD_COLUMNS = "LOAD_COLUMNS"; - -// Constants of of actions types concerning pagination -export const CREATE_PAGE = "CREATE_PAGE"; -export const UPDATE_PAGESIZE = "UPDATE_PAGESIZE"; -export const SET_PAGES = "UPDATE_PAGES"; -export const SET_TOTAL_ITEMS = "SET_TOTAL_ITEMS"; -export const SET_OFFSET = "SET_OFFSET"; -export const SET_DIRECT_ACCESSIBLE_PAGES = "SET_DIRECT_ACCESSIBLE_PAGES"; -export const SET_PAGE_ACTIVE = "SET_PAGE_ACTIVE"; - -// Actions affecting table directly - -export const loadResourceIntoTable = (tableData: any) => ({ - type: LOAD_RESOURCE_INTO_TABLE, - payload: tableData -}); - -// @ts-expect-error TS(7006): Parameter 'columnData' implicitly has an 'any' typ... Remove this comment to see the full error message -export const loadColumns = (columnData) => ({ - type: LOAD_COLUMNS, - payload: columnData, -}); - -// @ts-expect-error TS(7006): Parameter 'id' implicitly has an 'any' type. -export const selectRow = (id, selected) => ({ - type: SELECT_ROW, - payload: { id, selected }, -}); - -export const selectAll = () => ({ - type: SELECT_ALL, -}); - -export const deselectAll = () => ({ - type: DESELECT_ALL, -}); - -// @ts-expect-error TS(7006): Parameter 'order' implicitly has an 'any' type. -export const reverseTable = (order) => ({ - type: REVERSE_TABLE, - payload: { order }, -}); - -// @ts-expect-error TS(7006): Parameter 'column' implicitly has an 'any' type. -export const setSortBy = (column) => ({ - type: SET_SORT_BY, - payload: { column }, -}); - -// Actions affecting pagination of table - -// @ts-expect-error TS(7006): Parameter 'page' implicitly has an 'any' type. -export const createPage = (page) => ({ - type: CREATE_PAGE, - payload: page, -}); - -// @ts-expect-error TS(7006): Parameter 'limit' implicitly has an 'any' type. -export const updatePageSize = (limit) => ({ - type: UPDATE_PAGESIZE, - payload: { limit }, -}); - -// @ts-expect-error TS(7006): Parameter 'pages' implicitly has an 'any' type. -export const setPages = (pages) => ({ - type: SET_PAGES, - payload: { pages }, -}); - -// @ts-expect-error TS(7006): Parameter 'totalItems' implicitly has an 'any' typ... Remove this comment to see the full error message -export const setTotalItems = (totalItems) => ({ - type: SET_TOTAL_ITEMS, - payload: { totalItems }, -}); - -// @ts-expect-error TS(7006): Parameter 'offset' implicitly has an 'any' type. -export const setOffset = (offset) => ({ - type: SET_OFFSET, - payload: { offset }, -}); - -// @ts-expect-error TS(7006): Parameter 'directAccessible' implicitly has an 'an... Remove this comment to see the full error message -export const setDirectAccessiblePages = (directAccessible) => ({ - type: SET_DIRECT_ACCESSIBLE_PAGES, - payload: { directAccessible }, -}); - -// @ts-expect-error TS(7006): Parameter 'pageNumber' implicitly has an 'any' typ... Remove this comment to see the full error message -export const setPageActive = (pageNumber) => ({ - type: SET_PAGE_ACTIVE, - payload: { pageNumber }, -}); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 6fca0e6098..101a1f0407 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; -import { connect } from "react-redux"; import { Link } from "react-router-dom"; import i18n from "../i18n/i18n"; import languages from "../i18n/languages"; @@ -45,10 +44,7 @@ function logout() { /** * Component that renders the header and the navigation in the upper right corner. */ -const Header = ({ -// @ts-expect-error TS(7031): Binding element 'loadingServicesIntoTable' implici... Remove this comment to see the full error message - loadingServicesIntoTable, -}) => { +const Header = () => { const { t } = useTranslation(); const dispatch = useAppDispatch(); // State for opening (true) and closing (false) the dropdown menus for language, notification, help and user @@ -82,7 +78,7 @@ const Header = ({ const redirectToServices = async () => { // Load services into table - await loadingServicesIntoTable(); + await dispatch(loadServicesIntoTable()); // set the action filter value of services to true await dispatch(setSpecificServiceFilter({ filter: "actions", filterValue: "true" })); @@ -437,15 +433,4 @@ const MenuUser = () => { ); }; -// Getting state data out of redux store -// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type. -const mapStateToProps = (state) => ({ -}); - -// Mapping actions to dispatch -// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type. -const mapDispatchToProps = (dispatch) => ({ - loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(Header); +export default Header; diff --git a/src/components/configuration/Themes.tsx b/src/components/configuration/Themes.tsx index 8ce6707c00..fa4fab200c 100644 --- a/src/components/configuration/Themes.tsx +++ b/src/components/configuration/Themes.tsx @@ -6,7 +6,6 @@ import cn from "classnames"; import TableFilters from "../shared/TableFilters"; import Table from "../shared/Table"; import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice"; -import { connect } from "react-redux"; import { themesTemplateMap } from "../../configs/tableConfigs/themesTableMap"; import { getTotalThemes } from "../../selectors/themeSelectors"; import { loadThemesIntoTable } from "../../thunks/tableThunks"; @@ -25,10 +24,7 @@ import { fetchThemes } from "../../slices/themeSlice"; /** * This component renders the table view of events */ -const Themes = ({ -// @ts-expect-error TS(7031): Binding element 'loadingThemesIntoTable' implicitl... Remove this comment to see the full error message - loadingThemesIntoTable, -}) => { +const Themes = () => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -40,17 +36,12 @@ const Themes = ({ const user = useAppSelector(state => getUserInformation(state)); const themes = useAppSelector(state => getTotalThemes(state)); - // TODO: Get rid of the wrappers when modernizing redux is done - const fetchThemesWrapper = async () => { - await dispatch(fetchThemes()) - } - const loadThemes = async () => { // Fetching themes from server await dispatch(fetchThemes()); // Load users into table - loadingThemesIntoTable(); + dispatch(loadThemesIntoTable()); }; useEffect(() => { @@ -128,8 +119,8 @@ const Themes = ({
{/* Include filters component */}

{t("CONFIGURATION.THEMES.TABLE.CAPTION")}

@@ -143,15 +134,4 @@ const Themes = ({ ); }; -// Getting state data out of redux store -// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type. -const mapStateToProps = (state) => ({ -}); - -// Mapping actions to dispatch -// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type. -const mapDispatchToProps = (dispatch) => ({ - loadingThemesIntoTable: () => dispatch(loadThemesIntoTable()), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(Themes); +export default Themes; diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx index 4bd47f4d92..492613c975 100644 --- a/src/components/events/Events.tsx +++ b/src/components/events/Events.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import cn from "classnames"; -import { connect } from "react-redux"; import { Link, useLocation } from "react-router-dom"; import TableFilters from "../shared/TableFilters"; import MainNav from "../shared/MainNav"; @@ -24,7 +23,7 @@ import { isFetchingAssetUploadOptions as getIsFetchingAssetUploadOptions, isShowActions, } from "../../selectors/eventSelectors"; -import { setOffset } from "../../actions/tableActions"; +import { setOffset } from "../../slices/tableSlice"; import Header from "../Header"; import NavBar from "../NavBar"; import MainView from "../MainView"; @@ -49,14 +48,7 @@ const containerAction = React.createRef(); /** * This component renders the table view of events */ -const Events = ({ -// @ts-expect-error TS(7031): Binding element 'loadingEventsIntoTable' implicitl... Remove this comment to see the full error message - loadingEventsIntoTable, -// @ts-expect-error TS(7031): Binding element 'loadingSeriesIntoTable' implicitl... Remove this comment to see the full error message - loadingSeriesIntoTable, -// @ts-expect-error TS(7031): Binding element 'resetOffset' implicitly has an 'a... Remove this comment to see the full error message - resetOffset, -}) => { +const Events = () => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -82,11 +74,6 @@ const Events = ({ let location = useLocation(); - // TODO: Get rid of the wrappers when modernizing redux is done - const fetchEventsWrapper = async () => { - await dispatch(fetchEvents()) - } - const loadEvents = async () => { // Fetching stats from server dispatch(fetchStats()); @@ -95,18 +82,18 @@ const Events = ({ await dispatch(fetchEvents()); // Load events into table - loadingEventsIntoTable(); + dispatch(loadEventsIntoTable()); }; const loadSeries = () => { // Reset the current page to first page - resetOffset(); + dispatch(setOffset(0)); //fetching series from server dispatch(fetchSeries()); //load series into table - loadingSeriesIntoTable(); + dispatch(loadSeriesIntoTable()); }; useEffect(() => { @@ -309,8 +296,8 @@ const Events = ({ {/* Include filters component*/}
@@ -326,17 +313,4 @@ const Events = ({ ); }; -// Getting state data out of redux store -// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type. -const mapStateToProps = (state) => ({ -}); - -// Mapping actions to dispatch -// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type. -const mapDispatchToProps = (dispatch) => ({ - loadingEventsIntoTable: () => dispatch(loadEventsIntoTable()), - loadingSeriesIntoTable: () => dispatch(loadSeriesIntoTable()), - resetOffset: () => dispatch(setOffset(0)), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(Events); +export default Events; diff --git a/src/components/events/Series.tsx b/src/components/events/Series.tsx index ebc8181cdb..81155790ae 100644 --- a/src/components/events/Series.tsx +++ b/src/components/events/Series.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react"; import MainNav from "../shared/MainNav"; import { useTranslation } from "react-i18next"; import cn from "classnames"; -import { connect } from "react-redux"; import { Link, useLocation } from "react-router-dom"; import TableFilters from "../shared/TableFilters"; import Table from "../shared/Table"; @@ -16,7 +15,7 @@ import { } from "../../thunks/tableThunks"; import { fetchFilters, fetchStats, editTextFilter } from "../../slices/tableFilterSlice"; import { getTotalSeries, isShowActions } from "../../selectors/seriesSeletctor"; -import { setOffset } from "../../actions/tableActions"; +import { setOffset } from "../../slices/tableSlice"; import Header from "../Header"; import NavBar from "../NavBar"; import MainView from "../MainView"; @@ -41,14 +40,7 @@ const containerAction = React.createRef(); /** * This component renders the table view of series */ -const Series = ({ -// @ts-expect-error TS(7031): Binding element 'loadingSeriesIntoTable' implicitl... Remove this comment to see the full error message - loadingSeriesIntoTable, -// @ts-expect-error TS(7031): Binding element 'loadingEventsIntoTable' implicitl... Remove this comment to see the full error message - loadingEventsIntoTable, -// @ts-expect-error TS(7031): Binding element 'resetOffset' implicitly has an 'a... Remove this comment to see the full error message - resetOffset, -}) => { +const Series = () => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const [displayActionMenu, setActionMenu] = useState(false); @@ -64,14 +56,9 @@ const Series = ({ const series = useAppSelector(state => getTotalSeries(state)); const showActions = useAppSelector(state => isShowActions(state)); - // TODO: Get rid of the wrappers when modernizing redux is done - const fetchSeriesWrapper = async () => { - await dispatch(fetchSeries()) - } - const loadEvents = () => { // Reset the current page to first page - resetOffset(); + dispatch(setOffset(0)); // Fetching stats from server dispatch(fetchStats()); @@ -80,7 +67,7 @@ const Series = ({ dispatch(fetchEvents()); // Load events into table - loadingEventsIntoTable(); + dispatch(loadEventsIntoTable()); }; const loadSeries = async () => { @@ -88,7 +75,7 @@ const Series = ({ await dispatch(fetchSeries()); //load series into table - loadingSeriesIntoTable(); + dispatch(loadSeriesIntoTable()); }; useEffect(() => { @@ -236,8 +223,8 @@ const Series = ({ {/* Include filters component */} @@ -252,17 +239,4 @@ const Series = ({ ); }; -// Getting state data out of redux store -// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type. -const mapStateToProps = (state) => ({ -}); - -// Mapping actions to dispatch -// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type. -const mapDispatchToProps = (dispatch) => ({ - loadingSeriesIntoTable: () => dispatch(loadSeriesIntoTable()), - loadingEventsIntoTable: () => dispatch(loadEventsIntoTable()), - resetOffset: () => dispatch(setOffset(0)), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(Series); +export default Series; diff --git a/src/components/events/partials/EventActionCell.tsx b/src/components/events/partials/EventActionCell.tsx index 9c85b53298..f639666199 100644 --- a/src/components/events/partials/EventActionCell.tsx +++ b/src/components/events/partials/EventActionCell.tsx @@ -14,15 +14,16 @@ import { fetchSeriesDetailsMetadata, fetchSeriesDetailsTheme, } from "../../../slices/seriesDetailsSlice"; -import { deleteEvent } from "../../../slices/eventSlice"; +import { Event, deleteEvent } from "../../../slices/eventSlice"; import { Tooltip } from "../../shared/Tooltip"; /** * This component renders the action cells of events in the table view */ const EventActionCell = ({ -// @ts-expect-error TS(7031): Binding element 'row' implicitly has an 'any' type... Remove this comment to see the full error message row, +}: { + row: Event }) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -69,13 +70,15 @@ const EventActionCell = ({ }; const onClickSeriesDetails = async () => { - await dispatch(fetchSeriesDetailsMetadata(row.series.id)); - await dispatch(fetchSeriesDetailsAcls(row.series.id)); - await dispatch(fetchSeriesDetailsFeeds(row.series.id)); - await dispatch(fetchSeriesDetailsTheme(row.series.id)); - await dispatch(fetchSeriesDetailsThemeNames()); - - showSeriesDetailsModal(); + if (!!row.series) { + await dispatch(fetchSeriesDetailsMetadata(row.series.id)); + await dispatch(fetchSeriesDetailsAcls(row.series.id)); + await dispatch(fetchSeriesDetailsFeeds(row.series.id)); + await dispatch(fetchSeriesDetailsTheme(row.series.id)); + await dispatch(fetchSeriesDetailsThemeNames()); + + showSeriesDetailsModal(); + } }; const onClickEventDetails = () => { @@ -110,7 +113,7 @@ const EventActionCell = ({ /> } - {displaySeriesDetailsModal && ( + {!!row.series && displaySeriesDetailsModal && ( { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -38,7 +37,7 @@ const EventsDateCell = ({ await dispatch(editFilterValue({filterName: filter.name, value: startDate.toISOString() + "/" + endDate.toISOString()})); await dispatch(fetchEvents()); - loadEventsIntoTable(); + dispatch(loadEventsIntoTable()); } }; @@ -55,15 +54,4 @@ const EventsDateCell = ({ ); }; -// Getting state data out of redux store -// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type. -const mapStateToProps = (state) => ({ -}); - -// Mapping actions to dispatch -// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type. -const mapDispatchToProps = (dispatch) => ({ - loadEventsIntoTable: () => dispatch(loadEventsIntoTable()), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(EventsDateCell); +export default EventsDateCell; diff --git a/src/components/events/partials/EventsEndCell.tsx b/src/components/events/partials/EventsEndCell.tsx index 642001cfc4..cd12d780dd 100644 --- a/src/components/events/partials/EventsEndCell.tsx +++ b/src/components/events/partials/EventsEndCell.tsx @@ -1,13 +1,16 @@ import { useTranslation } from "react-i18next"; import React from "react"; import { renderValidDate } from "../../../utils/dateUtils"; +import { Event } from "../../../slices/eventSlice"; /** * This component renders the end cells of events in the table view */ const EventsEndCell = ({ - row -}: any) => { + row +}: { + row: Event +}) => { const { t } = useTranslation(); return ( diff --git a/src/components/events/partials/EventsLocationCell.tsx b/src/components/events/partials/EventsLocationCell.tsx index 2117d5e16d..59d183ec98 100644 --- a/src/components/events/partials/EventsLocationCell.tsx +++ b/src/components/events/partials/EventsLocationCell.tsx @@ -2,20 +2,19 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { getFilters } from "../../../selectors/tableFilterSelectors"; import { editFilterValue } from "../../../slices/tableFilterSlice"; -import { connect } from "react-redux"; import { loadEventsIntoTable } from "../../../thunks/tableThunks"; import { useAppDispatch, useAppSelector } from "../../../store"; import { fetchEvents } from "../../../slices/eventSlice"; import { Tooltip } from "../../shared/Tooltip"; +import { Event } from "../../../slices/eventSlice"; /** * This component renders the location cells of events in the table view */ const EventsLocationCell = ({ -// @ts-expect-error TS(7031): Binding element 'row' implicitly has an 'any' type... Remove this comment to see the full error message row, -// @ts-expect-error TS(7031): Binding element 'loadEventsIntoTable' implicitly h... Remove this comment to see the full error message - loadEventsIntoTable, +}: { + row: Event }) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -23,13 +22,12 @@ const EventsLocationCell = ({ const filterMap = useAppSelector(state => getFilters(state)); // Filter with value of current cell -// @ts-expect-error TS(7006): Parameter 'location' implicitly has an 'any' type. - const addFilter = (location) => { + const addFilter = (location: string) => { let filter = filterMap.find(({ name }) => name === "location"); if (!!filter) { dispatch(editFilterValue({filterName: filter.name, value: location})); dispatch(fetchEvents()); - loadEventsIntoTable(); + dispatch(loadEventsIntoTable()); } }; @@ -46,15 +44,4 @@ const EventsLocationCell = ({ ); }; -// Getting state data out of redux store -// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type. -const mapStateToProps = (state) => ({ -}); - -// Mapping actions to dispatch -// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type. -const mapDispatchToProps = (dispatch) => ({ - loadEventsIntoTable: () => dispatch(loadEventsIntoTable()), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(EventsLocationCell); +export default EventsLocationCell; diff --git a/src/components/events/partials/EventsNotesCell.tsx b/src/components/events/partials/EventsNotesCell.tsx index b66c8d9188..406cf5a180 100644 --- a/src/components/events/partials/EventsNotesCell.tsx +++ b/src/components/events/partials/EventsNotesCell.tsx @@ -1,20 +1,19 @@ import React from "react"; -import { connect } from "react-redux"; import { deleteComment as deleteOneComment, saveComment as saveNewComment, updateComment as updateNewComment } from "../../../slices/eventDetailsSlice"; import { updatePages } from "../../../thunks/tableThunks"; import { useAppDispatch } from "../../../store"; +import { Event } from "../../../slices/eventSlice"; /** * This component renders the location cells of events in the table view */ const EventsNotesCell = ({ -// @ts-expect-error TS(7031): Binding element 'row' implicitly has an 'any' type... Remove this comment to see the full error message row, - // @ts-expect-error TS(7031): - updatePages, +}: { + row: Event }) => { const notesCommentReason = 'EVENTS.EVENTS.DETAILS.COMMENTS.REASONS.ADMINUI_NOTES'; @@ -25,7 +24,6 @@ const EventsNotesCell = ({ return <>; } - // @ts-expect-error TS(7031): const comments = row.comments.filter((comment) => comment.reason === notesCommentReason) const createComment = (event: React.FocusEvent) => { @@ -34,7 +32,7 @@ const EventsNotesCell = ({ } dispatch(saveNewComment({eventId: row.id, commentText: event.target.value, commentReason: notesCommentReason})) .then(() => { - updatePages(); + dispatch(updatePages()); }); } @@ -52,7 +50,7 @@ const EventsNotesCell = ({ if (event.target.value === "") { dispatch(deleteOneComment({eventId: row.id, commentId})) .then(() => { - updatePages(); + dispatch(updatePages()); }); } } @@ -66,7 +64,6 @@ const EventsNotesCell = ({ > } - {/* @ts-expect-error TS(7031): */} {comments.map((comment, key) => (
@@ -82,16 +79,4 @@ const EventsNotesCell = ({ ); }; -// Getting state data out of redux store -// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type. -const mapStateToProps = (state) => ({ - // comments: getComments(state), -}); - -// Mapping actions to dispatch -// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type. -const mapDispatchToProps = (dispatch) => ({ - updatePages: () => dispatch(updatePages()), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(EventsNotesCell); +export default EventsNotesCell; diff --git a/src/components/events/partials/EventsPresentersCell.tsx b/src/components/events/partials/EventsPresentersCell.tsx index bd77364354..5384febc07 100644 --- a/src/components/events/partials/EventsPresentersCell.tsx +++ b/src/components/events/partials/EventsPresentersCell.tsx @@ -2,20 +2,19 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { getFilters } from "../../../selectors/tableFilterSelectors"; import { editFilterValue } from "../../../slices/tableFilterSlice"; -import { connect } from "react-redux"; import { loadEventsIntoTable } from "../../../thunks/tableThunks"; import { useAppDispatch, useAppSelector } from "../../../store"; import { fetchEvents } from "../../../slices/eventSlice"; import { Tooltip } from "../../shared/Tooltip"; +import { Event } from "../../../slices/eventSlice"; /** * This component renders the presenters cells of events in the table view */ const EventsPresentersCell = ({ -// @ts-expect-error TS(7031): Binding element 'row' implicitly has an 'any' type... Remove this comment to see the full error message row, -// @ts-expect-error TS(7031): Binding element 'loadEventsIntoTable' implicitly h... Remove this comment to see the full error message - loadEventsIntoTable, +}: { + row: Event }) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -23,22 +22,20 @@ const EventsPresentersCell = ({ const filterMap = useAppSelector(state => getFilters(state)); // Filter with value of current cell -// @ts-expect-error TS(7006): Parameter 'presenter' implicitly has an 'any' type... Remove this comment to see the full error message - const addFilter = async (presenter) => { + const addFilter = async (presenter: string) => { let filter = filterMap.find( ({ name }) => name === "presentersBibliographic" ); if (!!filter) { await dispatch(editFilterValue({filterName: filter.name, value: presenter})); await dispatch(fetchEvents()); - loadEventsIntoTable(); + dispatch(loadEventsIntoTable()); } }; return ( // Link template for presenter of event // Repeat for each presenter -// @ts-expect-error TS(7006): Parameter 'presenter' implicitly has an 'any' type... Remove this comment to see the full error message row.presenters.map((presenter, key) => ( - - ) : null - )} - -
- +
+
+
+
+ +
+
+
+

+ {t("PREFERENCES.TABLE.SUBHEADING", { + tableName: t( + "EVENTS." + resource.toUpperCase() + ".TABLE.CAPTION" + ), + })} +

+
-
-
-
-

- { - t( - "PREFERENCES.TABLE.SELECTED_COLUMNS" - ) /* Selected Columns */ - } -

-
-
    -
  • - +
    +
    +
    +

    + { + t( + "PREFERENCES.TABLE.AVAILABLE_COLUMNS" + ) /* Available Columns */ + } +

    +
    +
      + {deactivatedCols.map((column, key) => + column ? ( +
    • +
      {t(column.label)}
      + -
    - )} - - ) - )} - {provided.placeholder} -
    - )} - -     - + {t("PREFERENCES.TABLE.ADD_COLUMN")} +
    • -
-
-
+ ) : null + )} +
+
-
-

- {/* The order and selection will be saved automatically. - Press "Reset" to restore the default view. */} - {t("PREFERENCES.TABLE.FOOTER_TEXT", { - resetTranslation: t("RESET"), - })} -

+
+
+
+

+ { + t( + "PREFERENCES.TABLE.SELECTED_COLUMNS" + ) /* Selected Columns */ + } +

+
+
    +
  • + + + {(provided, snapshot) => ( +
    + {activeCols.filter(col => col).map((column, key) => + ( + + {(provided, snapshot) => ( +
    +
    + {t(column.label)} +
    + +
    + )} +     + ) + )} + {provided.placeholder} +
    + )} +     +     + +
    • +
-
- {/* Render buttons for updating table data */} - - -
-
- - )} +
+

+ {/* The order and selection will be saved automatically. + Press "Reset" to restore the default view. */} + {t("PREFERENCES.TABLE.FOOTER_TEXT", { + resetTranslation: t("RESET"), + })} +

+
+
+ + +
+ {/* Render buttons for updating table data */} + + +
+ ); }; -// Getting state data out of redux store -// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type. -const mapStateToProps = (state) => ({ - resource: getResourceType(state), - deactivatedColumns: getDeactivatedColumns(state), - activeColumns: getActivatedColumns(state), -}); - -// Mapping actions to dispatch -// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type. -const mapDispatchToProps = (dispatch) => ({ -// @ts-expect-error TS(7006): Parameter 'updatedColumns' implicitly has an 'any'... Remove this comment to see the full error message - changeSelectedColumns: (updatedColumns) => - dispatch(changeColumnSelection(updatedColumns)), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(EditTableViewModal); +export default EditTableViewModal; diff --git a/src/components/shared/MainNav.tsx b/src/components/shared/MainNav.tsx index 2ed243d1de..5c55220a37 100644 --- a/src/components/shared/MainNav.tsx +++ b/src/components/shared/MainNav.tsx @@ -1,7 +1,6 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { Link, useNavigate } from "react-router-dom"; -import { connect } from "react-redux"; import { loadAclsIntoTable, loadEventsIntoTable, @@ -16,7 +15,7 @@ import { } from "../../thunks/tableThunks"; import { fetchThemes } from "../../slices/themeSlice"; import { fetchFilters, fetchStats } from "../../slices/tableFilterSlice"; -import { setOffset } from "../../actions/tableActions"; +import { setOffset } from "../../slices/tableSlice"; import { getOrgProperties, getUserInformation @@ -44,28 +43,6 @@ const MainNav = ({ isOpen, // @ts-expect-error TS(7031): Binding element 'toggleMenu' implicitly has an 'an... Remove this comment to see the full error message toggleMenu, -// @ts-expect-error TS(7031): Binding element 'loadingEventsIntoTable' implicitl... Remove this comment to see the full error message - loadingEventsIntoTable, -// @ts-expect-error TS(7031): Binding element 'loadingSeriesIntoTable' implicitl... Remove this comment to see the full error message - loadingSeriesIntoTable, -// @ts-expect-error TS(7031): Binding element 'loadingRecordingsIntoTable' impli... Remove this comment to see the full error message - loadingRecordingsIntoTable, -// @ts-expect-error TS(7031): Binding element 'loadingJobsIntoTable' implicitly ... Remove this comment to see the full error message - loadingJobsIntoTable, -// @ts-expect-error TS(7031): Binding element 'loadingServersIntoTable' implicit... Remove this comment to see the full error message - loadingServersIntoTable, -// @ts-expect-error TS(7031): Binding element 'loadingServicesIntoTable' implici... Remove this comment to see the full error message - loadingServicesIntoTable, -// @ts-expect-error TS(7031): Binding element 'loadingUsersIntoTable' implicitly... Remove this comment to see the full error message - loadingUsersIntoTable, -// @ts-expect-error TS(7031): Binding element 'loadingGroupsIntoTable' implicitl... Remove this comment to see the full error message - loadingGroupsIntoTable, -// @ts-expect-error TS(7031): Binding element 'loadingAclsIntoTable' implicitly ... Remove this comment to see the full error message - loadingAclsIntoTable, -// @ts-expect-error TS(7031): Binding element 'loadingThemesIntoTable' implicitl... Remove this comment to see the full error message - loadingThemesIntoTable, -// @ts-expect-error TS(7031): Binding element 'resetOffset' implicitly has an 'a... Remove this comment to see the full error message - resetOffset, }) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -81,7 +58,7 @@ const MainNav = ({ dispatch(fetchFilters("events")); // Reset the current page to first page - resetOffset(); + dispatch(setOffset(0)); // Fetching stats from server dispatch(fetchStats()); @@ -90,124 +67,124 @@ const MainNav = ({ dispatch(fetchEvents()); // Load events into table - loadingEventsIntoTable(); + dispatch(loadEventsIntoTable()); }; const loadSeries = () => { dispatch(fetchFilters("series")); // Reset the current page to first page - resetOffset(); + dispatch(setOffset(0)); // Fetching series from server dispatch(fetchSeries()); // Load series into table - loadingSeriesIntoTable(); + dispatch(loadSeriesIntoTable()); }; const loadRecordings = () => { dispatch(fetchFilters("recordings")); // Reset the current page to first page - resetOffset(); + dispatch(setOffset(0)); // Fetching recordings from server dispatch(fetchRecordings(undefined)); // Load recordings into table - loadingRecordingsIntoTable(); + dispatch(loadRecordingsIntoTable()); }; const loadJobs = () => { dispatch(fetchFilters("jobs")); // Reset the current page to first page - resetOffset(); + dispatch(setOffset(0)); // Fetching jobs from server dispatch(fetchJobs()); // Load jobs into table - loadingJobsIntoTable(); + dispatch(loadJobsIntoTable()); }; const loadServers = () => { dispatch(fetchFilters("servers")); // Reset the current page to first page - resetOffset(); + dispatch(setOffset(0)); // Fetching servers from server dispatch(fetchServers()); // Load servers into table - loadingServersIntoTable(); + dispatch(loadServersIntoTable()); }; const loadServices = () => { dispatch(fetchFilters("services")); // Reset the current page to first page - resetOffset(); + dispatch(setOffset(0)); // Fetching services from server dispatch(fetchServices()); // Load services into table - loadingServicesIntoTable(); + dispatch(loadServicesIntoTable()); }; const loadUsers = () => { dispatch(fetchFilters("users")); // Reset the current page to first page - resetOffset(); + dispatch(setOffset(0)); // Fetching users from server dispatch(fetchUsers()); // Load users into table - loadingUsersIntoTable(); + dispatch(loadUsersIntoTable()); }; const loadGroups = () => { dispatch(fetchFilters("groups")); // Reset the current page to first page - resetOffset(); + dispatch(setOffset(0)); // Fetching groups from server dispatch(fetchGroups()); // Load groups into table - loadingGroupsIntoTable(); + dispatch(loadGroupsIntoTable()); }; const loadAcls = () => { dispatch(fetchFilters("acls")); // Reset the current page to first page - resetOffset(); + dispatch(setOffset(0)); // Fetching acls from server - dispatch(fetchAcls()); + dispatch(fetchAcls()); // Load acls into table - loadingAclsIntoTable(); + dispatch(loadAclsIntoTable()); }; const loadThemes = () => { dispatch(fetchFilters("themes")); // Reset the current page to first page - resetOffset(); + dispatch(setOffset(0)); // Fetching themes from server dispatch(fetchThemes()); // Load themes into table - loadingThemesIntoTable(); + dispatch(loadThemesIntoTable()); }; useHotkeys( @@ -342,26 +319,4 @@ const MainNav = ({ ); }; -// Getting state data out of redux store -// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type. -const mapStateToProps = (state) => ({ - -}); - -// Mapping actions to dispatch -// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type. -const mapDispatchToProps = (dispatch) => ({ - loadingEventsIntoTable: () => dispatch(loadEventsIntoTable()), - loadingSeriesIntoTable: () => dispatch(loadSeriesIntoTable()), - loadingRecordingsIntoTable: () => dispatch(loadRecordingsIntoTable()), - loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()), - loadingServersIntoTable: () => dispatch(loadServersIntoTable()), - loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()), - loadingUsersIntoTable: () => dispatch(loadUsersIntoTable()), - loadingGroupsIntoTable: () => dispatch(loadGroupsIntoTable()), - loadingAclsIntoTable: () => dispatch(loadAclsIntoTable()), - loadingThemesIntoTable: () => dispatch(loadThemesIntoTable()), - resetOffset: () => dispatch(setOffset(0)), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(MainNav); +export default MainNav; diff --git a/src/components/shared/Stats.tsx b/src/components/shared/Stats.tsx index aa267ea7b1..4ba24859ed 100644 --- a/src/components/shared/Stats.tsx +++ b/src/components/shared/Stats.tsx @@ -6,7 +6,6 @@ import { resetFilterValues, fetchStats, } from "../../slices/tableFilterSlice"; -import { connect } from "react-redux"; import { loadEventsIntoTable } from "../../thunks/tableThunks"; import { useAppDispatch, useAppSelector } from "../../store"; import { fetchEvents } from "../../slices/eventSlice"; @@ -14,10 +13,7 @@ import { fetchEvents } from "../../slices/eventSlice"; /** * This component renders the status bar of the event view and filters depending on these */ -const Stats = ({ -// @ts-expect-error TS(7031): Binding element 'loadEventsIntoTable' implicitly h... Remove this comment to see the full error message - loadEventsIntoTable, -}) => { +const Stats = () => { const { t } = useTranslation(); const dispatch = useAppDispatch(); @@ -38,7 +34,7 @@ const Stats = ({ } }); await dispatch(fetchEvents()); - loadEventsIntoTable(); + dispatch(loadEventsIntoTable()); }; const loadStats = async () => { @@ -79,15 +75,4 @@ const Stats = ({ ); }; -// Getting state data out of redux store -// @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type. -const mapStateToProps = (state) => ({ -}); - -// Mapping actions to dispatch -// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type. -const mapDispatchToProps = (dispatch) => ({ - loadEventsIntoTable: () => dispatch(loadEventsIntoTable()), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(Stats); +export default Stats; diff --git a/src/components/shared/Table.tsx b/src/components/shared/Table.tsx index 1a43f33313..e7159b5bd9 100644 --- a/src/components/shared/Table.tsx +++ b/src/components/shared/Table.tsx @@ -11,18 +11,18 @@ import { getTableSorting, } from "../../selectors/tableSelectors"; import { + Row, reverseTable, setOffset, setSortBy, updatePageSize, -} from "../../actions/tableActions"; +} from "../../slices/tableSlice"; import { changeAllSelected, changeRowSelection, goToPage, updatePages, } from "../../thunks/tableThunks"; -import { connect } from "react-redux"; import cn from "classnames"; import EditTableViewModal from "../shared/EditTableViewModal"; @@ -31,6 +31,7 @@ import sortIcon from "../../img/tbl-sort.png"; import sortUpIcon from "../../img/tbl-sort-up.png"; import sortDownIcon from "../../img/tbl-sort-down.png"; import Notifications from "./Notifications"; +import { useAppDispatch, useAppSelector } from "../../store"; const SortIcon = styled.i` float: right; @@ -59,39 +60,19 @@ const containerPageSize = React.createRef(); * This component renders the table in the table views of resources */ const Table = ({ -// @ts-expect-error TS(7031): Binding element 'table' implicitly has an 'any' ty... Remove this comment to see the full error message - table, -// @ts-expect-error TS(7031): Binding element 'rowSelectionChanged' implicitly h... Remove this comment to see the full error message - rowSelectionChanged, -// @ts-expect-error TS(7031): Binding element 'updatePageSize' implicitly has an... Remove this comment to see the full error message - updatePageSize, // @ts-expect-error TS(7031): Binding element 'templateMap' implicitly has an 'a... Remove this comment to see the full error message templateMap, -// @ts-expect-error TS(7031): Binding element 'pageOffset' implicitly has an 'an... Remove this comment to see the full error message - pageOffset, -// @ts-expect-error TS(7031): Binding element 'pages' implicitly has an 'any' ty... Remove this comment to see the full error message - pages, -// @ts-expect-error TS(7031): Binding element 'goToPage' implicitly has an 'any'... Remove this comment to see the full error message - goToPage, -// @ts-expect-error TS(7031): Binding element 'updatePages' implicitly has an 'a... Remove this comment to see the full error message - updatePages, -// @ts-expect-error TS(7031): Binding element 'setOffset' implicitly has an 'any... Remove this comment to see the full error message - setOffset, -// @ts-expect-error TS(7031): Binding element 'changeSelectAll' implicitly has a... Remove this comment to see the full error message - changeSelectAll, -// @ts-expect-error TS(7031): Binding element 'setSortBy' implicitly has an 'any... Remove this comment to see the full error message - setSortBy, -// @ts-expect-error TS(7031): Binding element 'reverseTable' implicitly has an '... Remove this comment to see the full error message - reverseTable, -// @ts-expect-error TS(7031): Binding element 'pagination' implicitly has an 'an... Remove this comment to see the full error message - pagination, -// @ts-expect-error TS(7031): Binding element 'rows' implicitly has an 'any' typ... Remove this comment to see the full error message - rows, -// @ts-expect-error TS(7031): Binding element 'rows' implicitly has an 'any' typ... Remove this comment to see the full error message - sortBy, -// @ts-expect-error TS(7031): Binding element 'rows' implicitly has an 'any' typ... Remove this comment to see the full error message - reverse, }) => { + const dispatch = useAppDispatch(); + + const table = useAppSelector(state => getTable(state)); + const pageOffset = useAppSelector(state => getPageOffset(state)); + const pages = useAppSelector(state => getTablePages(state)); + const pagination = useAppSelector(state => getTablePagination(state)); + const rows = useAppSelector(state => getTableRows(state)); + const sortBy = useAppSelector(state => getTableSorting(state)); + const reverse = useAppSelector(state => getTableDirection(state)); + // Size options for pagination const sizeOptions = [10, 20, 50, 100, 1000]; @@ -139,14 +120,14 @@ const Table = ({ // @ts-expect-error TS(7006): Parameter 'e' implicitly has an 'any' type. const onChangeAllSelected = (e) => { const selected = e.target.checked; - changeSelectAll(selected); + dispatch(changeAllSelected(selected)); }; // @ts-expect-error TS(7006): Parameter 'size' implicitly has an 'any' type. const changePageSize = (size) => { - updatePageSize(size); - setOffset(0); - updatePages(); + dispatch(updatePageSize(size)); + dispatch(setOffset(0)); + dispatch(updatePages()); }; // Navigation to previous page possible? @@ -160,13 +141,13 @@ const Table = ({ }; const sortByColumn = (colName: string) => { - setSortBy(colName); + dispatch(setSortBy(colName)); let direction = "ASC"; if (reverse && reverse === "ASC") { direction = "DESC"; } - reverseTable(direction); - updatePages(); + dispatch(reverseTable(direction)); + dispatch(updatePages()); }; const showEditTableViewModal = async () => { @@ -177,6 +158,17 @@ const Table = ({ setEditTableViewModal(false); }; + const tryToGetValueForKeyFromRowAsString = (row: Row, key: string) => { + if (key in row) { + const value = row[key as keyof Row]; + if (typeof value === "string") { + return value; + } + } + + return ""; + } + return ( <> @@ -194,10 +186,11 @@ const Table = ({ {/* Display modal for editing table view if table edit button is clicked */} - + { displayEditTableViewModal && + + }
@@ -216,7 +209,6 @@ const Table = ({ ) : null} {/* todo: if not column.deactivated*/} -{/* @ts-expect-error TS(7006): Parameter 'column' implicitly has an 'any' type. */} {table.columns.map((column, key) => column.deactivated ? null : column.sortable ? ( // Check if column is sortable and render accordingly - {table.loading && rows.length === 0 ? ( + {table.status === 'loading' && rows.length === 0 ? ( - ) : !table.loading && rows.length === 0 ? ( + ) : !(table.status === 'loading') && rows.length === 0 ? ( //Show if no results and table is not loading ) : ( - !table.loading && + !(table.status === 'loading') && //Repeat for each row in table.rows -// @ts-expect-error TS(2339): rows.map((row, key) => ( {/* Show if multi selection is possible */} {/* Checkbox for selection of row */} - {table.multiSelect && ( + {table.multiSelect && "id" in row && ( )} {/* Populate table */} -{/* @ts-expect-error TS(7006): Parameter 'column' implicitly has an 'any' type. */} {table.columns.map((column, key) => !column.template && !column.translate && !column.deactivated ? ( - + ) : !column.template && column.translate && !column.deactivated ? ( //Show only if column not template, translate, not deactivated - + ) : !!column.template && !column.deactivated && !!templateMap[column.template] ? ( @@ -337,7 +327,7 @@ const Table = ({
@@ -347,7 +337,7 @@ const Table = ({ {page.label} ) : ( - ) @@ -355,7 +345,7 @@ const Table = ({ @@ -423,37 +413,4 @@ const ColumnTemplate = ({ row, column, templateMap }) => { return
{t("TABLE_NO_RESULT")}
rowSelectionChanged(row.id)} - aria-label={t("EVENTS.EVENTS.TABLE.SELECT_EVENT", { title: row.title })} + onChange={() => dispatch(changeRowSelection(row.id, false))} + aria-label={t("EVENTS.EVENTS.TABLE.SELECT_EVENT", { title: "title" in row ? row.title : row.id })} /> {row[column.name]}{column.name in row ? row[column.name as keyof Row] : ""}{t(row[column.name])}{t(tryToGetValueForKeyFromRowAsString(row, column.name))}