From 4bf2b765b895ab1da7a8082faca4e8a587c3729f Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 5 Dec 2024 10:38:23 +0100 Subject: [PATCH] fix: add star dashboard functionality --- src/pages/view/TitleBar/ActionsBar.js | 29 ++-------------- src/pages/view/TitleBar/TitleBar.js | 50 ++++++++++++++++++++++++--- 2 files changed, 49 insertions(+), 30 deletions(-) diff --git a/src/pages/view/TitleBar/ActionsBar.js b/src/pages/view/TitleBar/ActionsBar.js index a0a103b3d..f415aeb3e 100644 --- a/src/pages/view/TitleBar/ActionsBar.js +++ b/src/pages/view/TitleBar/ActionsBar.js @@ -1,6 +1,5 @@ import { OfflineTooltip } from '@dhis2/analytics' import { - useDataEngine, useAlert, useDhis2ConnectionStatus, } from '@dhis2/app-runtime' @@ -16,7 +15,6 @@ import PropTypes from 'prop-types' import React, { useState } from 'react' import { connect } from 'react-redux' import { Link, Redirect } from 'react-router-dom' -import { acSetDashboardStarred } from '../../../actions/dashboards.js' import { acClearItemFilters } from '../../../actions/itemFilters.js' import { acSetShowDescription } from '../../../actions/showDescription.js' import { apiPostShowDescription } from '../../../api/description.js' @@ -25,12 +23,10 @@ import DropdownButton from '../../../components/DropdownButton/DropdownButton.js import MenuItem from '../../../components/MenuItemWithTooltip.js' import { useCacheableSection } from '../../../modules/useCacheableSection.js' import { orObject } from '../../../modules/util.js' -import { sGetDashboardStarred } from '../../../reducers/dashboards.js' import { sGetNamedItemFilters } from '../../../reducers/itemFilters.js' import { sGetSelected } from '../../../reducers/selected.js' import { sGetShowDescription } from '../../../reducers/showDescription.js' import { ROUTE_START_PATH } from '../../start/index.js' -import { apiStarDashboard } from './apiStarDashboard.js' import FilterSelector from './FilterSelector.js' import classes from './styles/ActionsBar.module.css' @@ -39,7 +35,7 @@ const ViewActions = ({ access, showDescription, starred, - setDashboardStarred, + onToggleStarredDashboard, updateShowDescription, removeAllFilters, restrictFilters, @@ -52,7 +48,6 @@ const ViewActions = ({ const [confirmCacheDialogIsOpen, setConfirmCacheDialogIsOpen] = useState(false) const [redirectUrl, setRedirectUrl] = useState(null) - const dataEngine = useDataEngine() const { isDisconnected: offline } = useDhis2ConnectionStatus() const { lastUpdated, isCached, startRecording, remove } = useCacheableSection(id) @@ -114,19 +109,6 @@ const ViewActions = ({ !offline && apiPostShowDescription(!showDescription) } - const onToggleStarredDashboard = () => - apiStarDashboard(dataEngine, id, !starred) - .then(() => { - setDashboardStarred(id, !starred) - closeMoreOptions() - }) - .catch(() => { - const msg = starred - ? i18n.t('Failed to unstar the dashboard') - : i18n.t('Failed to star the dashboard') - show({ msg, isCritical: false }) - }) - const onToggleSharingDialog = () => setSharingDialogIsOpen(!sharingDialogIsOpen) @@ -165,7 +147,7 @@ const ViewActions = ({ ? i18n.t('Unstar dashboard') : i18n.t('Star dashboard') } - onClick={onToggleStarredDashboard} + onClick={() => onToggleStarredDashboard(closeMoreOptions)} />
- {/* TODO: move star functionality to TitleBar.js */}
{userAccess.update ? ( @@ -288,13 +269,13 @@ const ViewActions = ({ } ViewActions.propTypes = { + onToggleStarredDashboard: PropTypes.func.isRequired, access: PropTypes.object, allowedFilters: PropTypes.array, filtersLength: PropTypes.number, id: PropTypes.string, removeAllFilters: PropTypes.func, restrictFilters: PropTypes.bool, - setDashboardStarred: PropTypes.func, showDescription: PropTypes.bool, starred: PropTypes.bool, updateShowDescription: PropTypes.func, @@ -306,15 +287,11 @@ const mapStateToProps = (state) => { return { ...dashboard, filtersLength: sGetNamedItemFilters(state).length, - starred: dashboard.id - ? sGetDashboardStarred(state, dashboard.id) - : false, showDescription: sGetShowDescription(state), } } export default connect(mapStateToProps, { - setDashboardStarred: acSetDashboardStarred, removeAllFilters: acClearItemFilters, updateShowDescription: acSetShowDescription, })(ViewActions) diff --git a/src/pages/view/TitleBar/TitleBar.js b/src/pages/view/TitleBar/TitleBar.js index c994e3bc3..2a1e4d54b 100644 --- a/src/pages/view/TitleBar/TitleBar.js +++ b/src/pages/view/TitleBar/TitleBar.js @@ -1,10 +1,18 @@ +import { + useDataEngine, + useAlert, +} from '@dhis2/app-runtime' +import i18n from '@dhis2/d2-i18n' import PropTypes from 'prop-types' import React from 'react' import { connect } from 'react-redux' +import { acSetDashboardStarred } from '../../../actions/dashboards.js' +import { sGetDashboardStarred } from '../../../reducers/dashboards.js' import { sGetSelected } from '../../../reducers/selected.js' import { sGetShowDescription } from '../../../reducers/showDescription.js' import FilterBar from '../FilterBar/FilterBar.js' import ActionsBar from './ActionsBar.js' +import { apiStarDashboard } from './apiStarDashboard.js' import Description from './Description.js' import LastUpdatedTag from './LastUpdatedTag.js' import StarDashboardButton from './StarDashboardButton.js' @@ -15,7 +23,32 @@ const ViewTitleBar = ({ displayName, displayDescription, showDescription, + starred, + setDashboardStarred, + }) => { + + const dataEngine = useDataEngine() + const { show } = useAlert( + ({ msg }) => msg, + ({ isCritical }) => + isCritical ? { critical: true } : { warning: true } + ) + + + const onToggleStarredDashboard = (cb) => + apiStarDashboard(dataEngine, id, !starred) + .then(() => { + setDashboardStarred(id, !starred) + cb && cb() + }) + .catch(() => { + const msg = starred + ? i18n.t('Failed to unstar the dashboard') + : i18n.t('Failed to star the dashboard') + show({ msg, isCritical: false }) + }) + return ( <>
@@ -28,8 +61,10 @@ const ViewTitleBar = ({ > {displayName} - {/* Todo: Re-add starring functionality */} - +
@@ -38,7 +73,7 @@ const ViewTitleBar = ({
{}
- +
@@ -59,7 +94,9 @@ ViewTitleBar.propTypes = { displayDescription: PropTypes.string, displayName: PropTypes.string, id: PropTypes.string, + setDashboardStarred: PropTypes.func, showDescription: PropTypes.bool, + starred: PropTypes.bool, } const mapStateToProps = (state) => { @@ -67,8 +104,13 @@ const mapStateToProps = (state) => { return { ...dashboard, + starred: dashboard.id + ? sGetDashboardStarred(state, dashboard.id) + : false, showDescription: sGetShowDescription(state), } } -export default connect(mapStateToProps)(ViewTitleBar) +export default connect(mapStateToProps, { + setDashboardStarred: acSetDashboardStarred, +})(ViewTitleBar)