refactor: improve formatting, hooks, and typing in ScorecardList components

- Standardized code formatting across multiple components for better readability.
- Refactored `useScorecardListData` to enhance query handling and integrate better with URL parameters.
- Streamlined imports by removing redundant `React` imports.
- Improved typing and applied cleaner parameter handling in components like `ListScorecardDisplay` and `ScorecardListCard`.

Author: nnkogift

src/modules/ScorecardList/components/Cards/ScorecardListCard.tsx

@@ -1,36 +1,49 @@
 import { colors } from "@dhis2/ui";
-import { getUserAuthority, ScorecardCardImage as holderImage, truncateDescription, UserState } from "../../../../shared";
-import React, { useState } from "react";
+import {
+	getUserAuthority,
+	ScorecardCardImage as holderImage,
+	truncateDescription,
+	UserState,
+} from "../../../../shared";
+import { useState } from "react";
 import { ScorecardListItem } from "../../types";
 import { ScorecardListCardActions } from "./ScorecardListCardActions";
 import { getSharingSettingsFromOldConfiguration } from "../../../../utils/sharing";
 import { useRecoilValue } from "recoil";
 import { useNavigateToScorecardView } from "../../../../hooks/navigate";
 
 export default function ScorecardListCard({
-											  scorecard,
-											  grid
-										  }: {
+	scorecard,
+	grid,
+}: {
 	scorecard: ScorecardListItem;
 	grid?: boolean;
 }) {
 	const user = useRecoilValue(UserState);
 	const { title, description } = scorecard ?? {};
 	const [showFullDescription, setShowFullDescription] = useState(false);
 
-	const accessConfig = getUserAuthority(user, scorecard.sharing ?? getSharingSettingsFromOldConfiguration(scorecard as any));
+	const accessConfig = getUserAuthority(
+		user,
+		scorecard.sharing ??
+			getSharingSettingsFromOldConfiguration(scorecard as any)
+	);
 	const { read } = accessConfig;
 
 	const navigateToView = useNavigateToScorecardView();
 
-
 	const onView = () => {
 		if (read) {
 			navigateToView(scorecard);
 		}
 	};
 
-	const styles = { margin: 16, background: "white", opacity: read ? 1 : 0.4, cursor: read ? "pointer" : "not-allowed" };
+	const styles = {
+		margin: 16,
+		background: "white",
+		opacity: read ? 1 : 0.4,
+		cursor: read ? "pointer" : "not-allowed",
+	};
 
 	return grid ? (
 		<div

src/modules/ScorecardList/components/ListScorecardDisplay.tsx

@@ -1,9 +1,11 @@
-import React from "react";
 import ScorecardListCard from "./Cards/ScorecardListCard";
 import { ScorecardListItem } from "../types";
 
-
-export default function ListScorecardDisplay({ scorecards }: { scorecards: ScorecardListItem[] }) {
+export default function ListScorecardDisplay({
+	scorecards,
+}: {
+	scorecards: ScorecardListItem[];
+}) {
 	return (
 		<div className="column">
 			{scorecards?.map((scorecard) => (

src/modules/ScorecardList/components/PaginatedDisplay.tsx

@@ -5,19 +5,19 @@ import GridScorecardDisplay from "./GridScorecardDisplay";
 import ListScorecardDisplay from "./ListScorecardDisplay";
 
 export default function PaginatedDisplay({
-											 scorecards = []
-										 }: {
+	scorecards = [],
+}: {
 	scorecards: ScorecardListItem[];
 }) {
-
-
 	const [scorecardViewType] = useSetting("scorecardViewType");
 
 	return (
 		<div className="p-16 scorecard-list">
 			{scorecardViewType === "list" ? (
-				<ListScorecardDisplay scorecards={scorecards} />) : <GridScorecardDisplay scorecards={scorecards} />
-			}
+				<ListScorecardDisplay scorecards={scorecards} />
+			) : (
+				<GridScorecardDisplay scorecards={scorecards} />
+			)}
 		</div>
 	);
 }

src/modules/ScorecardList/components/ScorecardListArea.tsx

@@ -1,6 +1,6 @@
 import { useScorecardListData } from "../hooks/data";
 import { FullPageError, FullPageLoader } from "../../../shared";
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 import { isEmpty } from "lodash";
 import EmptySearchList from "./EmptySearchList";
 import EmptyScoreCardList from "./EmptyScoreCardList";
@@ -20,45 +20,55 @@ export function ScorecardListArea() {
 		);
 	}
 
-
 	return (
-		<div style={{ gap: 16, justifyContent: "space-between", height: "100%" }} className="column ">
+		<div
+			style={{ gap: 16, justifyContent: "space-between", height: "100%" }}
+			className="column "
+		>
 			<Suspense fallback={<FullPageLoader />}>
 				<div style={{ flex: 1 }}>
-					{
-						loading ? <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
+					{loading ? (
+						<div
+							style={{
+								width: "100%",
+								height: "100%",
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+							}}
+						>
 							<FullPageLoader />
-						</div> : (isEmpty(scorecards) ? (
-							keyword ? (
-								<div className="flex-1">
-									<EmptySearchList keyword={keyword} />
-								</div>
-							) : (
-								<div className="flex-1 h-100 column center align-center">
-									<EmptyScoreCardList />
-								</div>
-							)
+						</div>
+					) : isEmpty(scorecards) ? (
+						keyword ? (
+							<div className="flex-1">
+								<EmptySearchList keyword={keyword} />
+							</div>
 						) : (
-							<div className="column h-100">
-								{scorecards ? (
-									<PaginatedDisplay
-										scorecards={scorecards}
-									/>
-								) : <EmptyScoreCardList />}
+							<div className="flex-1 h-100 column center align-center">
+								<EmptyScoreCardList />
 							</div>
-						))
-					}
+						)
+					) : (
+						<div className="column h-100">
+							{scorecards ? (
+								<PaginatedDisplay scorecards={scorecards} />
+							) : (
+								<EmptyScoreCardList />
+							)}
+						</div>
+					)}
 				</div>
-				{
-					!isEmpty(scorecards) && (<div className="p-16">
-						<Pagination
-							disabled={pager.pageCount === 1 || isEmpty(scorecards)}
-							{...pager}
-							pageSizes={Array.from(new Array(10).keys()).map((i) => ((i + 1) * 4).toString())}
-						/>
-					</div>)
-				}
 			</Suspense>
+			<div className="p-16">
+				<Pagination
+					disabled={pager.pageCount === 1 || isEmpty(scorecards)}
+					{...pager}
+					pageSizes={Array.from(new Array(10).keys()).map((i) =>
+						((i + 1) * 4).toString()
+					)}
+				/>
+			</div>
 		</div>
 	);
 }

src/modules/ScorecardList/components/SearchArea.tsx

@@ -1,6 +1,5 @@
 import i18n from "@dhis2/d2-i18n";
 import { Button, Input } from "@dhis2/ui";
-import React, { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
 import { IconCross24 } from "@dhis2/ui-icons";
 
@@ -13,21 +12,17 @@ export function SearchArea() {
 			return updatedParams;
 		});
 	};
-	const value = useMemo(
-		() => searchParams.get("query") ?? undefined,
-		[searchParams.get("query")],
-	);
 
 	return (
 		<div style={{ gap: 8, display: "flex" }} className="row">
 			<div className="flex-1">
 				<Input
 					className="search-input"
-					value={value}
+					value={searchParams.get("query") ?? ""}
 					onChange={({ value }: { value?: string }) => {
 						setSearchParams((prev) => {
 							const updatedSearchParams = new URLSearchParams(
-								prev,
+								prev
 							);
 							if (value) {
 								updatedSearchParams.set("query", value);