refactor: rename "widget" module to "plugin" and improve type safety

- Updated folder structure and imports to reflect the new module name.
- Enhanced typing in validation functions and related utilities.
- Standardized and cleaned up code formatting for consistency.

Author: nnkogift

src/Plugin.tsx

@@ -4,19 +4,21 @@ import "./Plugin.css";
 import { FullPageLoader, useInitApp } from "./shared";
 import { DataStoreProvider } from "@dhis2/app-service-datastore";
 import { RecoilRoot } from "recoil";
-import { WidgetRouter } from "./widget/modules/Router";
+import { WidgetRouter } from "./plugin/modules/Router";
 import { CssReset } from "@dhis2/ui";
-import { DATASTORE_WIDGET_NAMESPACE } from "./widget/constants/scorecard";
-import { PluginProps } from "./widget/types";
-
+import { DATASTORE_WIDGET_NAMESPACE } from "./plugin/constants/scorecard";
+import { PluginProps } from "./plugin/types";
 
 const DashboardPlugin: FC<PluginProps> = (props: PluginProps) => {
 	const { initializeState } = useInitApp();
 
 	return (
 		<div className="plugin-container">
 			<CssReset />
-			<DataStoreProvider namespace={DATASTORE_WIDGET_NAMESPACE} loadingComponent={<FullPageLoader />}>
+			<DataStoreProvider
+				namespace={DATASTORE_WIDGET_NAMESPACE}
+				loadingComponent={<FullPageLoader />}
+			>
 				<RecoilRoot initializeState={initializeState}>
 					<Suspense fallback={<FullPageLoader small />}>
 						<WidgetRouter props={props} />

src/modules/ScorecardList/hooks/data.ts

@@ -88,11 +88,12 @@ export function useScorecardListData() {
 		const total =
 			data?.keys?.filter((key) => !defaultKeys.includes(key)).length ?? 0;
 		return {
-			page: data?.list?.pager?.page ?? searchParams.get("page") ?? 1,
+			page:
+				data?.list?.pager?.page ??
+				parseInt(searchParams.get("page") ?? "1"),
 			pageSize:
 				data?.list?.pager?.pageSize ??
-				searchParams.get("pageSize") ??
-				8,
+				parseInt(searchParams.get("pageSize") ?? "8"),
 			pageCount: Math.ceil(total / (data?.list?.pager?.pageSize ?? 8)),
 			total,
 		};

src/modules/ScorecardList/index.tsx

@@ -1,9 +1,19 @@
 import i18n from "@dhis2/d2-i18n";
-import { Button, ButtonStrip, DropdownButton, IconQuestion24, Tooltip } from "@dhis2/ui";
+import {
+	Button,
+	ButtonStrip,
+	DropdownButton,
+	IconQuestion24,
+	Tooltip,
+} from "@dhis2/ui";
 import { IconAdd24, IconApps24, IconList24 } from "@dhis2/ui-icons";
-import { FullPageError, SCORECARD_LIST_HELP_STEPS, STEP_OPTIONS } from "../../shared";
+import {
+	FullPageError,
+	SCORECARD_LIST_HELP_STEPS,
+	STEP_OPTIONS,
+} from "../../shared";
 import { Steps } from "intro.js-react";
-import React, { useState } from "react";
+import { useState } from "react";
 import HelpMenu from "./components/HelpMenu";
 import { SearchArea } from "./components/SearchArea";
 import { useSetting } from "@dhis2/app-service-datastore";
@@ -30,14 +40,14 @@ export default function ScorecardList() {
 		} catch (e: any) {
 			show({
 				message: e.message ?? e.toString(),
-				type: { critical: true }
+				type: { critical: true },
 			});
 		}
 	};
 	const navigate = useNavigate();
 
 	const onAddClick = () => {
-		navigate(`/add/general`);
+		navigate("/add/general");
 	};
 
 	const onHelpExit = () => {
@@ -77,7 +87,7 @@ export default function ScorecardList() {
 									viewType:
 										scorecardViewType === "grid"
 											? i18n.t("list")
-											: i18n.t("grid")
+											: i18n.t("grid"),
 								})}
 							>
 								<Button

src/widget/components/PluginConfigProvider.tsx renamed to src/plugin/components/PluginConfigProvider.tsx

@@ -6,20 +6,28 @@ import { FullPageError, FullPageLoader } from "../../shared";
 
 const PluginConfigContext = createContext<PluginConfig | null>(null);
 
-
 export function usePluginConfig() {
 	const config = useContext(PluginConfigContext);
 
 	if (config == null) {
-		throw Error("PluginConfig is not initialized. Make sure to wrap your widget in a PluginConfigProvider");
+		throw Error(
+			"PluginConfig is not initialized. Make sure to wrap your widget in a PluginConfigProvider"
+		);
 	}
 
 	return config;
 }
 
-
-export function PluginConfigProvider({ children, props }: { children: any, props: PluginProps }) {
-	const { config, error, loading, refetch } = useGetPluginConfig(props.dashboardItemId);
+export function PluginConfigProvider({
+	children,
+	props,
+}: {
+	children: any;
+	props: PluginProps;
+}) {
+	const { config, error, loading, refetch } = useGetPluginConfig(
+		props.dashboardItemId
+	);
 	const navigate = useNavigate();
 	const { id } = useParams<{ id: string }>();
 
@@ -32,25 +40,21 @@ export function PluginConfigProvider({ children, props }: { children: any, props
 	}, [config]);
 
 	if (loading) {
-		return (
-			<FullPageLoader small />
-		);
+		return <FullPageLoader small />;
 	}
 
 	if (error && error.details.httpStatusCode !== 404) {
-		return (
-			<FullPageError resetErrorBoundary={refetch} error={error} />
-		);
+		return <FullPageError resetErrorBoundary={refetch} error={error} />;
 	}
 
 	return (
 		<PluginConfigContext.Provider
 			value={{
 				props,
-				config
-			}}>
+				config,
+			}}
+		>
 			{children}
 		</PluginConfigContext.Provider>
 	);
 }
-

src/widget/constants/scorecard.ts renamed to src/plugin/constants/scorecard.ts

@@ -10,71 +10,75 @@ export interface ScorecardPluginConfig {
 const query = {
 	config: {
 		resource: `dataStore/${DATASTORE_WIDGET_NAMESPACE}`,
-		id: ({ id }: { id: string }) => id
-	}
+		id: ({ id }: { id: string }) => id,
+	},
 };
 
 type Response = {
 	config: ScorecardPluginConfig;
-}
-
+};
 
 export function useGetPluginConfig(dashboardItemId: string) {
 	//@ts-expect-error app-runtime query type errors
 	const { data, ...rest } = useDataQuery<Response>(query, {
 		variables: {
-			id: dashboardItemId
-		}
+			id: dashboardItemId,
+		},
 	});
 
 	return {
 		config: data?.config as ScorecardPluginConfig,
-		...rest
+		...rest,
 	};
 }
 
 function getCreateMutation(dashboardItemId: string) {
 	return {
 		type: "create",
 		resource: `dataStore/${DATASTORE_WIDGET_NAMESPACE}/${dashboardItemId}`,
-		data: ({ data }: { data: ScorecardPluginConfig }) => data
+		data: ({ data }: { data: ScorecardPluginConfig }) => data,
 	};
 }
 
 const deleteMutation = {
 	type: "delete",
 	resource: `dataStore/${DATASTORE_WIDGET_NAMESPACE}`,
-	id: ({ id }: { id: string }) => id
+	id: ({ id }: { id: string }) => id,
 };
 
 export function useManagePluginConfig(dashboardItemId: string) {
 	const engine = useDataEngine();
-	const addConfig = useCallback(async (config: ScorecardPluginConfig) => {
-		try {
-			const mutation = getCreateMutation(dashboardItemId);
-			//@ts-expect-error app runtime mutation errors
-			return await engine.mutate(mutation, {
-				variables: {
-					data: config
-				}
-			});
-		} catch (error) {
-			console.error(`Could not save configuration for dashboardItemId ${dashboardItemId}`);
-			throw error;
-		}
-	}, [engine]);
+	const addConfig = useCallback(
+		async (config: ScorecardPluginConfig) => {
+			try {
+				const mutation = getCreateMutation(dashboardItemId);
+				//@ts-expect-error app runtime mutation errors
+				return await engine.mutate(mutation, {
+					variables: {
+						data: config,
+					},
+				});
+			} catch (error) {
+				console.error(
+					`Could not save configuration for dashboardItemId ${dashboardItemId}`
+				);
+				throw error;
+			}
+		},
+		[engine]
+	);
 
 	const deleteConfig = useCallback(async () => {
 		//@ts-expect-error app runtime mutation errors
 		await engine.mutate(deleteMutation, {
 			variables: {
-				id: dashboardItemId
-			}
+				id: dashboardItemId,
+			},
 		});
 	}, [engine]);
 
 	return {
 		addConfig,
-		deleteConfig
+		deleteConfig,
 	};
 }

src/widget/hooks/config.ts renamed to src/plugin/hooks/config.ts

@@ -2,27 +2,26 @@ import { SCORECARD_NAMESPACE } from "../constants/scorecard";
 import { useDataQuery } from "@dhis2/app-runtime";
 import { ScorecardConfig } from "@hisptz/dhis2-scorecard";
 
-
 const query: any = {
 	config: {
 		resource: `dataStore/${SCORECARD_NAMESPACE}`,
-		id: ({ id }: { id: string }) => id
-	}
+		id: ({ id }: { id: string }) => id,
+	},
 };
 
 export function usePluginScorecard(scorecardId: string) {
-	const { loading, data, error, ...rest } = useDataQuery<{ config: ScorecardConfig }>(query, {
+	const { loading, data, error, ...rest } = useDataQuery<{
+		config: ScorecardConfig;
+	}>(query, {
 		variables: {
-			id: scorecardId
-		}
+			id: scorecardId,
+		},
 	});
 
 	return {
 		loading,
 		error,
 		scorecard: data?.config,
-		...rest
+		...rest,
 	};
 }
-
-

src/widget/hooks/data.ts renamed to src/plugin/hooks/data.ts

@@ -6,8 +6,8 @@ import { DATASTORE_NAMESPACE } from "../../shared";
 const query: any = {
 	config: {
 		resource: `dataStore/${DATASTORE_NAMESPACE}`,
-		id: ({ id }: { id: string }) => id
-	}
+		id: ({ id }: { id: string }) => id,
+	},
 };
 
 type ConfigQueryResponse = {
@@ -22,6 +22,6 @@ export function usePluginScorecardConfig() {
 		config: scorecard,
 		loading,
 		error,
-		...rest
+		...rest,
 	};
 }

src/widget/hooks/scorecard.ts renamed to src/plugin/hooks/scorecard.ts

@@ -4,9 +4,7 @@ import { ScorecardView } from "./ScorecardView/ScorecardView";
 import { PluginConfigProvider } from "../components/PluginConfigProvider";
 import { PluginProps } from "../types";
 
-
 export function WidgetRouter({ props }: { props: PluginProps }) {
-
 	return (
 		<HashRouter>
 			<PluginConfigProvider props={props}>
@@ -17,7 +15,4 @@ export function WidgetRouter({ props }: { props: PluginProps }) {
 			</PluginConfigProvider>
 		</HashRouter>
 	);
-
 }
-
-

src/widget/modules/Router.tsx renamed to src/plugin/modules/Router.tsx

@@ -1,17 +1,17 @@
 import { PluginScorecardList } from "./components/PluginScorecardList";
 
 export function ScorecardList() {
-
 	return (
-		<div style={{
-			width: "100%",
-			height: "100%",
-			display: "flex",
-			flexDirection: "column",
-			gap: 16
-		}}>
+		<div
+			style={{
+				width: "100%",
+				height: "100%",
+				display: "flex",
+				flexDirection: "column",
+				gap: 16,
+			}}
+		>
 			<PluginScorecardList />
 		</div>
 	);
-
 }