refactor: enhance scorecard dimensions and actions

- Refactored `useDimensions` and related hooks for improved parameter handling.
- Integrated `ScorecardSharing` into `ScorecardActions`.
- Updated `ScorecardResetButton` to fix resetting logic and improve button state handling.

Author: nnkogift

src/modules/ScorecardManagement/components/General/components/ScorecardSharing.tsx

@@ -62,7 +62,7 @@ export function ScorecardSharing() {
 				onClick={onOpen}
 				disabled={!data}
 			>
-				{i18n.t("Sharing settings")}
+				{i18n.t("Sharing")}
 			</Button>
 			{!hide && (
 				<SharingDialog

src/modules/ScorecardViewPage/components/ScorecardActions/ScorecardActions.tsx

@@ -3,6 +3,7 @@ import { ScorecardOptionsControlButton } from "./components/ScorecardOptionsCont
 import { ScorecardEditButton } from "./components/ScorecardEditButton";
 import { ScorecardPrint } from "@hisptz/dhis2-scorecard";
 import { ScorecardResetButton } from "./components/ScorecardResetButton";
+import { ScorecardSharing } from "../../../ScorecardManagement/components/General/components/ScorecardSharing";
 
 export function ScorecardActions() {
 	return (
@@ -13,6 +14,7 @@ export function ScorecardActions() {
 				<div id="download-button">
 					<ScorecardPrint />
 				</div>
+				<ScorecardSharing />
 				<ScorecardResetButton />
 			</ButtonStrip>
 		</div>

src/modules/ScorecardViewPage/components/ScorecardActions/components/ScorecardResetButton.tsx

@@ -1,23 +1,39 @@
 import { Button } from "@dhis2/ui";
 import i18n from "@dhis2/d2-i18n";
-import { useOrgUnitSelectionValue, usePeriodSelectionValue, useScorecardConfig, useUpdateDimensionState } from "@hisptz/dhis2-scorecard";
+import {
+	useOrgUnitSelectionValue,
+	usePeriodSelectionValue,
+	useScorecardConfig,
+} from "@hisptz/dhis2-scorecard";
 import { isEqual } from "lodash";
 import { useCallback } from "react";
+import { useDimensions } from "../../../hooks/dimensions";
 
 export function ScorecardResetButton() {
 	const config = useScorecardConfig();
-	const updateDimensionState = useUpdateDimensionState("all");
+	const { setDimensions } = useDimensions();
 	const periodSelection = usePeriodSelectionValue();
 	const orgUnitSelection = useOrgUnitSelectionValue();
 	const resetScorecardState = useCallback(() => {
-		updateDimensionState({
+		setDimensions({
+			// @ts-expect-error Org unit select type issues
 			orgUnitSelection: config.orgUnitSelection,
-			periodSelection: config.periodSelection
+			periods: config.periodSelection.periods,
 		});
+	}, [config.orgUnitSelection, config.periodSelection]);
 
-	}, [updateDimensionState, config.orgUnitSelection, config.periodSelection]);
+	//TODO: Not working, improve by checking specifics
+	const disable =
+		isEqual(config.orgUnitSelection, orgUnitSelection) &&
+		isEqual(config.periodSelection.periods, periodSelection.periods);
 
-	const disable = isEqual({ orgUnitSelection: config.orgUnitSelection, periodSelection: config.periodSelection }, { orgUnitSelection, periodSelection });
-
-	return <Button disabled={disable} onClick={resetScorecardState} className="reset-button">{i18n.t("Reset")}</Button>;
+	return (
+		<Button
+			disabled={disable}
+			onClick={resetScorecardState}
+			className="reset-button"
+		>
+			{i18n.t("Reset")}
+		</Button>
+	);
 }

src/modules/ScorecardViewPage/hooks/dimensions.ts

@@ -2,8 +2,10 @@ import { useSearchParams } from "react-router-dom";
 import { useCallback, useMemo } from "react";
 import { OrgUnitSelection } from "@hisptz/dhis2-utils";
 import { useUpdateDimensionState } from "@hisptz/dhis2-scorecard";
-import { getOrgUnitIdsFromOrgUnitSelection, getOrgUnitSelectionFromIds } from "../../../shared";
-
+import {
+	getOrgUnitIdsFromOrgUnitSelection,
+	getOrgUnitSelectionFromIds,
+} from "../../../shared";
 
 export function useRawDimensions() {
 	const [params] = useSearchParams();
@@ -19,16 +21,13 @@ export function useRawDimensions() {
 		return params.get("ou")?.split(";") ?? [];
 	}, [params.get("ou")]);
 
-
 	return {
 		periods,
 		orgUnits,
-		noDimensionsSelected
+		noDimensionsSelected,
 	};
-
 }
 
-
 export function useDimensions() {
 	const [params, setParams] = useSearchParams();
 	const setOrgUnitSelection = useUpdateDimensionState("orgUnit");
@@ -55,31 +54,31 @@ export function useDimensions() {
 	);
 
 	const setDimensions = ({
-							   orgUnitSelection,
-							   periods
-						   }: {
+		orgUnitSelection,
+		periods,
+	}: {
 		orgUnitSelection: OrgUnitSelection;
 		periods: { id: string }[];
 	}) => {
+		console.log({
+			orgUnitSelection,
+			periods,
+		});
 		const ous = getOrgUnitIdsFromOrgUnitSelection(orgUnitSelection);
 		setParams((prev) => {
-			if (!prev.get("ou") || !prev.get("pe")) {
-				const updatedParams = new URLSearchParams(prev);
-				updatedParams.set("ou", ous.join(";"));
-				updatedParams.set("pe", periods.map(({ id }) => id).join(";"));
-				return updatedParams;
-			}
-			return prev;
+			const updatedParams = new URLSearchParams(prev);
+			updatedParams.set("ou", ous.join(";"));
+			updatedParams.set("pe", periods.map(({ id }) => id).join(";"));
+			return updatedParams;
 		});
 	};
 
 	const setPeriod = useCallback(
 		(periods: string[]) => {
 			setPeriodSelection({
-				periods: periods.map((periodId) => ({ id: periodId }))
+				periods: periods.map((periodId) => ({ id: periodId })),
 			});
 			setParam("pe")(periods.join(";"));
-
 		},
 		[setParam]
 	);
@@ -100,6 +99,6 @@ export function useDimensions() {
 		noDimensionsSelected,
 		setPeriod,
 		setOrgUnit,
-		setDimensions
+		setDimensions,
 	};
 }